From b6c7581a31a1087d26d8de3b2405af05bfb96bdd Mon Sep 17 00:00:00 2001
From: Coding On Star <447357187@qq.com>
Date: Fri, 17 Apr 2026 13:53:51 +0800
Subject: [PATCH 01/24] refactor(web): replace portal component with
 DropdownMenu in various components (#35319)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: CodingOnStar <hanxujiang@dify.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: jerryzai <jerryzh8710@protonmail.com>
Co-authored-by: NVIDIAN <speedy.hpc@hotmail.com>
Co-authored-by: ai-hpc <ai-hpc@users.noreply.github.com>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: Asuka Minato <i@asukaminato.eu.org>
Co-authored-by: Junghwan <70629228+shaun0927@users.noreply.github.com>
Co-authored-by: HeYinKazune <70251095+HeYin-OS@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 eslint-suppressions.json                      | 115 ---
 .../app-sidebar/dataset-info-flow.test.tsx    |   2 +-
 .../app-sidebar/sidebar-shell-flow.test.tsx   |   6 +-
 .../__tests__/app-sidebar-dropdown.spec.tsx   |  51 +-
 .../dataset-sidebar-dropdown.spec.tsx         |  49 +-
 .../__tests__/app-operations.spec.tsx         |  74 +-
 .../app-sidebar/app-info/app-operations.tsx   |  80 +-
 .../app-sidebar/app-sidebar-dropdown.tsx      |  68 +-
 .../__tests__/dropdown-callbacks.spec.tsx     |  41 +-
 .../dataset-info/__tests__/index.spec.tsx     |   8 +-
 .../app-sidebar/dataset-info/dropdown.tsx     |  58 +-
 .../app-sidebar/dataset-sidebar-dropdown.tsx  |  72 +-
 .../publish-with-multiple-model.spec.tsx      |  57 +-
 .../publish-with-multiple-model.tsx           | 103 ++-
 .../__tests__/debug-item.spec.tsx             | 123 ++-
 .../debug-with-multiple-model/debug-item.tsx  | 135 ++--
 .../components/base/action-button/index.tsx   |   4 +-
 .../__tests__/header-in-mobile.spec.tsx       |  22 +-
 .../mobile-operation-dropdown.spec.tsx        |  23 +-
 .../header/__tests__/operation.spec.tsx       |  12 +-
 .../header/mobile-operation-dropdown.tsx      |  60 +-
 .../chat-with-history/header/operation.tsx    |  77 +-
 .../sidebar/__tests__/operation.spec.tsx      |  75 +-
 .../chat-with-history/sidebar/operation.tsx   | 109 +--
 .../base/dropdown/__tests__/index.spec.tsx    | 225 ------
 .../base/dropdown/index.stories.tsx           |  88 ---
 web/app/components/base/dropdown/index.tsx    | 122 ---
 .../breadcrumbs/__tests__/index.spec.tsx      |  79 +-
 .../dropdown/__tests__/index.spec.tsx         |   6 +-
 .../header/breadcrumbs/dropdown/index.tsx     |  36 +-
 .../item-operation/__tests__/index.spec.tsx   | 112 ++-
 .../explore/item-operation/index.tsx          | 101 ++-
 .../__tests__/card.spec.tsx                   |  28 +-
 .../__tests__/item.spec.tsx                   |   5 +-
 .../__tests__/operator.spec.tsx               |  43 +-
 .../data-source-page-new/operator.tsx         | 163 ++--
 .../members-page/operation/index.tsx          |  81 +-
 .../sort-dropdown/__tests__/index.spec.tsx    | 737 +++---------------
 .../marketplace/sort-dropdown/index.tsx       |  85 +-
 .../install-plugin-dropdown.spec.tsx          | 107 ++-
 .../plugin-page/install-plugin-dropdown.tsx   | 118 +--
 .../plugin-tasks/__tests__/index.spec.tsx     |  44 ++
 .../components/__tests__/plugin-item.spec.tsx |   1 +
 .../components/error-plugin-item.tsx          |   2 +-
 .../plugin-tasks/components/plugin-item.tsx   |   4 +-
 .../components/plugin-section.tsx             |   2 +-
 .../components/plugin-task-list.tsx           |   2 +-
 .../plugin-page/plugin-tasks/index.tsx        |  38 +-
 .../__tests__/menu-dropdown.spec.tsx          |  40 +
 .../share/text-generation/menu-dropdown.tsx   | 135 ++--
 .../__tests__/operation-dropdown.spec.tsx     | 192 +++--
 .../tools/mcp/detail/operation-dropdown.tsx   |  92 +--
 .../__tests__/action.spec.tsx                 | 124 +++
 .../market-place-plugin/action.tsx            |  65 +-
 .../__tests__/test-run-menu-helpers.spec.tsx  |  29 +-
 .../header/__tests__/test-run-menu.spec.tsx   |  78 +-
 .../workflow/header/test-run-menu-helpers.tsx |   8 +-
 .../workflow/header/test-run-menu.tsx         |  37 +-
 .../next-step/__tests__/operator.spec.tsx     | 152 ++++
 .../_base/components/next-step/operator.tsx   |  42 +-
 .../panel-operator/__tests__/index.spec.tsx   |  17 +-
 .../_base/components/panel-operator/index.tsx |  42 +-
 .../__tests__/operation-selector.spec.tsx     |  69 ++
 .../components/operation-selector.tsx         | 111 ++-
 .../note-node/__tests__/index.spec.tsx        |   2 +
 .../components/workflow/note-node/index.tsx   |   2 +-
 .../toolbar/__tests__/index.spec.tsx          |   2 +-
 .../toolbar/__tests__/operator.spec.tsx       | 158 +++-
 .../note-node/note-editor/toolbar/index.tsx   |   6 +-
 .../note-editor/toolbar/operator.tsx          |  84 +-
 .../operator/__tests__/more-actions.spec.tsx  | 309 ++++++++
 .../operator/__tests__/zoom-in-out.spec.tsx   | 197 +++++
 .../workflow/operator/more-actions.tsx        | 143 ++--
 .../workflow/operator/zoom-in-out.tsx         | 239 +++---
 .../context-menu/__tests__/menu-item.spec.tsx |  21 +-
 .../context-menu/index.tsx                    |  95 +--
 .../context-menu/menu-item.tsx                |  15 +-
 .../__tests__/agent-log-nav-more.spec.tsx     |  46 ++
 .../run/agent-log/agent-log-nav-more.tsx      |  74 +-
 .../components/__tests__/zoom-in-out.spec.tsx |  20 +-
 .../components/zoom-in-out.tsx                | 205 +++--
 web/docs/overlay-migration.md                 |   8 -
 web/eslint.constants.mjs                      |   8 -
 83 files changed, 3453 insertions(+), 3067 deletions(-)
 delete mode 100644 web/app/components/base/dropdown/__tests__/index.spec.tsx
 delete mode 100644 web/app/components/base/dropdown/index.stories.tsx
 delete mode 100644 web/app/components/base/dropdown/index.tsx
 create mode 100644 web/app/components/workflow/block-selector/market-place-plugin/__tests__/action.spec.tsx
 create mode 100644 web/app/components/workflow/nodes/_base/components/next-step/__tests__/operator.spec.tsx
 create mode 100644 web/app/components/workflow/operator/__tests__/more-actions.spec.tsx
 create mode 100644 web/app/components/workflow/operator/__tests__/zoom-in-out.spec.tsx

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index e4831c4e98..763d94af9a 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -218,36 +218,20 @@
     }
   },
   "web/app/components/app-sidebar/app-info/app-operations.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 4
     }
   },
-  "web/app/components/app-sidebar/app-sidebar-dropdown.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/app-sidebar/basic.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
   "web/app/components/app-sidebar/dataset-info/dropdown.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
   },
-  "web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/app-sidebar/index.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -338,11 +322,6 @@
       "count": 5
     }
   },
-  "web/app/components/app/app-publisher/publish-with-multiple-model.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/app/app-publisher/version-info-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -575,11 +554,6 @@
       "count": 6
     }
   },
-  "web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx": {
-    "no-restricted-imports": {
-      "count": 2
-    }
-  },
   "web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -802,9 +776,6 @@
   "web/app/components/base/action-button/index.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
-    },
-    "react-refresh/only-export-components": {
-      "count": 1
     }
   },
   "web/app/components/base/agent-log-modal/detail.tsx": {
@@ -2594,11 +2565,6 @@
       "count": 1
     }
   },
-  "web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -3022,9 +2988,6 @@
     }
   },
   "web/app/components/explore/item-operation/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 1
     }
@@ -3168,11 +3131,6 @@
       "count": 1
     }
   },
-  "web/app/components/header/account-setting/data-source-page-new/operator.tsx": {
-    "no-restricted-imports": {
-      "count": 2
-    }
-  },
   "web/app/components/header/account-setting/data-source-page-new/types.ts": {
     "ts/no-explicit-any": {
       "count": 2
@@ -3196,11 +3154,6 @@
       "count": 3
     }
   },
-  "web/app/components/header/account-setting/members-page/operation/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -3490,11 +3443,6 @@
       "count": 1
     }
   },
-  "web/app/components/plugins/marketplace/sort-dropdown/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -3851,9 +3799,6 @@
     }
   },
   "web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 2
     }
@@ -3868,11 +3813,6 @@
       "count": 1
     }
   },
-  "web/app/components/plugins/plugin-page/plugin-tasks/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/plugins/readme-panel/index.tsx": {
     "react/unsupported-syntax": {
       "count": 1
@@ -4091,9 +4031,6 @@
     }
   },
   "web/app/components/share/text-generation/menu-dropdown.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 1
     }
@@ -4175,11 +4112,6 @@
       "count": 3
     }
   },
-  "web/app/components/tools/mcp/detail/operation-dropdown.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/tools/mcp/detail/tool-item.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -4349,9 +4281,6 @@
     }
   },
   "web/app/components/workflow/block-selector/market-place-plugin/action.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 1
     }
@@ -4467,9 +4396,6 @@
     "erasable-syntax-only/enums": {
       "count": 1
     },
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react-refresh/only-export-components": {
       "count": 1
     }
@@ -4753,11 +4679,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/_base/components/next-step/operator.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/_base/components/node-control.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -4773,11 +4694,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/_base/components/prompt/editor.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -5001,11 +4917,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/assigner/components/operation-selector.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/assigner/default.ts": {
     "ts/no-explicit-any": {
       "count": 1
@@ -6010,11 +5921,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/note-node/note-editor/utils.ts": {
     "regexp/no-useless-quantifier": {
       "count": 1
@@ -6030,11 +5936,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/operator/more-actions.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/operator/tip-popup.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6043,9 +5944,6 @@
   "web/app/components/workflow/operator/zoom-in-out.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
-    },
-    "no-restricted-imports": {
-      "count": 1
     }
   },
   "web/app/components/workflow/panel/chat-record/index.tsx": {
@@ -6141,11 +6039,6 @@
       "count": 4
     }
   },
-  "web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6166,11 +6059,6 @@
       "count": 2
     }
   },
-  "web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/run/agent-log/index.tsx": {
     "no-barrel-files/no-barrel-files": {
       "count": 2
@@ -6450,9 +6338,6 @@
   "web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
-    },
-    "no-restricted-imports": {
-      "count": 1
     }
   },
   "web/app/education-apply/expire-notice-modal.tsx": {
diff --git a/web/__tests__/app-sidebar/dataset-info-flow.test.tsx b/web/__tests__/app-sidebar/dataset-info-flow.test.tsx
index d1ca233d96..3093b2809d 100644
--- a/web/__tests__/app-sidebar/dataset-info-flow.test.tsx
+++ b/web/__tests__/app-sidebar/dataset-info-flow.test.tsx
@@ -194,7 +194,7 @@ describe('App Sidebar Dataset Info Flow', () => {
     openDropdown()
     fireEvent.click(await screen.findByText('common.operation.edit'))
 
-    expect(screen.getByTestId('rename-dataset-modal')).toBeInTheDocument()
+    expect(await screen.findByTestId('rename-dataset-modal')).toBeInTheDocument()
 
     fireEvent.click(screen.getByRole('button', { name: 'rename-success' }))
 
diff --git a/web/__tests__/app-sidebar/sidebar-shell-flow.test.tsx b/web/__tests__/app-sidebar/sidebar-shell-flow.test.tsx
index 3e3edba5dd..a7c660105d 100644
--- a/web/__tests__/app-sidebar/sidebar-shell-flow.test.tsx
+++ b/web/__tests__/app-sidebar/sidebar-shell-flow.test.tsx
@@ -181,7 +181,7 @@ describe('App Sidebar Shell Flow', () => {
     expect(mockSetAppSidebarExpand).toHaveBeenCalledWith('collapse')
   })
 
-  it('switches to the workflow fullscreen dropdown shell and opens its navigation menu', () => {
+  it('switches to the workflow fullscreen dropdown shell and opens its navigation menu', async () => {
     mockPathname = '/app/app-1/workflow'
     mockSelectedSegment = 'workflow'
     localStorage.setItem('workflow-canvas-maximize', 'true')
@@ -190,9 +190,9 @@ describe('App Sidebar Shell Flow', () => {
 
     expect(screen.queryByTestId('app-info')).not.toBeInTheDocument()
 
-    fireEvent.click(screen.getByTestId('portal-trigger'))
+    fireEvent.click(screen.getByRole('button', { name: 'operation.more' }))
 
-    expect(screen.getByText('Demo App')).toBeInTheDocument()
+    expect(await screen.findByText('Demo App')).toBeInTheDocument()
     expect(screen.getByRole('link', { name: /Overview/i })).toBeInTheDocument()
     expect(screen.getByRole('link', { name: /Logs/i })).toBeInTheDocument()
   })
diff --git a/web/app/components/app-sidebar/__tests__/app-sidebar-dropdown.spec.tsx b/web/app/components/app-sidebar/__tests__/app-sidebar-dropdown.spec.tsx
index 5018709da1..5e18bbc343 100644
--- a/web/app/components/app-sidebar/__tests__/app-sidebar-dropdown.spec.tsx
+++ b/web/app/components/app-sidebar/__tests__/app-sidebar-dropdown.spec.tsx
@@ -19,17 +19,40 @@ vi.mock('@/context/app-context', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => (
-    <div data-testid="portal-elem" data-open={open}>{children}</div>
-  ),
-  PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
-    <div data-testid="portal-trigger" onClick={onClick}>{children}</div>
-  ),
-  PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="portal-content">{children}</div>
-  ),
-}))
+vi.mock('@/app/components/base/ui/dropdown-menu', () => {
+  const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ isOpen: open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div data-testid="dropdown-menu" data-open={open}>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: React.MouseEventHandler<HTMLButtonElement> }) => {
+      const { isOpen, setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          data-testid="dropdown-trigger"
+          onClick={(e) => {
+            onClick?.(e)
+            setOpen(!isOpen)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+    DropdownMenuContent: ({ children }: { children: React.ReactNode }) => <div data-testid="dropdown-content">{children}</div>,
+  }
+})
 
 vi.mock('../../base/app-icon', () => ({
   default: ({ size, icon }: { size: string, icon: string }) => (
@@ -128,11 +151,11 @@ describe('AppSidebarDropdown', () => {
     const user = userEvent.setup()
     render(<AppSidebarDropdown navigation={navigation} />)
 
-    const trigger = screen.getByTestId('portal-trigger')
+    const trigger = screen.getByTestId('dropdown-trigger')
     await user.click(trigger)
 
-    const portal = screen.getByTestId('portal-elem')
-    expect(portal).toHaveAttribute('data-open', 'true')
+    const dropdown = screen.getByTestId('dropdown-menu')
+    expect(dropdown).toHaveAttribute('data-open', 'true')
   })
 
   it('should render divider between app info and navigation', () => {
diff --git a/web/app/components/app-sidebar/__tests__/dataset-sidebar-dropdown.spec.tsx b/web/app/components/app-sidebar/__tests__/dataset-sidebar-dropdown.spec.tsx
index 1f3a5f9ad8..5060987cda 100644
--- a/web/app/components/app-sidebar/__tests__/dataset-sidebar-dropdown.spec.tsx
+++ b/web/app/components/app-sidebar/__tests__/dataset-sidebar-dropdown.spec.tsx
@@ -21,17 +21,40 @@ vi.mock('@/hooks/use-knowledge', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => (
-    <div data-testid="portal-elem" data-open={open}>{children}</div>
-  ),
-  PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
-    <div data-testid="portal-trigger" onClick={onClick}>{children}</div>
-  ),
-  PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="portal-content">{children}</div>
-  ),
-}))
+vi.mock('@/app/components/base/ui/dropdown-menu', () => {
+  const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ isOpen: open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div data-testid="dropdown-menu" data-open={open}>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: React.MouseEventHandler<HTMLButtonElement> }) => {
+      const { isOpen, setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          data-testid="dropdown-trigger"
+          onClick={(e) => {
+            onClick?.(e)
+            setOpen(!isOpen)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+    DropdownMenuContent: ({ children }: { children: React.ReactNode }) => <div data-testid="dropdown-content">{children}</div>,
+  }
+})
 
 vi.mock('../../base/app-icon', () => ({
   default: ({ size, icon }: { size: string, icon: string }) => (
@@ -173,10 +196,10 @@ describe('DatasetSidebarDropdown', () => {
     const user = userEvent.setup()
     render(<DatasetSidebarDropdown navigation={navigation} />)
 
-    const trigger = screen.getByTestId('portal-trigger')
+    const trigger = screen.getByTestId('dropdown-trigger')
     await user.click(trigger)
 
-    expect(screen.getByTestId('portal-elem')).toHaveAttribute('data-open', 'true')
+    expect(screen.getByTestId('dropdown-menu')).toHaveAttribute('data-open', 'true')
   })
 
   it('should render divider', () => {
diff --git a/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx b/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx
index 2c5b133a74..461cedc20c 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx
+++ b/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx
@@ -30,17 +30,67 @@ vi.mock('../../../base/ui/button', () => ({
   ),
 }))
 
-vi.mock('../../../base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => (
-    <div data-testid="portal-elem" data-open={open}>{children}</div>
-  ),
-  PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
-    <div data-testid="portal-trigger" onClick={onClick}>{children}</div>
-  ),
-  PortalToFollowElemContent: ({ children, className }: { children: React.ReactNode, className?: string }) => (
-    <div data-testid="portal-content" className={className}>{children}</div>
-  ),
-}))
+vi.mock('../../../base/ui/dropdown-menu', () => {
+  const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ isOpen: open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div data-testid="dropdown-menu" data-open={open}>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({
+      children,
+      onClick,
+      render,
+    }: {
+      children: React.ReactNode
+      onClick?: React.MouseEventHandler<HTMLElement>
+      render?: React.ReactElement
+    }) => {
+      const { isOpen, setOpen } = useDropdownMenuContext()
+      const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+        onClick?.(e)
+        setOpen(!isOpen)
+      }
+
+      if (render)
+        return React.cloneElement(render, { 'data-testid': 'dropdown-trigger', 'onClick': handleClick } as Record<string, unknown>, children)
+
+      return <button data-testid="dropdown-trigger" onClick={handleClick}>{children}</button>
+    },
+    DropdownMenuContent: ({ children, popupClassName }: { children: React.ReactNode, popupClassName?: string }) => {
+      const { isOpen } = useDropdownMenuContext()
+      if (!isOpen)
+        return null
+
+      return <div data-testid="dropdown-content" className={popupClassName}>{children}</div>
+    },
+    DropdownMenuItem: ({ children, onClick }: { children: React.ReactNode, onClick?: React.MouseEventHandler<HTMLButtonElement> }) => {
+      const { setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          data-testid="dropdown-item"
+          onClick={(e) => {
+            onClick?.(e)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+    DropdownMenuSeparator: () => <hr data-testid="dropdown-separator" />,
+  }
+})
 
 const createOperation = (id: string, title: string, type?: 'divider'): Operation => ({
   id,
@@ -169,7 +219,7 @@ describe('AppOperations', () => {
 
       render(<AppOperations gap={4} primaryOperations={ops} secondaryOperations={secondary} />)
 
-      const trigger = screen.queryByTestId('portal-trigger')
+      const trigger = screen.queryByTestId('dropdown-trigger')
       if (trigger)
         await user.click(trigger)
 
diff --git a/web/app/components/app-sidebar/app-info/app-operations.tsx b/web/app/components/app-sidebar/app-info/app-operations.tsx
index a3e67c8a59..095fb31206 100644
--- a/web/app/components/app-sidebar/app-info/app-operations.tsx
+++ b/web/app/components/app-sidebar/app-info/app-operations.tsx
@@ -1,9 +1,15 @@
 import type { JSX } from 'react'
 import { RiMoreLine } from '@remixicon/react'
-import { cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { cloneElement, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../base/ui/dropdown-menu'
 
 export type Operation = {
   id: string
@@ -33,9 +39,6 @@ const AppOperations = ({
   const [moreOperations, setMoreOperations] = useState<Operation[]>([])
   const [showMore, setShowMore] = useState(false)
   const navRef = useRef<HTMLDivElement>(null)
-  const handleTriggerMore = useCallback(() => {
-    setShowMore(true)
-  }, [setShowMore])
 
   const primaryOps = useMemo(() => {
     if (operations)
@@ -169,43 +172,44 @@ const AppOperations = ({
           </Button>
         ))}
         {shouldShowMoreButton && (
-          <PortalToFollowElem
-            open={showMore}
-            onOpenChange={setShowMore}
-            placement="bottom-end"
-            offset={{ mainAxis: 4 }}
-          >
-            <PortalToFollowElemTrigger onClick={handleTriggerMore}>
-              <Button
-                size="small"
-                variant="secondary"
-                className="gap-px"
-              >
+          <DropdownMenu open={showMore} onOpenChange={setShowMore}>
+            <DropdownMenuTrigger
+              render={(
+                <Button
+                  size="small"
+                  variant="secondary"
+                  className="gap-px"
+                />
+              )}
+            >
+              <>
                 <RiMoreLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
                 <span className="system-xs-medium text-components-button-secondary-text">
                   {t('operation.more', { ns: 'common' })}
                 </span>
-              </Button>
-            </PortalToFollowElemTrigger>
-            <PortalToFollowElemContent className="z-30">
-              <div className="flex min-w-[264px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]">
-                {moreOperations.map(item => item.type === 'divider'
-                  ? (
-                      <div key={item.id} className="my-1 h-px bg-divider-subtle" />
-                    )
-                  : (
-                      <div
-                        key={item.id}
-                        className="flex h-8 cursor-pointer items-center gap-x-1 rounded-lg p-1.5 hover:bg-state-base-hover"
-                        onClick={item.onClick}
-                      >
-                        {cloneElement(item.icon, { className: 'h-4 w-4 text-text-tertiary' })}
-                        <span className="system-md-regular text-text-secondary">{item.title}</span>
-                      </div>
-                    ))}
-              </div>
-            </PortalToFollowElemContent>
-          </PortalToFollowElem>
+              </>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              placement="bottom-end"
+              sideOffset={4}
+              popupClassName="min-w-[264px]"
+            >
+              {moreOperations.map(item => item.type === 'divider'
+                ? (
+                    <DropdownMenuSeparator key={item.id} />
+                  )
+                : (
+                    <DropdownMenuItem
+                      key={item.id}
+                      className="gap-x-1 px-1.5"
+                      onClick={item.onClick}
+                    >
+                      {cloneElement(item.icon, { className: 'h-4 w-4 text-text-tertiary' })}
+                      <span className="system-md-regular text-text-secondary">{item.title}</span>
+                    </DropdownMenuItem>
+                  ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
         )}
       </div>
     </>
diff --git a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
index 361fc94d69..617d14f426 100644
--- a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
+++ b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
@@ -5,14 +5,14 @@ import {
   RiMenuLine,
 } from '@remixicon/react'
 import * as React from 'react'
-import { useCallback, useRef, useState } from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { useAppContext } from '@/context/app-context'
 import AppIcon from '../base/app-icon'
 import Divider from '../base/divider'
@@ -34,16 +34,7 @@ const AppSidebarDropdown = ({ navigation }: Props) => {
   const { isCurrentWorkspaceEditor } = useAppContext()
   const appDetail = useAppStore(state => state.appDetail)
   const [detailExpand, setDetailExpand] = useState(false)
-
-  const [open, doSetOpen] = useState(false)
-  const openRef = useRef(open)
-  const setOpen = useCallback((v: boolean) => {
-    doSetOpen(v)
-    openRef.current = v
-  }, [doSetOpen])
-  const handleTrigger = useCallback(() => {
-    setOpen(!openRef.current)
-  }, [setOpen])
+  const [open, setOpen] = useState(false)
 
   if (!appDetail)
     return null
@@ -51,27 +42,28 @@ const AppSidebarDropdown = ({ navigation }: Props) => {
   return (
     <>
       <div className="fixed top-2 left-2 z-20">
-        <PortalToFollowElem
-          open={open}
-          onOpenChange={setOpen}
-          placement="bottom-start"
-          offset={{
-            mainAxis: -41,
-          }}
-        >
-          <PortalToFollowElemTrigger onClick={handleTrigger}>
-            <div className={cn('flex cursor-pointer items-center rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-1 shadow-lg backdrop-blur-xs hover:bg-background-default-hover', open && 'bg-background-default-hover')}>
-              <AppIcon
-                size="small"
-                iconType={appDetail.icon_type}
-                icon={appDetail.icon}
-                background={appDetail.icon_background}
-                imageUrl={appDetail.icon_url}
-              />
-              <RiMenuLine className="h-4 w-4 text-text-tertiary" />
-            </div>
-          </PortalToFollowElemTrigger>
-          <PortalToFollowElemContent className="z-1000">
+        <DropdownMenu open={open} onOpenChange={setOpen}>
+          <DropdownMenuTrigger
+            aria-label={t('operation.more', { ns: 'common' })}
+            className={cn(
+              'flex cursor-pointer items-center rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-1 shadow-lg backdrop-blur-xs hover:bg-background-default-hover',
+              open && 'bg-background-default-hover',
+            )}
+          >
+            <AppIcon
+              size="small"
+              iconType={appDetail.icon_type}
+              icon={appDetail.icon}
+              background={appDetail.icon_background}
+              imageUrl={appDetail.icon_url}
+            />
+            <RiMenuLine className="h-4 w-4 text-text-tertiary" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            placement="bottom-start"
+            sideOffset={4}
+            popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
+          >
             <div className={cn('w-[305px] rounded-xl border-[0.5px] border-components-panel-border bg-background-default-subtle shadow-lg')}>
               <div className="p-2">
                 <div
@@ -114,8 +106,8 @@ const AppSidebarDropdown = ({ navigation }: Props) => {
                 })}
               </nav>
             </div>
-          </PortalToFollowElemContent>
-        </PortalToFollowElem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
       <div className="z-20">
         <AppInfo expand onlyShowDetail openState={detailExpand} onDetailExpand={setDetailExpand} />
diff --git a/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx b/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx
index 6ed10609e9..b514b6e095 100644
--- a/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx
+++ b/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx
@@ -137,14 +137,6 @@ vi.mock('@/app/components/datasets/rename-modal', () => ({
   },
 }))
 
-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 }) => (
-    <div data-testid="portal-trigger" onClick={onClick}>{children}</div>
-  ),
-  PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-}))
-
 describe('Dropdown callback coverage', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -159,7 +151,7 @@ describe('Dropdown callback coverage', () => {
     const user = userEvent.setup()
     render(<Dropdown expand />)
 
-    await user.click(screen.getByTestId('portal-trigger'))
+    await user.click(screen.getByRole('button'))
     await user.click(screen.getByText('common.operation.edit'))
 
     expect(screen.getByTestId('rename-modal')).toBeInTheDocument()
@@ -175,7 +167,7 @@ describe('Dropdown callback coverage', () => {
     const user = userEvent.setup()
     render(<Dropdown expand />)
 
-    await user.click(screen.getByTestId('portal-trigger'))
+    await user.click(screen.getByRole('button'))
     await user.click(screen.getByText('common.operation.edit'))
 
     expect(screen.getByTestId('rename-modal')).toBeInTheDocument()
@@ -190,7 +182,7 @@ describe('Dropdown callback coverage', () => {
     const user = userEvent.setup()
     render(<Dropdown expand />)
 
-    await user.click(screen.getByTestId('portal-trigger'))
+    await user.click(screen.getByRole('button'))
     await user.click(screen.getByText('common.operation.delete'))
 
     await waitFor(() => {
@@ -210,7 +202,7 @@ describe('Dropdown callback coverage', () => {
 
     render(<Dropdown expand />)
 
-    await user.click(screen.getByTestId('portal-trigger'))
+    await user.click(screen.getByRole('button'))
     await user.click(screen.getByText('common.operation.delete'))
 
     await waitFor(() => {
@@ -224,7 +216,7 @@ describe('Dropdown callback coverage', () => {
 
     render(<Dropdown expand />)
 
-    await user.click(screen.getByTestId('portal-trigger'))
+    await user.click(screen.getByRole('button'))
     await user.click(screen.getByText('datasetPipeline.operations.exportPipeline'))
 
     await waitFor(() => {
@@ -232,6 +224,27 @@ describe('Dropdown callback coverage', () => {
     })
   })
 
+  it('should not attempt export when the dataset has no pipeline id', async () => {
+    const user = userEvent.setup()
+    mockDataset = createDataset({ pipeline_id: '' })
+
+    render(<Dropdown expand={false} />)
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getByText('datasetPipeline.operations.exportPipeline'))
+
+    expect(mockExportPipeline).not.toHaveBeenCalled()
+  })
+
+  it('should render and open correctly when collapsed', async () => {
+    const user = userEvent.setup()
+    render(<Dropdown expand={false} />)
+
+    await user.click(screen.getByRole('button'))
+
+    expect(screen.getByText('common.operation.edit')).toBeInTheDocument()
+  })
+
   it('should surface the backend message when checking app usage fails', async () => {
     const user = userEvent.setup()
     mockCheckIsUsedInApp.mockRejectedValueOnce({
@@ -240,7 +253,7 @@ describe('Dropdown callback coverage', () => {
 
     render(<Dropdown expand />)
 
-    await user.click(screen.getByTestId('portal-trigger'))
+    await user.click(screen.getByRole('button'))
     await user.click(screen.getByText('common.operation.delete'))
 
     await waitFor(() => {
diff --git a/web/app/components/app-sidebar/dataset-info/__tests__/index.spec.tsx b/web/app/components/app-sidebar/dataset-info/__tests__/index.spec.tsx
index bb85e00c14..e6d3f94e2a 100644
--- a/web/app/components/app-sidebar/dataset-info/__tests__/index.spec.tsx
+++ b/web/app/components/app-sidebar/dataset-info/__tests__/index.spec.tsx
@@ -1,5 +1,4 @@
 import type { DataSet } from '@/models/datasets'
-import { RiEditLine } from '@remixicon/react'
 import { createEvent, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
@@ -22,6 +21,7 @@ const mockInvalidDatasetDetail = vi.fn()
 const mockExportPipeline = vi.fn()
 const mockCheckIsUsedInApp = vi.fn()
 const mockDeleteDataset = vi.fn()
+const TestEditIcon = () => <span aria-hidden className="i-ri-edit-line" />
 
 const createDataset = (overrides: Partial<DataSet> = {}): DataSet => ({
   id: 'dataset-1',
@@ -210,7 +210,7 @@ describe('MenuItem', () => {
       const user = userEvent.setup()
       const handleClick = vi.fn()
       // Arrange
-      render(<MenuItem name="Edit" Icon={RiEditLine} handleClick={handleClick} />)
+      render(<MenuItem name="Edit" Icon={TestEditIcon} handleClick={handleClick} />)
 
       // Act
       await user.click(screen.getByText('Edit'))
@@ -225,7 +225,7 @@ describe('MenuItem', () => {
 
       render(
         <div onClick={parentClick}>
-          <MenuItem name="Edit" Icon={RiEditLine} handleClick={handleClick} />
+          <MenuItem name="Edit" Icon={TestEditIcon} handleClick={handleClick} />
         </div>,
       )
 
@@ -236,7 +236,7 @@ describe('MenuItem', () => {
     })
 
     it('should not crash when no click handler is provided', () => {
-      render(<MenuItem name="Edit" Icon={RiEditLine} />)
+      render(<MenuItem name="Edit" Icon={TestEditIcon} />)
 
       const event = createEvent.click(screen.getByText('Edit'))
       fireEvent(screen.getByText('Edit'), event)
diff --git a/web/app/components/app-sidebar/dataset-info/dropdown.tsx b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
index 9abebfcc88..e69b3d7e32 100644
--- a/web/app/components/app-sidebar/dataset-info/dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
@@ -1,6 +1,5 @@
 import type { DataSet } from '@/models/datasets'
 import { cn } from '@langgenius/dify-ui/cn'
-import { RiMoreFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -14,7 +13,6 @@ import { useInvalid } from '@/service/use-base'
 import { useExportPipelineDSL } from '@/service/use-pipeline'
 import { downloadBlob } from '@/utils/download'
 import ActionButton from '../../base/action-button'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -24,6 +22,11 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '../../base/ui/alert-dialog'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '../../base/ui/dropdown-menu'
 import RenameDatasetModal from '../../datasets/rename-modal'
 import Menu from './menu'
 
@@ -44,10 +47,6 @@ const DropDown = ({
   const isCurrentWorkspaceDatasetOperator = useAppContextWithSelector(state => state.isCurrentWorkspaceDatasetOperator)
   const dataset = useDatasetDetailContextWithSelector(state => state.dataset) as DataSet
 
-  const handleTrigger = useCallback(() => {
-    setOpen(prev => !prev)
-  }, [])
-
   const invalidDatasetList = useInvalidDatasetList()
   const invalidDatasetDetail = useInvalid([...datasetDetailQueryKeyPrefix, dataset.id])
 
@@ -57,9 +56,11 @@ const DropDown = ({
   }, [invalidDatasetDetail, invalidDatasetList])
 
   const openRenameModal = useCallback(() => {
-    setShowRenameModal(true)
-    handleTrigger()
-  }, [handleTrigger])
+    setOpen(false)
+    queueMicrotask(() => {
+      setShowRenameModal(true)
+    })
+  }, [])
 
   const { mutateAsync: exportPipelineConfig } = useExportPipelineDSL()
 
@@ -67,7 +68,7 @@ const DropDown = ({
     const { pipeline_id, name } = dataset
     if (!pipeline_id)
       return
-    handleTrigger()
+    setOpen(false)
     try {
       const { data } = await exportPipelineConfig({
         pipelineId: pipeline_id,
@@ -79,9 +80,10 @@ const DropDown = ({
     catch {
       toast(t('exportFailed', { ns: 'app' }), { type: 'error' })
     }
-  }, [dataset, exportPipelineConfig, handleTrigger, t])
+  }, [dataset, exportPipelineConfig, t])
 
   const detectIsUsedByApp = useCallback(async () => {
+    setOpen(false)
     try {
       const { is_using: isUsedByApp } = await checkIsUsedInApp(dataset.id)
       setConfirmMessage(isUsedByApp ? t('datasetUsedByApp', { ns: 'dataset' })! : t('deleteDatasetConfirmContent', { ns: 'dataset' })!)
@@ -91,10 +93,7 @@ const DropDown = ({
       const res = await e.json()
       toast(res?.message || 'Unknown error', { type: 'error' })
     }
-    finally {
-      handleTrigger()
-    }
-  }, [dataset.id, handleTrigger, t])
+  }, [dataset.id, t])
 
   const onConfirmDelete = useCallback(async () => {
     try {
@@ -109,32 +108,27 @@ const DropDown = ({
   }, [dataset.id, replace, invalidDatasetList, t])
 
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement={expand ? 'bottom-end' : 'right'}
-      offset={expand
-        ? {
-            mainAxis: 4,
-            crossAxis: 10,
-          }
-        : {
-            mainAxis: 4,
-          }}
     >
-      <PortalToFollowElemTrigger onClick={handleTrigger}>
-        <ActionButton className={cn(expand ? 'size-8 rounded-lg' : 'size-6 rounded-md')}>
-          <RiMoreFill className="size-4" />
+      <DropdownMenuTrigger render={<div />}>
+        <ActionButton className={cn(expand ? 'size-8 rounded-lg' : 'size-6 rounded-md', open && 'bg-state-base-hover')}>
+          <span aria-hidden className="i-ri-more-fill size-4" />
         </ActionButton>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-60">
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement={expand ? 'bottom-end' : 'right-start'}
+        sideOffset={4}
+        popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
+      >
         <Menu
           showDelete={!isCurrentWorkspaceDatasetOperator}
           openRenameModal={openRenameModal}
           handleExportPipeline={handleExportPipeline}
           detectIsUsedByApp={detectIsUsedByApp}
         />
-      </PortalToFollowElemContent>
+      </DropdownMenuContent>
       {showRenameModal && (
         <RenameDatasetModal
           show={showRenameModal}
@@ -163,7 +157,7 @@ const DropDown = ({
           </AlertDialogActions>
         </AlertDialogContent>
       </AlertDialog>
-    </PortalToFollowElem>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx b/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
index de2563b377..3968a0df6f 100644
--- a/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
@@ -5,13 +5,13 @@ import {
   RiMenuLine,
 } from '@remixicon/react'
 import * as React from 'react'
-import { useCallback, useRef, useState } from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useKnowledge } from '@/hooks/use-knowledge'
 import { DOC_FORM_TEXT } from '@/models/datasets'
@@ -41,15 +41,7 @@ const DatasetSidebarDropdown = ({
 
   const { data: relatedApps } = useDatasetRelatedApps(dataset.id)
 
-  const [open, doSetOpen] = useState(false)
-  const openRef = useRef(open)
-  const setOpen = useCallback((v: boolean) => {
-    doSetOpen(v)
-    openRef.current = v
-  }, [doSetOpen])
-  const handleTrigger = useCallback(() => {
-    setOpen(!openRef.current)
-  }, [setOpen])
+  const [open, setOpen] = useState(false)
 
   const iconInfo = dataset.icon_info || {
     icon: '📙',
@@ -66,32 +58,28 @@ const DatasetSidebarDropdown = ({
   return (
     <>
       <div className="fixed top-2 left-2 z-20">
-        <PortalToFollowElem
-          open={open}
-          onOpenChange={setOpen}
-          placement="bottom-start"
-          offset={{
-            mainAxis: -41,
-          }}
-        >
-          <PortalToFollowElemTrigger onClick={handleTrigger}>
-            <div
-              className={cn(
-                'flex cursor-pointer items-center rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-1 shadow-lg backdrop-blur-xs hover:bg-background-default-hover',
-                open && 'bg-background-default-hover',
-              )}
-            >
-              <AppIcon
-                size="small"
-                iconType={iconInfo.icon_type}
-                icon={iconInfo.icon}
-                background={iconInfo.icon_background}
-                imageUrl={iconInfo.icon_url}
-              />
-              <RiMenuLine className="size-4 text-text-tertiary" />
-            </div>
-          </PortalToFollowElemTrigger>
-          <PortalToFollowElemContent className="z-50">
+        <DropdownMenu open={open} onOpenChange={setOpen}>
+          <DropdownMenuTrigger
+            aria-label={t('operation.more', { ns: 'common' })}
+            className={cn(
+              'flex cursor-pointer items-center rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-1 shadow-lg backdrop-blur-xs hover:bg-background-default-hover',
+              open && 'bg-background-default-hover',
+            )}
+          >
+            <AppIcon
+              size="small"
+              iconType={iconInfo.icon_type}
+              icon={iconInfo.icon}
+              background={iconInfo.icon_background}
+              imageUrl={iconInfo.icon_url}
+            />
+            <RiMenuLine className="size-4 text-text-tertiary" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            placement="bottom-start"
+            sideOffset={4}
+            popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
+          >
             <div className="relative w-[216px] rounded-xl border-[0.5px] border-components-panel-border bg-background-default-subtle shadow-lg">
               <Effect className="top-[-22px] -left-5 opacity-15" />
               <div className="flex flex-col gap-y-2 p-4">
@@ -155,8 +143,8 @@ const DatasetSidebarDropdown = ({
                 documentCount={dataset.document_count}
               />
             </div>
-          </PortalToFollowElemContent>
-        </PortalToFollowElem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
     </>
   )
diff --git a/web/app/components/app/app-publisher/__tests__/publish-with-multiple-model.spec.tsx b/web/app/components/app/app-publisher/__tests__/publish-with-multiple-model.spec.tsx
index f476d8b188..465252c6c4 100644
--- a/web/app/components/app/app-publisher/__tests__/publish-with-multiple-model.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/publish-with-multiple-model.spec.tsx
@@ -22,24 +22,57 @@ vi.mock('../../header/account-setting/model-provider-page/model-icon', () => ({
   default: ({ modelName }: { modelName: string }) => <span data-testid="model-icon">{modelName}</span>,
 }))
 
-vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
   const ReactModule = await vi.importActual<typeof import('react')>('react')
-  const OpenContext = ReactModule.createContext(false)
+  const OpenContext = ReactModule.createContext<{ open: boolean, setOpen: (nextOpen: boolean) => void } | null>(null)
+
+  const useOpenContext = () => {
+    const context = ReactModule.use(OpenContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
 
   return {
-    PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => (
-      <OpenContext.Provider value={open}>
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <OpenContext.Provider value={{ open, setOpen: onOpenChange ?? vi.fn() }}>
         <div data-testid="portal-root">{children}</div>
       </OpenContext.Provider>
     ),
-    PortalToFollowElemTrigger: ({ children, onClick, className }: { children: React.ReactNode, onClick?: () => void, className?: string }) => (
-      <div className={className} onClick={onClick}>
-        {children}
-      </div>
-    ),
-    PortalToFollowElemContent: ({ children, className }: { children: React.ReactNode, className?: string }) => {
-      const open = ReactModule.useContext(OpenContext)
-      return open ? <div className={className}>{children}</div> : null
+    DropdownMenuTrigger: ({
+      children,
+      render,
+    }: {
+      children: React.ReactNode
+      render?: React.ReactElement
+    }) => {
+      const { open, setOpen } = useOpenContext()
+
+      if (render) {
+        return ReactModule.cloneElement(render, {
+          onClick: () => setOpen(!open),
+        } as Record<string, unknown>, children)
+      }
+
+      return <button type="button" onClick={() => setOpen(!open)}>{children}</button>
+    },
+    DropdownMenuContent: ({ children, popupClassName }: { children: React.ReactNode, popupClassName?: string }) => {
+      const context = useOpenContext()
+      return context.open ? <div className={popupClassName}>{children}</div> : null
+    },
+    DropdownMenuItem: ({ children, onClick }: { children: React.ReactNode, onClick?: React.MouseEventHandler<HTMLButtonElement> }) => {
+      const { setOpen } = useOpenContext()
+      return (
+        <button
+          type="button"
+          onClick={(event) => {
+            onClick?.(event)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
     },
   }
 })
diff --git a/web/app/components/app/app-publisher/publish-with-multiple-model.tsx b/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
index b4ad0423b0..fbff371577 100644
--- a/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
+++ b/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
@@ -4,12 +4,13 @@ import type { Model, ModelItem } from '@/app/components/header/account-setting/m
 import { RiArrowDownSLine } 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 { Button } from '@/app/components/base/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { useProviderContext } from '@/context/provider-context'
 import ModelIcon from '../../header/account-setting/model-provider-page/model-icon'
@@ -50,61 +51,57 @@ const PublishWithMultipleModel: FC<PublishWithMultipleModelProps> = ({
     }
   })
 
-  const handleToggle = () => {
-    if (validModelConfigs.length)
-      setOpen(v => !v)
-  }
-
-  const handleSelect = (item: ModelAndParameter) => {
-    onSelect(item)
-    setOpen(false)
-  }
-
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-end"
     >
-      <PortalToFollowElemTrigger className="w-full" onClick={handleToggle}>
-        <Button
-          variant="primary"
-          disabled={!validModelConfigs.length}
-          className="mt-3 w-full"
-        >
+      <DropdownMenuTrigger
+        disabled={!validModelConfigs.length}
+        render={(
+          <Button
+            variant="primary"
+            disabled={!validModelConfigs.length}
+            className="mt-3 w-full"
+          />
+        )}
+      >
+        <>
           {t('operation.applyConfig', { ns: 'appDebug' })}
           <RiArrowDownSLine className="ml-0.5 h-3 w-3" />
-        </Button>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-50 mt-1 w-[288px]">
-        <div className="rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg p-1 shadow-lg">
-          <div className="flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary">
-            {t('publishAs', { ns: 'appDebug' })}
-          </div>
-          {
-            validModelConfigs.map((item, index) => (
-              <div
-                key={item.id}
-                className="flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm text-text-tertiary hover:bg-state-base-hover"
-                onClick={() => handleSelect(item)}
-              >
-                <span className="min-w-[18px] italic">
-                  #
-                  {index + 1}
-                </span>
-                <ModelIcon modelName={item.model} provider={item.providerItem} className="ml-2" />
-                <div
-                  className="ml-1 truncate text-text-secondary"
-                  title={item.modelItem.label[language]}
-                >
-                  {item.modelItem.label[language]}
-                </div>
-              </div>
-            ))
-          }
+        </>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="w-[288px] p-1"
+      >
+        <div className="flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary">
+          {t('publishAs', { ns: 'appDebug' })}
         </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+        {
+          validModelConfigs.map((item, index) => (
+            <DropdownMenuItem
+              key={item.id}
+              className="gap-0 px-3"
+              onClick={() => onSelect(item)}
+            >
+              <span className="min-w-[18px] italic">
+                #
+                {index + 1}
+              </span>
+              <ModelIcon modelName={item.model} provider={item.providerItem} className="ml-2" />
+              <div
+                className="ml-1 truncate text-text-secondary"
+                title={item.modelItem.label[language]}
+              >
+                {item.modelItem.label[language]}
+              </div>
+            </DropdownMenuItem>
+          ))
+        }
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/__tests__/debug-item.spec.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/__tests__/debug-item.spec.tsx
index 747ea4efcb..1d54ae17bb 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/__tests__/debug-item.spec.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/__tests__/debug-item.spec.tsx
@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react'
 import type { ModelAndParameter } from '../../types'
-import type { Item } from '@/app/components/base/dropdown'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { ModelStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { AppModeEnum } from '@/types/app'
 import DebugItem from '../debug-item'
@@ -10,12 +10,6 @@ const mockUseDebugConfigurationContext = vi.fn()
 const mockUseDebugWithMultipleModelContext = vi.fn()
 const mockUseProviderContext = vi.fn()
 
-let capturedDropdownProps: {
-  onSelect: (item: Item) => void
-  items: Item[]
-  secondItems?: Item[]
-} | null = null
-
 let capturedModelParameterTriggerProps: {
   modelAndParameter: ModelAndParameter
 } | null = null
@@ -51,34 +45,6 @@ vi.mock('../model-parameter-trigger', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/dropdown', () => ({
-  default: (props: { onSelect: (item: Item) => void, items: Item[], secondItems?: Item[] }) => {
-    capturedDropdownProps = props
-    return (
-      <div data-testid="dropdown">
-        {props.items.map(item => (
-          <button
-            key={item.value}
-            data-testid={`dropdown-item-${item.value}`}
-            onClick={() => props.onSelect(item)}
-          >
-            {item.text}
-          </button>
-        ))}
-        {props.secondItems?.map(item => (
-          <button
-            key={item.value}
-            data-testid={`dropdown-second-item-${item.value}`}
-            onClick={() => props.onSelect(item)}
-          >
-            {item.text}
-          </button>
-        ))}
-      </div>
-    )
-  },
-}))
-
 const createModelAndParameter = (overrides: Partial<ModelAndParameter> = {}): ModelAndParameter => ({
   id: 'model-1',
   model: 'gpt-3.5-turbo',
@@ -117,7 +83,6 @@ const renderComponent = (props: Partial<DebugItemProps> = {}) => {
 describe('DebugItem', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    capturedDropdownProps = null
     capturedModelParameterTriggerProps = null
 
     mockUseDebugConfigurationContext.mockReturnValue({
@@ -137,12 +102,18 @@ describe('DebugItem', () => {
     })
   })
 
+  const openMenu = async () => {
+    const user = userEvent.setup()
+    await user.click(screen.getByRole('button'))
+    return user
+  }
+
   describe('rendering', () => {
     it('should render with basic props', () => {
       renderComponent()
 
-      expect(screen.getByTestId('model-parameter-trigger'))!.toBeInTheDocument()
-      expect(screen.getByTestId('dropdown'))!.toBeInTheDocument()
+      expect(screen.getByTestId('model-parameter-trigger')).toBeInTheDocument()
+      expect(screen.getByRole('button')).toBeInTheDocument()
     })
 
     it('should display correct index number', () => {
@@ -280,7 +251,7 @@ describe('DebugItem', () => {
   })
 
   describe('dropdown menu', () => {
-    it('should show duplicate option when less than 4 models', () => {
+    it('should show duplicate option when less than 4 models', async () => {
       mockUseDebugWithMultipleModelContext.mockReturnValue({
         multipleModelConfigs: [createModelAndParameter()],
         onMultipleModelConfigsChange: vi.fn(),
@@ -288,13 +259,12 @@ describe('DebugItem', () => {
       })
 
       renderComponent()
+      await openMenu()
 
-      expect(capturedDropdownProps?.items).toContainEqual(
-        expect.objectContaining({ value: 'duplicate' }),
-      )
+      expect(screen.getByText('appDebug.duplicateModel')).toBeInTheDocument()
     })
 
-    it('should hide duplicate option when 4 or more models', () => {
+    it('should hide duplicate option when 4 or more models', async () => {
       mockUseDebugWithMultipleModelContext.mockReturnValue({
         multipleModelConfigs: [
           createModelAndParameter({ id: '1' }),
@@ -307,52 +277,48 @@ describe('DebugItem', () => {
       })
 
       renderComponent()
+      await openMenu()
 
-      expect(capturedDropdownProps?.items).not.toContainEqual(
-        expect.objectContaining({ value: 'duplicate' }),
-      )
+      expect(screen.queryByText('appDebug.duplicateModel')).not.toBeInTheDocument()
     })
 
-    it('should show debug-as-single-model option when provider and model are set', () => {
+    it('should show debug-as-single-model option when provider and model are set', async () => {
       renderComponent({
         modelAndParameter: createModelAndParameter({
           provider: 'openai',
           model: 'gpt-3.5-turbo',
         }),
       })
+      await openMenu()
 
-      expect(capturedDropdownProps?.items).toContainEqual(
-        expect.objectContaining({ value: 'debug-as-single-model' }),
-      )
+      expect(screen.getByText('appDebug.debugAsSingleModel')).toBeInTheDocument()
     })
 
-    it('should hide debug-as-single-model option when provider is missing', () => {
+    it('should hide debug-as-single-model option when provider is missing', async () => {
       renderComponent({
         modelAndParameter: createModelAndParameter({
           provider: '',
           model: 'gpt-3.5-turbo',
         }),
       })
+      await openMenu()
 
-      expect(capturedDropdownProps?.items).not.toContainEqual(
-        expect.objectContaining({ value: 'debug-as-single-model' }),
-      )
+      expect(screen.queryByText('appDebug.debugAsSingleModel')).not.toBeInTheDocument()
     })
 
-    it('should hide debug-as-single-model option when model is missing', () => {
+    it('should hide debug-as-single-model option when model is missing', async () => {
       renderComponent({
         modelAndParameter: createModelAndParameter({
           provider: 'openai',
           model: '',
         }),
       })
+      await openMenu()
 
-      expect(capturedDropdownProps?.items).not.toContainEqual(
-        expect.objectContaining({ value: 'debug-as-single-model' }),
-      )
+      expect(screen.queryByText('appDebug.debugAsSingleModel')).not.toBeInTheDocument()
     })
 
-    it('should show remove option in secondItems when more than 2 models', () => {
+    it('should show remove option in secondItems when more than 2 models', async () => {
       mockUseDebugWithMultipleModelContext.mockReturnValue({
         multipleModelConfigs: [
           createModelAndParameter({ id: '1' }),
@@ -364,13 +330,12 @@ describe('DebugItem', () => {
       })
 
       renderComponent()
+      await openMenu()
 
-      expect(capturedDropdownProps?.secondItems).toContainEqual(
-        expect.objectContaining({ value: 'remove' }),
-      )
+      expect(screen.getByText('common.operation.remove')).toBeInTheDocument()
     })
 
-    it('should not show remove option when 2 or fewer models', () => {
+    it('should not show remove option when 2 or fewer models', async () => {
       mockUseDebugWithMultipleModelContext.mockReturnValue({
         multipleModelConfigs: [
           createModelAndParameter({ id: '1' }),
@@ -381,13 +346,14 @@ describe('DebugItem', () => {
       })
 
       renderComponent()
+      await openMenu()
 
-      expect(capturedDropdownProps?.secondItems).toBeUndefined()
+      expect(screen.queryByText('common.operation.remove')).not.toBeInTheDocument()
     })
   })
 
   describe('dropdown actions', () => {
-    it('should duplicate model when duplicate is selected', () => {
+    it('should duplicate model when duplicate is selected', async () => {
       const onMultipleModelConfigsChange = vi.fn()
       const originalModel = createModelAndParameter({ id: 'original' })
 
@@ -399,7 +365,8 @@ describe('DebugItem', () => {
 
       renderComponent({ modelAndParameter: originalModel })
 
-      fireEvent.click(screen.getByTestId('dropdown-item-duplicate'))
+      const user = await openMenu()
+      await user.click(screen.getByText('appDebug.duplicateModel'))
 
       expect(onMultipleModelConfigsChange).toHaveBeenCalledWith(
         true,
@@ -414,7 +381,7 @@ describe('DebugItem', () => {
       )
     })
 
-    it('should not duplicate when already at 4 models', () => {
+    it('should not duplicate when already at 4 models', async () => {
       const onMultipleModelConfigsChange = vi.fn()
       const models = [
         createModelAndParameter({ id: '1' }),
@@ -430,14 +397,13 @@ describe('DebugItem', () => {
       })
 
       renderComponent({ modelAndParameter: models[0] })
-
-      // Since duplicate is not shown when >= 4 models, we need to manually call handleSelect
-      capturedDropdownProps?.onSelect({ value: 'duplicate', text: 'Duplicate' })
+      await openMenu()
 
       expect(onMultipleModelConfigsChange).not.toHaveBeenCalled()
+      expect(screen.queryByText('appDebug.duplicateModel')).not.toBeInTheDocument()
     })
 
-    it('should call onDebugWithMultipleModelChange when debug-as-single-model is selected', () => {
+    it('should call onDebugWithMultipleModelChange when debug-as-single-model is selected', async () => {
       const onDebugWithMultipleModelChange = vi.fn()
       const modelAndParameter = createModelAndParameter()
 
@@ -449,12 +415,13 @@ describe('DebugItem', () => {
 
       renderComponent({ modelAndParameter })
 
-      fireEvent.click(screen.getByTestId('dropdown-item-debug-as-single-model'))
+      const user = await openMenu()
+      await user.click(screen.getByText('appDebug.debugAsSingleModel'))
 
       expect(onDebugWithMultipleModelChange).toHaveBeenCalledWith(modelAndParameter)
     })
 
-    it('should remove model when remove is selected', () => {
+    it('should remove model when remove is selected', async () => {
       const onMultipleModelConfigsChange = vi.fn()
       const models = [
         createModelAndParameter({ id: '1' }),
@@ -470,7 +437,8 @@ describe('DebugItem', () => {
 
       renderComponent({ modelAndParameter: models[1] })
 
-      fireEvent.click(screen.getByTestId('dropdown-second-item-remove'))
+      const user = await openMenu()
+      await user.click(screen.getByText('common.operation.remove'))
 
       expect(onMultipleModelConfigsChange).toHaveBeenCalledWith(
         true,
@@ -478,7 +446,7 @@ describe('DebugItem', () => {
       )
     })
 
-    it('should insert duplicated model at correct position', () => {
+    it('should insert duplicated model at correct position', async () => {
       const onMultipleModelConfigsChange = vi.fn()
       const models = [
         createModelAndParameter({ id: '1' }),
@@ -495,7 +463,8 @@ describe('DebugItem', () => {
       // Duplicate the second model
       renderComponent({ modelAndParameter: models[1] })
 
-      fireEvent.click(screen.getByTestId('dropdown-item-duplicate'))
+      const user = await openMenu()
+      await user.click(screen.getByText('appDebug.duplicateModel'))
 
       expect(onMultipleModelConfigsChange).toHaveBeenCalledWith(
         true,
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
index 7693c3ab43..2e535baeac 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
@@ -1,9 +1,15 @@
 import type { CSSProperties, FC } from 'react'
 import type { ModelAndParameter } from '../types'
-import type { Item } from '@/app/components/base/dropdown'
-import { memo } from 'react'
+import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Dropdown from '@/app/components/base/dropdown'
+import ActionButton from '@/app/components/base/action-button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { ModelStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useDebugConfigurationContext } from '@/context/debug-configuration'
 import { useProviderContext } from '@/context/provider-context'
@@ -35,34 +41,43 @@ const DebugItem: FC<DebugItemProps> = ({
   const index = multipleModelConfigs.findIndex(v => v.id === modelAndParameter.id)
   const currentProvider = textGenerationModelList.find(item => item.provider === modelAndParameter.provider)
   const currentModel = currentProvider?.models.find(item => item.model === modelAndParameter.model)
+  const [open, setOpen] = useState(false)
 
-  const handleSelect = (item: Item) => {
-    if (item.value === 'duplicate') {
-      if (multipleModelConfigs.length >= 4)
-        return
+  const handleDuplicate = () => {
+    setOpen(false)
+    if (multipleModelConfigs.length >= 4)
+      return
 
-      onMultipleModelConfigsChange(
-        true,
-        [
-          ...multipleModelConfigs.slice(0, index + 1),
-          {
-            ...modelAndParameter,
-            id: `${Date.now()}`,
-          },
-          ...multipleModelConfigs.slice(index + 1),
-        ],
-      )
-    }
-    if (item.value === 'debug-as-single-model')
-      onDebugWithMultipleModelChange(modelAndParameter)
-    if (item.value === 'remove') {
-      onMultipleModelConfigsChange(
-        true,
-        multipleModelConfigs.filter(item => item.id !== modelAndParameter.id),
-      )
-    }
+    onMultipleModelConfigsChange(
+      true,
+      [
+        ...multipleModelConfigs.slice(0, index + 1),
+        {
+          ...modelAndParameter,
+          id: `${Date.now()}`,
+        },
+        ...multipleModelConfigs.slice(index + 1),
+      ],
+    )
   }
 
+  const handleDebugAsSingleModel = () => {
+    setOpen(false)
+    onDebugWithMultipleModelChange(modelAndParameter)
+  }
+
+  const handleRemove = () => {
+    setOpen(false)
+    onMultipleModelConfigsChange(
+      true,
+      multipleModelConfigs.filter(item => item.id !== modelAndParameter.id),
+    )
+  }
+
+  const showDuplicate = multipleModelConfigs.length <= 3
+  const showDebugAsSingleModel = !!(modelAndParameter.provider && modelAndParameter.model)
+  const showRemove = multipleModelConfigs.length > 2
+
   return (
     <div
       className={`flex min-w-[320px] flex-col rounded-xl bg-background-section-burn ${className}`}
@@ -76,41 +91,37 @@ const DebugItem: FC<DebugItemProps> = ({
         <ModelParameterTrigger
           modelAndParameter={modelAndParameter}
         />
-        <Dropdown
-          onSelect={handleSelect}
-          items={[
-            ...(
-              multipleModelConfigs.length <= 3
-                ? [
-                    {
-                      value: 'duplicate',
-                      text: t('duplicateModel', { ns: 'appDebug' }),
-                    },
-                  ]
-                : []
-            ),
-            ...(
-              (modelAndParameter.provider && modelAndParameter.model)
-                ? [
-                    {
-                      value: 'debug-as-single-model',
-                      text: t('debugAsSingleModel', { ns: 'appDebug' }),
-                    },
-                  ]
-                : []
-            ),
-          ]}
-          secondItems={
-            multipleModelConfigs.length > 2
-              ? [
-                  {
-                    value: 'remove',
-                    text: t('operation.remove', { ns: 'common' }) as string,
-                  },
-                ]
-              : undefined
-          }
-        />
+        <DropdownMenu open={open} onOpenChange={setOpen}>
+          <DropdownMenuTrigger render={<div />}>
+            <ActionButton className={open ? 'bg-state-base-hover' : ''}>
+              <span aria-hidden className="i-ri-more-fill h-4 w-4 text-text-tertiary" />
+            </ActionButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            placement="bottom-end"
+            sideOffset={4}
+            popupClassName="min-w-[160px]"
+          >
+            {showDuplicate && (
+              <DropdownMenuItem className="system-md-regular" onClick={handleDuplicate}>
+                {t('duplicateModel', { ns: 'appDebug' })}
+              </DropdownMenuItem>
+            )}
+            {showDebugAsSingleModel && (
+              <DropdownMenuItem className="system-md-regular" onClick={handleDebugAsSingleModel}>
+                {t('debugAsSingleModel', { ns: 'appDebug' })}
+              </DropdownMenuItem>
+            )}
+            {showRemove && (
+              <>
+                {(showDuplicate || showDebugAsSingleModel) && <DropdownMenuSeparator />}
+                <DropdownMenuItem variant="destructive" className="system-md-regular" onClick={handleRemove}>
+                  {t('operation.remove', { ns: 'common' })}
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
       <div style={{ height: 'calc(100% - 40px)' }}>
         {
diff --git a/web/app/components/base/action-button/index.tsx b/web/app/components/base/action-button/index.tsx
index ec84fa06d8..86c8933a8a 100644
--- a/web/app/components/base/action-button/index.tsx
+++ b/web/app/components/base/action-button/index.tsx
@@ -30,7 +30,7 @@ const actionButtonVariants = cva(
   },
 )
 
-export type ActionButtonProps = {
+type ActionButtonProps = {
   size?: 'xs' | 's' | 'm' | 'l' | 'xl'
   state?: ActionButtonState
   styleCss?: CSSProperties
@@ -73,4 +73,4 @@ const ActionButton = ({ className, size, state = ActionButtonState.Default, styl
 ActionButton.displayName = 'ActionButton'
 
 export default ActionButton
-export { ActionButton, ActionButtonState, actionButtonVariants }
+export { ActionButton, ActionButtonState }
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 a183a7670b..af58a29fcc 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
@@ -211,8 +211,9 @@ describe('HeaderInMobile', () => {
     fireEvent.click(screen.getByText(/share\.chat\.viewChatSettings/i))
 
     // Check if chat settings overlay is open
-    // Check if chat settings overlay is open
-    expect(screen.getByTestId('mobile-chat-settings-overlay'))!.toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.getByTestId('mobile-chat-settings-overlay')).toBeInTheDocument()
+    })
 
     // Close chat settings via overlay click
     fireEvent.click(screen.getByTestId('mobile-chat-settings-overlay'))
@@ -236,7 +237,9 @@ describe('HeaderInMobile', () => {
     })
     fireEvent.click(screen.getByText(/share\.chat\.viewChatSettings/i))
 
-    expect(screen.getByTestId('mobile-chat-settings-overlay'))!.toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.getByTestId('mobile-chat-settings-overlay')).toBeInTheDocument()
+    })
 
     // Click inside the settings panel (find the title)
     const settingsTitle = screen.getByText(/share\.chat\.chatSettingsTitle/i)
@@ -282,7 +285,9 @@ describe('HeaderInMobile', () => {
     })
     fireEvent.click(screen.getByText(/share\.chat\.resetChat/i))
 
-    expect(handleNewConversation).toHaveBeenCalled()
+    await waitFor(() => {
+      expect(handleNewConversation).toHaveBeenCalled()
+    })
   })
 
   it('should handle pin conversation', async () => {
@@ -348,8 +353,7 @@ describe('HeaderInMobile', () => {
     fireEvent.click(screen.getByText(/explore\.sidebar\.action\.rename/i))
 
     // RenameModal should be visible
-    // RenameModal should be visible
-    expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+    expect(await screen.findByRole('dialog')).toBeInTheDocument()
     const input = screen.getByDisplayValue('Conv 1')
     fireEvent.change(input, { target: { value: 'New Name' } })
 
@@ -377,8 +381,7 @@ describe('HeaderInMobile', () => {
     fireEvent.click(screen.getByText(/explore\.sidebar\.action\.rename/i))
 
     // RenameModal should be visible
-    // RenameModal should be visible
-    expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+    expect(await screen.findByRole('dialog')).toBeInTheDocument()
 
     // Click cancel button
     const cancelButton = screen.getByRole('button', { name: /common\.operation\.cancel/i })
@@ -410,8 +413,7 @@ describe('HeaderInMobile', () => {
     fireEvent.click(screen.getByText(/explore\.sidebar\.action\.rename/i))
 
     // RenameModal should be visible with loading state
-    // RenameModal should be visible with loading state
-    expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+    expect(await screen.findByRole('dialog')).toBeInTheDocument()
   })
 
   it('should handle delete conversation', async () => {
diff --git a/web/app/components/base/chat/chat-with-history/header/__tests__/mobile-operation-dropdown.spec.tsx b/web/app/components/base/chat/chat-with-history/header/__tests__/mobile-operation-dropdown.spec.tsx
index 295bebecac..525f9b89a5 100644
--- a/web/app/components/base/chat/chat-with-history/header/__tests__/mobile-operation-dropdown.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/__tests__/mobile-operation-dropdown.spec.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -53,11 +53,16 @@ describe('MobileOperationDropdown Component', () => {
 
     // Reset Chat
     await user.click(screen.getByText('share.chat.resetChat'))
-    expect(defaultProps.handleResetChat).toHaveBeenCalledTimes(1)
+    await waitFor(() => {
+      expect(defaultProps.handleResetChat).toHaveBeenCalledTimes(1)
+    })
 
+    await user.click(screen.getByRole('button'))
     // View Chat Settings
     await user.click(screen.getByText('share.chat.viewChatSettings'))
-    expect(defaultProps.handleViewChatSettings).toHaveBeenCalledTimes(1)
+    await waitFor(() => {
+      expect(defaultProps.handleViewChatSettings).toHaveBeenCalledTimes(1)
+    })
   })
 
   it('applies hover state to ActionButton when open', async () => {
@@ -72,4 +77,16 @@ describe('MobileOperationDropdown Component', () => {
     await user.click(trigger)
     expect(trigger).toHaveClass('action-btn-hover')
   })
+
+  it('closes the menu after clicking an action', async () => {
+    const user = userEvent.setup()
+    render(<MobileOperationDropdown {...defaultProps} />)
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getByText('share.chat.resetChat'))
+
+    await waitFor(() => {
+      expect(screen.queryByText('share.chat.resetChat')).not.toBeInTheDocument()
+    })
+  })
 })
diff --git a/web/app/components/base/chat/chat-with-history/header/__tests__/operation.spec.tsx b/web/app/components/base/chat/chat-with-history/header/__tests__/operation.spec.tsx
index 454f20066e..294d5eebc5 100644
--- a/web/app/components/base/chat/chat-with-history/header/__tests__/operation.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/__tests__/operation.spec.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -74,12 +74,18 @@ describe('Operation Component', () => {
     expect(defaultProps.togglePin).toHaveBeenCalledTimes(1)
 
     // Rename
+    await user.click(screen.getByText('Chat Title'))
     await user.click(screen.getByText('explore.sidebar.action.rename'))
-    expect(defaultProps.onRenameConversation).toHaveBeenCalledTimes(1)
+    await waitFor(() => {
+      expect(defaultProps.onRenameConversation).toHaveBeenCalledTimes(1)
+    })
 
     // Delete
+    await user.click(screen.getByText('Chat Title'))
     await user.click(screen.getByText('explore.sidebar.action.delete'))
-    expect(defaultProps.onDelete).toHaveBeenCalledTimes(1)
+    await waitFor(() => {
+      expect(defaultProps.onDelete).toHaveBeenCalledTimes(1)
+    })
   })
 
   it('applies hover background when open', async () => {
diff --git a/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx b/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
index 43cf25908c..5d80db7ac3 100644
--- a/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
@@ -1,7 +1,12 @@
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 
 type Props = {
   handleResetChat: () => void
@@ -16,40 +21,45 @@ const MobileOperationDropdown = ({
 }: Props) => {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
+  const handleMenuAction = useCallback((callback: () => void) => {
+    setOpen(false)
+    queueMicrotask(callback)
+  }, [])
 
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-end"
-      offset={{
-        mainAxis: 4,
-        crossAxis: -4,
-      }}
     >
-      <PortalToFollowElemTrigger
-        onClick={() => setOpen(v => !v)}
+      <DropdownMenuTrigger
+        render={<div />}
         data-testid="mobile-more-btn"
       >
         <ActionButton size="l" state={open ? ActionButtonState.Hover : ActionButtonState.Default}>
           <div className="i-ri-more-fill h-[18px] w-[18px]" />
         </ActionButton>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-40">
-        <div
-          className="min-w-[160px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-xs"
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="min-w-[160px]"
+      >
+        <DropdownMenuItem
+          className="system-md-regular"
+          onClick={() => handleMenuAction(handleResetChat)}
         >
-          <div className="flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover" onClick={handleResetChat}>
-            <span className="grow">{t('chat.resetChat', { ns: 'share' })}</span>
-          </div>
-          {!hideViewChatSettings && (
-            <div className="flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover" onClick={handleViewChatSettings}>
-              <span className="grow">{t('chat.viewChatSettings', { ns: 'share' })}</span>
-            </div>
-          )}
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+          <span className="grow">{t('chat.resetChat', { ns: 'share' })}</span>
+        </DropdownMenuItem>
+        {!hideViewChatSettings && (
+          <DropdownMenuItem
+            className="system-md-regular"
+            onClick={() => handleMenuAction(handleViewChatSettings)}
+          >
+            <span className="grow">{t('chat.viewChatSettings', { ns: 'share' })}</span>
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
 
   )
 }
diff --git a/web/app/components/base/chat/chat-with-history/header/operation.tsx b/web/app/components/base/chat/chat-with-history/header/operation.tsx
index d61af1f6a1..d439a43c1f 100644
--- a/web/app/components/base/chat/chat-with-history/header/operation.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/operation.tsx
@@ -1,14 +1,16 @@
 'use client'
-import type { Placement } from '@floating-ui/react'
 import type { FC } from 'react'
+import type { Placement } from '@/app/components/base/ui/placement'
 import { cn } from '@langgenius/dify-ui/cn'
-import {
-  RiArrowDownSLine,
-} from '@remixicon/react'
 import * as React from 'react'
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 
 type Props = {
   title: string
@@ -33,42 +35,51 @@ const Operation: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
+  const handleDeferredAction = useCallback((action: () => void) => {
+    setOpen(false)
+    queueMicrotask(action)
+  }, [])
 
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement={placement}
-      offset={4}
     >
-      <PortalToFollowElemTrigger
-        onClick={() => setOpen(v => !v)}
+      <DropdownMenuTrigger
+        render={<div />}
       >
         <div className={cn('flex cursor-pointer items-center rounded-lg p-1.5 pl-2 text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
           <div className="system-md-semibold">{title}</div>
-          <RiArrowDownSLine className="h-4 w-4" />
+          <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4" />
         </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-50">
-        <div
-          className="min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-xs"
-        >
-          <div className={cn('flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover')} onClick={togglePin}>
-            <span className="grow">{isPinned ? t('sidebar.action.unpin', { ns: 'explore' }) : t('sidebar.action.pin', { ns: 'explore' })}</span>
-          </div>
-          {isShowRenameConversation && (
-            <div className={cn('flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover')} onClick={onRenameConversation}>
-              <span className="grow">{t('sidebar.action.rename', { ns: 'explore' })}</span>
-            </div>
-          )}
-          {isShowDelete && (
-            <div className={cn('group flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive')} onClick={onDelete}>
-              <span className="grow">{t('sidebar.action.delete', { ns: 'explore' })}</span>
-            </div>
-          )}
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement={placement}
+        sideOffset={4}
+        popupClassName="min-w-[120px]"
+      >
+        <DropdownMenuItem className="system-md-regular" onClick={togglePin}>
+          <span className="grow">{isPinned ? t('sidebar.action.unpin', { ns: 'explore' }) : t('sidebar.action.pin', { ns: 'explore' })}</span>
+        </DropdownMenuItem>
+        {isShowRenameConversation && (
+          <DropdownMenuItem
+            className="system-md-regular"
+            onClick={() => onRenameConversation && handleDeferredAction(onRenameConversation)}
+          >
+            <span className="grow">{t('sidebar.action.rename', { ns: 'explore' })}</span>
+          </DropdownMenuItem>
+        )}
+        {isShowDelete && (
+          <DropdownMenuItem
+            variant="destructive"
+            className="system-md-regular"
+            onClick={() => handleDeferredAction(onDelete)}
+          >
+            <span className="grow">{t('sidebar.action.delete', { ns: 'explore' })}</span>
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 export default React.memo(Operation)
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/operation.spec.tsx b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/operation.spec.tsx
index e46b54872e..5aa8da7965 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/operation.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/operation.spec.tsx
@@ -1,16 +1,9 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import Operation from '../operation'
 
-// Mock PortalToFollowElem components to render children in place
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => <div data-open={open}>{children}</div>,
-  PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => <div onClick={onClick}>{children}</div>,
-  PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => <div data-testid="portal-content">{children}</div>,
-}))
-
 describe('Operation', () => {
   const defaultProps = {
     isActive: false,
@@ -72,7 +65,9 @@ describe('Operation', () => {
     await user.click(screen.getByRole('button'))
     await user.click(screen.getByText('explore.sidebar.action.rename'))
 
-    expect(defaultProps.onRenameConversation).toHaveBeenCalled()
+    await waitFor(() => {
+      expect(defaultProps.onRenameConversation).toHaveBeenCalled()
+    })
   })
 
   it('should call onDelete when delete is clicked', async () => {
@@ -82,7 +77,9 @@ describe('Operation', () => {
     await user.click(screen.getByRole('button'))
     await user.click(screen.getByText('explore.sidebar.action.delete'))
 
-    expect(defaultProps.onDelete).toHaveBeenCalled()
+    await waitFor(() => {
+      expect(defaultProps.onDelete).toHaveBeenCalled()
+    })
   })
 
   it('should respect visibility props', async () => {
@@ -108,8 +105,7 @@ describe('Operation', () => {
 
     await user.click(screen.getByRole('button'))
 
-    const portalContent = screen.getByTestId('portal-content')
-    expect(portalContent).toBeInTheDocument()
+    expect(screen.getByText('explore.sidebar.action.pin')).toBeInTheDocument()
   })
 
   it('should close dropdown when item hovering stops', async () => {
@@ -120,5 +116,60 @@ describe('Operation', () => {
     expect(screen.getByText('explore.sidebar.action.pin')).toBeInTheDocument()
 
     rerender(<Operation {...defaultProps} isItemHovering={false} />)
+
+    await waitFor(() => {
+      expect(screen.queryByText('explore.sidebar.action.pin')).not.toBeInTheDocument()
+    })
+  })
+
+  it('should keep the trigger mounted while visually hidden', () => {
+    render(<Operation {...defaultProps} isItemHovering={false} />)
+
+    const trigger = screen.getByRole('button')
+    expect(trigger).toHaveClass('pointer-events-none')
+    expect(trigger).toHaveClass('opacity-0')
+  })
+
+  it('should safely ignore rename clicks when callback is missing', async () => {
+    const user = userEvent.setup()
+    render(<Operation {...defaultProps} onRenameConversation={undefined} />)
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getByText('explore.sidebar.action.rename'))
+
+    await waitFor(() => {
+      expect(screen.queryByText('explore.sidebar.action.rename')).not.toBeInTheDocument()
+    })
+  })
+
+  it('should not bubble trigger clicks to the parent container', async () => {
+    const user = userEvent.setup()
+    const parentClick = vi.fn()
+
+    render(
+      <div onClick={parentClick}>
+        <Operation {...defaultProps} />
+      </div>,
+    )
+
+    await user.click(screen.getByRole('button'))
+
+    expect(parentClick).not.toHaveBeenCalled()
+  })
+
+  it('should not bubble popup clicks to the parent container', async () => {
+    const user = userEvent.setup()
+    const parentClick = vi.fn()
+
+    render(
+      <div onClick={parentClick}>
+        <Operation {...defaultProps} isItemHovering={true} />
+      </div>,
+    )
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getByRole('menu'))
+
+    expect(parentClick).not.toHaveBeenCalled()
   })
 })
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx b/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
index 18ff3e4d62..adda03fb55 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
@@ -1,19 +1,17 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
-import {
-  RiDeleteBinLine,
-  RiEditLine,
-  RiMoreFill,
-  RiPushpinLine,
-  RiUnpinLine,
-} from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 
 type Props = {
   isActive?: boolean
@@ -38,24 +36,29 @@ const Operation: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
-  const ref = useRef(null)
   const [isHovering, { setTrue: setIsHovering, setFalse: setNotHovering }] = useBoolean(false)
   useEffect(() => {
     if (!isItemHovering && !isHovering)
       setOpen(false)
   }, [isItemHovering, isHovering])
+  const handleDeferredAction = useCallback((action?: () => void) => {
+    if (!action)
+      return
+    setOpen(false)
+    queueMicrotask(action)
+  }, [])
   return (
-    <PortalToFollowElem
+    <DropdownMenu
+      modal={false}
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-end"
-      offset={4}
     >
-      <PortalToFollowElemTrigger
-        onClick={() => setOpen(v => !v)}
+      <DropdownMenuTrigger
+        render={<div />}
+        onClick={e => e.stopPropagation()}
       >
         <ActionButton
-          className={cn((isItemHovering || open) ? 'opacity-100' : 'opacity-0')}
+          className={cn((isItemHovering || open) ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0')}
           state={
             isActive
               ? ActionButtonState.Active
@@ -64,39 +67,57 @@ const Operation: FC<Props> = ({
                 : ActionButtonState.Default
           }
         >
-          <RiMoreFill className="h-4 w-4" />
+          <span aria-hidden className="i-ri-more-fill h-4 w-4" />
         </ActionButton>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-50">
-        <div
-          ref={ref}
-          className="min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-xs"
-          onMouseEnter={setIsHovering}
-          onMouseLeave={setNotHovering}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="min-w-[120px]"
+        popupProps={{
+          onMouseEnter: setIsHovering,
+          onMouseLeave: setNotHovering,
+          onClick: e => e.stopPropagation(),
+        }}
+      >
+        <DropdownMenuItem
+          className="gap-2 px-2 system-md-regular"
           onClick={(e) => {
             e.stopPropagation()
+            togglePin()
           }}
         >
-          <div className={cn('flex cursor-pointer items-center space-x-1 rounded-lg px-2 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover')} onClick={togglePin}>
-            {isPinned && <RiUnpinLine className="h-4 w-4 shrink-0 text-text-tertiary" />}
-            {!isPinned && <RiPushpinLine className="h-4 w-4 shrink-0 text-text-tertiary" />}
-            <span className="grow">{isPinned ? t('sidebar.action.unpin', { ns: 'explore' }) : t('sidebar.action.pin', { ns: 'explore' })}</span>
-          </div>
-          {isShowRenameConversation && (
-            <div className={cn('flex cursor-pointer items-center space-x-1 rounded-lg px-2 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover')} onClick={onRenameConversation}>
-              <RiEditLine className="h-4 w-4 shrink-0 text-text-tertiary" />
-              <span className="grow">{t('sidebar.action.rename', { ns: 'explore' })}</span>
-            </div>
-          )}
-          {isShowDelete && (
-            <div className={cn('group flex cursor-pointer items-center space-x-1 rounded-lg px-2 py-1.5 system-md-regular text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive')} onClick={onDelete}>
-              <RiDeleteBinLine className={cn('h-4 w-4 shrink-0 text-text-tertiary group-hover:text-text-destructive')} />
-              <span className="grow">{t('sidebar.action.delete', { ns: 'explore' })}</span>
-            </div>
-          )}
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+          {isPinned && <span aria-hidden className="i-ri-unpin-line h-4 w-4 shrink-0 text-text-tertiary" />}
+          {!isPinned && <span aria-hidden className="i-ri-pushpin-line h-4 w-4 shrink-0 text-text-tertiary" />}
+          <span className="grow">{isPinned ? t('sidebar.action.unpin', { ns: 'explore' }) : t('sidebar.action.pin', { ns: 'explore' })}</span>
+        </DropdownMenuItem>
+        {isShowRenameConversation && (
+          <DropdownMenuItem
+            className="gap-2 px-2 system-md-regular"
+            onClick={(e) => {
+              e.stopPropagation()
+              handleDeferredAction(onRenameConversation)
+            }}
+          >
+            <span aria-hidden className="i-ri-edit-line h-4 w-4 shrink-0 text-text-tertiary" />
+            <span className="grow">{t('sidebar.action.rename', { ns: 'explore' })}</span>
+          </DropdownMenuItem>
+        )}
+        {isShowDelete && (
+          <DropdownMenuItem
+            variant="destructive"
+            className="gap-2 px-2 system-md-regular"
+            onClick={(e) => {
+              e.stopPropagation()
+              handleDeferredAction(onDelete)
+            }}
+          >
+            <span aria-hidden className="i-ri-delete-bin-line h-4 w-4 shrink-0" />
+            <span className="grow">{t('sidebar.action.delete', { ns: 'explore' })}</span>
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 export default React.memo(Operation)
diff --git a/web/app/components/base/dropdown/__tests__/index.spec.tsx b/web/app/components/base/dropdown/__tests__/index.spec.tsx
deleted file mode 100644
index 9820554e3d..0000000000
--- a/web/app/components/base/dropdown/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
-import Dropdown from '../index'
-
-describe('Dropdown Component', () => {
-  const mockItems = [
-    { value: 'option1', text: 'Option 1' },
-    { value: 'option2', text: 'Option 2' },
-  ]
-  const mockSecondItems = [
-    { value: 'option3', text: 'Option 3' },
-  ]
-  const onSelect = vi.fn()
-
-  afterEach(() => {
-    cleanup()
-    vi.clearAllMocks()
-  })
-
-  it('renders default trigger properly', () => {
-    const { container } = render(
-      <Dropdown items={mockItems} onSelect={onSelect} />,
-    )
-    const trigger = container.querySelector('button')
-    expect(trigger).toBeInTheDocument()
-  })
-
-  it('renders custom trigger when provided', () => {
-    render(
-      <Dropdown
-        items={mockItems}
-        onSelect={onSelect}
-        renderTrigger={open => <button data-testid="custom-trigger">{open ? 'Open' : 'Closed'}</button>}
-      />,
-    )
-    const trigger = screen.getByTestId('custom-trigger')
-    expect(trigger).toBeInTheDocument()
-    expect(trigger).toHaveTextContent('Closed')
-  })
-
-  it('opens dropdown menu on trigger click and shows items', async () => {
-    render(
-      <Dropdown items={mockItems} onSelect={onSelect} />,
-    )
-    const trigger = screen.getByRole('button')
-
-    await act(async () => {
-      fireEvent.click(trigger)
-    })
-
-    // Dropdown items are rendered in a portal (document.body)
-    expect(screen.getByText('Option 1')).toBeInTheDocument()
-    expect(screen.getByText('Option 2')).toBeInTheDocument()
-  })
-
-  it('calls onSelect and closes dropdown when an item is clicked', async () => {
-    render(
-      <Dropdown items={mockItems} onSelect={onSelect} />,
-    )
-    const trigger = screen.getByRole('button')
-
-    await act(async () => {
-      fireEvent.click(trigger)
-    })
-
-    const option1 = screen.getByText('Option 1')
-    await act(async () => {
-      fireEvent.click(option1)
-    })
-
-    expect(onSelect).toHaveBeenCalledWith(mockItems[0])
-    expect(screen.queryByText('Option 1')).not.toBeInTheDocument()
-  })
-
-  it('calls onSelect and closes dropdown when a second item is clicked', async () => {
-    render(
-      <Dropdown items={mockItems} secondItems={mockSecondItems} onSelect={onSelect} />,
-    )
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button'))
-    })
-
-    const option3 = screen.getByText('Option 3')
-    await act(async () => {
-      fireEvent.click(option3)
-    })
-    expect(onSelect).toHaveBeenCalledWith(mockSecondItems[0])
-    expect(screen.queryByText('Option 3')).not.toBeInTheDocument()
-  })
-
-  it('renders second items and divider when provided', async () => {
-    render(
-      <Dropdown
-        items={mockItems}
-        secondItems={mockSecondItems}
-        onSelect={onSelect}
-      />,
-    )
-    const trigger = screen.getByRole('button')
-
-    await act(async () => {
-      fireEvent.click(trigger)
-    })
-
-    expect(screen.getByText('Option 1')).toBeInTheDocument()
-    expect(screen.getByText('Option 3')).toBeInTheDocument()
-
-    // Check for divider (h-px bg-divider-regular)
-    const divider = document.body.querySelector('.bg-divider-regular.h-px')
-    expect(divider).toBeInTheDocument()
-  })
-
-  it('applies custom classNames', async () => {
-    const popupClass = 'custom-popup'
-    const itemClass = 'custom-item'
-    const secondItemClass = 'custom-second-item'
-
-    render(
-      <Dropdown
-        items={mockItems}
-        secondItems={mockSecondItems}
-        onSelect={onSelect}
-        popupClassName={popupClass}
-        itemClassName={itemClass}
-        secondItemClassName={secondItemClass}
-      />,
-    )
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button'))
-    })
-
-    const popup = document.body.querySelector(`.${popupClass}`)
-    expect(popup).toBeInTheDocument()
-
-    const items = screen.getAllByText('Option 1')
-    expect(items[0]).toHaveClass(itemClass)
-
-    const secondItems = screen.getAllByText('Option 3')
-    expect(secondItems[0]).toHaveClass(secondItemClass)
-  })
-
-  it('applies open class to trigger when menu is open', async () => {
-    render(<Dropdown items={mockItems} onSelect={onSelect} />)
-    const trigger = screen.getByRole('button')
-    await act(async () => {
-      fireEvent.click(trigger)
-    })
-    expect(trigger).toHaveClass('bg-divider-regular')
-  })
-
-  it('handles JSX elements as item text', async () => {
-    const itemsWithJSX = [
-      { value: 'jsx', text: <span data-testid="jsx-item">JSX Content</span> },
-    ]
-    render(
-      <Dropdown items={itemsWithJSX} onSelect={onSelect} />,
-    )
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button'))
-    })
-
-    expect(screen.getByTestId('jsx-item')).toBeInTheDocument()
-    expect(screen.getByText('JSX Content')).toBeInTheDocument()
-  })
-
-  it('does not render items section if items list is empty', async () => {
-    render(
-      <Dropdown items={[]} secondItems={mockSecondItems} onSelect={onSelect} />,
-    )
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button'))
-    })
-
-    const p1Divs = document.body.querySelectorAll('.p-1')
-    expect(p1Divs.length).toBe(1)
-    expect(screen.queryByText('Option 1')).not.toBeInTheDocument()
-    expect(screen.getByText('Option 3')).toBeInTheDocument()
-  })
-
-  it('does not render divider if only one section is provided', async () => {
-    const { rerender } = render(
-      <Dropdown items={mockItems} onSelect={onSelect} />,
-    )
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button'))
-    })
-    expect(document.body.querySelector('.bg-divider-regular.h-px')).not.toBeInTheDocument()
-
-    await act(async () => {
-      rerender(
-        <Dropdown items={[]} secondItems={mockSecondItems} onSelect={onSelect} />,
-      )
-    })
-    expect(document.body.querySelector('.bg-divider-regular.h-px')).not.toBeInTheDocument()
-  })
-
-  it('renders nothing if both item lists are empty', async () => {
-    render(<Dropdown items={[]} secondItems={[]} onSelect={onSelect} />)
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button'))
-    })
-    const popup = document.body.querySelector('.bg-components-panel-bg')
-    expect(popup?.children.length).toBe(0)
-  })
-
-  it('passes triggerProps to ActionButton and applies custom className', () => {
-    render(
-      <Dropdown
-        items={mockItems}
-        onSelect={onSelect}
-        triggerProps={{
-          'disabled': true,
-          'aria-label': 'dropdown-trigger',
-          'className': 'custom-trigger-class',
-        }}
-      />,
-    )
-    const trigger = screen.getByLabelText('dropdown-trigger')
-    expect(trigger).toBeDisabled()
-    expect(trigger).toHaveClass('custom-trigger-class')
-  })
-})
diff --git a/web/app/components/base/dropdown/index.stories.tsx b/web/app/components/base/dropdown/index.stories.tsx
deleted file mode 100644
index 7cb7f820f6..0000000000
--- a/web/app/components/base/dropdown/index.stories.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import type { Item } from '.'
-import { useState } from 'react'
-import { fn } from 'storybook/test'
-import Dropdown from '.'
-
-const PRIMARY_ITEMS: Item[] = [
-  { value: 'rename', text: 'Rename' },
-  { value: 'duplicate', text: 'Duplicate' },
-]
-
-const SECONDARY_ITEMS: Item[] = [
-  { value: 'archive', text: <span className="text-text-destructive">Archive</span> },
-  { value: 'delete', text: <span className="text-text-destructive">Delete</span> },
-]
-
-const meta = {
-  title: 'Base/Navigation/Dropdown',
-  component: Dropdown,
-  parameters: {
-    docs: {
-      description: {
-        component: 'Small contextual menu with optional destructive section. Uses portal positioning utilities for precise placement.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  args: {
-    items: PRIMARY_ITEMS,
-    secondItems: SECONDARY_ITEMS,
-  },
-} satisfies Meta<typeof Dropdown>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const DropdownDemo = (props: React.ComponentProps<typeof Dropdown>) => {
-  const [lastAction, setLastAction] = useState<string>('None')
-
-  return (
-    <div className="flex h-[200px] flex-col items-center justify-center gap-4">
-      <Dropdown
-        {...props}
-        onSelect={(item) => {
-          setLastAction(String(item.value))
-          props.onSelect?.(item)
-        }}
-      />
-      <div className="rounded-lg border border-divider-subtle bg-components-panel-bg px-3 py-2 text-xs text-text-secondary">
-        Last action:
-        {' '}
-        <span className="font-mono text-text-primary">{lastAction}</span>
-      </div>
-    </div>
-  )
-}
-
-export const Playground: Story = {
-  render: args => <DropdownDemo {...args} />,
-  args: {
-    items: PRIMARY_ITEMS,
-    secondItems: SECONDARY_ITEMS,
-    onSelect: fn(),
-  },
-}
-
-export const CustomTrigger: Story = {
-  render: args => (
-    <DropdownDemo
-      {...args}
-      renderTrigger={open => (
-        <button
-          type="button"
-          className="inline-flex items-center gap-1 rounded-md border border-divider-subtle px-3 py-1.5 text-sm text-text-secondary hover:bg-state-base-hover-alt"
-        >
-          Actions
-          <span className={`transition-transform ${open ? 'rotate-180' : ''}`}>
-            ▾
-          </span>
-        </button>
-      )}
-    />
-  ),
-  args: {
-    items: PRIMARY_ITEMS,
-    onSelect: fn(),
-  },
-}
diff --git a/web/app/components/base/dropdown/index.tsx b/web/app/components/base/dropdown/index.tsx
deleted file mode 100644
index f9a19f34ea..0000000000
--- a/web/app/components/base/dropdown/index.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import type { FC } from 'react'
-import type { ActionButtonProps } from '@/app/components/base/action-button'
-import { cn } from '@langgenius/dify-ui/cn'
-import {
-  RiMoreFill,
-} from '@remixicon/react'
-import { useState } from 'react'
-import ActionButton from '@/app/components/base/action-button'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
-
-export type Item = {
-  value: string | number
-  text: string | React.JSX.Element
-}
-type DropdownProps = {
-  items: Item[]
-  secondItems?: Item[]
-  onSelect: (item: Item) => void
-  renderTrigger?: (open: boolean) => React.ReactNode
-  triggerProps?: ActionButtonProps
-  popupClassName?: string
-  itemClassName?: string
-  secondItemClassName?: string
-}
-const Dropdown: FC<DropdownProps> = ({
-  items,
-  onSelect,
-  secondItems,
-  renderTrigger,
-  triggerProps,
-  popupClassName,
-  itemClassName,
-  secondItemClassName,
-}) => {
-  const [open, setOpen] = useState(false)
-
-  const handleSelect = (item: Item) => {
-    setOpen(false)
-    onSelect(item)
-  }
-
-  return (
-    <PortalToFollowElem
-      open={open}
-      onOpenChange={setOpen}
-      placement="bottom-end"
-    >
-      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-        {
-          renderTrigger
-            ? renderTrigger(open)
-            : (
-                <ActionButton
-                  {...triggerProps}
-                  className={cn(
-                    open && 'bg-divider-regular',
-                    triggerProps?.className,
-                  )}
-                >
-                  <RiMoreFill className="h-4 w-4 text-text-tertiary" />
-                </ActionButton>
-              )
-        }
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className={popupClassName}>
-        <div className="rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg text-sm text-text-secondary shadow-lg">
-          {
-            !!items.length && (
-              <div className="p-1">
-                {
-                  items.map(item => (
-                    <div
-                      key={item.value}
-                      className={cn(
-                        'flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-components-panel-on-panel-item-bg-hover',
-                        itemClassName,
-                      )}
-                      onClick={() => handleSelect(item)}
-                    >
-                      {item.text}
-                    </div>
-                  ))
-                }
-              </div>
-            )
-          }
-          {
-            (!!items.length && !!secondItems?.length) && (
-              <div className="h-px bg-divider-regular" />
-            )
-          }
-          {
-            !!secondItems?.length && (
-              <div className="p-1">
-                {
-                  secondItems.map(item => (
-                    <div
-                      key={item.value}
-                      className={cn(
-                        'flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-components-panel-on-panel-item-bg-hover',
-                        secondItemClassName,
-                      )}
-                      onClick={() => handleSelect(item)}
-                    >
-                      {item.text}
-                    </div>
-                  ))
-                }
-              </div>
-            )
-          }
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
-  )
-}
-
-export default Dropdown
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/__tests__/index.spec.tsx
index 24a241ff93..906a9e01e0 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/__tests__/index.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
 import Breadcrumbs from '../index'
 
@@ -44,6 +44,16 @@ const resetMockStoreState = () => {
   mockStoreState.setBucket = vi.fn()
 }
 
+const getDropdownTrigger = () => {
+  return document.querySelector('[aria-haspopup="menu"]') as HTMLElement | null
+}
+
+const openCollapsedBreadcrumbDropdown = () => {
+  const dropdownTrigger = getDropdownTrigger()
+  expect(dropdownTrigger).toBeInTheDocument()
+  fireEvent.click(dropdownTrigger as HTMLElement)
+}
+
 describe('Breadcrumbs', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -437,15 +447,11 @@ describe('Breadcrumbs', () => {
         render(<Breadcrumbs {...props} />)
 
         // Act - Click on dropdown trigger (the ... button)
-        const dropdownTrigger = screen.getAllByRole('button').find(btn => btn.querySelector('svg'))
-        if (dropdownTrigger)
-          fireEvent.click(dropdownTrigger)
+        openCollapsedBreadcrumbDropdown()
 
         // Assert - Collapsed breadcrumbs should be visible
-        await waitFor(() => {
-          expect(screen.getByText('folder3'))!.toBeInTheDocument()
-          expect(screen.getByText('folder4'))!.toBeInTheDocument()
-        })
+        expect(await screen.findByText('folder3')).toBeInTheDocument()
+        expect(await screen.findByText('folder4')).toBeInTheDocument()
       })
     })
   })
@@ -615,9 +621,7 @@ describe('Breadcrumbs', () => {
 
         // Assert - Should collapse because 3 > 2
         // Dropdown should be present
-        const buttons = screen.getAllByRole('button')
-        const hasDropdownTrigger = buttons.some(btn => btn.querySelector('svg'))
-        expect(hasDropdownTrigger).toBe(true)
+        expect(getDropdownTrigger()).toBeInTheDocument()
       })
 
       it('should use displayBreadcrumbNum=3 when isInPipeline is false', () => {
@@ -647,9 +651,7 @@ describe('Breadcrumbs', () => {
         render(<Breadcrumbs {...props} />)
 
         // Assert - Should collapse because 3 > 2
-        const buttons = screen.getAllByRole('button')
-        const hasDropdownTrigger = buttons.some(btn => btn.querySelector('svg'))
-        expect(hasDropdownTrigger).toBe(true)
+        expect(getDropdownTrigger()).toBeInTheDocument()
       })
     })
   })
@@ -722,23 +724,16 @@ describe('Breadcrumbs', () => {
         render(<Breadcrumbs {...props} />)
 
         // Act - Click dropdown to see collapsed items
-        const dropdownTrigger = screen.getAllByRole('button').find(btn => btn.querySelector('svg'))
-        if (dropdownTrigger)
-          fireEvent.click(dropdownTrigger)
+        openCollapsedBreadcrumbDropdown()
 
         // prefixBreadcrumbs = ['f1', 'f2']
         // collapsedBreadcrumbs = ['f3', 'f4']
         // lastBreadcrumb = 'f5'
-        // prefixBreadcrumbs = ['f1', 'f2']
-        // collapsedBreadcrumbs = ['f3', 'f4']
-        // lastBreadcrumb = 'f5'
-        expect(screen.getByText('f1'))!.toBeInTheDocument()
-        expect(screen.getByText('f2'))!.toBeInTheDocument()
-        expect(screen.getByText('f5'))!.toBeInTheDocument()
-        await waitFor(() => {
-          expect(screen.getByText('f3'))!.toBeInTheDocument()
-          expect(screen.getByText('f4'))!.toBeInTheDocument()
-        })
+        expect(screen.getByText('f1')).toBeInTheDocument()
+        expect(screen.getByText('f2')).toBeInTheDocument()
+        expect(screen.getByText('f5')).toBeInTheDocument()
+        expect(await screen.findByText('f3')).toBeInTheDocument()
+        expect(await screen.findByText('f4')).toBeInTheDocument()
       })
 
       it('should not collapse when breadcrumbs.length <= displayBreadcrumbNum', () => {
@@ -883,15 +878,8 @@ describe('Breadcrumbs', () => {
         render(<Breadcrumbs {...props} />)
 
         // Act - Open dropdown and click on collapsed breadcrumb (f3, index=2)
-        const dropdownTrigger = screen.getAllByRole('button').find(btn => btn.querySelector('svg'))
-        if (dropdownTrigger)
-          fireEvent.click(dropdownTrigger)
-
-        await waitFor(() => {
-          expect(screen.getByText('f3'))!.toBeInTheDocument()
-        })
-
-        fireEvent.click(screen.getByText('f3'))
+        openCollapsedBreadcrumbDropdown()
+        fireEvent.click(await screen.findByText('f3'))
 
         // Assert - Should slice to index 2 + 1 = 3
         expect(mockStoreState.setBreadcrumbs).toHaveBeenCalledWith(['f1', 'f2', 'f3'])
@@ -954,18 +942,13 @@ describe('Breadcrumbs', () => {
       render(<Breadcrumbs {...props} />)
 
       // Act - Open dropdown
-      const dropdownTrigger = screen.getAllByRole('button').find(btn => btn.querySelector('svg'))
-      if (dropdownTrigger)
-        fireEvent.click(dropdownTrigger)
+      openCollapsedBreadcrumbDropdown()
 
       // Assert - First, last, and collapsed should be accessible
-      // Assert - First, last, and collapsed should be accessible
-      expect(screen.getByText('folder-0'))!.toBeInTheDocument()
-      expect(screen.getByText('folder-1'))!.toBeInTheDocument()
-      expect(screen.getByText('folder-19'))!.toBeInTheDocument()
-      await waitFor(() => {
-        expect(screen.getByText('folder-2'))!.toBeInTheDocument()
-      })
+      expect(screen.getByText('folder-0')).toBeInTheDocument()
+      expect(screen.getByText('folder-1')).toBeInTheDocument()
+      expect(screen.getByText('folder-19')).toBeInTheDocument()
+      expect(await screen.findByText('folder-2')).toBeInTheDocument()
     })
 
     it('should handle empty bucket string', () => {
@@ -1026,9 +1009,7 @@ describe('Breadcrumbs', () => {
       render(<Breadcrumbs {...props} />)
 
       // Assert - Should collapse because breadcrumbs.length > expectedNum
-      const buttons = screen.getAllByRole('button')
-      const hasDropdownTrigger = buttons.some(btn => btn.querySelector('svg'))
-      expect(hasDropdownTrigger).toBe(true)
+      expect(getDropdownTrigger()).toBeInTheDocument()
     })
   })
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/__tests__/index.spec.tsx
index f7112c243b..d57e8340e9 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/__tests__/index.spec.tsx
@@ -32,10 +32,10 @@ describe('Dropdown', () => {
 
       const { container } = render(<Dropdown {...props} />)
 
-      // Assert - Button should have RiMoreFill icon (rendered as svg)
+      // Assert - Button should have the more icon
       const button = screen.getByRole('button')
-      expect(button)!.toBeInTheDocument()
-      expect(container.querySelector('svg'))!.toBeInTheDocument()
+      expect(button).toBeInTheDocument()
+      expect(container.querySelector('.i-ri-more-fill')).toBeInTheDocument()
     })
 
     it('should render separator after dropdown', () => {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx
index 7178b45b34..c6a90824ab 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx
@@ -1,12 +1,11 @@
 import { cn } from '@langgenius/dify-ui/cn'
-import { RiMoreFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import Menu from './menu'
 
 type DropdownProps = {
@@ -22,26 +21,17 @@ const Dropdown = ({
 }: DropdownProps) => {
   const [open, setOpen] = useState(false)
 
-  const handleTrigger = useCallback(() => {
-    setOpen(prev => !prev)
-  }, [])
-
   const handleBreadCrumbClick = useCallback((index: number) => {
     onBreadcrumbClick(index)
     setOpen(false)
   }, [onBreadcrumbClick])
 
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-start"
-      offset={{
-        mainAxis: 4,
-        crossAxis: -13,
-      }}
     >
-      <PortalToFollowElemTrigger onClick={handleTrigger}>
+      <DropdownMenuTrigger render={<div />}>
         <button
           type="button"
           className={cn(
@@ -49,18 +39,22 @@ const Dropdown = ({
             open ? 'bg-state-base-hover' : 'hover:bg-state-base-hover',
           )}
         >
-          <RiMoreFill className="size-4 text-text-tertiary" />
+          <span aria-hidden className="i-ri-more-fill size-4 text-text-tertiary" />
         </button>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-11">
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-start"
+        sideOffset={4}
+        popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
+      >
         <Menu
           breadcrumbs={breadcrumbs}
           startIndex={startIndex}
           onBreadcrumbClick={handleBreadCrumbClick}
         />
-      </PortalToFollowElemContent>
+      </DropdownMenuContent>
       <span className="system-xs-regular text-divider-deep">/</span>
-    </PortalToFollowElem>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/explore/item-operation/__tests__/index.spec.tsx b/web/app/components/explore/item-operation/__tests__/index.spec.tsx
index f7f9b44a84..d54c644ab0 100644
--- a/web/app/components/explore/item-operation/__tests__/index.spec.tsx
+++ b/web/app/components/explore/item-operation/__tests__/index.spec.tsx
@@ -1,6 +1,81 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import * as React from 'react'
 import ItemOperation from '../index'
 
+vi.mock('@/app/components/base/ui/dropdown-menu', () => {
+  const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ isOpen: open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div data-testid="dropdown-menu" data-open={open}>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({
+      children,
+      onClick,
+      ...props
+    }: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+      const { isOpen, setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          onClick={(e) => {
+            onClick?.(e)
+            setOpen(!isOpen)
+          }}
+          {...props}
+        >
+          {children}
+        </button>
+      )
+    },
+    DropdownMenuContent: ({
+      children,
+      popupProps,
+    }: {
+      children: React.ReactNode
+      popupProps?: React.HTMLAttributes<HTMLDivElement>
+    }) => {
+      const { isOpen } = useDropdownMenuContext()
+      if (!isOpen)
+        return null
+
+      return <div data-testid="dropdown-content" {...popupProps}>{children}</div>
+    },
+    DropdownMenuItem: ({
+      children,
+      onClick,
+      className,
+    }: {
+      children: React.ReactNode
+      onClick?: React.MouseEventHandler<HTMLButtonElement>
+      className?: string
+    }) => {
+      const { setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          className={className}
+          onClick={(e) => {
+            onClick?.(e)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+  }
+})
+
 describe('ItemOperation', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -67,14 +142,27 @@ describe('ItemOperation', () => {
 
       expect(props.onDelete).toHaveBeenCalledTimes(1)
     })
+
+    it('should call onRenameConversation when clicking rename action', async () => {
+      const onRenameConversation = vi.fn()
+      renderComponent({
+        isShowRenameConversation: true,
+        onRenameConversation,
+      })
+
+      fireEvent.click(screen.getByTestId('item-operation-trigger'))
+      fireEvent.click(await screen.findByText('explore.sidebar.action.rename'))
+
+      expect(onRenameConversation).toHaveBeenCalledTimes(1)
+    })
   })
 
   describe('Edge Cases', () => {
     it('should close the menu when mouse leaves the panel and item is not hovering', async () => {
       renderComponent()
       fireEvent.click(screen.getByTestId('item-operation-trigger'))
-      const pinText = await screen.findByText('explore.sidebar.action.pin')
-      const menu = pinText.closest('div')?.parentElement as HTMLElement
+      await screen.findByText('explore.sidebar.action.pin')
+      const menu = screen.getByTestId('dropdown-content')
 
       fireEvent.mouseEnter(menu)
       fireEvent.mouseLeave(menu)
@@ -83,5 +171,25 @@ describe('ItemOperation', () => {
         expect(screen.queryByText('explore.sidebar.action.pin')).not.toBeInTheDocument()
       })
     })
+
+    it('should stop propagation when clicking inside the dropdown content', async () => {
+      const onParentClick = vi.fn()
+
+      render(
+        <div onClick={onParentClick}>
+          <ItemOperation
+            isPinned={false}
+            isShowDelete
+            togglePin={vi.fn()}
+            onDelete={vi.fn()}
+          />
+        </div>,
+      )
+
+      fireEvent.click(screen.getByTestId('item-operation-trigger'))
+      fireEvent.click(await screen.findByTestId('dropdown-content'))
+
+      expect(onParentClick).not.toHaveBeenCalled()
+    })
   })
 })
diff --git a/web/app/components/explore/item-operation/index.tsx b/web/app/components/explore/item-operation/index.tsx
index 94eed731fa..72bd00fa6e 100644
--- a/web/app/components/explore/item-operation/index.tsx
+++ b/web/app/components/explore/item-operation/index.tsx
@@ -7,10 +7,14 @@ import {
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { Pin02 } from '../../base/icons/src/vender/line/general'
 import s from './style.module.css'
 
@@ -35,61 +39,74 @@ const ItemOperation: FC<IItemOperationProps> = ({
   isShowDelete,
   onDelete,
 }) => {
-  const { t } = useTranslation()
+  const { t } = useTranslation('explore')
+  const { t: tCommon } = useTranslation('common')
   const [open, setOpen] = useState(false)
-  const ref = useRef(null)
   const [isHovering, { setTrue: setIsHovering, setFalse: setNotHovering }] = useBoolean(false)
   useEffect(() => {
     if (!isItemHovering && !isHovering)
       setOpen(false)
   }, [isItemHovering, isHovering])
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-end"
-      offset={4}
     >
-      <PortalToFollowElemTrigger
-        onClick={() => setOpen(v => !v)}
+      <DropdownMenuTrigger
+        data-testid="item-operation-trigger"
+        className={cn(className, s.btn, 'h-6 w-6 rounded-md border-none py-1', (isItemHovering || open) && `${s.open} bg-components-actionbar-bg! shadow-none!`)}
+        onClick={(e) => {
+          e.stopPropagation()
+        }}
       >
-        <div
-          className={cn(className, s.btn, 'h-6 w-6 rounded-md border-none py-1', (isItemHovering || open) && `${s.open} bg-components-actionbar-bg! shadow-none!`)}
-          data-testid="item-operation-trigger"
-        >
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent
-        className="z-50"
+        <span className="sr-only">{tCommon('operation.more')}</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="min-w-[120px]"
+        popupProps={{
+          onMouseEnter: setIsHovering,
+          onMouseLeave: setNotHovering,
+          onClick: e => e.stopPropagation(),
+        }}
       >
-        <div
-          ref={ref}
-          className="min-w-[120px] rounded-lg border border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]"
-          onMouseEnter={setIsHovering}
-          onMouseLeave={setNotHovering}
+        <DropdownMenuItem
+          className={cn(s.actionItem, 'gap-2 px-3')}
           onClick={(e) => {
             e.stopPropagation()
+            togglePin()
           }}
         >
-          <div className={cn(s.actionItem, 'group hover:bg-state-base-hover')} onClick={togglePin}>
-            <Pin02 className="h-4 w-4 shrink-0 text-text-secondary" />
-            <span className={s.actionName}>{isPinned ? t('sidebar.action.unpin', { ns: 'explore' }) : t('sidebar.action.pin', { ns: 'explore' })}</span>
-          </div>
-          {isShowRenameConversation && (
-            <div className={cn(s.actionItem, 'group hover:bg-state-base-hover')} onClick={onRenameConversation}>
-              <RiEditLine className="h-4 w-4 shrink-0 text-text-secondary" />
-              <span className={s.actionName}>{t('sidebar.action.rename', { ns: 'explore' })}</span>
-            </div>
-          )}
-          {isShowDelete && (
-            <div className={cn(s.actionItem, s.deleteActionItem, 'group hover:bg-state-base-hover')} onClick={onDelete}>
-              <RiDeleteBinLine className={cn(s.deleteActionItemChild, 'h-4 w-4 shrink-0 stroke-current stroke-2 text-text-secondary')} />
-              <span className={cn(s.actionName, s.deleteActionItemChild)}>{t('sidebar.action.delete', { ns: 'explore' })}</span>
-            </div>
-          )}
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+          <Pin02 className="h-4 w-4 shrink-0 text-text-secondary" />
+          <span className={s.actionName}>{isPinned ? t('sidebar.action.unpin') : t('sidebar.action.pin')}</span>
+        </DropdownMenuItem>
+        {isShowRenameConversation && (
+          <DropdownMenuItem
+            className={cn(s.actionItem, 'gap-2 px-3')}
+            onClick={(e) => {
+              e.stopPropagation()
+              onRenameConversation?.()
+            }}
+          >
+            <RiEditLine className="h-4 w-4 shrink-0 text-text-secondary" />
+            <span className={s.actionName}>{t('sidebar.action.rename')}</span>
+          </DropdownMenuItem>
+        )}
+        {isShowDelete && (
+          <DropdownMenuItem
+            className={cn(s.actionItem, s.deleteActionItem, 'gap-2 px-3 data-highlighted:bg-state-destructive-hover data-highlighted:text-text-destructive')}
+            onClick={(e) => {
+              e.stopPropagation()
+              onDelete()
+            }}
+          >
+            <RiDeleteBinLine className={cn(s.deleteActionItemChild, 'h-4 w-4 shrink-0 stroke-current stroke-2 text-inherit')} />
+            <span className={cn(s.actionName, s.deleteActionItemChild, 'text-inherit')}>{t('sidebar.action.delete')}</span>
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 export default React.memo(ItemOperation)
diff --git a/web/app/components/header/account-setting/data-source-page-new/__tests__/card.spec.tsx b/web/app/components/header/account-setting/data-source-page-new/__tests__/card.spec.tsx
index fedb7d8a4e..bd349a3ad6 100644
--- a/web/app/components/header/account-setting/data-source-page-new/__tests__/card.spec.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/__tests__/card.spec.tsx
@@ -188,10 +188,12 @@ describe('Card Component', () => {
       fireEvent.click(screen.getByText(/operation.edit/))
 
       // Assert
-      expect(mockPluginAuthActionReturn.handleEdit).toHaveBeenCalledWith('c1', {
-        apiKey: 'key1',
-        __name__: 'Credential 1',
-        __credential_id__: 'c1',
+      await waitFor(() => {
+        expect(mockPluginAuthActionReturn.handleEdit).toHaveBeenCalledWith('c1', {
+          apiKey: 'key1',
+          __name__: 'Credential 1',
+          __credential_id__: 'c1',
+        })
       })
     })
 
@@ -202,7 +204,9 @@ describe('Card Component', () => {
       fireEvent.click(screen.getByText(/operation.remove/))
 
       // Assert
-      expect(mockPluginAuthActionReturn.openConfirm).toHaveBeenCalledWith('c1')
+      await waitFor(() => {
+        expect(mockPluginAuthActionReturn.openConfirm).toHaveBeenCalledWith('c1')
+      })
     })
 
     it('should handle "setDefault" action from Item component', async () => {
@@ -212,7 +216,9 @@ describe('Card Component', () => {
       fireEvent.click(screen.getByText(/auth.setDefault/))
 
       // Assert
-      expect(mockPluginAuthActionReturn.handleSetDefault).toHaveBeenCalledWith('c1')
+      await waitFor(() => {
+        expect(mockPluginAuthActionReturn.handleSetDefault).toHaveBeenCalledWith('c1')
+      })
     })
 
     it('should handle "rename" action from Item component', async () => {
@@ -231,14 +237,16 @@ describe('Card Component', () => {
       fireEvent.click(screen.getByText(/operation.rename/))
 
       // Now it should show an input
-      const input = screen.getByPlaceholderText(/placeholder.input/)
+      const input = await screen.findByPlaceholderText(/placeholder.input/)
       fireEvent.change(input, { target: { value: 'New Name' } })
       fireEvent.click(screen.getByText(/operation.save/))
 
       // Assert
-      expect(mockPluginAuthActionReturn.handleRename).toHaveBeenCalledWith({
-        credential_id: 'c1',
-        name: 'New Name',
+      await waitFor(() => {
+        expect(mockPluginAuthActionReturn.handleRename).toHaveBeenCalledWith({
+          credential_id: 'c1',
+          name: 'New Name',
+        })
       })
     })
 
diff --git a/web/app/components/header/account-setting/data-source-page-new/__tests__/item.spec.tsx b/web/app/components/header/account-setting/data-source-page-new/__tests__/item.spec.tsx
index b88b3a8bb7..e1c5c3f4c7 100644
--- a/web/app/components/header/account-setting/data-source-page-new/__tests__/item.spec.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/__tests__/item.spec.tsx
@@ -1,5 +1,5 @@
 import type { DataSourceCredential } from '../types'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { CredentialTypeEnum } from '@/app/components/plugins/plugin-auth/types'
 import Item from '../item'
 
@@ -14,6 +14,9 @@ const triggerRename = async () => {
   fireEvent.click(dropdownTrigger)
   const renameOption = await screen.findByText('common.operation.rename')
   fireEvent.click(renameOption)
+  await waitFor(() => {
+    expect(screen.getByPlaceholderText('common.placeholder.input')).toBeInTheDocument()
+  })
 }
 
 describe('Item Component', () => {
diff --git a/web/app/components/header/account-setting/data-source-page-new/__tests__/operator.spec.tsx b/web/app/components/header/account-setting/data-source-page-new/__tests__/operator.spec.tsx
index 0140626dd7..12042acfa1 100644
--- a/web/app/components/header/account-setting/data-source-page-new/__tests__/operator.spec.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/__tests__/operator.spec.tsx
@@ -1,5 +1,6 @@
 import type { DataSourceCredential } from '../types'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { CredentialTypeEnum } from '@/app/components/plugins/plugin-auth/types'
 import Operator from '../operator'
 
@@ -9,10 +10,6 @@ import Operator from '../operator'
  */
 
 // Helper to open dropdown
-const openDropdown = () => {
-  fireEvent.click(screen.getByRole('button'))
-}
-
 describe('Operator Component', () => {
   const mockOnAction = vi.fn()
   const mockOnRename = vi.fn()
@@ -37,7 +34,7 @@ describe('Operator Component', () => {
 
       // Act
       render(<Operator credentialItem={credential} onAction={mockOnAction} onRename={mockOnRename} />)
-      openDropdown()
+      await userEvent.setup().click(screen.getByRole('button'))
 
       // Assert
       expect(await screen.findByText('plugin.auth.setDefault')).toBeInTheDocument()
@@ -53,7 +50,7 @@ describe('Operator Component', () => {
 
       // Act
       render(<Operator credentialItem={credential} onAction={mockOnAction} onRename={mockOnRename} />)
-      openDropdown()
+      await userEvent.setup().click(screen.getByRole('button'))
 
       // Assert
       expect(await screen.findByText('plugin.auth.setDefault')).toBeInTheDocument()
@@ -71,11 +68,13 @@ describe('Operator Component', () => {
       render(<Operator credentialItem={credential} onAction={mockOnAction} onRename={mockOnRename} />)
 
       // Act
-      openDropdown()
+      await userEvent.setup().click(screen.getByRole('button'))
       fireEvent.click(await screen.findByText('common.operation.rename'))
 
       // Assert
-      expect(mockOnRename).toHaveBeenCalledTimes(1)
+      await waitFor(() => {
+        expect(mockOnRename).toHaveBeenCalledTimes(1)
+      })
       expect(mockOnAction).not.toHaveBeenCalled()
     })
 
@@ -85,7 +84,7 @@ describe('Operator Component', () => {
       render(<Operator credentialItem={credential} onAction={mockOnAction} />)
 
       // Act & Assert
-      openDropdown()
+      await userEvent.setup().click(screen.getByRole('button'))
       const renameBtn = await screen.findByText('common.operation.rename')
       expect(() => fireEvent.click(renameBtn)).not.toThrow()
     })
@@ -96,11 +95,13 @@ describe('Operator Component', () => {
       render(<Operator credentialItem={credential} onAction={mockOnAction} onRename={mockOnRename} />)
 
       // Act
-      openDropdown()
+      await userEvent.setup().click(screen.getByRole('button'))
       fireEvent.click(await screen.findByText('plugin.auth.setDefault'))
 
       // Assert
-      expect(mockOnAction).toHaveBeenCalledWith('setDefault', credential)
+      await waitFor(() => {
+        expect(mockOnAction).toHaveBeenCalledWith('setDefault', credential)
+      })
     })
 
     it('should call onAction for "edit" action', async () => {
@@ -109,11 +110,13 @@ describe('Operator Component', () => {
       render(<Operator credentialItem={credential} onAction={mockOnAction} onRename={mockOnRename} />)
 
       // Act
-      openDropdown()
+      await userEvent.setup().click(screen.getByRole('button'))
       fireEvent.click(await screen.findByText('common.operation.edit'))
 
       // Assert
-      expect(mockOnAction).toHaveBeenCalledWith('edit', credential)
+      await waitFor(() => {
+        expect(mockOnAction).toHaveBeenCalledWith('edit', credential)
+      })
     })
 
     it('should call onAction for "change" action', async () => {
@@ -122,11 +125,13 @@ describe('Operator Component', () => {
       render(<Operator credentialItem={credential} onAction={mockOnAction} onRename={mockOnRename} />)
 
       // Act
-      openDropdown()
+      await userEvent.setup().click(screen.getByRole('button'))
       fireEvent.click(await screen.findByText('common.dataSource.notion.changeAuthorizedPages'))
 
       // Assert
-      expect(mockOnAction).toHaveBeenCalledWith('change', credential)
+      await waitFor(() => {
+        expect(mockOnAction).toHaveBeenCalledWith('change', credential)
+      })
     })
 
     it('should call onAction for "delete" action', async () => {
@@ -135,11 +140,13 @@ describe('Operator Component', () => {
       render(<Operator credentialItem={credential} onAction={mockOnAction} onRename={mockOnRename} />)
 
       // Act
-      openDropdown()
+      await userEvent.setup().click(screen.getByRole('button'))
       fireEvent.click(await screen.findByText('common.operation.remove'))
 
       // Assert
-      expect(mockOnAction).toHaveBeenCalledWith('delete', credential)
+      await waitFor(() => {
+        expect(mockOnAction).toHaveBeenCalledWith('delete', credential)
+      })
     })
   })
 })
diff --git a/web/app/components/header/account-setting/data-source-page-new/operator.tsx b/web/app/components/header/account-setting/data-source-page-new/operator.tsx
index c94f1bb192..437fa80139 100644
--- a/web/app/components/header/account-setting/data-source-page-new/operator.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/operator.tsx
@@ -1,21 +1,20 @@
 import type {
   DataSourceCredential,
 } from './types'
-import type { Item } from '@/app/components/base/dropdown'
-import {
-  RiDeleteBinLine,
-  RiEditLine,
-  RiEqualizer2Line,
-  RiHome9Line,
-  RiStickyNoteAddLine,
-} from '@remixicon/react'
 import {
   memo,
   useCallback,
-  useMemo,
+  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Dropdown from '@/app/components/base/dropdown'
+import ActionButton from '@/app/components/base/action-button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { CredentialTypeEnum } from '@/app/components/plugins/plugin-auth/types'
 
 type OperatorProps = {
@@ -29,106 +28,60 @@ const Operator = ({
   onRename,
 }: OperatorProps) => {
   const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
   const {
     type,
   } = credentialItem
-  const items = useMemo(() => {
-    const commonItems = [
-      {
-        value: 'setDefault',
-        text: (
-          <div className="flex items-center">
-            <RiHome9Line className="mr-2 h-4 w-4 text-text-tertiary" />
-            <div className="system-sm-semibold text-text-secondary">{t('auth.setDefault', { ns: 'plugin' })}</div>
-          </div>
-        ),
-      },
-      ...(
-        type === CredentialTypeEnum.OAUTH2
-          ? [
-              {
-                value: 'rename',
-                text: (
-                  <div className="flex items-center">
-                    <RiEditLine className="mr-2 h-4 w-4 text-text-tertiary" />
-                    <div className="system-sm-semibold text-text-secondary">{t('operation.rename', { ns: 'common' })}</div>
-                  </div>
-                ),
-              },
-            ]
-          : []
-      ),
-      ...(
-        type === CredentialTypeEnum.API_KEY
-          ? [
-              {
-                value: 'edit',
-                text: (
-                  <div className="flex items-center">
-                    <RiEqualizer2Line className="mr-2 h-4 w-4 text-text-tertiary" />
-                    <div className="system-sm-semibold text-text-secondary">{t('operation.edit', { ns: 'common' })}</div>
-                  </div>
-                ),
-              },
-            ]
-          : []
-      ),
-    ]
-    if (type === CredentialTypeEnum.OAUTH2) {
-      const oAuthItems = [
-        {
-          value: 'change',
-          text: (
-            <div className="flex items-center">
-              <RiStickyNoteAddLine className="mr-2 h-4 w-4 text-text-tertiary" />
-              <div className="mb-1 system-sm-semibold text-text-secondary">{t('dataSource.notion.changeAuthorizedPages', { ns: 'common' })}</div>
-            </div>
-          ),
-        },
-      ]
-      commonItems.push(...oAuthItems)
-    }
-    return commonItems
-  }, [t, type])
-
-  const secondItems = useMemo(() => {
-    return [
-      {
-        value: 'delete',
-        text: (
-          <div className="flex items-center">
-            <RiDeleteBinLine className="mr-2 h-4 w-4 text-text-tertiary" />
-            <div className="system-sm-semibold text-text-secondary">
-              {t('operation.remove', { ns: 'common' })}
-            </div>
-          </div>
-        ),
-      },
-    ]
-  }, [])
-  const handleSelect = useCallback((item: Item) => {
-    if (item.value === 'rename') {
-      onRename?.()
-      return
-    }
-    onAction(
-      item.value as string,
-      credentialItem,
-    )
-  }, [onAction, credentialItem, onRename])
+  const handleAction = useCallback((action: string) => {
+    setOpen(false)
+    queueMicrotask(() => {
+      if (action === 'rename') {
+        onRename?.()
+        return
+      }
+      onAction(action, credentialItem)
+    })
+  }, [credentialItem, onAction, onRename])
 
   return (
-    <Dropdown
-      items={items}
-      secondItems={secondItems}
-      onSelect={handleSelect}
-      popupClassName="z-1002"
-      triggerProps={{
-        size: 'l',
-      }}
-      itemClassName="py-2 h-auto hover:bg-state-base-hover"
-      secondItemClassName="py-2 h-auto hover:bg-state-base-hover"
-    />
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger render={<div />}>
+        <ActionButton size="l" className={open ? 'bg-state-base-hover' : ''}>
+          <span aria-hidden className="i-ri-more-fill h-4 w-4 text-text-tertiary" />
+        </ActionButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent placement="bottom-end" sideOffset={4} popupClassName="min-w-[200px]">
+        <DropdownMenuItem className="h-auto gap-2 py-2" onClick={() => handleAction('setDefault')}>
+          <span aria-hidden className="i-ri-home-9-line h-4 w-4 text-text-tertiary" />
+          <div className="system-sm-semibold text-text-secondary">{t('auth.setDefault', { ns: 'plugin' })}</div>
+        </DropdownMenuItem>
+        {type === CredentialTypeEnum.OAUTH2 && (
+          <DropdownMenuItem className="h-auto gap-2 py-2" onClick={() => handleAction('rename')}>
+            <span aria-hidden className="i-ri-edit-line h-4 w-4 text-text-tertiary" />
+            <div className="system-sm-semibold text-text-secondary">{t('operation.rename', { ns: 'common' })}</div>
+          </DropdownMenuItem>
+        )}
+        {type === CredentialTypeEnum.API_KEY && (
+          <DropdownMenuItem className="h-auto gap-2 py-2" onClick={() => handleAction('edit')}>
+            <span aria-hidden className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
+            <div className="system-sm-semibold text-text-secondary">{t('operation.edit', { ns: 'common' })}</div>
+          </DropdownMenuItem>
+        )}
+        {type === CredentialTypeEnum.OAUTH2 && (
+          <DropdownMenuItem className="h-auto gap-2 py-2" onClick={() => handleAction('change')}>
+            <span aria-hidden className="i-ri-sticky-note-add-line h-4 w-4 text-text-tertiary" />
+            <div className="mb-1 system-sm-semibold text-text-secondary">{t('dataSource.notion.changeAuthorizedPages', { ns: 'common' })}</div>
+          </DropdownMenuItem>
+        )}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive" className="h-auto gap-2 py-2" onClick={() => handleAction('delete')}>
+          <span aria-hidden className="i-ri-delete-bin-line h-4 w-4" />
+          <div className="system-sm-semibold">
+            {t('operation.remove', { ns: 'common' })}
+          </div>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/header/account-setting/members-page/operation/index.tsx b/web/app/components/header/account-setting/members-page/operation/index.tsx
index 5fb3be0195..dab0c84e5b 100644
--- a/web/app/components/header/account-setting/members-page/operation/index.tsx
+++ b/web/app/components/header/account-setting/members-page/operation/index.tsx
@@ -1,10 +1,15 @@
 'use client'
 import type { Member } from '@/models/common'
-import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
 import { cn } from '@langgenius/dify-ui/cn'
 import { memo, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { toast } from '@/app/components/base/ui/toast'
 import { useProviderContext } from '@/context/provider-context'
 import { deleteMemberOrCancelInvitation, updateMemberRole } from '@/service/common'
@@ -74,40 +79,50 @@ const Operation = ({ member, operatorRole, onOperate }: IOperationProps) => {
     }
   }
   return (
-    <PortalToFollowElem open={open} onOpenChange={setOpen} placement="bottom-end" offset={{ mainAxis: 4 }}>
-      <PortalToFollowElemTrigger asChild onClick={() => setOpen(prev => !prev)}>
-        <div className={cn('group flex h-full w-full cursor-pointer items-center justify-between px-3 system-sm-regular text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
-          {RoleMap[member.role] || RoleMap.normal}
-          <ChevronDownIcon className={cn('h-4 w-4 shrink-0 group-hover:block', open ? 'block' : 'hidden')} />
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-1002">
-        <div className={cn('inline-flex flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs')}>
-          <div className="p-1">
-            {roleList.map(role => (
-              <div key={role} className="flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover" onClick={() => handleUpdateMemberRole(role)}>
-                {role === member.role
-                  ? <CheckIcon className="mt-[2px] mr-1 h-4 w-4 text-text-accent" />
-                  : <div className="mt-[2px] mr-1 h-4 w-4 text-text-accent" />}
-                <div>
-                  <div className="system-sm-semibold whitespace-nowrap text-text-secondary">{t(roleI18nKeyMap[role].label, { ns: 'common' })}</div>
-                  <div className="system-xs-regular whitespace-nowrap text-text-tertiary">{t(roleI18nKeyMap[role].tip, { ns: 'common' })}</div>
-                </div>
-              </div>
-            ))}
-          </div>
-          <div className="border-t border-divider-subtle p-1">
-            <div className="flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover" onClick={handleDeleteMemberOrCancelInvitation}>
-              <div className="mt-[2px] mr-1 h-4 w-4 text-text-accent" />
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger
+        render={<div className={cn('group flex h-full w-full cursor-pointer items-center justify-between px-3 system-sm-regular text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')} />}
+      >
+        {RoleMap[member.role] || RoleMap.normal}
+        <span aria-hidden className={cn('i-ri-arrow-down-s-line h-4 w-4 shrink-0 group-hover:block', open ? 'block' : 'hidden')} />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="inline-flex flex-col rounded-xl p-0"
+      >
+        <div className="p-1">
+          {roleList.map(role => (
+            <DropdownMenuItem
+              key={role}
+              className="h-auto items-start gap-2 rounded-lg px-3 py-2"
+              onClick={() => handleUpdateMemberRole(role)}
+            >
+              {role === member.role
+                ? <span aria-hidden className="mt-[2px] i-ri-check-line h-4 w-4 shrink-0 text-text-accent" />
+                : <span aria-hidden className="mt-[2px] h-4 w-4 shrink-0" />}
               <div>
-                <div className="system-sm-semibold whitespace-nowrap text-text-secondary">{t('members.removeFromTeam', { ns: 'common' })}</div>
-                <div className="system-xs-regular whitespace-nowrap text-text-tertiary">{t('members.removeFromTeamTip', { ns: 'common' })}</div>
+                <div className="system-sm-semibold whitespace-nowrap text-text-secondary">{t(roleI18nKeyMap[role].label, { ns: 'common' })}</div>
+                <div className="system-xs-regular whitespace-nowrap text-text-tertiary">{t(roleI18nKeyMap[role].tip, { ns: 'common' })}</div>
               </div>
-            </div>
-          </div>
+            </DropdownMenuItem>
+          ))}
         </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+        <DropdownMenuSeparator className="my-0" />
+        <div className="p-1">
+          <DropdownMenuItem
+            className="h-auto items-start gap-2 rounded-lg px-3 py-2"
+            onClick={handleDeleteMemberOrCancelInvitation}
+          >
+            <span aria-hidden className="mt-[2px] h-4 w-4 shrink-0" />
+            <div>
+              <div className="system-sm-semibold whitespace-nowrap text-text-secondary">{t('members.removeFromTeam', { ns: 'common' })}</div>
+              <div className="system-xs-regular whitespace-nowrap text-text-tertiary">{t('members.removeFromTeamTip', { ns: 'common' })}</div>
+            </div>
+          </DropdownMenuItem>
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 export default memo(Operation)
diff --git a/web/app/components/plugins/marketplace/sort-dropdown/__tests__/index.spec.tsx b/web/app/components/plugins/marketplace/sort-dropdown/__tests__/index.spec.tsx
index 4d93726c4c..990bb321de 100644
--- a/web/app/components/plugins/marketplace/sort-dropdown/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/marketplace/sort-dropdown/__tests__/index.spec.tsx
@@ -1,15 +1,12 @@
-import { fireEvent, render, screen, within } from '@testing-library/react'
+import type {
+  MouseEventHandler,
+  ReactNode,
+} from 'react'
+import { render, screen, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
 import SortDropdown from '../index'
 
-// ================================
-// Mock external dependencies only
-// ================================
-
-// Mock i18n translation hook
 const mockTranslation = vi.fn((key: string, options?: { ns?: string }) => {
-  // Build full key with namespace prefix if provided
   const fullKey = options?.ns ? `${options.ns}.${key}` : key
   const translations: Record<string, string> = {
     'plugin.marketplace.sortBy': 'Sort by',
@@ -27,7 +24,6 @@ vi.mock('#i18n', () => ({
   }),
 }))
 
-// Mock marketplace atoms with controllable values
 let mockSort: { sortBy: string, sortOrder: string } = { sortBy: 'install_count', sortOrder: 'DESC' }
 const mockHandleSortChange = vi.fn()
 
@@ -35,664 +31,123 @@ vi.mock('../../atoms', () => ({
   useMarketplaceSort: () => [mockSort, mockHandleSortChange],
 }))
 
-// Mock portal component with controllable open state
-let mockPortalOpenState = false
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+  const React = await import('react')
+  const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
 
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({ children, open, onOpenChange: _onOpenChange }: {
-    children: React.ReactNode
-    open: boolean
-    onOpenChange: (open: boolean) => void
-  }) => {
-    mockPortalOpenState = open
-    return (
-      <div data-testid="portal-wrapper" data-open={open}>
-        {children}
-      </div>
-    )
-  },
-  PortalToFollowElemTrigger: ({ children, onClick }: {
-    children: React.ReactNode
-    onClick: () => void
-  }) => (
-    <div data-testid="portal-trigger" onClick={onClick}>
-      {children}
-    </div>
-  ),
-  PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => {
-    // Match actual behavior: only render when portal is open
-    if (!mockPortalOpenState)
-      return null
-    return <div data-testid="portal-content">{children}</div>
-  },
-}))
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
 
-// ================================
-// Test Factory Functions
-// ================================
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div data-testid="dropdown-wrapper" data-open={open}>
+          {children}
+        </div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({ children, className }: { children: ReactNode, className?: string }) => {
+      const { open, setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          className={className}
+          data-testid="dropdown-trigger"
+          onClick={() => setOpen(!open)}
+        >
+          {children}
+        </button>
+      )
+    },
+    DropdownMenuContent: ({ children }: { children: ReactNode }) => {
+      const { open } = useDropdownMenuContext()
+      return open ? <div data-testid="dropdown-content">{children}</div> : null
+    },
+    DropdownMenuItem: ({
+      children,
+      onClick,
+      className,
+    }: {
+      children: ReactNode
+      onClick?: MouseEventHandler<HTMLButtonElement>
+      className?: string
+    }) => {
+      const { setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          className={className}
+          onClick={(event) => {
+            onClick?.(event)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+  }
+})
 
-type SortOption = {
-  value: string
-  order: string
-  text: string
-}
-
-const createSortOptions = (): SortOption[] => [
-  { value: 'install_count', order: 'DESC', text: 'Most Popular' },
-  { value: 'version_updated_at', order: 'DESC', text: 'Recently Updated' },
-  { value: 'created_at', order: 'DESC', text: 'Newly Released' },
-  { value: 'created_at', order: 'ASC', text: 'First Released' },
-]
-
-// ================================
-// SortDropdown Component Tests
-// ================================
 describe('SortDropdown', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockSort = { sortBy: 'install_count', sortOrder: 'DESC' }
-    mockPortalOpenState = false
   })
 
-  // ================================
-  // Rendering Tests
-  // ================================
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      render(<SortDropdown />)
+  it('renders the selected sort option in the trigger', () => {
+    render(<SortDropdown />)
 
-      expect(screen.getByTestId('portal-wrapper')).toBeInTheDocument()
-    })
-
-    it('should render sort by label', () => {
-      render(<SortDropdown />)
-
-      expect(screen.getByText('Sort by')).toBeInTheDocument()
-    })
-
-    it('should render selected option text', () => {
-      render(<SortDropdown />)
-
-      expect(screen.getByText('Most Popular')).toBeInTheDocument()
-    })
-
-    it('should render arrow down icon', () => {
-      const { container } = render(<SortDropdown />)
-
-      const arrowIcon = container.querySelector('.h-4.w-4.text-text-tertiary')
-      expect(arrowIcon).toBeInTheDocument()
-    })
-
-    it('should render trigger element with correct styles', () => {
-      const { container } = render(<SortDropdown />)
-
-      const trigger = container.querySelector('.cursor-pointer')
-      expect(trigger).toBeInTheDocument()
-      expect(trigger).toHaveClass('h-8', 'rounded-lg', 'bg-state-base-hover-alt')
-    })
-
-    it('should not render dropdown content when closed', () => {
-      render(<SortDropdown />)
-
-      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
-    })
+    const trigger = screen.getByTestId('dropdown-trigger')
+    expect(within(trigger).getByText('Sort by')).toBeInTheDocument()
+    expect(within(trigger).getByText('Most Popular')).toBeInTheDocument()
   })
 
-  // ================================
-  // State Management Tests
-  // ================================
-  describe('State Management', () => {
-    it('should initialize with closed state', () => {
-      render(<SortDropdown />)
+  it('falls back to the default option when the current sort is invalid', () => {
+    mockSort = { sortBy: 'unknown', sortOrder: 'ASC' }
 
-      const wrapper = screen.getByTestId('portal-wrapper')
-      expect(wrapper).toHaveAttribute('data-open', 'false')
-    })
+    render(<SortDropdown />)
 
-    it('should display correct selected option for install_count DESC', () => {
-      mockSort = { sortBy: 'install_count', sortOrder: 'DESC' }
-      render(<SortDropdown />)
-
-      expect(screen.getByText('Most Popular')).toBeInTheDocument()
-    })
-
-    it('should display correct selected option for version_updated_at DESC', () => {
-      mockSort = { sortBy: 'version_updated_at', sortOrder: 'DESC' }
-      render(<SortDropdown />)
-
-      expect(screen.getByText('Recently Updated')).toBeInTheDocument()
-    })
-
-    it('should display correct selected option for created_at DESC', () => {
-      mockSort = { sortBy: 'created_at', sortOrder: 'DESC' }
-      render(<SortDropdown />)
-
-      expect(screen.getByText('Newly Released')).toBeInTheDocument()
-    })
-
-    it('should display correct selected option for created_at ASC', () => {
-      mockSort = { sortBy: 'created_at', sortOrder: 'ASC' }
-      render(<SortDropdown />)
-
-      expect(screen.getByText('First Released')).toBeInTheDocument()
-    })
-
-    it('should toggle open state when trigger clicked', () => {
-      render(<SortDropdown />)
-
-      const trigger = screen.getByTestId('portal-trigger')
-      fireEvent.click(trigger)
-
-      // After click, portal content should be visible
-      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
-    })
-
-    it('should close dropdown when trigger clicked again', () => {
-      render(<SortDropdown />)
-
-      const trigger = screen.getByTestId('portal-trigger')
-
-      // Open
-      fireEvent.click(trigger)
-      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
-
-      // Close
-      fireEvent.click(trigger)
-      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
-    })
+    expect(screen.getByText('Most Popular')).toBeInTheDocument()
   })
 
-  // ================================
-  // User Interactions Tests
-  // ================================
-  describe('User Interactions', () => {
-    it('should open dropdown on trigger click', () => {
-      render(<SortDropdown />)
+  it('opens the menu and renders all sort options', async () => {
+    const user = userEvent.setup()
+    render(<SortDropdown />)
 
-      const trigger = screen.getByTestId('portal-trigger')
-      fireEvent.click(trigger)
+    await user.click(screen.getByTestId('dropdown-trigger'))
 
-      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
-    })
-
-    it('should render all sort options when open', () => {
-      render(<SortDropdown />)
-
-      // Open dropdown
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const content = screen.getByTestId('portal-content')
-      expect(within(content).getByText('Most Popular')).toBeInTheDocument()
-      expect(within(content).getByText('Recently Updated')).toBeInTheDocument()
-      expect(within(content).getByText('Newly Released')).toBeInTheDocument()
-      expect(within(content).getByText('First Released')).toBeInTheDocument()
-    })
-
-    it('should call handleSortChange when option clicked', () => {
-      render(<SortDropdown />)
-
-      // Open dropdown
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      // Click on "Recently Updated"
-      const content = screen.getByTestId('portal-content')
-      fireEvent.click(within(content).getByText('Recently Updated'))
-
-      expect(mockHandleSortChange).toHaveBeenCalledWith({
-        sortBy: 'version_updated_at',
-        sortOrder: 'DESC',
-      })
-    })
-
-    it('should call handleSortChange with correct params for Most Popular', () => {
-      mockSort = { sortBy: 'created_at', sortOrder: 'DESC' }
-      render(<SortDropdown />)
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const content = screen.getByTestId('portal-content')
-      fireEvent.click(within(content).getByText('Most Popular'))
-
-      expect(mockHandleSortChange).toHaveBeenCalledWith({
-        sortBy: 'install_count',
-        sortOrder: 'DESC',
-      })
-    })
-
-    it('should call handleSortChange with correct params for Newly Released', () => {
-      render(<SortDropdown />)
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const content = screen.getByTestId('portal-content')
-      fireEvent.click(within(content).getByText('Newly Released'))
-
-      expect(mockHandleSortChange).toHaveBeenCalledWith({
-        sortBy: 'created_at',
-        sortOrder: 'DESC',
-      })
-    })
-
-    it('should call handleSortChange with correct params for First Released', () => {
-      render(<SortDropdown />)
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const content = screen.getByTestId('portal-content')
-      fireEvent.click(within(content).getByText('First Released'))
-
-      expect(mockHandleSortChange).toHaveBeenCalledWith({
-        sortBy: 'created_at',
-        sortOrder: 'ASC',
-      })
-    })
-
-    it('should allow selecting currently selected option', () => {
-      mockSort = { sortBy: 'install_count', sortOrder: 'DESC' }
-      render(<SortDropdown />)
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const content = screen.getByTestId('portal-content')
-      fireEvent.click(within(content).getByText('Most Popular'))
-
-      expect(mockHandleSortChange).toHaveBeenCalledWith({
-        sortBy: 'install_count',
-        sortOrder: 'DESC',
-      })
-    })
-
-    it('should support userEvent for trigger click', async () => {
-      const user = userEvent.setup()
-      render(<SortDropdown />)
-
-      const trigger = screen.getByTestId('portal-trigger')
-      await user.click(trigger)
-
-      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
-    })
+    const content = screen.getByTestId('dropdown-content')
+    expect(within(content).getByText('Most Popular')).toBeInTheDocument()
+    expect(within(content).getByText('Recently Updated')).toBeInTheDocument()
+    expect(within(content).getByText('Newly Released')).toBeInTheDocument()
+    expect(within(content).getByText('First Released')).toBeInTheDocument()
   })
 
-  // ================================
-  // Check Icon Tests
-  // ================================
-  describe('Check Icon', () => {
-    it('should show check icon for selected option', () => {
-      mockSort = { sortBy: 'install_count', sortOrder: 'DESC' }
-      const { container } = render(<SortDropdown />)
+  it('shows a check icon for the currently selected option', async () => {
+    const user = userEvent.setup()
+    const { container } = render(<SortDropdown />)
 
-      // Open dropdown
-      fireEvent.click(screen.getByTestId('portal-trigger'))
+    await user.click(screen.getByTestId('dropdown-trigger'))
 
-      // Check icon should be present in the dropdown
-      const checkIcon = container.querySelector('.text-text-accent')
-      expect(checkIcon).toBeInTheDocument()
-    })
-
-    it('should show check icon only for matching sortBy AND sortOrder', () => {
-      mockSort = { sortBy: 'created_at', sortOrder: 'DESC' }
-      render(<SortDropdown />)
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const content = screen.getByTestId('portal-content')
-      const options = content.querySelectorAll('.cursor-pointer')
-
-      // "Newly Released" (created_at DESC) should have check icon
-      // "First Released" (created_at ASC) should NOT have check icon
-      expect(options.length).toBe(4)
-    })
-
-    it('should not show check icon for different sortOrder with same sortBy', () => {
-      mockSort = { sortBy: 'created_at', sortOrder: 'DESC' }
-      const { container } = render(<SortDropdown />)
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      // Only one check icon should be visible (for Newly Released, not First Released)
-      const checkIcons = container.querySelectorAll('.text-text-accent')
-      expect(checkIcons.length).toBe(1)
-    })
+    expect(container.querySelector('.i-ri-check-line')).toBeInTheDocument()
   })
 
-  // ================================
-  // Dropdown Options Structure Tests
-  // ================================
-  describe('Dropdown Options Structure', () => {
-    const sortOptions = createSortOptions()
+  it('updates the sort and closes the menu when an option is selected', async () => {
+    const user = userEvent.setup()
+    render(<SortDropdown />)
 
-    it('should render 4 sort options', () => {
-      render(<SortDropdown />)
+    await user.click(screen.getByTestId('dropdown-trigger'))
+    await user.click(screen.getByText('Recently Updated'))
 
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const content = screen.getByTestId('portal-content')
-      const options = content.querySelectorAll('.cursor-pointer')
-      expect(options.length).toBe(4)
+    expect(mockHandleSortChange).toHaveBeenCalledWith({
+      sortBy: 'version_updated_at',
+      sortOrder: 'DESC',
     })
-
-    it.each(sortOptions)('should render option: $text', ({ text }) => {
-      render(<SortDropdown />)
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const content = screen.getByTestId('portal-content')
-      expect(within(content).getByText(text)).toBeInTheDocument()
-    })
-
-    it('should render options with unique keys', () => {
-      render(<SortDropdown />)
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const content = screen.getByTestId('portal-content')
-      const options = content.querySelectorAll('.cursor-pointer')
-
-      // All options should be rendered (no key conflicts)
-      expect(options.length).toBe(4)
-    })
-
-    it('should render dropdown container with correct styles', () => {
-      render(<SortDropdown />)
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const content = screen.getByTestId('portal-content')
-      const container = content.firstChild as HTMLElement
-      expect(container).toHaveClass('rounded-xl', 'shadow-lg')
-    })
-
-    it('should render option items with hover styles', () => {
-      render(<SortDropdown />)
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const content = screen.getByTestId('portal-content')
-      const option = content.querySelector('.cursor-pointer')
-      expect(option).toHaveClass('hover:bg-components-panel-on-panel-item-bg-hover')
-    })
-  })
-
-  // ================================
-  // Edge Cases Tests
-  // ================================
-  describe('Edge Cases', () => {
-    // The component falls back to the first option (Most Popular) when sort values are invalid
-
-    it('should fallback to default option when sortBy is unknown', () => {
-      mockSort = { sortBy: 'unknown_field', sortOrder: 'DESC' }
-
-      render(<SortDropdown />)
-
-      // Should fallback to first option "Most Popular"
-      expect(screen.getByText('Most Popular')).toBeInTheDocument()
-    })
-
-    it('should fallback to default option when sortBy is empty', () => {
-      mockSort = { sortBy: '', sortOrder: 'DESC' }
-
-      render(<SortDropdown />)
-
-      expect(screen.getByText('Most Popular')).toBeInTheDocument()
-    })
-
-    it('should fallback to default option when sortOrder is unknown', () => {
-      mockSort = { sortBy: 'install_count', sortOrder: 'UNKNOWN' }
-
-      render(<SortDropdown />)
-
-      expect(screen.getByText('Most Popular')).toBeInTheDocument()
-    })
-
-    it('should render correctly when handleSortChange is a no-op', () => {
-      mockHandleSortChange.mockImplementation(() => {})
-      render(<SortDropdown />)
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const content = screen.getByTestId('portal-content')
-      fireEvent.click(within(content).getByText('Recently Updated'))
-
-      expect(mockHandleSortChange).toHaveBeenCalled()
-    })
-
-    it('should handle rapid toggle clicks', () => {
-      render(<SortDropdown />)
-
-      const trigger = screen.getByTestId('portal-trigger')
-
-      // Rapid clicks
-      fireEvent.click(trigger)
-      fireEvent.click(trigger)
-      fireEvent.click(trigger)
-
-      // Final state should be open (odd number of clicks)
-      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
-    })
-
-    it('should handle multiple option selections', () => {
-      render(<SortDropdown />)
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const content = screen.getByTestId('portal-content')
-
-      // Click multiple options
-      fireEvent.click(within(content).getByText('Recently Updated'))
-      fireEvent.click(within(content).getByText('Newly Released'))
-      fireEvent.click(within(content).getByText('First Released'))
-
-      expect(mockHandleSortChange).toHaveBeenCalledTimes(3)
-    })
-  })
-
-  // ================================
-  // Context Integration Tests
-  // ================================
-  describe('Context Integration', () => {
-    it('should read sort value from context', () => {
-      mockSort = { sortBy: 'version_updated_at', sortOrder: 'DESC' }
-      render(<SortDropdown />)
-
-      expect(screen.getByText('Recently Updated')).toBeInTheDocument()
-    })
-
-    it('should call context handleSortChange on selection', () => {
-      render(<SortDropdown />)
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const content = screen.getByTestId('portal-content')
-      fireEvent.click(within(content).getByText('First Released'))
-
-      expect(mockHandleSortChange).toHaveBeenCalledWith({
-        sortBy: 'created_at',
-        sortOrder: 'ASC',
-      })
-    })
-
-    it('should update display when context sort changes', () => {
-      const { rerender } = render(<SortDropdown />)
-
-      expect(screen.getByText('Most Popular')).toBeInTheDocument()
-
-      // Simulate context change
-      mockSort = { sortBy: 'created_at', sortOrder: 'ASC' }
-      rerender(<SortDropdown />)
-
-      expect(screen.getByText('First Released')).toBeInTheDocument()
-    })
-
-    it('should use selector pattern correctly', () => {
-      render(<SortDropdown />)
-
-      // Component should have called useMarketplaceContext with selector functions
-      expect(screen.getByTestId('portal-wrapper')).toBeInTheDocument()
-    })
-  })
-
-  // ================================
-  // Accessibility Tests
-  // ================================
-  describe('Accessibility', () => {
-    it('should have cursor pointer on trigger', () => {
-      const { container } = render(<SortDropdown />)
-
-      const trigger = container.querySelector('.cursor-pointer')
-      expect(trigger).toBeInTheDocument()
-    })
-
-    it('should have cursor pointer on options', () => {
-      render(<SortDropdown />)
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const content = screen.getByTestId('portal-content')
-      const options = content.querySelectorAll('.cursor-pointer')
-      expect(options.length).toBeGreaterThan(0)
-    })
-
-    it('should have visible focus indicators via hover styles', () => {
-      render(<SortDropdown />)
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const content = screen.getByTestId('portal-content')
-      const option = content.querySelector('.hover\\:bg-components-panel-on-panel-item-bg-hover')
-      expect(option).toBeInTheDocument()
-    })
-  })
-
-  // ================================
-  // Translation Tests
-  // ================================
-  describe('Translations', () => {
-    it('should call translation for sortBy label', () => {
-      render(<SortDropdown />)
-
-      expect(mockTranslation).toHaveBeenCalledWith('marketplace.sortBy', { ns: 'plugin' })
-    })
-
-    it('should call translation for all sort options', () => {
-      render(<SortDropdown />)
-
-      expect(mockTranslation).toHaveBeenCalledWith('marketplace.sortOption.mostPopular', { ns: 'plugin' })
-      expect(mockTranslation).toHaveBeenCalledWith('marketplace.sortOption.recentlyUpdated', { ns: 'plugin' })
-      expect(mockTranslation).toHaveBeenCalledWith('marketplace.sortOption.newlyReleased', { ns: 'plugin' })
-      expect(mockTranslation).toHaveBeenCalledWith('marketplace.sortOption.firstReleased', { ns: 'plugin' })
-    })
-  })
-
-  // ================================
-  // Portal Component Integration Tests
-  // ================================
-  describe('Portal Component Integration', () => {
-    it('should pass open state to PortalToFollowElem', () => {
-      render(<SortDropdown />)
-
-      const wrapper = screen.getByTestId('portal-wrapper')
-      expect(wrapper).toHaveAttribute('data-open', 'false')
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      expect(wrapper).toHaveAttribute('data-open', 'true')
-    })
-
-    it('should render trigger content inside PortalToFollowElemTrigger', () => {
-      render(<SortDropdown />)
-
-      const trigger = screen.getByTestId('portal-trigger')
-      expect(within(trigger).getByText('Sort by')).toBeInTheDocument()
-      expect(within(trigger).getByText('Most Popular')).toBeInTheDocument()
-    })
-
-    it('should render options inside PortalToFollowElemContent', () => {
-      render(<SortDropdown />)
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const content = screen.getByTestId('portal-content')
-      expect(within(content).getByText('Most Popular')).toBeInTheDocument()
-    })
-  })
-
-  // ================================
-  // Visual Style Tests
-  // ================================
-  describe('Visual Styles', () => {
-    it('should apply correct trigger container styles', () => {
-      const { container } = render(<SortDropdown />)
-
-      const triggerDiv = container.querySelector('.flex.h-8.cursor-pointer.items-center.rounded-lg')
-      expect(triggerDiv).toBeInTheDocument()
-    })
-
-    it('should apply secondary text color to sort by label', () => {
-      const { container } = render(<SortDropdown />)
-
-      const label = container.querySelector('.text-text-secondary')
-      expect(label).toBeInTheDocument()
-      expect(label?.textContent).toBe('Sort by')
-    })
-
-    it('should apply primary text color to selected option', () => {
-      const { container } = render(<SortDropdown />)
-
-      const selected = container.querySelector('.text-text-primary.system-sm-medium')
-      expect(selected).toBeInTheDocument()
-    })
-
-    it('should apply tertiary text color to arrow icon', () => {
-      const { container } = render(<SortDropdown />)
-
-      const arrow = container.querySelector('.text-text-tertiary')
-      expect(arrow).toBeInTheDocument()
-    })
-
-    it('should apply accent text color to check icon when option selected', () => {
-      mockSort = { sortBy: 'install_count', sortOrder: 'DESC' }
-      const { container } = render(<SortDropdown />)
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const checkIcon = container.querySelector('.text-text-accent')
-      expect(checkIcon).toBeInTheDocument()
-    })
-
-    it('should apply blur-sm backdrop to dropdown container', () => {
-      render(<SortDropdown />)
-
-      fireEvent.click(screen.getByTestId('portal-trigger'))
-
-      const content = screen.getByTestId('portal-content')
-      const container = content.querySelector('.backdrop-blur-xs')
-      expect(container).toBeInTheDocument()
-    })
-  })
-
-  // ================================
-  // All Sort Options Click Tests
-  // ================================
-  describe('All Sort Options Click Handlers', () => {
-    const testCases = [
-      { text: 'Most Popular', sortBy: 'install_count', sortOrder: 'DESC' },
-      { text: 'Recently Updated', sortBy: 'version_updated_at', sortOrder: 'DESC' },
-      { text: 'Newly Released', sortBy: 'created_at', sortOrder: 'DESC' },
-      { text: 'First Released', sortBy: 'created_at', sortOrder: 'ASC' },
-    ]
-
-    it.each(testCases)(
-      'should call handleSortChange with { sortBy: "$sortBy", sortOrder: "$sortOrder" } when clicking "$text"',
-      ({ text, sortBy, sortOrder }) => {
-        render(<SortDropdown />)
-
-        fireEvent.click(screen.getByTestId('portal-trigger'))
-
-        const content = screen.getByTestId('portal-content')
-        fireEvent.click(within(content).getByText(text))
-
-        expect(mockHandleSortChange).toHaveBeenCalledWith({ sortBy, sortOrder })
-      },
-    )
+    expect(screen.queryByTestId('dropdown-content')).not.toBeInTheDocument()
   })
 })
diff --git a/web/app/components/plugins/marketplace/sort-dropdown/index.tsx b/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
index 99f5650a71..a47143de02 100644
--- a/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
+++ b/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
@@ -1,15 +1,12 @@
 'use client'
 import { useTranslation } from '#i18n'
-import {
-  RiArrowDownSLine,
-  RiCheckLine,
-} from '@remixicon/react'
 import { useState } from 'react'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { useMarketplaceSort } from '../atoms'
 
 const SortDropdown = () => {
@@ -38,50 +35,44 @@ const SortDropdown = () => {
   ]
   const [sort, handleSortChange] = useMarketplaceSort()
   const [open, setOpen] = useState(false)
-  const selectedOption = options.find(option => option.value === sort.sortBy && option.order === sort.sortOrder) ?? options[0]
+  const selectedOption = options.find(option => option.value === sort.sortBy && option.order === sort.sortOrder) ?? options[0]!
 
   return (
-    <PortalToFollowElem
-      placement="bottom-start"
-      offset={{
-        mainAxis: 4,
-        crossAxis: 0,
-      }}
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
     >
-      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-        <div className="flex h-8 cursor-pointer items-center rounded-lg bg-state-base-hover-alt px-2 pr-3">
-          <span className="mr-1 system-sm-regular text-text-secondary">
-            {t('marketplace.sortBy', { ns: 'plugin' })}
-          </span>
-          <span className="mr-1 system-sm-medium text-text-primary">
-            {selectedOption!.text}
-          </span>
-          <RiArrowDownSLine className="h-4 w-4 text-text-tertiary" />
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent>
-        <div className="rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-xs">
-          {
-            options.map(option => (
-              <div
-                key={`${option.value}-${option.order}`}
-                className="flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 pr-2 system-md-regular text-text-primary hover:bg-components-panel-on-panel-item-bg-hover"
-                onClick={() => handleSortChange({ sortBy: option.value, sortOrder: option.order })}
-              >
-                {option.text}
-                {
-                  sort.sortBy === option.value && sort.sortOrder === option.order && (
-                    <RiCheckLine className="ml-2 h-4 w-4 text-text-accent" />
-                  )
-                }
-              </div>
-            ))
-          }
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      <DropdownMenuTrigger className="flex h-8 cursor-pointer items-center rounded-lg bg-state-base-hover-alt px-2 pr-3">
+        <span className="mr-1 system-sm-regular text-text-secondary">
+          {t('marketplace.sortBy', { ns: 'plugin' })}
+        </span>
+        <span className="mr-1 system-sm-medium text-text-primary">
+          {selectedOption.text}
+        </span>
+        <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4 text-text-tertiary" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-start"
+        sideOffset={4}
+        popupClassName="p-1"
+      >
+        {options.map(option => (
+          <DropdownMenuItem
+            key={`${option.value}-${option.order}`}
+            className="justify-between px-3 pr-2 system-md-regular text-text-primary"
+            onClick={() => {
+              handleSortChange({ sortBy: option.value, sortOrder: option.order })
+              setOpen(false)
+            }}
+          >
+            {option.text}
+            {sort.sortBy === option.value && sort.sortOrder === option.order && (
+              <span aria-hidden className="ml-2 i-ri-check-line h-4 w-4 text-text-accent" />
+            )}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx b/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
index 28aec206f1..1f249b16c6 100644
--- a/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
+++ b/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
@@ -36,34 +36,85 @@ vi.mock('@/app/components/base/icons/src/vender/solid/mediaAndDevices', () => ({
 }))
 
 vi.mock('@/app/components/base/ui/button', () => ({
-  Button: ({ children }: { children: React.ReactNode }) => <span data-testid="button-content">{children}</span>,
+  Button: ({ children, onClick, className, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
+    <button type="button" data-testid="button-content" className={className} onClick={onClick} {...props}>{children}</button>
+  ),
 }))
 
-vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
   const React = await import('react')
+  const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
   return {
-    PortalToFollowElem: ({
+    DropdownMenu: ({
       open,
+      onOpenChange,
       children,
     }: {
       open: boolean
+      onOpenChange?: (open: boolean) => void
       children: React.ReactNode
     }) => {
       portalOpen = open
-      return <div>{children}</div>
+      return (
+        <DropdownMenuContext value={{ isOpen: open, setOpen: onOpenChange ?? vi.fn() }}>
+          <div data-testid="dropdown-menu" data-open={open}>{children}</div>
+        </DropdownMenuContext>
+      )
     },
-    PortalToFollowElemTrigger: ({
+    DropdownMenuTrigger: ({
       children,
       onClick,
+      render,
     }: {
       children: React.ReactNode
-      onClick: () => void
-    }) => <button data-testid="dropdown-trigger" onClick={onClick}>{children}</button>,
-    PortalToFollowElemContent: ({
+      onClick?: React.MouseEventHandler<HTMLElement>
+      render?: React.ReactElement
+    }) => {
+      const { isOpen, setOpen } = useDropdownMenuContext()
+      const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+        onClick?.(e)
+        setOpen(!isOpen)
+      }
+
+      if (render)
+        return React.cloneElement(render, { 'data-testid': 'dropdown-trigger', 'onClick': handleClick } as Record<string, unknown>, children)
+
+      return <button data-testid="dropdown-trigger" onClick={handleClick}>{children}</button>
+    },
+    DropdownMenuContent: ({
       children,
     }: {
       children: React.ReactNode
     }) => portalOpen ? <div data-testid="dropdown-content">{children}</div> : null,
+    DropdownMenuItem: ({
+      children,
+      onClick,
+    }: {
+      children: React.ReactNode
+      onClick?: React.MouseEventHandler<HTMLButtonElement>
+    }) => {
+      const { setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          data-testid="dropdown-item"
+          onClick={(e) => {
+            onClick?.(e)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
   }
 })
 
@@ -131,13 +182,13 @@ describe('InstallPluginDropdown', () => {
     expect(onSwitchToMarketplaceTab).toHaveBeenCalledTimes(1)
   })
 
-  it('opens the github installer when github is selected', () => {
+  it('opens the github installer when github is selected', async () => {
     render(<InstallPluginDropdown onSwitchToMarketplaceTab={vi.fn()} />)
 
     fireEvent.click(screen.getByTestId('dropdown-trigger'))
     fireEvent.click(screen.getByText('plugin.source.github'))
 
-    expect(screen.getByTestId('github-modal')).toBeInTheDocument()
+    expect(await screen.findByTestId('github-modal')).toBeInTheDocument()
   })
 
   it('opens the local package installer when a file is selected', () => {
@@ -153,4 +204,40 @@ describe('InstallPluginDropdown', () => {
     expect(screen.getByTestId('local-modal')).toBeInTheDocument()
     expect(screen.getByText('plugin.difypkg')).toBeInTheDocument()
   })
+
+  it('triggers the hidden file input when local is selected from the menu', () => {
+    const clickSpy = vi.spyOn(HTMLInputElement.prototype, 'click')
+
+    render(<InstallPluginDropdown onSwitchToMarketplaceTab={vi.fn()} />)
+
+    fireEvent.click(screen.getByTestId('dropdown-trigger'))
+    fireEvent.click(screen.getByText('plugin.source.local'))
+
+    expect(clickSpy).toHaveBeenCalledTimes(1)
+    clickSpy.mockRestore()
+  })
+
+  it('closes the github installer when the modal requests close', async () => {
+    render(<InstallPluginDropdown onSwitchToMarketplaceTab={vi.fn()} />)
+
+    fireEvent.click(screen.getByTestId('dropdown-trigger'))
+    fireEvent.click(screen.getByText('plugin.source.github'))
+    fireEvent.click(await screen.findByTestId('close-github-modal'))
+
+    expect(screen.queryByTestId('github-modal')).not.toBeInTheDocument()
+  })
+
+  it('closes the local package installer when the modal requests close', () => {
+    const { container } = render(<InstallPluginDropdown onSwitchToMarketplaceTab={vi.fn()} />)
+
+    fireEvent.click(screen.getByTestId('dropdown-trigger'))
+    fireEvent.change(container.querySelector('input[type="file"]')!, {
+      target: {
+        files: [new File(['content'], 'plugin.difypkg')],
+      },
+    })
+    fireEvent.click(screen.getByTestId('close-local-modal'))
+
+    expect(screen.queryByTestId('local-modal')).not.toBeInTheDocument()
+  })
 })
diff --git a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
index 4bfe495b93..9b98d16410 100644
--- a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
+++ b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
@@ -8,12 +8,13 @@ import { useTranslation } from 'react-i18next'
 import { FileZip } from '@/app/components/base/icons/src/vender/solid/files'
 import { Github } from '@/app/components/base/icons/src/vender/solid/general'
 import { MagicBox } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import { Button } from '@/app/components/base/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import InstallFromGitHub from '@/app/components/plugins/install-plugin/install-from-github'
 import InstallFromLocalPackage from '@/app/components/plugins/install-plugin/install-from-local-package'
 import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
@@ -77,61 +78,66 @@ const InstallPluginDropdown = ({
     }
   }, [plugin_installation_permission, enable_marketplace, t])
 
+  const handleInstallMethodSelect = (action: string) => {
+    if (action === 'local') {
+      fileInputRef.current?.click()
+      return
+    }
+
+    if (action === 'marketplace') {
+      onSwitchToMarketplaceTab()
+      return
+    }
+
+    queueMicrotask(() => {
+      setSelectedAction(action)
+    })
+  }
+
   return (
-    <PortalToFollowElem
-      open={isMenuOpen}
-      onOpenChange={setIsMenuOpen}
-      placement="bottom-start"
-      offset={4}
-    >
+    <DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
       <div className="relative">
-        <PortalToFollowElemTrigger onClick={() => setIsMenuOpen(v => !v)}>
-          <Button
-            className={cn('h-full w-full p-2 text-components-button-secondary-text', isMenuOpen && 'bg-state-base-hover')}
-          >
+        <DropdownMenuTrigger
+          render={(
+            <Button
+              className={cn('h-full w-full p-2 text-components-button-secondary-text', isMenuOpen && 'bg-state-base-hover')}
+            />
+          )}
+        >
+          <>
             <RiAddLine className="h-4 w-4" />
             <span className="pl-1">{t('installPlugin', { ns: 'plugin' })}</span>
             <RiArrowDownSLine className="ml-1 h-4 w-4" />
-          </Button>
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className="z-1002">
-          <div className="shadows-shadow-lg flex w-[200px] flex-col items-start rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-1 pb-2">
-            <span className="flex items-start self-stretch pt-1 pr-3 pb-0.5 pl-2 system-xs-medium-uppercase text-text-tertiary">
-              {t('installFrom', { ns: 'plugin' })}
-            </span>
-            <input
-              type="file"
-              ref={fileInputRef}
-              style={{ display: 'none' }}
-              onChange={handleFileChange}
-              accept={SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS}
-            />
-            <div className="w-full">
-              {installMethods.map(({ icon: Icon, text, action }) => (
-                <div
-                  key={action}
-                  className="flex w-full cursor-pointer! items-center gap-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover"
-                  onClick={() => {
-                    if (action === 'local') {
-                      fileInputRef.current?.click()
-                    }
-                    else if (action === 'marketplace') {
-                      onSwitchToMarketplaceTab()
-                      setIsMenuOpen(false)
-                    }
-                    else {
-                      setSelectedAction(action)
-                      setIsMenuOpen(false)
-                    }
-                  }}
-                >
-                  <Icon className="h-4 w-4 text-text-tertiary" />
-                  <span className="px-1 system-md-regular text-text-secondary">{text}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-        </PortalToFollowElemContent>
+          </>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          placement="bottom-start"
+          sideOffset={4}
+          popupClassName="w-[200px] pb-2"
+        >
+          <span className="flex items-start self-stretch pt-1 pr-3 pb-0.5 pl-3 system-xs-medium-uppercase text-text-tertiary">
+            {t('installFrom', { ns: 'plugin' })}
+          </span>
+          <input
+            type="file"
+            ref={fileInputRef}
+            style={{ display: 'none' }}
+            onChange={handleFileChange}
+            accept={SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS}
+          />
+          {installMethods.map(({ icon: Icon, text, action }) => (
+            <DropdownMenuItem
+              key={action}
+              className="gap-1 px-2"
+              onClick={() => handleInstallMethodSelect(action)}
+            >
+              <div className="flex items-center gap-1">
+                <Icon className="h-4 w-4 text-text-tertiary" />
+                <span className="px-1 system-md-regular text-text-secondary">{text}</span>
+              </div>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
       </div>
       {selectedAction === 'github' && (
         <InstallFromGitHub
@@ -150,7 +156,7 @@ const InstallPluginDropdown = ({
       {/* {pluginLists.map((item: any) => (
         <div key={item.id} onClick={() => handleUninstall(item.id)}>{item.name} 卸载</div>
       ))} */}
-    </PortalToFollowElem>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx
index 15b4429de8..c87673b750 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx
@@ -685,6 +685,26 @@ describe('PluginTasks Component', () => {
       })
     })
 
+    it('should close the menu after clearing the last non-running plugins', async () => {
+      setupMocks([
+        createMockPlugin({ status: TaskStatus.success, plugin_unique_identifier: 'success-1' }),
+      ])
+
+      render(<PluginTasks />)
+
+      fireEvent.click(document.getElementById('plugin-task-trigger')!)
+
+      await waitFor(() => {
+        expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByRole('button', { name: /task\.clearAll/i }))
+
+      await waitFor(() => {
+        expect(document.querySelector('.w-\\[360px\\]')).not.toBeInTheDocument()
+      })
+    })
+
     it('should clear only error plugins when onClearErrors is called', async () => {
       const { mockMutateAsync } = setupMocks([
         createMockPlugin({ status: TaskStatus.failed, plugin_unique_identifier: 'error-1' }),
@@ -797,6 +817,30 @@ describe('PluginTasks Component', () => {
 
       expect(document.querySelector('.w-\\[360px\\]'))!.toBeInTheDocument()
     })
+
+    it('should open for installing-with-success state', () => {
+      setupMocks([
+        createMockPlugin({ status: TaskStatus.running, plugin_unique_identifier: 'running-1' }),
+        createMockPlugin({ status: TaskStatus.success, plugin_unique_identifier: 'success-1' }),
+      ])
+
+      render(<PluginTasks />)
+      fireEvent.click(document.getElementById('plugin-task-trigger')!)
+
+      expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
+    })
+
+    it('should open for installing-with-error state', () => {
+      setupMocks([
+        createMockPlugin({ status: TaskStatus.running, plugin_unique_identifier: 'running-1' }),
+        createMockPlugin({ status: TaskStatus.failed, plugin_unique_identifier: 'failed-1' }),
+      ])
+
+      render(<PluginTasks />)
+      fireEvent.click(document.getElementById('plugin-task-trigger')!)
+
+      expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
+    })
   })
 })
 
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/__tests__/plugin-item.spec.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/__tests__/plugin-item.spec.tsx
index 772e246e22..ea8257af2a 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/__tests__/plugin-item.spec.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/__tests__/plugin-item.spec.tsx
@@ -202,6 +202,7 @@ describe('PluginItem', () => {
       fireEvent.click(clearButton)
 
       expect(handleClear).toHaveBeenCalledTimes(1)
+      expect(clearButton).toHaveClass('invisible', 'flex', 'group-hover/item:visible')
     })
 
     it('should not render clear button when onClear is not provided', () => {
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx
index ef857cb6c6..0129c65ee2 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx
@@ -108,7 +108,7 @@ const ErrorPluginItem: FC<ErrorPluginItemProps> = ({ plugin, getIconUrl, languag
           </span>
         )}
         statusText={(
-          <span className="whitespace-pre-line">
+          <span className="block max-w-full break-words whitespace-pre-line">
             {plugin.message || errorMsg}
           </span>
         )}
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx
index f627047b24..2fdb5696ea 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx
@@ -39,7 +39,7 @@ const PluginItem: FC<PluginItemProps> = ({
         <div className="truncate system-sm-medium text-text-secondary">
           {plugin.labels[language]}
         </div>
-        <div className={`system-xs-regular ${statusClassName || 'text-text-tertiary'}`}>
+        <div className={`min-w-0 system-xs-regular break-words ${statusClassName || 'text-text-tertiary'}`}>
           {statusText}
         </div>
         {action}
@@ -47,7 +47,7 @@ const PluginItem: FC<PluginItemProps> = ({
       {onClear && (
         <button
           type="button"
-          className="hidden h-6 w-6 shrink-0 items-center justify-center rounded-md group-hover/item:flex hover:bg-state-base-hover-alt"
+          className="invisible flex h-6 w-6 shrink-0 items-center justify-center self-start rounded-md group-hover/item:visible hover:bg-state-base-hover-alt"
           onClick={onClear}
         >
           <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-section.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-section.tsx
index 418c442e11..0d0c793741 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-section.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-section.tsx
@@ -43,7 +43,7 @@ const PluginSection: FC<PluginSectionProps> = ({
         )
         {headerAction}
       </div>
-      <div className="max-h-[300px] overflow-y-auto">
+      <div className="max-h-[300px] overflow-x-hidden overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
         {plugins.map(plugin => (
           <PluginItem
             key={plugin.plugin_unique_identifier}
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx
index fa21a3222c..e0dcc5b6f8 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx
@@ -86,7 +86,7 @@ const PluginTaskList: FC<PluginTaskListProps> = ({
               {t('task.clearAll', { ns: 'plugin' })}
             </Button>
           </div>
-          <div className="max-h-[300px] overflow-y-auto">
+          <div className="max-h-[300px] overflow-x-hidden overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
             {errorPlugins.map(plugin => (
               <ErrorPluginItem
                 key={plugin.plugin_unique_identifier}
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
index b96b1ec07c..9a39b43bf6 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
@@ -5,10 +5,10 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import PluginTaskList from './components/plugin-task-list'
 import TaskStatusIndicator from './components/task-status-indicator'
@@ -33,6 +33,7 @@ const PluginTasks = () => {
     handleClearErrorPlugin,
   } = usePluginTaskStatus()
   const { getIconUrl } = useGetIcon()
+  const canOpenMenu = isFailed || isInstalling || isInstallingWithSuccess || isInstallingWithError || isSuccess
 
   // Generate tooltip text based on status
   const tip = useMemo(() => {
@@ -85,27 +86,20 @@ const PluginTasks = () => {
     [clearPluginsAndClose],
   )
 
-  const handleTriggerClick = useCallback(() => {
-    if (isFailed || isInstalling || isInstallingWithSuccess || isInstallingWithError || isSuccess)
-      setOpen(v => !v)
-  }, [isFailed, isInstalling, isInstallingWithSuccess, isInstallingWithError, isSuccess])
-
   // Hide when no plugin tasks
   if (totalPluginsLength === 0)
     return null
 
   return (
     <div className="flex items-center">
-      <PortalToFollowElem
+      <DropdownMenu
         open={open}
         onOpenChange={setOpen}
-        placement="bottom-start"
-        offset={{
-          mainAxis: 4,
-          crossAxis: 79,
-        }}
       >
-        <PortalToFollowElemTrigger onClick={handleTriggerClick}>
+        <DropdownMenuTrigger
+          render={<div />}
+          disabled={!canOpenMenu}
+        >
           <TaskStatusIndicator
             tip={tip}
             isInstalling={isInstalling}
@@ -118,8 +112,12 @@ const PluginTasks = () => {
             totalPluginsLength={totalPluginsLength}
             onClick={() => {}}
           />
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className="z-11">
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          placement="bottom-end"
+          sideOffset={4}
+          popupClassName="[scrollbar-width:none] overflow-visible border-0 bg-transparent p-0 shadow-none backdrop-blur-none [&::-webkit-scrollbar]:hidden"
+        >
           <PluginTaskList
             runningPlugins={runningPlugins}
             successPlugins={successPlugins}
@@ -129,8 +127,8 @@ const PluginTasks = () => {
             onClearErrors={handleClearErrors}
             onClearSingle={handleClearSingle}
           />
-        </PortalToFollowElemContent>
-      </PortalToFollowElem>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </div>
   )
 }
diff --git a/web/app/components/share/text-generation/__tests__/menu-dropdown.spec.tsx b/web/app/components/share/text-generation/__tests__/menu-dropdown.spec.tsx
index 7ccd788cb0..edad871855 100644
--- a/web/app/components/share/text-generation/__tests__/menu-dropdown.spec.tsx
+++ b/web/app/components/share/text-generation/__tests__/menu-dropdown.spec.tsx
@@ -3,6 +3,27 @@ import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-libra
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import MenuDropdown from '../menu-dropdown'
 
+vi.mock('../info-modal', () => ({
+  default: ({
+    isShow,
+    onClose,
+    data,
+  }: {
+    isShow: boolean
+    onClose: () => void
+    data?: SiteInfo
+  }) => {
+    if (!isShow)
+      return null
+    return (
+      <div data-testid="info-modal">
+        <span>{data?.title}</span>
+        <button type="button" onClick={onClose}>Close Info</button>
+      </div>
+    )
+  },
+}))
+
 const mockReplace = vi.fn()
 const mockPathname = '/test-path'
 vi.mock('@/next/navigation', () => ({
@@ -191,6 +212,25 @@ describe('MenuDropdown', () => {
         expect(screen.getByText('Test App')).toBeInTheDocument()
       })
     })
+
+    it('should close InfoModal when the close handler runs', async () => {
+      render(<MenuDropdown data={baseSiteInfo} />)
+
+      fireEvent.click(screen.getByRole('button'))
+      await waitFor(() => {
+        expect(screen.getByText('common.userProfile.about')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByText('common.userProfile.about'))
+      await waitFor(() => {
+        expect(screen.getByTestId('info-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByText('Close Info'))
+      await waitFor(() => {
+        expect(screen.queryByTestId('info-modal')).not.toBeInTheDocument()
+      })
+    })
   })
 
   describe('forceClose prop', () => {
diff --git a/web/app/components/share/text-generation/menu-dropdown.tsx b/web/app/components/share/text-generation/menu-dropdown.tsx
index bc8323676c..d50a0d77de 100644
--- a/web/app/components/share/text-generation/menu-dropdown.tsx
+++ b/web/app/components/share/text-generation/menu-dropdown.tsx
@@ -1,26 +1,25 @@
 'use client'
-import type { Placement } from '@floating-ui/react'
 import type { FC } from 'react'
+import type { Placement } from '@/app/components/base/ui/placement'
 import type { SiteInfo } from '@/models/share'
 import { cn } from '@langgenius/dify-ui/cn'
-import {
-  RiEqualizer2Line,
-} from '@remixicon/react'
 import * as React from 'react'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import ThemeSwitcher from '@/app/components/base/theme-switcher'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLinkItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { useWebAppStore } from '@/context/web-app-context'
 import { AccessMode } from '@/models/access-control'
 import { usePathname, useRouter } from '@/next/navigation'
 import { webAppLogout } from '@/service/webapp-auth'
-import Divider from '../../base/divider'
 import InfoModal from './info-modal'
 
 type Props = {
@@ -40,24 +39,22 @@ const MenuDropdown: FC<Props> = ({
   const router = useRouter()
   const pathname = usePathname()
   const { t } = useTranslation()
-  const [open, doSetOpen] = useState(false)
-  const openRef = useRef(open)
-  const setOpen = useCallback((v: boolean) => {
-    doSetOpen(v)
-    openRef.current = v
-  }, [doSetOpen])
-
-  const handleTrigger = useCallback(() => {
-    setOpen(!openRef.current)
-  }, [setOpen])
+  const [open, setOpen] = useState(false)
 
   const shareCode = useWebAppStore(s => s.shareCode)
   const handleLogout = useCallback(async () => {
+    setOpen(false)
     await webAppLogout(shareCode!)
     router.replace(`/webapp-signin?redirect_url=${pathname}`)
-  }, [router, pathname, webAppLogout, shareCode])
+  }, [pathname, router, setOpen, shareCode])
 
   const [show, setShow] = useState(false)
+  const handleOpenInfoModal = useCallback(() => {
+    setOpen(false)
+    queueMicrotask(() => {
+      setShow(true)
+    })
+  }, [])
 
   useEffect(() => {
     if (forceClose)
@@ -66,60 +63,56 @@ const MenuDropdown: FC<Props> = ({
 
   return (
     <>
-      <PortalToFollowElem
+      <DropdownMenu
         open={open}
         onOpenChange={setOpen}
-        placement={placement || 'bottom-end'}
-        offset={{
-          mainAxis: 4,
-          crossAxis: -4,
-        }}
       >
-        <PortalToFollowElemTrigger onClick={handleTrigger}>
-          <div>
-            <ActionButton size="l" className={cn(open && 'bg-state-base-hover')}>
-              <RiEqualizer2Line className="h-[18px] w-[18px]" />
-            </ActionButton>
-          </div>
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className="z-50">
-          <div className="w-[224px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
-            <div className="p-1">
-              <div className={cn('flex cursor-pointer items-center rounded-lg py-1.5 pr-2 pl-3 system-md-regular text-text-secondary')}>
-                <div className="grow">{t('theme.theme', { ns: 'common' })}</div>
-                <ThemeSwitcher />
-              </div>
+        <DropdownMenuTrigger
+          render={<div />}
+          aria-label={t('operation.more', { ns: 'common' })}
+        >
+          <ActionButton size="l" className={cn(open && 'bg-state-base-hover')}>
+            <span aria-hidden className="i-ri-equalizer-2-line h-[18px] w-[18px]" />
+          </ActionButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          placement={placement || 'bottom-end'}
+          sideOffset={4}
+          popupClassName="w-[224px]"
+        >
+          <div className="px-3 py-1.5 system-md-regular text-text-secondary">
+            <div className="flex items-center gap-2">
+              <div className="grow">{t('theme.theme', { ns: 'common' })}</div>
+              <ThemeSwitcher />
             </div>
-            <Divider type="horizontal" className="my-0" />
-            <div className="p-1">
-              {data?.privacy_policy && (
-                <a href={data.privacy_policy} target="_blank" className="flex cursor-pointer items-center rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover">
-                  <span className="grow">{t('chat.privacyPolicyMiddle', { ns: 'share' })}</span>
-                </a>
-              )}
-              <div
-                onClick={() => {
-                  handleTrigger()
-                  setShow(true)
-                }}
-                className="cursor-pointer rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover"
-              >
-                {t('userProfile.about', { ns: 'common' })}
-              </div>
-            </div>
-            {!(hideLogout || webAppAccessMode === AccessMode.EXTERNAL_MEMBERS || webAppAccessMode === AccessMode.PUBLIC) && (
-              <div className="p-1">
-                <div
-                  onClick={handleLogout}
-                  className="cursor-pointer rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover"
-                >
-                  {t('userProfile.logout', { ns: 'common' })}
-                </div>
-              </div>
-            )}
           </div>
-        </PortalToFollowElemContent>
-      </PortalToFollowElem>
+          <DropdownMenuSeparator className="my-0" />
+          {data?.privacy_policy && (
+            <DropdownMenuLinkItem
+              className="px-3 system-md-regular"
+              href={data.privacy_policy}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <span className="grow">{t('chat.privacyPolicyMiddle', { ns: 'share' })}</span>
+            </DropdownMenuLinkItem>
+          )}
+          <DropdownMenuItem
+            className="px-3 system-md-regular"
+            onClick={handleOpenInfoModal}
+          >
+            {t('userProfile.about', { ns: 'common' })}
+          </DropdownMenuItem>
+          {!(hideLogout || webAppAccessMode === AccessMode.EXTERNAL_MEMBERS || webAppAccessMode === AccessMode.PUBLIC) && (
+            <DropdownMenuItem
+              className="px-3 system-md-regular"
+              onClick={handleLogout}
+            >
+              {t('userProfile.logout', { ns: 'common' })}
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
       {show && (
         <InfoModal
           isShow={show}
diff --git a/web/app/components/tools/mcp/detail/__tests__/operation-dropdown.spec.tsx b/web/app/components/tools/mcp/detail/__tests__/operation-dropdown.spec.tsx
index 0b4773f796..962f39c326 100644
--- a/web/app/components/tools/mcp/detail/__tests__/operation-dropdown.spec.tsx
+++ b/web/app/components/tools/mcp/detail/__tests__/operation-dropdown.spec.tsx
@@ -2,6 +2,82 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import OperationDropdown from '../operation-dropdown'
 
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+  const React = await import('react')
+  const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ isOpen: open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div data-testid="dropdown-menu" data-open={open}>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({
+      children,
+      render,
+      onClick,
+    }: {
+      children: React.ReactNode
+      render?: React.ReactElement
+      onClick?: React.MouseEventHandler<HTMLElement>
+    }) => {
+      const { isOpen, setOpen } = useDropdownMenuContext()
+      const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+        onClick?.(e)
+        setOpen(!isOpen)
+      }
+
+      if (render)
+        return React.cloneElement(render, { 'data-testid': 'dropdown-trigger', 'onClick': handleClick } as Record<string, unknown>, children)
+
+      return <button data-testid="dropdown-trigger" onClick={handleClick}>{children}</button>
+    },
+    DropdownMenuContent: ({
+      children,
+      className,
+      popupClassName,
+    }: {
+      children: React.ReactNode
+      className?: string
+      popupClassName?: string
+    }) => {
+      const { isOpen } = useDropdownMenuContext()
+      return isOpen ? <div data-testid="dropdown-content" className={[className, popupClassName].filter(Boolean).join(' ')}>{children}</div> : null
+    },
+    DropdownMenuItem: ({
+      children,
+      onClick,
+      className,
+    }: {
+      children: React.ReactNode
+      onClick?: React.MouseEventHandler<HTMLButtonElement>
+      className?: string
+    }) => {
+      const { setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          data-testid="dropdown-item"
+          className={className}
+          onClick={(e) => {
+            onClick?.(e)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+  }
+})
+
 describe('OperationDropdown', () => {
   const defaultProps = {
     onEdit: vi.fn(),
@@ -16,7 +92,7 @@ describe('OperationDropdown', () => {
 
     it('should render trigger button with more icon', () => {
       render(<OperationDropdown {...defaultProps} />)
-      const button = document.querySelector('button')
+      const button = screen.getByTestId('dropdown-trigger')
       expect(button).toBeInTheDocument()
       const svg = button?.querySelector('svg')
       expect(svg).toBeInTheDocument()
@@ -39,37 +115,27 @@ describe('OperationDropdown', () => {
     it('should open dropdown when trigger is clicked', async () => {
       render(<OperationDropdown {...defaultProps} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
 
-        // Dropdown content should be rendered
-        expect(screen.getByText('tools.mcp.operation.edit')).toBeInTheDocument()
-        expect(screen.getByText('tools.mcp.operation.remove')).toBeInTheDocument()
-      }
+      expect(screen.getByText('tools.mcp.operation.edit')).toBeInTheDocument()
+      expect(screen.getByText('tools.mcp.operation.remove')).toBeInTheDocument()
     })
 
     it('should call onOpenChange when opened', () => {
       const onOpenChange = vi.fn()
       render(<OperationDropdown {...defaultProps} onOpenChange={onOpenChange} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
-        expect(onOpenChange).toHaveBeenCalledWith(true)
-      }
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      expect(onOpenChange).toHaveBeenCalledWith(true)
     })
 
     it('should close dropdown when trigger is clicked again', async () => {
       const onOpenChange = vi.fn()
       render(<OperationDropdown {...defaultProps} onOpenChange={onOpenChange} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
-        fireEvent.click(trigger)
-        expect(onOpenChange).toHaveBeenLastCalledWith(false)
-      }
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      expect(onOpenChange).toHaveBeenLastCalledWith(false)
     })
   })
 
@@ -78,62 +144,38 @@ describe('OperationDropdown', () => {
       const onEdit = vi.fn()
       render(<OperationDropdown {...defaultProps} onEdit={onEdit} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
-
-        const editOption = screen.getByText('tools.mcp.operation.edit')
-        fireEvent.click(editOption)
-
-        expect(onEdit).toHaveBeenCalledTimes(1)
-      }
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      fireEvent.click(screen.getByText('tools.mcp.operation.edit'))
+      expect(onEdit).toHaveBeenCalledTimes(1)
     })
 
     it('should call onRemove when remove option is clicked', () => {
       const onRemove = vi.fn()
       render(<OperationDropdown {...defaultProps} onRemove={onRemove} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
-
-        const removeOption = screen.getByText('tools.mcp.operation.remove')
-        fireEvent.click(removeOption)
-
-        expect(onRemove).toHaveBeenCalledTimes(1)
-      }
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      fireEvent.click(screen.getByText('tools.mcp.operation.remove'))
+      expect(onRemove).toHaveBeenCalledTimes(1)
     })
 
     it('should close dropdown after edit is clicked', () => {
       const onOpenChange = vi.fn()
       render(<OperationDropdown {...defaultProps} onOpenChange={onOpenChange} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
-        onOpenChange.mockClear()
-
-        const editOption = screen.getByText('tools.mcp.operation.edit')
-        fireEvent.click(editOption)
-
-        expect(onOpenChange).toHaveBeenCalledWith(false)
-      }
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      onOpenChange.mockClear()
+      fireEvent.click(screen.getByText('tools.mcp.operation.edit'))
+      expect(onOpenChange).toHaveBeenCalledWith(false)
     })
 
     it('should close dropdown after remove is clicked', () => {
       const onOpenChange = vi.fn()
       render(<OperationDropdown {...defaultProps} onOpenChange={onOpenChange} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
-        onOpenChange.mockClear()
-
-        const removeOption = screen.getByText('tools.mcp.operation.remove')
-        fireEvent.click(removeOption)
-
-        expect(onOpenChange).toHaveBeenCalledWith(false)
-      }
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      onOpenChange.mockClear()
+      fireEvent.click(screen.getByText('tools.mcp.operation.remove'))
+      expect(onOpenChange).toHaveBeenCalledWith(false)
     })
   })
 
@@ -141,39 +183,25 @@ describe('OperationDropdown', () => {
     it('should have correct dropdown width', () => {
       render(<OperationDropdown {...defaultProps} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
-
-        const dropdown = document.querySelector('.w-\\[160px\\]')
-        expect(dropdown).toBeInTheDocument()
-      }
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      const dropdown = document.querySelector('.w-\\[160px\\]')
+      expect(dropdown).toBeInTheDocument()
     })
 
-    it('should have rounded-xl on dropdown', () => {
+    it('should render dropdown content through the shared popup shell', () => {
       render(<OperationDropdown {...defaultProps} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
-
-        const dropdown = document.querySelector('[class*="rounded-xl"][class*="border"]')
-        expect(dropdown).toBeInTheDocument()
-      }
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      expect(screen.getByTestId('dropdown-content')).toBeInTheDocument()
     })
 
-    it('should show destructive hover style on remove option', () => {
+    it('should apply destructive highlighted styles on remove option', () => {
       render(<OperationDropdown {...defaultProps} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
-
-        // The text is in a div, and the hover style is on the parent div with group class
-        const removeOptionText = screen.getByText('tools.mcp.operation.remove')
-        const removeOptionContainer = removeOptionText.closest('.group')
-        expect(removeOptionContainer).toHaveClass('hover:bg-state-destructive-hover')
-      }
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      const removeOptionText = screen.getByText('tools.mcp.operation.remove')
+      const removeOptionContainer = removeOptionText.closest('button')
+      expect(removeOptionContainer).toHaveClass('data-highlighted:bg-state-destructive-hover')
     })
   })
 
diff --git a/web/app/components/tools/mcp/detail/operation-dropdown.tsx b/web/app/components/tools/mcp/detail/operation-dropdown.tsx
index 4f5468aebc..9a7ee67051 100644
--- a/web/app/components/tools/mcp/detail/operation-dropdown.tsx
+++ b/web/app/components/tools/mcp/detail/operation-dropdown.tsx
@@ -7,14 +7,15 @@ import {
   RiMoreFill,
 } from '@remixicon/react'
 import * as React from 'react'
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 
 type Props = {
   inCard?: boolean
@@ -30,60 +31,37 @@ const OperationDropdown: FC<Props> = ({
   onRemove,
 }) => {
   const { t } = useTranslation()
-  const [open, doSetOpen] = useState(false)
-  const openRef = useRef(open)
-  const setOpen = useCallback((v: boolean) => {
-    doSetOpen(v)
-    openRef.current = v
-    onOpenChange?.(v)
-  }, [doSetOpen])
-
-  const handleTrigger = useCallback(() => {
-    setOpen(!openRef.current)
-  }, [setOpen])
+  const [open, setOpen] = useState(false)
+  const handleOpenChange = useCallback((nextOpen: boolean) => {
+    setOpen(nextOpen)
+    onOpenChange?.(nextOpen)
+  }, [onOpenChange])
 
   return (
-    <PortalToFollowElem
-      open={open}
-      onOpenChange={setOpen}
-      placement="bottom-end"
-      offset={{
-        mainAxis: !inCard ? -12 : 0,
-        crossAxis: !inCard ? 36 : 0,
-      }}
-    >
-      <PortalToFollowElemTrigger onClick={handleTrigger}>
-        <div>
-          <ActionButton size={inCard ? 'l' : 'm'} className={cn(open && 'bg-state-base-hover')}>
-            <RiMoreFill className={cn('h-4 w-4', inCard && 'h-5 w-5')} />
-          </ActionButton>
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-50">
-        <div className="w-[160px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-xs">
-          <div
-            className="flex cursor-pointer items-center rounded-lg px-3 py-1.5 hover:bg-state-base-hover"
-            onClick={() => {
-              onEdit()
-              handleTrigger()
-            }}
-          >
-            <RiEditLine className="h-4 w-4 text-text-tertiary" />
-            <div className="ml-2 system-md-regular text-text-secondary">{t('mcp.operation.edit', { ns: 'tools' })}</div>
-          </div>
-          <div
-            className="group flex cursor-pointer items-center rounded-lg px-3 py-1.5 hover:bg-state-destructive-hover"
-            onClick={() => {
-              onRemove()
-              handleTrigger()
-            }}
-          >
-            <RiDeleteBinLine className="h-4 w-4 text-text-tertiary group-hover:text-text-destructive-secondary" />
-            <div className="ml-2 system-md-regular text-text-secondary group-hover:text-text-destructive">{t('mcp.operation.remove', { ns: 'tools' })}</div>
-          </div>
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+    <DropdownMenu open={open} onOpenChange={handleOpenChange}>
+      <DropdownMenuTrigger
+        render={<ActionButton size={inCard ? 'l' : 'm'} className={cn(open && 'bg-state-base-hover')} />}
+      >
+        <RiMoreFill className={cn('h-4 w-4', inCard && 'h-5 w-5')} />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="w-[160px]"
+      >
+        <DropdownMenuItem onClick={onEdit}>
+          <RiEditLine className="h-4 w-4 shrink-0 text-text-tertiary" />
+          <div className="ml-2 system-md-regular text-text-secondary">{t('mcp.operation.edit', { ns: 'tools' })}</div>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className="data-highlighted:bg-state-destructive-hover data-highlighted:text-text-destructive"
+          onClick={onRemove}
+        >
+          <RiDeleteBinLine className="h-4 w-4 shrink-0 text-inherit" />
+          <div className="ml-2 system-md-regular text-inherit">{t('mcp.operation.remove', { ns: 'tools' })}</div>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 export default React.memo(OperationDropdown)
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/__tests__/action.spec.tsx b/web/app/components/workflow/block-selector/market-place-plugin/__tests__/action.spec.tsx
new file mode 100644
index 0000000000..1d845dd5fc
--- /dev/null
+++ b/web/app/components/workflow/block-selector/market-place-plugin/__tests__/action.spec.tsx
@@ -0,0 +1,124 @@
+import type { ComponentProps } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useDownloadPlugin } from '@/service/use-plugins'
+import OperationDropdown from '../action'
+
+const mockDownloadBlob = vi.fn()
+const mockRemoveQueries = vi.fn()
+
+vi.mock('next-themes', () => ({
+  useTheme: () => ({
+    theme: 'light',
+  }),
+}))
+
+vi.mock('@/service/use-plugins', () => ({
+  useDownloadPlugin: vi.fn(),
+}))
+
+vi.mock('@/utils/download', () => ({
+  downloadBlob: (...args: unknown[]) => mockDownloadBlob(...args),
+}))
+
+vi.mock('@/utils/var', () => ({
+  getMarketplaceUrl: (path: string) => `https://marketplace.example${path}`,
+}))
+
+const createQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+})
+
+const renderComponent = (props?: Partial<ComponentProps<typeof OperationDropdown>>) => {
+  const queryClient = createQueryClient()
+  vi.spyOn(queryClient, 'removeQueries').mockImplementation(((...args) => {
+    return mockRemoveQueries(...args)
+  }) as typeof queryClient.removeQueries)
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <OperationDropdown
+        open={false}
+        onOpenChange={vi.fn()}
+        author="langgenius"
+        name="test-plugin"
+        version="1.0.0"
+        {...props}
+      />
+    </QueryClientProvider>,
+  )
+}
+
+describe('OperationDropdown', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useDownloadPlugin).mockImplementation((_, enabled) => ({
+      data: enabled ? null : null,
+      isLoading: false,
+    }) as unknown as ReturnType<typeof useDownloadPlugin>)
+  })
+
+  it('should render download and view details actions when opened', async () => {
+    renderComponent({ open: true })
+
+    expect(screen.getByText('common.operation.download')).toBeInTheDocument()
+    expect(screen.getByText('common.operation.viewDetails')).toBeInTheDocument()
+  })
+
+  it('should request a download when download is clicked', async () => {
+    const onOpenChange = vi.fn()
+    renderComponent({ open: true, onOpenChange })
+
+    await userEvent.setup().click(screen.getByText('common.operation.download'))
+
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+    expect(mockRemoveQueries).toHaveBeenCalled()
+  })
+
+  it('should skip download when already loading', async () => {
+    vi.mocked(useDownloadPlugin).mockReturnValue({
+      data: null,
+      isLoading: true,
+    } as unknown as ReturnType<typeof useDownloadPlugin>)
+
+    renderComponent({ open: true })
+
+    await userEvent.setup().click(screen.getByText('common.operation.download'))
+
+    expect(mockRemoveQueries).not.toHaveBeenCalled()
+  })
+
+  it('should download the blob when the hook returns data', async () => {
+    vi.mocked(useDownloadPlugin).mockImplementation((_, enabled) => ({
+      data: enabled ? new Blob(['plugin zip'], { type: 'application/zip' }) : null,
+      isLoading: false,
+    }) as unknown as ReturnType<typeof useDownloadPlugin>)
+
+    renderComponent({ open: true })
+
+    await userEvent.setup().click(screen.getByText('common.operation.download'))
+
+    await waitFor(() => {
+      expect(mockDownloadBlob).toHaveBeenCalledWith({
+        data: expect.any(Blob),
+        fileName: 'langgenius-test-plugin_1.0.0.zip',
+      })
+    })
+    expect(mockRemoveQueries).toHaveBeenCalled()
+  })
+
+  it('should link to the marketplace detail page', () => {
+    renderComponent({ open: true })
+
+    expect(screen.getByRole('menuitem', { name: 'common.operation.viewDetails' })).toHaveAttribute(
+      'href',
+      'https://marketplace.example/plugins/langgenius/test-plugin',
+    )
+  })
+})
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
index 4ae623ffc1..a058e8c051 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
@@ -1,19 +1,19 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
-import { RiMoreFill } from '@remixicon/react'
 import { useQueryClient } from '@tanstack/react-query'
 import { useTheme } from 'next-themes'
 import * as React from 'react'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-// import { Button } from '@/app/components/base/ui/button'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLinkItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { useDownloadPlugin } from '@/service/use-plugins'
 import { downloadBlob } from '@/utils/download'
 import { getMarketplaceUrl } from '@/utils/var'
@@ -36,16 +36,10 @@ const OperationDropdown: FC<Props> = ({
   const { t } = useTranslation()
   const { theme } = useTheme()
   const queryClient = useQueryClient()
-  const openRef = useRef(open)
-  const setOpen = useCallback((v: boolean) => {
-    onOpenChange(v)
-    openRef.current = v
+  const setOpen = useCallback((value: boolean) => {
+    onOpenChange(value)
   }, [onOpenChange])
 
-  const handleTrigger = useCallback(() => {
-    setOpen(!openRef.current)
-  }, [setOpen])
-
   const [needDownload, setNeedDownload] = useState(false)
   const downloadInfo = useMemo(() => ({
     organization: author,
@@ -56,12 +50,13 @@ const OperationDropdown: FC<Props> = ({
   const handleDownload = useCallback(() => {
     if (isLoading)
       return
+    setOpen(false)
     queryClient.removeQueries({
       queryKey: ['plugins', 'downloadPlugin', downloadInfo],
       exact: true,
     })
     setNeedDownload(true)
-  }, [downloadInfo, isLoading, queryClient])
+  }, [downloadInfo, isLoading, queryClient, setOpen])
 
   useEffect(() => {
     if (!needDownload || !blob)
@@ -75,27 +70,33 @@ const OperationDropdown: FC<Props> = ({
     })
   }, [author, blob, downloadInfo, name, needDownload, queryClient, version])
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-end"
-      offset={{
-        mainAxis: 0,
-        crossAxis: 0,
-      }}
     >
-      <PortalToFollowElemTrigger onClick={handleTrigger}>
+      <DropdownMenuTrigger render={<div />}>
         <ActionButton className={cn(open && 'bg-state-base-hover')}>
-          <RiMoreFill className="h-4 w-4 text-components-button-secondary-accent-text" />
+          <span aria-hidden className="i-ri-more-fill h-4 w-4 text-components-button-secondary-accent-text" />
         </ActionButton>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-9999">
-        <div className="min-w-[176px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
-          <div onClick={handleDownload} className="cursor-pointer rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover">{t('operation.download', { ns: 'common' })}</div>
-          <a href={getMarketplaceUrl(`/plugins/${author}/${name}`, { theme })} target="_blank" className="block cursor-pointer rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover">{t('operation.viewDetails', { ns: 'common' })}</a>
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="min-w-[176px]"
+      >
+        <DropdownMenuItem className="system-md-regular" onClick={handleDownload}>
+          {t('operation.download', { ns: 'common' })}
+        </DropdownMenuItem>
+        <DropdownMenuLinkItem
+          className="system-md-regular"
+          href={getMarketplaceUrl(`/plugins/${author}/${name}`, { theme })}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {t('operation.viewDetails', { ns: 'common' })}
+        </DropdownMenuLinkItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 export default React.memo(OperationDropdown)
diff --git a/web/app/components/workflow/header/__tests__/test-run-menu-helpers.spec.tsx b/web/app/components/workflow/header/__tests__/test-run-menu-helpers.spec.tsx
index cce4c070a1..7df9cd091f 100644
--- a/web/app/components/workflow/header/__tests__/test-run-menu-helpers.spec.tsx
+++ b/web/app/components/workflow/header/__tests__/test-run-menu-helpers.spec.tsx
@@ -1,7 +1,7 @@
+import type * as React from 'react'
 import type { TriggerOption } from '../test-run-menu'
 import { fireEvent, render, renderHook, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import * as React from 'react'
 import { TriggerType } from '../test-run-menu'
 import {
   getNormalizedShortcutKey,
@@ -10,6 +10,33 @@ import {
   useShortcutMenu,
 } from '../test-run-menu-helpers'
 
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+  const React = await import('react')
+  const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuContent: ({ children }: { children: React.ReactNode }) => {
+      const { open } = useDropdownMenuContext()
+      return open ? <div>{children}</div> : null
+    },
+    DropdownMenuItem: ({ children, onClick, className }: { children: React.ReactNode, onClick?: React.MouseEventHandler<HTMLButtonElement>, className?: string }) => (
+      <button type="button" className={className} onClick={onClick}>{children}</button>
+    ),
+  }
+})
+
 vi.mock('../shortcuts-name', () => ({
   default: ({ keys }: { keys: string[] }) => <span>{keys.join('+')}</span>,
 }))
diff --git a/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx b/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx
index 2e3384b61e..1d462bfc9c 100644
--- a/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx
+++ b/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx
@@ -5,25 +5,62 @@ import { act } from 'react'
 import * as React from 'react'
 import TestRunMenu, { TriggerType } from '../test-run-menu'
 
-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
-  }) => <div onClick={onClick}>{children}</div>,
-  PortalToFollowElemContent: ({
-    children,
-  }: {
-    children: React.ReactNode
-  }) => <div>{children}</div>,
-}))
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+  const React = await import('react')
+  const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({
+      children,
+      render,
+    }: {
+      children: React.ReactNode
+      render?: React.ReactElement
+    }) => {
+      const { open, setOpen } = useDropdownMenuContext()
+
+      if (render)
+        return React.cloneElement(render, { onClick: () => setOpen(!open) } as Record<string, unknown>, children)
+
+      return <button type="button" onClick={() => setOpen(!open)}>{children}</button>
+    },
+    DropdownMenuContent: ({ children }: { children: React.ReactNode }) => {
+      const { open } = useDropdownMenuContext()
+      return open ? <div>{children}</div> : null
+    },
+    DropdownMenuGroup: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    DropdownMenuLabel: ({ children, className }: { children: React.ReactNode, className?: string }) => <div className={className}>{children}</div>,
+    DropdownMenuGroupLabel: ({ children, className }: { children: React.ReactNode, className?: string }) => <div className={className}>{children}</div>,
+    DropdownMenuSeparator: ({ className }: { className?: string }) => <div className={className} data-testid="dropdown-separator" />,
+    DropdownMenuItem: ({ children, onClick, className }: { children: React.ReactNode, onClick?: React.MouseEventHandler<HTMLButtonElement>, className?: string }) => {
+      const { setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          className={className}
+          onClick={(event) => {
+            onClick?.(event)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+  }
+})
 
 vi.mock('../shortcuts-name', () => ({
   default: ({ keys }: { keys: string[] }) => <span>{keys.join('+')}</span>,
@@ -95,10 +132,11 @@ describe('TestRunMenu', () => {
     act(() => {
       fireEvent.click(screen.getByRole('button', { name: 'Toggle via ref' }))
     })
+    expect(screen.getByText('~')).toBeInTheDocument()
+
     fireEvent.keyDown(window, { key: '0' })
 
     expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ id: 'run-all' }))
-    expect(screen.getByText('~')).toBeInTheDocument()
   })
 
   it('should ignore disabled options in the rendered menu', async () => {
diff --git a/web/app/components/workflow/header/test-run-menu-helpers.tsx b/web/app/components/workflow/header/test-run-menu-helpers.tsx
index 1c34761df6..4a25cd87a6 100644
--- a/web/app/components/workflow/header/test-run-menu-helpers.tsx
+++ b/web/app/components/workflow/header/test-run-menu-helpers.tsx
@@ -6,6 +6,7 @@ import {
   isValidElement,
   useEffect,
 } from 'react'
+import { DropdownMenuItem } from '@/app/components/base/ui/dropdown-menu'
 import ShortcutsName from '../shortcuts-name'
 
 export type ShortcutMapping = {
@@ -27,9 +28,8 @@ export const OptionRow = ({
   onSelect: (option: TriggerOption) => void
 }) => {
   return (
-    <div
-      key={option.id}
-      className="flex cursor-pointer items-center rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover"
+    <DropdownMenuItem
+      className="h-auto px-3 py-1.5 system-md-regular"
       onClick={() => onSelect(option)}
     >
       <div className="flex min-w-0 flex-1 items-center">
@@ -41,7 +41,7 @@ export const OptionRow = ({
       {shortcutKey && (
         <ShortcutsName keys={[shortcutKey]} className="ml-2" textColor="secondary" />
       )}
-    </div>
+    </DropdownMenuItem>
   )
 }
 
diff --git a/web/app/components/workflow/header/test-run-menu.tsx b/web/app/components/workflow/header/test-run-menu.tsx
index 1d496e4332..6540875e6b 100644
--- a/web/app/components/workflow/header/test-run-menu.tsx
+++ b/web/app/components/workflow/header/test-run-menu.tsx
@@ -1,7 +1,7 @@
 import type { ShortcutMapping } from './test-run-menu-helpers'
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/app/components/base/ui/dropdown-menu'
 import { OptionRow, SingleOptionTrigger, useShortcutMenu } from './test-run-menu-helpers'
 
 export enum TriggerType {
@@ -127,7 +127,7 @@ const TestRunMenu = forwardRef<TestRunMenuRef, TestRunMenuProps>(({
   }), [hasSingleEnabledOption, runSoleOption])
 
   const renderOption = (option: TriggerOption) => {
-    return <OptionRow option={option} shortcutKey={shortcutKeyById.get(option.id)} onSelect={handleSelect} />
+    return <OptionRow key={option.id} option={option} shortcutKey={shortcutKeyById.get(option.id)} onSelect={handleSelect} />
   }
 
   const { hasUserInput, hasTriggers, hasRunAll } = useMemo(() => getMenuVisibility(options), [options])
@@ -141,27 +141,28 @@ const TestRunMenu = forwardRef<TestRunMenuRef, TestRunMenuProps>(({
   }
 
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-start"
-      offset={{ mainAxis: 8, crossAxis: -4 }}
     >
-      <PortalToFollowElemTrigger asChild onClick={() => setOpen(!open)}>
-        <div style={{ userSelect: 'none' }}>
-          {children}
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-12">
-        <div className="w-[284px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-1 shadow-lg">
-          <div className="mb-2 px-3 pt-2 text-sm font-medium text-text-primary">
+      <DropdownMenuTrigger render={<div style={{ userSelect: 'none' }} />}>
+        {children}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-start"
+        sideOffset={8}
+        alignOffset={-4}
+        popupClassName="w-[284px] p-1"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuLabel className="mb-1 px-3 pt-2 text-sm font-medium text-text-primary">
             {t('common.chooseStartNodeToRun', { ns: 'workflow' })}
-          </div>
+          </DropdownMenuLabel>
           <div>
             {hasUserInput && renderOption(options.userInput!)}
 
             {(hasTriggers || hasRunAll) && hasUserInput && (
-              <div className="mx-3 my-1 h-px bg-divider-subtle" />
+              <DropdownMenuSeparator className="mx-3" />
             )}
 
             {hasRunAll && renderOption(options.runAll!)}
@@ -170,9 +171,9 @@ const TestRunMenu = forwardRef<TestRunMenuRef, TestRunMenuProps>(({
               .filter(trigger => trigger.enabled !== false)
               .map(trigger => renderOption(trigger))}
           </div>
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 })
 
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/__tests__/operator.spec.tsx b/web/app/components/workflow/nodes/_base/components/next-step/__tests__/operator.spec.tsx
new file mode 100644
index 0000000000..9afa29642d
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/next-step/__tests__/operator.spec.tsx
@@ -0,0 +1,152 @@
+import type {
+  ReactNode,
+} from 'react'
+import type { CommonNodeType } from '@/app/components/workflow/types'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import {
+  useAvailableBlocks,
+  useNodesInteractions,
+} from '@/app/components/workflow/hooks'
+import { BlockEnum } from '@/app/components/workflow/types'
+import Operator from '../operator'
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: { ns?: string }) => options?.ns ? `${options.ns}.${key}` : key,
+  }),
+}))
+
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+  const React = await import('react')
+  const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({ children, render }: { children: ReactNode, render?: ReactNode }) => {
+      const { open, setOpen } = useDropdownMenuContext()
+      if (render)
+        return <div onClick={() => setOpen(!open)}>{children}</div>
+
+      return <button type="button" onClick={() => setOpen(!open)}>{children}</button>
+    },
+    DropdownMenuContent: ({ children }: { children: ReactNode }) => {
+      const { open } = useDropdownMenuContext()
+      return open ? <div>{children}</div> : null
+    },
+  }
+})
+
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, className }: { children: ReactNode, className?: string }) => (
+    <button type="button" className={className}>
+      {children}
+    </button>
+  ),
+}))
+
+vi.mock('@/app/components/workflow/block-selector', () => ({
+  default: ({ trigger, onSelect }: { trigger: ((open: boolean) => ReactNode) | ReactNode, onSelect: (type: BlockEnum) => void }) => (
+    <div>
+      {typeof trigger === 'function' ? trigger(false) : trigger}
+      <button type="button" onClick={() => onSelect(BlockEnum.HttpRequest)}>select-http</button>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/workflow/hooks', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/app/components/workflow/hooks')>()
+  return {
+    ...actual,
+    useAvailableBlocks: vi.fn(),
+    useNodesInteractions: vi.fn(),
+  }
+})
+
+const mockUseAvailableBlocks = vi.mocked(useAvailableBlocks)
+const mockUseNodesInteractions = vi.mocked(useNodesInteractions)
+
+const mockHandleNodeChange = vi.fn()
+const mockHandleNodeDelete = vi.fn()
+const mockHandleNodeDisconnect = vi.fn()
+
+const defaultNodeData = {
+  type: BlockEnum.Code,
+  title: 'Code Node',
+} as CommonNodeType
+
+const TestHarness = () => {
+  const [open, setOpen] = useState(false)
+  return (
+    <Operator
+      open={open}
+      onOpenChange={setOpen}
+      data={defaultNodeData}
+      nodeId="node-1"
+      sourceHandle="source"
+    />
+  )
+}
+
+describe('NextStep operator', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseAvailableBlocks.mockReturnValue({
+      availablePrevBlocks: [BlockEnum.HttpRequest],
+      availableNextBlocks: [BlockEnum.HttpRequest],
+      getAvailableBlocks: vi.fn(),
+    } as ReturnType<typeof useAvailableBlocks>)
+    mockUseNodesInteractions.mockReturnValue({
+      handleNodeChange: mockHandleNodeChange,
+      handleNodeDelete: mockHandleNodeDelete,
+      handleNodeDisconnect: mockHandleNodeDisconnect,
+    } as unknown as ReturnType<typeof useNodesInteractions>)
+  })
+
+  it('opens the menu and keeps the change action available', async () => {
+    const user = userEvent.setup()
+    render(<TestHarness />)
+
+    await user.click(screen.getAllByRole('button')[0]!)
+
+    expect(screen.getByText('workflow.panel.change')).toBeInTheDocument()
+    expect(screen.getByText('workflow.common.disconnect')).toBeInTheDocument()
+    expect(screen.getByText('common.operation.delete')).toBeInTheDocument()
+  })
+
+  it('changes the next-step block through the nested selector trigger', async () => {
+    const user = userEvent.setup()
+    render(<TestHarness />)
+
+    await user.click(screen.getAllByRole('button')[0]!)
+    await user.click(screen.getByText('select-http'))
+
+    expect(mockHandleNodeChange).toHaveBeenCalledWith('node-1', BlockEnum.HttpRequest, 'source', undefined)
+  })
+
+  it('disconnects and deletes the next step from the menu', async () => {
+    const user = userEvent.setup()
+    render(<TestHarness />)
+
+    await user.click(screen.getAllByRole('button')[0]!)
+    await user.click(screen.getByText('workflow.common.disconnect'))
+    expect(mockHandleNodeDisconnect).toHaveBeenCalledWith('node-1')
+    expect(screen.queryByText('workflow.common.disconnect')).not.toBeInTheDocument()
+
+    await user.click(screen.getAllByRole('button')[0]!)
+    await user.click(screen.getByText('common.operation.delete'))
+    expect(mockHandleNodeDelete).toHaveBeenCalledWith('node-1')
+  })
+})
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx b/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
index bc979eed60..c0a4f0b537 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
@@ -2,18 +2,17 @@ import type {
   CommonNodeType,
   OnSelectBlock,
 } from '@/app/components/workflow/types'
-import { RiMoreFill } from '@remixicon/react'
 import { intersection } from 'es-toolkit/array'
 import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import { Button } from '@/app/components/base/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import {
   useAvailableBlocks,
@@ -86,18 +85,21 @@ const Operator = ({
   } = useNodesInteractions()
 
   return (
-    <PortalToFollowElem
-      placement="bottom-end"
-      offset={{ mainAxis: 4, crossAxis: -4 }}
+    <DropdownMenu
       open={open}
       onOpenChange={onOpenChange}
     >
-      <PortalToFollowElemTrigger onClick={() => onOpenChange(!open)}>
+      <DropdownMenuTrigger render={<div />}>
         <Button className="h-6 w-6 p-0">
-          <RiMoreFill className="h-4 w-4" />
+          <span aria-hidden className="i-ri-more-fill h-4 w-4" />
         </Button>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-10">
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        alignOffset={-4}
+        popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
+      >
         <div className="min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur system-md-regular text-text-secondary shadow-lg">
           <div className="p-1">
             <ChangeItem
@@ -107,7 +109,10 @@ const Operator = ({
             />
             <div
               className="flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover"
-              onClick={() => handleNodeDisconnect(nodeId)}
+              onClick={() => {
+                onOpenChange(false)
+                handleNodeDisconnect(nodeId)
+              }}
             >
               {t('common.disconnect', { ns: 'workflow' })}
             </div>
@@ -115,14 +120,17 @@ const Operator = ({
           <div className="p-1">
             <div
               className="flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover"
-              onClick={() => handleNodeDelete(nodeId)}
+              onClick={() => {
+                onOpenChange(false)
+                handleNodeDelete(nodeId)
+              }}
             >
               {t('operation.delete', { ns: 'common' })}
             </div>
           </div>
         </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/_base/components/panel-operator/__tests__/index.spec.tsx b/web/app/components/workflow/nodes/_base/components/panel-operator/__tests__/index.spec.tsx
index 183e28c5f0..6dab0f33a5 100644
--- a/web/app/components/workflow/nodes/_base/components/panel-operator/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/panel-operator/__tests__/index.spec.tsx
@@ -70,7 +70,11 @@ const createQueryResult = <T,>(data: T): UseQueryResult<T, Error> => ({
   promise: Promise.resolve(data),
 } as UseQueryResult<T, Error>)
 
-const renderComponent = (showHelpLink: boolean = true, onOpenChange?: (open: boolean) => void) =>
+const renderComponent = (
+  showHelpLink: boolean = true,
+  onOpenChange?: (open: boolean) => void,
+  offset?: { mainAxis: number, crossAxis: number } | number,
+) =>
   renderWorkflowFlowComponent(
     <PanelOperator
       id="node-1"
@@ -80,6 +84,7 @@ const renderComponent = (showHelpLink: boolean = true, onOpenChange?: (open: boo
         type: BlockEnum.Code,
       }}
       triggerClassName="panel-operator-trigger"
+      offset={offset}
       onOpenChange={onOpenChange}
       showHelpLink={showHelpLink}
     />,
@@ -158,5 +163,15 @@ describe('PanelOperator', () => {
       expect(screen.queryByText('workflow.panel.helpLink')).not.toBeInTheDocument()
       expect(screen.getByText('Node description')).toBeInTheDocument()
     })
+
+    it('should still open the popup when using a numeric offset and no open-change callback', async () => {
+      const user = userEvent.setup()
+      const { container } = renderComponent(true, undefined, 0)
+
+      await user.click(container.querySelector('.panel-operator-trigger') as HTMLElement)
+
+      expect(screen.getByText('workflow.panel.runThisStep')).toBeInTheDocument()
+      expect(screen.getByText('Node description')).toBeInTheDocument()
+    })
   })
 })
diff --git a/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx b/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
index 173a084dcf..2109365d75 100644
--- a/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
@@ -1,23 +1,22 @@
 import type { OffsetOptions } from '@floating-ui/react'
 import type { Node } from '@/app/components/workflow/types'
-import { RiMoreFill } from '@remixicon/react'
 import {
   memo,
   useCallback,
   useState,
 } from 'react'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import PanelOperatorPopup from './panel-operator-popup'
 
 type PanelOperatorProps = {
   id: string
   data: Node['data']
   triggerClassName?: string
-  offset?: OffsetOptions
+  offset?: OffsetOptions | number
   onOpenChange?: (open: boolean) => void
   inNode?: boolean
   showHelpLink?: boolean
@@ -34,6 +33,14 @@ const PanelOperator = ({
   showHelpLink = true,
 }: PanelOperatorProps) => {
   const [open, setOpen] = useState(false)
+  const sideOffset = typeof offset === 'number'
+    ? offset
+    : typeof offset === 'object' && offset && 'mainAxis' in offset && typeof offset.mainAxis === 'number'
+      ? offset.mainAxis
+      : 4
+  const alignOffset = typeof offset === 'object' && offset && 'crossAxis' in offset && typeof offset.crossAxis === 'number'
+    ? offset.crossAxis
+    : 0
 
   const handleOpenChange = useCallback((newOpen: boolean) => {
     setOpen(newOpen)
@@ -43,13 +50,11 @@ const PanelOperator = ({
   }, [onOpenChange])
 
   return (
-    <PortalToFollowElem
-      placement="bottom-end"
-      offset={offset}
+    <DropdownMenu
       open={open}
       onOpenChange={handleOpenChange}
     >
-      <PortalToFollowElemTrigger onClick={() => handleOpenChange(!open)}>
+      <DropdownMenuTrigger render={<div />}>
         <div
           className={`
             flex h-6 w-6 cursor-pointer items-center justify-center rounded-md
@@ -58,18 +63,23 @@ const PanelOperator = ({
             ${triggerClassName}
           `}
         >
-          <RiMoreFill className="h-4 w-4 text-text-tertiary" />
+          <span aria-hidden className="i-ri-more-fill h-4 w-4 text-text-tertiary" />
         </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-11">
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
+      >
         <PanelOperatorPopup
           id={id}
           data={data}
-          onClosePopup={() => setOpen(false)}
+          onClosePopup={() => handleOpenChange(false)}
           showHelpLink={showHelpLink}
         />
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx b/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx
index 63813c8a46..e29b1e42a3 100644
--- a/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx
@@ -4,6 +4,75 @@ import { VarType } from '@/app/components/workflow/types'
 import { WriteMode } from '../../types'
 import OperationSelector from '../operation-selector'
 
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+  const React = await import('react')
+  const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({
+      children,
+      className,
+      disabled,
+    }: {
+      children: React.ReactNode
+      className?: string
+      disabled?: boolean
+    }) => {
+      const { open, setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          className={className}
+          disabled={disabled}
+          onClick={() => !disabled && setOpen(!open)}
+        >
+          {children}
+        </button>
+      )
+    },
+    DropdownMenuContent: ({ children }: { children: React.ReactNode }) => {
+      const { open } = useDropdownMenuContext()
+      return open ? <div>{children}</div> : null
+    },
+    DropdownMenuGroup: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    DropdownMenuLabel: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    DropdownMenuGroupLabel: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    DropdownMenuSeparator: () => <div data-testid="dropdown-separator" />,
+    DropdownMenuItem: ({
+      children,
+      onClick,
+    }: {
+      children: React.ReactNode
+      onClick?: React.MouseEventHandler<HTMLButtonElement>
+    }) => {
+      const { setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          onClick={(event) => {
+            onClick?.(event)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+  }
+})
+
 describe('assigner/operation-selector', () => {
   it('shows numeric write modes and emits the selected operation', async () => {
     const user = userEvent.setup()
diff --git a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
index 8bce904b74..a22b8f5f3f 100644
--- a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
@@ -3,18 +3,17 @@ import type { WriteMode } from '../types'
 import type { Item } from '../utils'
 import type { VarType } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
-import {
-  RiArrowDownSLine,
-  RiCheckLine,
-} from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Divider from '@/app/components/base/divider'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { getOperationItems, isOperationItem } from '../utils'
 
 type OperationSelectorProps = {
@@ -49,65 +48,57 @@ const OperationSelector: FC<OperationSelectorProps> = ({
   const selectedItem = items.find(item => item.value === value)
 
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-start"
-      offset={4}
     >
-      <PortalToFollowElemTrigger
-        onClick={() => !disabled && setOpen(v => !v)}
+      <DropdownMenuTrigger
+        disabled={disabled}
+        className={cn('flex items-center gap-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1', disabled ? 'cursor-not-allowed bg-components-input-bg-disabled!' : 'cursor-pointer hover:bg-state-base-hover-alt', open && 'bg-state-base-hover-alt', className)}
       >
-        <div
-          className={cn('flex items-center gap-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1', disabled ? 'cursor-not-allowed bg-components-input-bg-disabled!' : 'cursor-pointer hover:bg-state-base-hover-alt', open && 'bg-state-base-hover-alt', className)}
-        >
-          <div className="flex items-center p-1">
-            <span
-              className={`truncate overflow-hidden system-sm-regular text-ellipsis
+        <div className="flex items-center p-1">
+          <span
+            className={`truncate overflow-hidden system-sm-regular text-ellipsis
                 ${selectedItem ? 'text-components-input-text-filled' : 'text-components-input-text-disabled'}`}
-            >
-              {selectedItem && isOperationItem(selectedItem) ? t(`nodes.assigner.operations.${selectedItem.name}`, { ns: 'workflow' }) : t('nodes.assigner.operations.title', { ns: 'workflow' })}
-            </span>
-          </div>
-          <RiArrowDownSLine className={`h-4 w-4 text-text-quaternary ${disabled && 'text-components-input-text-placeholder'} ${open && 'text-text-secondary'}`} />
+          >
+            {selectedItem && isOperationItem(selectedItem) ? t(`nodes.assigner.operations.${selectedItem.name}`, { ns: 'workflow' }) : t('nodes.assigner.operations.title', { ns: 'workflow' })}
+          </span>
         </div>
-      </PortalToFollowElemTrigger>
+        <span aria-hidden className={cn('i-ri-arrow-down-s-line h-4 w-4 text-text-quaternary', disabled && 'text-components-input-text-placeholder', open && 'text-text-secondary')} />
+      </DropdownMenuTrigger>
 
-      <PortalToFollowElemContent className={`z-20 ${popupClassName}`}>
-        <div className="flex w-[140px] flex-col items-start rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
-          <div className="flex flex-col items-start self-stretch p-1">
-            <div className="flex items-start self-stretch px-3 pt-1 pb-0.5">
-              <div className="flex grow system-xs-medium-uppercase text-text-tertiary">{t('nodes.assigner.operations.title', { ns: 'workflow' })}</div>
-            </div>
-            {items.map(item => (
-              !isOperationItem(item)
-                ? (
-                    <Divider key="divider" className="my-1" />
-                  )
-                : (
-                    <div
-                      key={item.value}
-                      className={cn('flex items-center gap-1 self-stretch rounded-lg px-2 py-1', 'cursor-pointer hover:bg-state-base-hover')}
-                      onClick={() => {
-                        onSelect(item)
-                        setOpen(false)
-                      }}
-                    >
-                      <div className="flex min-h-5 grow items-center gap-1 px-1">
-                        <span className="flex grow system-sm-medium text-text-secondary">{t(`nodes.assigner.operations.${item.name}`, { ns: 'workflow' })}</span>
-                      </div>
-                      {item.value === value && (
-                        <div className="flex items-center justify-center">
-                          <RiCheckLine className="h-4 w-4 text-text-accent" />
-                        </div>
-                      )}
+      <DropdownMenuContent
+        placement="bottom-start"
+        sideOffset={4}
+        popupClassName={cn('w-[140px]', popupClassName)}
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>{t('nodes.assigner.operations.title', { ns: 'workflow' })}</DropdownMenuLabel>
+          {items.map(item => (
+            !isOperationItem(item)
+              ? (
+                  <DropdownMenuSeparator key="divider" />
+                )
+              : (
+                  <DropdownMenuItem
+                    key={item.value}
+                    className="gap-1 px-2 py-1"
+                    onClick={() => onSelect(item)}
+                  >
+                    <div className="flex min-h-5 grow items-center gap-1 px-1">
+                      <span className="flex grow system-sm-medium text-text-secondary">{t(`nodes.assigner.operations.${item.name}`, { ns: 'workflow' })}</span>
                     </div>
-                  )
-            ))}
-          </div>
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+                    {item.value === value && (
+                      <div className="flex items-center justify-center">
+                        <span aria-hidden className="i-ri-check-line h-4 w-4 text-text-accent" />
+                      </div>
+                    )}
+                  </DropdownMenuItem>
+                )
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/workflow/note-node/__tests__/index.spec.tsx b/web/app/components/workflow/note-node/__tests__/index.spec.tsx
index 9814bb63f4..1bfa14ffb1 100644
--- a/web/app/components/workflow/note-node/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/note-node/__tests__/index.spec.tsx
@@ -110,6 +110,8 @@ describe('NoteNode', () => {
     await waitFor(() => {
       expect(screen.getByText('workflow.nodes.note.editor.small')).toBeInTheDocument()
     })
+
+    expect(screen.getByText('workflow.nodes.note.editor.small').closest('.nodrag.nopan.nowheel')).toBeInTheDocument()
   })
 
   it('should hide the toolbar for temporary notes', () => {
diff --git a/web/app/components/workflow/note-node/index.tsx b/web/app/components/workflow/note-node/index.tsx
index 5050041a05..fa69f05841 100644
--- a/web/app/components/workflow/note-node/index.tsx
+++ b/web/app/components/workflow/note-node/index.tsx
@@ -95,7 +95,7 @@ const NoteNode = ({
           </div>
           {
             data.selected && !data._isTempNode && (
-              <div className="absolute top-[-41px] left-1/2 -translate-x-1/2">
+              <div className="pointer-events-auto absolute top-[-41px] left-1/2 z-40 -translate-x-1/2">
                 <NoteEditorToolbar
                   theme={theme}
                   onThemeChange={handleThemeChange}
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/__tests__/index.spec.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/__tests__/index.spec.tsx
index 7a28295830..cee2b7fd40 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/__tests__/index.spec.tsx
@@ -86,7 +86,7 @@ describe('NoteEditor Toolbar', () => {
 
     expect(onThemeChange).toHaveBeenCalledWith(NoteTheme.violet)
 
-    fireEvent.click(container.querySelectorAll('[data-state="closed"]')[container.querySelectorAll('[data-state="closed"]').length - 1] as HTMLElement)
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.more' }))
     fireEvent.click(screen.getByText('workflow.common.copy'))
 
     expect(onCopy).toHaveBeenCalledTimes(1)
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/__tests__/operator.spec.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/__tests__/operator.spec.tsx
index 1870bf913a..c60898b29e 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/__tests__/operator.spec.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/__tests__/operator.spec.tsx
@@ -1,13 +1,132 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import type {
+  MouseEvent,
+  MouseEventHandler,
+  ReactElement,
+  ReactNode,
+} from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import Operator from '../operator'
 
+type DropdownTriggerRenderProps = {
+  'className'?: string
+  'role'?: string
+  'aria-label'?: string
+  'onMouseDown'?: MouseEventHandler<HTMLDivElement>
+  'onClick'?: MouseEventHandler<HTMLDivElement>
+}
+
+type DropdownTriggerProps = {
+  'children': ReactNode
+  'className'?: string
+  'render'?: ReactElement<DropdownTriggerRenderProps>
+  'onMouseDown'?: MouseEventHandler<HTMLDivElement>
+  'onClick'?: MouseEventHandler<HTMLDivElement>
+  'aria-label'?: string
+}
+
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+  const React = await import('react')
+  const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({
+      children,
+      className,
+      render,
+      onMouseDown,
+      onClick,
+      'aria-label': ariaLabel,
+    }: DropdownTriggerProps) => {
+      const { open, setOpen } = useDropdownMenuContext()
+      if (render) {
+        const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {
+          const baseUiEvent = event as MouseEvent<HTMLDivElement> & { preventBaseUIHandler?: () => void }
+          baseUiEvent.preventBaseUIHandler = vi.fn()
+          onMouseDown?.(baseUiEvent)
+          render.props.onMouseDown?.(event)
+        }
+
+        const handleClick = (event: MouseEvent<HTMLDivElement>) => {
+          onClick?.(event)
+          render.props.onClick?.(event)
+          if (!onMouseDown)
+            setOpen(!open)
+        }
+
+        return (
+          <div
+            role={render.props.role ?? 'button'}
+            aria-label={render.props['aria-label'] ?? ariaLabel}
+            className={render.props.className ?? className}
+            onMouseDown={handleMouseDown}
+            onClick={handleClick}
+          >
+            {children}
+          </div>
+        )
+      }
+
+      return (
+        <button
+          type="button"
+          className={className}
+          onClick={() => setOpen(!open)}
+        >
+          {children}
+        </button>
+      )
+    },
+    DropdownMenuContent: ({ children }: { children: ReactNode }) => {
+      const { open } = useDropdownMenuContext()
+      return open ? <div>{children}</div> : null
+    },
+    DropdownMenuItem: ({
+      children,
+      onClick,
+      className,
+    }: {
+      children: ReactNode
+      onClick?: MouseEventHandler<HTMLButtonElement>
+      className?: string
+    }) => {
+      const { setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          className={className}
+          onClick={(event) => {
+            onClick?.(event)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+    DropdownMenuSeparator: ({ className }: { className?: string }) => <div className={className} data-testid="dropdown-separator" />,
+  }
+})
+
 const renderOperator = (showAuthor = false) => {
   const onCopy = vi.fn()
   const onDuplicate = vi.fn()
   const onDelete = vi.fn()
   const onShowAuthorChange = vi.fn()
 
-  const renderResult = render(
+  render(
     <Operator
       onCopy={onCopy}
       onDuplicate={onDuplicate}
@@ -18,7 +137,6 @@ const renderOperator = (showAuthor = false) => {
   )
 
   return {
-    ...renderResult,
     onCopy,
     onDelete,
     onDuplicate,
@@ -27,41 +145,35 @@ const renderOperator = (showAuthor = false) => {
 }
 
 describe('NoteEditor Toolbar Operator', () => {
-  it('should trigger copy, duplicate, and delete from the opened menu', () => {
+  it('triggers copy, duplicate, and delete from the opened menu', async () => {
+    const user = userEvent.setup()
     const {
-      container,
       onCopy,
       onDelete,
       onDuplicate,
     } = renderOperator()
 
-    const trigger = container.querySelector('[data-state="closed"]') as HTMLElement
-
-    fireEvent.click(trigger)
-    fireEvent.click(screen.getByText('workflow.common.copy'))
-
+    await user.click(screen.getByRole('button', { name: 'common.operation.more' }))
+    await user.click(screen.getByText('workflow.common.copy'))
     expect(onCopy).toHaveBeenCalledTimes(1)
 
-    fireEvent.click(container.querySelector('[data-state="closed"]') as HTMLElement)
-    fireEvent.click(screen.getByText('workflow.common.duplicate'))
-
+    await user.click(screen.getByRole('button', { name: 'common.operation.more' }))
+    await user.click(screen.getByText('workflow.common.duplicate'))
     expect(onDuplicate).toHaveBeenCalledTimes(1)
 
-    fireEvent.click(container.querySelector('[data-state="closed"]') as HTMLElement)
-    fireEvent.click(screen.getByText('common.operation.delete'))
-
+    await user.click(screen.getByRole('button', { name: 'common.operation.more' }))
+    await user.click(screen.getByText('common.operation.delete'))
     expect(onDelete).toHaveBeenCalledTimes(1)
   })
 
-  it('should forward the switch state through onShowAuthorChange', () => {
-    const {
-      container,
-      onShowAuthorChange,
-    } = renderOperator(true)
+  it('keeps the menu open when toggling show author', async () => {
+    const user = userEvent.setup()
+    const { onShowAuthorChange } = renderOperator(true)
 
-    fireEvent.click(container.querySelector('[data-state="closed"]') as HTMLElement)
-    fireEvent.click(screen.getByRole('switch'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.more' }))
+    await user.click(screen.getByRole('switch'))
 
     expect(onShowAuthorChange).toHaveBeenCalledWith(false)
+    expect(screen.getByText('workflow.nodes.note.editor.showAuthor')).toBeInTheDocument()
   })
 })
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/index.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/index.tsx
index c7b8fa9787..f00d3464ac 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/index.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/index.tsx
@@ -18,7 +18,11 @@ const Toolbar = ({
   onShowAuthorChange,
 }: ToolbarProps) => {
   return (
-    <div className="inline-flex items-center rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-sm">
+    <div
+      className="nodrag nopan nowheel inline-flex items-center rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-sm"
+      onMouseDown={event => event.stopPropagation()}
+      onClick={event => event.stopPropagation()}
+    >
       <ColorPicker
         theme={theme}
         onThemeChange={onThemeChange}
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
index 35ddef865f..b17af7fec7 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
@@ -1,16 +1,17 @@
 import { cn } from '@langgenius/dify-ui/cn'
-import { RiMoreFill } from '@remixicon/react'
 import {
   memo,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import Switch from '@/app/components/base/switch'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 
 export type OperatorProps = {
@@ -31,47 +32,57 @@ const Operator = ({
   const [open, setOpen] = useState(false)
 
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-end"
-      offset={4}
     >
-      <PortalToFollowElemTrigger onClick={() => setOpen(!open)}>
-        <div
-          className={cn(
-            'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
-            open && 'bg-state-base-hover text-text-secondary',
-          )}
-        >
-          <RiMoreFill className="h-4 w-4" />
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent>
+      <DropdownMenuTrigger
+        nativeButton={false}
+        render={<div />}
+        aria-label={t('operation.more', { ns: 'common' })}
+        className={cn(
+          'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+          open && 'bg-state-base-hover text-text-secondary',
+        )}
+        onMouseDown={(event) => {
+          event.preventDefault()
+          event.stopPropagation()
+          ;(event as typeof event & { preventBaseUIHandler?: () => void }).preventBaseUIHandler?.()
+          setOpen(prev => !prev)
+        }}
+        onClick={event => event.stopPropagation()}
+      >
+        <span aria-hidden className="i-ri-more-fill h-4 w-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
+      >
         <div className="min-w-[192px] rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl">
           <div className="p-1">
-            <div
-              className="flex h-8 cursor-pointer items-center justify-between rounded-md px-3 text-sm text-text-secondary hover:bg-state-base-hover"
+            <DropdownMenuItem
+              className="justify-between rounded-md px-3 text-sm text-text-secondary"
               onClick={() => {
-                onCopy()
                 setOpen(false)
+                onCopy()
               }}
             >
               {t('common.copy', { ns: 'workflow' })}
               <ShortcutsName keys={['ctrl', 'c']} />
-            </div>
-            <div
-              className="flex h-8 cursor-pointer items-center justify-between rounded-md px-3 text-sm text-text-secondary hover:bg-state-base-hover"
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="justify-between rounded-md px-3 text-sm text-text-secondary"
               onClick={() => {
-                onDuplicate()
                 setOpen(false)
+                onDuplicate()
               }}
             >
               {t('common.duplicate', { ns: 'workflow' })}
               <ShortcutsName keys={['ctrl', 'd']} />
-            </div>
+            </DropdownMenuItem>
           </div>
-          <div className="h-px bg-divider-subtle"></div>
+          <DropdownMenuSeparator className="my-0" />
           <div className="p-1">
             <div
               className="flex h-8 cursor-pointer items-center justify-between rounded-md px-3 text-sm text-text-secondary hover:bg-state-base-hover"
@@ -85,22 +96,23 @@ const Operator = ({
               />
             </div>
           </div>
-          <div className="h-px bg-divider-subtle"></div>
+          <DropdownMenuSeparator className="my-0" />
           <div className="p-1">
-            <div
-              className="flex h-8 cursor-pointer items-center justify-between rounded-md px-3 text-sm text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive"
+            <DropdownMenuItem
+              variant="destructive"
+              className="justify-between rounded-md px-3 text-sm text-text-secondary"
               onClick={() => {
-                onDelete()
                 setOpen(false)
+                onDelete()
               }}
             >
               {t('operation.delete', { ns: 'common' })}
               <ShortcutsName keys={['del']} />
-            </div>
+            </DropdownMenuItem>
           </div>
         </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/workflow/operator/__tests__/more-actions.spec.tsx b/web/app/components/workflow/operator/__tests__/more-actions.spec.tsx
new file mode 100644
index 0000000000..b984ca18d6
--- /dev/null
+++ b/web/app/components/workflow/operator/__tests__/more-actions.spec.tsx
@@ -0,0 +1,309 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { act } from 'react'
+import MoreActions from '../more-actions'
+
+const mockToPng = vi.fn()
+const mockToJpeg = vi.fn()
+const mockToSvg = vi.fn()
+const mockDownloadUrl = vi.fn()
+const mockSetViewport = vi.fn()
+const mockGetNodesReadOnly = vi.fn()
+const {
+  mockAppStoreState,
+  mockWorkflowState,
+} = vi.hoisted(() => ({
+  mockAppStoreState: {
+    appSidebarExpand: 'collapse',
+  },
+  mockWorkflowState: {
+    knowledgeName: '',
+    appName: 'Demo App',
+    maximizeCanvas: false,
+  },
+}))
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: { ns?: string }) => options?.ns ? `${options.ns}.${key}` : key,
+  }),
+}))
+
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+  const React = await import('react')
+  const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({ children, className }: { children: React.ReactNode, className?: string }) => {
+      const { open, setOpen } = useDropdownMenuContext()
+      return (
+        <button type="button" className={className} onClick={() => setOpen(!open)}>
+          {children}
+        </button>
+      )
+    },
+    DropdownMenuContent: ({ children }: { children: React.ReactNode }) => {
+      const { open } = useDropdownMenuContext()
+      return open ? <div>{children}</div> : null
+    },
+    DropdownMenuItem: ({
+      children,
+      onClick,
+      className,
+    }: {
+      children: React.ReactNode
+      onClick?: React.MouseEventHandler<HTMLButtonElement>
+      className?: string
+    }) => {
+      const { setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          className={className}
+          onClick={(event) => {
+            onClick?.(event)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+    DropdownMenuSeparator: ({ className }: { className?: string }) => <div className={className} data-testid="dropdown-separator" />,
+  }
+})
+
+vi.mock('html-to-image', () => ({
+  toPng: (...args: unknown[]) => mockToPng(...args),
+  toJpeg: (...args: unknown[]) => mockToJpeg(...args),
+  toSvg: (...args: unknown[]) => mockToSvg(...args),
+}))
+
+vi.mock('reactflow', () => ({
+  getNodesBounds: () => ({ x: 0, y: 0, width: 240, height: 120 }),
+  useReactFlow: () => ({
+    getNodes: () => [{ id: 'node-1' }],
+    getViewport: () => ({ x: 0, y: 0, zoom: 1 }),
+    setViewport: mockSetViewport,
+  }),
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: typeof mockAppStoreState) => unknown) => selector(mockAppStoreState),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useStore: (selector: (state: typeof mockWorkflowState) => unknown) => selector(mockWorkflowState),
+}))
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useNodesReadOnly: () => ({
+    getNodesReadOnly: mockGetNodesReadOnly,
+  }),
+}))
+
+vi.mock('@/utils/download', () => ({
+  downloadUrl: (...args: unknown[]) => mockDownloadUrl(...args),
+}))
+
+vi.mock('../tip-popup', () => ({
+  default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}))
+
+vi.mock('@/app/components/base/image-uploader/image-preview', () => ({
+  default: ({ title, onCancel }: { title: string, onCancel: () => void }) => (
+    <div data-testid="image-preview">
+      <span>{title}</span>
+      <button type="button" onClick={onCancel}>close-preview</button>
+    </div>
+  ),
+}))
+
+describe('MoreActions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useRealTimers()
+    mockGetNodesReadOnly.mockReturnValue(false)
+    mockToPng.mockResolvedValue('data:image/png;base64,current')
+    mockToJpeg.mockResolvedValue('data:image/jpeg;base64,current')
+    mockToSvg.mockResolvedValue('data:image/svg+xml;base64,current')
+    mockAppStoreState.appSidebarExpand = 'collapse'
+    mockWorkflowState.knowledgeName = ''
+    mockWorkflowState.appName = 'Demo App'
+    mockWorkflowState.maximizeCanvas = false
+
+    document.body.innerHTML = ''
+    const viewport = document.createElement('div')
+    viewport.className = 'react-flow__viewport'
+    document.body.appendChild(viewport)
+  })
+
+  it('opens the menu and exports the current view as png', async () => {
+    const user = userEvent.setup()
+
+    render(<MoreActions />)
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getAllByText('workflow.common.exportPNG')[0]!)
+
+    await waitFor(() => {
+      expect(mockToPng).toHaveBeenCalledTimes(1)
+    })
+    expect(mockDownloadUrl).toHaveBeenCalledWith({
+      url: 'data:image/png;base64,current',
+      fileName: 'Demo App.png',
+    })
+  })
+
+  it('does not open the menu when the workflow is read only', async () => {
+    const user = userEvent.setup()
+    mockGetNodesReadOnly.mockReturnValue(true)
+
+    render(<MoreActions />)
+
+    await user.click(screen.getByRole('button'))
+
+    expect(screen.queryByText('workflow.common.exportImage')).not.toBeInTheDocument()
+  })
+
+  it('shows a preview when exporting the whole workflow', async () => {
+    vi.useFakeTimers()
+
+    render(<MoreActions />)
+
+    fireEvent.click(screen.getByRole('button'))
+    fireEvent.click(screen.getAllByText('workflow.common.exportPNG')[1]!)
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(300)
+    })
+
+    expect(screen.getByTestId('image-preview')).toHaveTextContent('Demo App-whole-workflow.png')
+    await act(async () => {
+      await vi.runAllTimersAsync()
+    })
+    expect(mockSetViewport).toHaveBeenCalledTimes(2)
+    expect(mockDownloadUrl).toHaveBeenCalledWith({
+      url: 'data:image/png;base64,current',
+      fileName: 'Demo App-whole-workflow.png',
+    })
+  })
+
+  it.each([
+    ['workflow.common.exportJPEG', mockToJpeg, 'Demo App.jpeg'],
+    ['workflow.common.exportSVG', mockToSvg, 'Demo App.svg'],
+  ])('exports the current view with %s', async (label, exporter, fileName) => {
+    const user = userEvent.setup()
+
+    render(<MoreActions />)
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getAllByText(label)[0]!)
+
+    await waitFor(() => {
+      expect(exporter).toHaveBeenCalledTimes(1)
+    })
+    expect(mockDownloadUrl).toHaveBeenCalledWith({
+      url: expect.any(String),
+      fileName,
+    })
+  })
+
+  it('exports the whole workflow as svg when the canvas is maximized', async () => {
+    vi.useFakeTimers()
+    mockWorkflowState.maximizeCanvas = true
+
+    render(<MoreActions />)
+
+    fireEvent.click(screen.getByRole('button'))
+    fireEvent.click(screen.getAllByText('workflow.common.exportSVG')[1]!)
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(300)
+    })
+
+    expect(mockToSvg).toHaveBeenCalledTimes(1)
+    await act(async () => {
+      await vi.runAllTimersAsync()
+    })
+    expect(mockSetViewport).toHaveBeenCalledTimes(2)
+    expect(screen.getByTestId('image-preview')).toHaveTextContent('Demo App-whole-workflow.svg')
+  })
+
+  it('returns early when there is no app or knowledge name', async () => {
+    const user = userEvent.setup()
+    mockWorkflowState.appName = ''
+    mockWorkflowState.knowledgeName = ''
+
+    render(<MoreActions />)
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getAllByText('workflow.common.exportPNG')[0]!)
+
+    expect(mockToPng).not.toHaveBeenCalled()
+    expect(mockDownloadUrl).not.toHaveBeenCalled()
+  })
+
+  it('returns early when the viewport element is missing', async () => {
+    const user = userEvent.setup()
+    document.querySelector('.react-flow__viewport')?.remove()
+
+    render(<MoreActions />)
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getAllByText('workflow.common.exportPNG')[0]!)
+
+    expect(mockToPng).not.toHaveBeenCalled()
+    expect(mockDownloadUrl).not.toHaveBeenCalled()
+  })
+
+  it('returns early when the workflow becomes read only before exporting', async () => {
+    const user = userEvent.setup()
+
+    render(<MoreActions />)
+
+    await user.click(screen.getByRole('button'))
+    mockGetNodesReadOnly.mockReturnValue(true)
+    await user.click(screen.getAllByText('workflow.common.exportJPEG')[0]!)
+
+    expect(mockToJpeg).not.toHaveBeenCalled()
+    expect(mockDownloadUrl).not.toHaveBeenCalled()
+  })
+
+  it('logs export failures and lets the preview close', async () => {
+    const user = userEvent.setup()
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    mockToJpeg.mockRejectedValueOnce(new Error('boom'))
+
+    render(<MoreActions />)
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getAllByText('workflow.common.exportJPEG')[0]!)
+
+    await waitFor(() => {
+      expect(consoleErrorSpy).toHaveBeenCalledWith('Export image failed:', expect.any(Error))
+    })
+    expect(screen.queryByTestId('image-preview')).not.toBeInTheDocument()
+
+    mockToPng.mockResolvedValueOnce('data:image/png;base64,current')
+    fireEvent.click(screen.getByRole('button'))
+    fireEvent.click(screen.getAllByText('workflow.common.exportPNG')[1]!)
+    await waitFor(() => {
+      expect(screen.getByTestId('image-preview')).toBeInTheDocument()
+    })
+    await user.click(screen.getByText('close-preview'))
+    expect(screen.queryByTestId('image-preview')).not.toBeInTheDocument()
+
+    consoleErrorSpy.mockRestore()
+  })
+})
diff --git a/web/app/components/workflow/operator/__tests__/zoom-in-out.spec.tsx b/web/app/components/workflow/operator/__tests__/zoom-in-out.spec.tsx
new file mode 100644
index 0000000000..8b0f12c7d6
--- /dev/null
+++ b/web/app/components/workflow/operator/__tests__/zoom-in-out.spec.tsx
@@ -0,0 +1,197 @@
+import { fireEvent, render, screen, within } from '@testing-library/react'
+import ZoomInOut from '../zoom-in-out'
+
+const {
+  mockZoomIn,
+  mockZoomOut,
+  mockZoomTo,
+  mockFitView,
+  mockViewport,
+  mockHandleSyncWorkflowDraft,
+  mockToggleMiniMap,
+  mockToggleUserComments,
+  mockToggleUserCursors,
+} = vi.hoisted(() => ({
+  mockZoomIn: vi.fn(),
+  mockZoomOut: vi.fn(),
+  mockZoomTo: vi.fn(),
+  mockFitView: vi.fn(),
+  mockViewport: { zoom: 1 },
+  mockHandleSyncWorkflowDraft: vi.fn(),
+  mockToggleMiniMap: vi.fn(),
+  mockToggleUserComments: vi.fn(),
+  mockToggleUserCursors: vi.fn(),
+}))
+
+let workflowReadOnly = false
+let collaborationEnabled = true
+
+vi.mock('reactflow', () => ({
+  useReactFlow: () => ({
+    zoomIn: mockZoomIn,
+    zoomOut: mockZoomOut,
+    zoomTo: mockZoomTo,
+    fitView: mockFitView,
+  }),
+  useViewport: () => mockViewport,
+}))
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useNodesSyncDraft: () => ({
+    handleSyncWorkflowDraft: mockHandleSyncWorkflowDraft,
+  }),
+  useWorkflowReadOnly: () => ({
+    workflowReadOnly,
+    getWorkflowReadOnly: () => workflowReadOnly,
+  }),
+}))
+
+vi.mock('@/context/global-public-context', () => ({
+  useGlobalPublicStore: (selector: (state: { systemFeatures: { enable_collaboration_mode: boolean } }) => unknown) => selector({
+    systemFeatures: {
+      enable_collaboration_mode: collaborationEnabled,
+    },
+  }),
+}))
+
+vi.mock('../tip-popup', () => ({
+  default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}))
+
+const getZoomControls = () => {
+  const label = Array.from(document.querySelectorAll('button')).find((element) => {
+    return /^\d+%$/.test(element.textContent ?? '') && element.className.includes('w-[34px]')
+  })
+  const zoomOutIcon = document.querySelector('.i-ri-zoom-out-line')
+  const zoomInIcon = document.querySelector('.i-ri-zoom-in-line')
+
+  if (!label || !zoomOutIcon || !zoomInIcon)
+    throw new Error('Missing zoom controls')
+
+  return {
+    zoomOutTrigger: zoomOutIcon.parentElement as HTMLElement,
+    label,
+    zoomInTrigger: zoomInIcon.parentElement as HTMLElement,
+  }
+}
+
+const openZoomMenu = () => {
+  fireEvent.click(getZoomControls().label)
+  return within(screen.getByRole('menu'))
+}
+
+describe('workflow zoom controls', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockViewport.zoom = 1
+    workflowReadOnly = false
+    collaborationEnabled = true
+  })
+
+  it('zooms out and zooms in when the viewport is within the supported range', () => {
+    render(<ZoomInOut />)
+
+    const { zoomOutTrigger, zoomInTrigger } = getZoomControls()
+
+    fireEvent.click(zoomOutTrigger)
+    fireEvent.click(zoomInTrigger)
+
+    expect(mockZoomOut).toHaveBeenCalledTimes(1)
+    expect(mockZoomIn).toHaveBeenCalledTimes(1)
+  })
+
+  it('zooms to a preset value and syncs the draft', () => {
+    render(<ZoomInOut />)
+
+    const menu = openZoomMenu()
+    fireEvent.click(menu.getByText('50%'))
+
+    expect(mockZoomTo).toHaveBeenCalledWith(0.5)
+    expect(mockHandleSyncWorkflowDraft).toHaveBeenCalledTimes(1)
+  })
+
+  it.each([
+    ['100%', 1],
+    ['200%', 2],
+  ])('zooms to %s and syncs the draft', (label, zoom) => {
+    render(<ZoomInOut />)
+
+    const menu = openZoomMenu()
+    fireEvent.click(menu.getByText(label))
+
+    expect(mockZoomTo).toHaveBeenCalledWith(zoom)
+    expect(mockHandleSyncWorkflowDraft).toHaveBeenCalledTimes(1)
+  })
+
+  it('toggles collaboration options without syncing the draft', () => {
+    render(
+      <ZoomInOut
+        onToggleMiniMap={mockToggleMiniMap}
+        onToggleUserComments={mockToggleUserComments}
+        onToggleUserCursors={mockToggleUserCursors}
+      />,
+    )
+
+    let menu = openZoomMenu()
+    fireEvent.click(menu.getByText('workflow.operator.showMiniMap'))
+    expect(mockToggleMiniMap).toHaveBeenCalledTimes(1)
+    expect(mockHandleSyncWorkflowDraft).not.toHaveBeenCalled()
+
+    menu = openZoomMenu()
+    fireEvent.click(menu.getByText('workflow.operator.showUserComments'))
+    expect(mockToggleUserComments).toHaveBeenCalledTimes(1)
+
+    menu = openZoomMenu()
+    fireEvent.click(menu.getByText('workflow.operator.showUserCursors'))
+    expect(mockToggleUserCursors).toHaveBeenCalledTimes(1)
+  })
+
+  it('keeps the show-user-comments action disabled in comment mode', () => {
+    render(
+      <ZoomInOut
+        isCommentMode
+        onToggleUserComments={mockToggleUserComments}
+      />,
+    )
+
+    const menu = openZoomMenu()
+    fireEvent.click(menu.getByText('workflow.operator.showUserComments'))
+
+    expect(mockToggleUserComments).not.toHaveBeenCalled()
+  })
+
+  it('does not open the menu when the workflow is read only', () => {
+    workflowReadOnly = true
+    render(<ZoomInOut />)
+
+    fireEvent.click(getZoomControls().label)
+
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument()
+  })
+
+  it('blocks inline zooming out at the minimum viewport scale', () => {
+    mockViewport.zoom = 0.25
+    render(<ZoomInOut />)
+
+    fireEvent.click(getZoomControls().zoomOutTrigger)
+    expect(mockZoomOut).not.toHaveBeenCalled()
+  })
+
+  it('blocks inline zooming in at the maximum viewport scale', () => {
+    mockViewport.zoom = 2
+    render(<ZoomInOut />)
+
+    fireEvent.click(getZoomControls().zoomInTrigger)
+    expect(mockZoomIn).not.toHaveBeenCalled()
+  })
+
+  it('renders collaboration menu entries only when collaboration is enabled', () => {
+    collaborationEnabled = false
+    render(<ZoomInOut />)
+
+    const menu = openZoomMenu()
+    expect(menu.getByText('workflow.operator.showMiniMap')).toBeInTheDocument()
+    expect(menu.queryByText('workflow.operator.showUserComments')).not.toBeInTheDocument()
+    expect(menu.queryByText('workflow.operator.showUserCursors')).not.toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/workflow/operator/more-actions.tsx b/web/app/components/workflow/operator/more-actions.tsx
index 5e71cc658b..66dbed1a91 100644
--- a/web/app/components/workflow/operator/more-actions.tsx
+++ b/web/app/components/workflow/operator/more-actions.tsx
@@ -14,10 +14,12 @@ import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { useStore } from '@/app/components/workflow/store'
 import { downloadUrl } from '@/utils/download'
 import { useNodesReadOnly } from '../hooks'
@@ -37,6 +39,7 @@ const MoreActions: FC = () => {
   const { appSidebarExpand } = useAppStore(useShallow(state => ({
     appSidebarExpand: state.appSidebarExpand,
   })))
+  const isReadOnly = getNodesReadOnly()
 
   const crossAxisOffset = useMemo(() => {
     if (maximizeCanvas)
@@ -161,93 +164,67 @@ const MoreActions: FC = () => {
     }
   }, [getNodesReadOnly, appName, reactFlow, knowledgeName])
 
-  const handleTrigger = useCallback(() => {
-    if (getNodesReadOnly())
-      return
-
-    setOpen(v => !v)
-  }, [getNodesReadOnly])
-
   return (
     <>
-      <PortalToFollowElem
+      <DropdownMenu
         open={open}
-        onOpenChange={setOpen}
-        placement="bottom-end"
-        offset={{
-          mainAxis: -200,
-          crossAxis: crossAxisOffset,
+        onOpenChange={(nextOpen) => {
+          if (isReadOnly) {
+            setOpen(false)
+            return
+          }
+          setOpen(nextOpen)
         }}
       >
-        <PortalToFollowElemTrigger>
+        <DropdownMenuTrigger
+          className={cn(
+            'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
+            isReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
+          )}
+        >
           <TipPopup title={t('common.moreActions', { ns: 'workflow' })}>
-            <div
-              className={cn(
-                'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
-                `${getNodesReadOnly() && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
-              )}
-              onClick={handleTrigger}
-            >
-              <RiMoreFill className="h-4 w-4" />
-            </div>
+            <RiMoreFill className="h-4 w-4" />
           </TipPopup>
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className="z-10">
-          <div className="min-w-[180px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur text-text-secondary shadow-lg">
-            <div className="p-1">
-              <div className="flex items-center gap-2 px-2 py-1 text-xs font-medium text-text-tertiary">
-                <RiExportLine className="h-3 w-3" />
-                {t('common.exportImage', { ns: 'workflow' })}
-              </div>
-              <div className="px-2 py-1 text-xs font-medium text-text-tertiary">
-                {t('common.currentView', { ns: 'workflow' })}
-              </div>
-              <div
-                className="flex h-8 cursor-pointer items-center rounded-lg px-2 system-md-regular hover:bg-state-base-hover"
-                onClick={() => handleExportImage('png')}
-              >
-                {t('common.exportPNG', { ns: 'workflow' })}
-              </div>
-              <div
-                className="flex h-8 cursor-pointer items-center rounded-lg px-2 system-md-regular hover:bg-state-base-hover"
-                onClick={() => handleExportImage('jpeg')}
-              >
-                {t('common.exportJPEG', { ns: 'workflow' })}
-              </div>
-              <div
-                className="flex h-8 cursor-pointer items-center rounded-lg px-2 system-md-regular hover:bg-state-base-hover"
-                onClick={() => handleExportImage('svg')}
-              >
-                {t('common.exportSVG', { ns: 'workflow' })}
-              </div>
-
-              <div className="border-border-divider mx-2 my-1 border-t" />
-
-              <div className="px-2 py-1 text-xs font-medium text-text-tertiary">
-                {t('common.currentWorkflow', { ns: 'workflow' })}
-              </div>
-              <div
-                className="flex h-8 cursor-pointer items-center rounded-lg px-2 system-md-regular hover:bg-state-base-hover"
-                onClick={() => handleExportImage('png', true)}
-              >
-                {t('common.exportPNG', { ns: 'workflow' })}
-              </div>
-              <div
-                className="flex h-8 cursor-pointer items-center rounded-lg px-2 system-md-regular hover:bg-state-base-hover"
-                onClick={() => handleExportImage('jpeg', true)}
-              >
-                {t('common.exportJPEG', { ns: 'workflow' })}
-              </div>
-              <div
-                className="flex h-8 cursor-pointer items-center rounded-lg px-2 system-md-regular hover:bg-state-base-hover"
-                onClick={() => handleExportImage('svg', true)}
-              >
-                {t('common.exportSVG', { ns: 'workflow' })}
-              </div>
-            </div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          placement="bottom-end"
+          sideOffset={-200}
+          alignOffset={crossAxisOffset}
+          popupClassName="min-w-[180px]"
+        >
+          <div className="flex items-center gap-2 px-2 py-1 text-xs font-medium text-text-tertiary">
+            <RiExportLine className="h-3 w-3" />
+            {t('common.exportImage', { ns: 'workflow' })}
           </div>
-        </PortalToFollowElemContent>
-      </PortalToFollowElem>
+          <div className="px-2 py-1 text-xs font-medium text-text-tertiary">
+            {t('common.currentView', { ns: 'workflow' })}
+          </div>
+          <DropdownMenuItem className="system-md-regular" onClick={() => handleExportImage('png')}>
+            {t('common.exportPNG', { ns: 'workflow' })}
+          </DropdownMenuItem>
+          <DropdownMenuItem className="system-md-regular" onClick={() => handleExportImage('jpeg')}>
+            {t('common.exportJPEG', { ns: 'workflow' })}
+          </DropdownMenuItem>
+          <DropdownMenuItem className="system-md-regular" onClick={() => handleExportImage('svg')}>
+            {t('common.exportSVG', { ns: 'workflow' })}
+          </DropdownMenuItem>
+
+          <DropdownMenuSeparator className="mx-2" />
+
+          <div className="px-2 py-1 text-xs font-medium text-text-tertiary">
+            {t('common.currentWorkflow', { ns: 'workflow' })}
+          </div>
+          <DropdownMenuItem className="system-md-regular" onClick={() => handleExportImage('png', true)}>
+            {t('common.exportPNG', { ns: 'workflow' })}
+          </DropdownMenuItem>
+          <DropdownMenuItem className="system-md-regular" onClick={() => handleExportImage('jpeg', true)}>
+            {t('common.exportJPEG', { ns: 'workflow' })}
+          </DropdownMenuItem>
+          <DropdownMenuItem className="system-md-regular" onClick={() => handleExportImage('svg', true)}>
+            {t('common.exportSVG', { ns: 'workflow' })}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
 
       {previewUrl && (
         <ImagePreview
diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx
index 25f962a519..14118b36c9 100644
--- a/web/app/components/workflow/operator/zoom-in-out.tsx
+++ b/web/app/components/workflow/operator/zoom-in-out.tsx
@@ -1,15 +1,8 @@
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
-import {
-  RiCheckLine,
-  RiFullscreenLine,
-  RiZoomInLine,
-  RiZoomOutLine,
-} from '@remixicon/react'
 import {
   Fragment,
   memo,
-  useCallback,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -17,14 +10,14 @@ import {
   useReactFlow,
   useViewport,
 } from 'reactflow'
-
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-import Divider from '../../base/divider'
 import {
   useNodesSyncDraft,
   useWorkflowReadOnly,
@@ -33,8 +26,6 @@ import ShortcutsName from '../shortcuts-name'
 import TipPopup from './tip-popup'
 
 enum ZoomType {
-  zoomIn = 'zoomIn',
-  zoomOut = 'zoomOut',
   zoomToFit = 'zoomToFit',
   zoomTo25 = 'zoomTo25',
   zoomTo50 = 'zoomTo50',
@@ -81,7 +72,7 @@ const ZoomInOut: FC<ZoomInOutProps> = ({
   } = useWorkflowReadOnly()
   const isCollaborationEnabled = useGlobalPublicStore(s => s.systemFeatures.enable_collaboration_mode)
 
-  const ZOOM_IN_OUT_OPTIONS = [
+  const zoomOptions = [
     [
       {
         key: ZoomType.zoomTo200,
@@ -135,6 +126,8 @@ const ZoomInOut: FC<ZoomInOutProps> = ({
     if (workflowReadOnly)
       return
 
+    setOpen(false)
+
     if (type === ZoomType.zoomToFit)
       fitView()
 
@@ -173,154 +166,134 @@ const ZoomInOut: FC<ZoomInOutProps> = ({
     handleSyncWorkflowDraft()
   }
 
-  const handleTrigger = useCallback(() => {
-    if (getWorkflowReadOnly())
-      return
-
-    setOpen(v => !v)
-  }, [getWorkflowReadOnly])
-
   return (
-    <PortalToFollowElem
-      placement="top-start"
-      open={open}
-      onOpenChange={setOpen}
-      offset={{
-        mainAxis: 4,
-        crossAxis: -2,
-      }}
+    <div className={`
+      h-9 cursor-pointer rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg
+      p-0.5 text-[13px] shadow-lg backdrop-blur-[5px]
+      hover:bg-state-base-hover
+      ${workflowReadOnly && 'cursor-not-allowed! opacity-50'}
+    `}
     >
-      <PortalToFollowElemTrigger asChild>
-        <div className={`
-          h-9 cursor-pointer rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg
-          p-0.5 text-[13px] shadow-lg backdrop-blur-[5px]
-          hover:bg-state-base-hover
-          ${workflowReadOnly && 'cursor-not-allowed! opacity-50'}
-        `}
+      <div className="flex h-8 w-[98px] items-center justify-between rounded-lg">
+        <TipPopup
+          title={t('operator.zoomOut', { ns: 'workflow' })}
+          shortcuts={['ctrl', '-']}
         >
-          <div className={cn(
-            'flex h-8 w-[98px] items-center justify-between rounded-lg',
-          )}
+          <div
+            className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom <= 0.25 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
+            onClick={(e) => {
+              if (zoom <= 0.25)
+                return
+
+              e.stopPropagation()
+              zoomOut()
+            }}
           >
-            <TipPopup
-              title={t('operator.zoomOut', { ns: 'workflow' })}
-              shortcuts={['ctrl', '-']}
-            >
-              <div
-                className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom <= 0.25 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
-                onClick={(e) => {
-                  if (zoom <= 0.25)
-                    return
-
-                  e.stopPropagation()
-                  zoomOut()
-                }}
-              >
-                <RiZoomOutLine className="h-4 w-4 text-text-tertiary hover:text-text-secondary" />
-              </div>
-            </TipPopup>
-            <div onClick={handleTrigger} className={cn('w-[34px] system-sm-medium text-text-tertiary hover:text-text-secondary')}>
-              {Number.parseFloat(`${zoom * 100}`).toFixed(0)}
-              %
-            </div>
-            <TipPopup
-              title={t('operator.zoomIn', { ns: 'workflow' })}
-              shortcuts={['ctrl', '+']}
-            >
-              <div
-                className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom >= 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
-                onClick={(e) => {
-                  if (zoom >= 2)
-                    return
-
-                  e.stopPropagation()
-                  zoomIn()
-                }}
-              >
-                <RiZoomInLine className="h-4 w-4 text-text-tertiary hover:text-text-secondary" />
-              </div>
-            </TipPopup>
+            <span aria-hidden className="i-ri-zoom-out-line h-4 w-4 text-text-tertiary hover:text-text-secondary" />
           </div>
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-[60]">
-        <div className="w-[192px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
-          {
-            ZOOM_IN_OUT_OPTIONS.map((options, i) => (
-              <Fragment key={i}>
-                {
-                  i !== 0 && (
-                    <Divider className="m-0" />
-                  )
-                }
-                <div className="p-1">
-                  {
-                    options.map(option => (
-                      <div
+        </TipPopup>
+        <DropdownMenu
+          open={open}
+          onOpenChange={setOpen}
+        >
+          <DropdownMenuTrigger
+            disabled={getWorkflowReadOnly()}
+            className={cn(
+              'flex h-8 w-[34px] items-center justify-center rounded-lg system-sm-medium text-text-tertiary hover:bg-black/5 hover:text-text-secondary',
+              open && 'bg-black/5 text-text-secondary',
+            )}
+          >
+            {Number.parseFloat(`${zoom * 100}`).toFixed(0)}
+            %
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            placement="top-start"
+            sideOffset={4}
+            alignOffset={-2}
+            popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
+          >
+            <div className="w-[192px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
+              {zoomOptions.map((options, groupIndex) => (
+                <Fragment key={options[0]!.key}>
+                  {groupIndex !== 0 && (
+                    <DropdownMenuSeparator className="my-0" />
+                  )}
+                  <div className="p-1">
+                    {options.map(option => (
+                      <DropdownMenuItem
                         key={option.key}
-                        className={cn(
-                          'flex h-8 cursor-pointer items-center justify-between space-x-1 rounded-lg py-1.5 pr-2 pl-3 system-md-regular text-text-secondary hover:bg-state-base-hover',
-                          option.key === ZoomType.toggleUserComments && isCommentMode && 'cursor-not-allowed opacity-50',
-                        )}
+                        className="justify-between px-3 py-1.5 system-md-regular text-text-secondary"
+                        disabled={option.key === ZoomType.toggleUserComments && isCommentMode}
                         onClick={() => handleZoom(option.key)}
                       >
-                        <div className="flex items-center space-x-2">
+                        <div className="flex items-center gap-2">
                           {option.key === ZoomType.toggleUserComments && showUserComments && (
-                            <RiCheckLine className="h-4 w-4 text-text-accent" />
+                            <span aria-hidden className="i-ri-check-line h-4 w-4 text-text-accent" />
                           )}
                           {option.key === ZoomType.toggleUserComments && !showUserComments && (
-                            <div className="h-4 w-4" />
+                            <span aria-hidden className="h-4 w-4" />
                           )}
                           {option.key === ZoomType.toggleUserCursors && showUserCursors && (
-                            <RiCheckLine className="h-4 w-4 text-text-accent" />
+                            <span aria-hidden className="i-ri-check-line h-4 w-4 text-text-accent" />
                           )}
                           {option.key === ZoomType.toggleUserCursors && !showUserCursors && (
-                            <div className="h-4 w-4" />
+                            <span aria-hidden className="h-4 w-4" />
                           )}
                           {option.key === ZoomType.toggleMiniMap && showMiniMap && (
-                            <RiCheckLine className="h-4 w-4 text-text-accent" />
+                            <span aria-hidden className="i-ri-check-line h-4 w-4 text-text-accent" />
                           )}
                           {option.key === ZoomType.toggleMiniMap && !showMiniMap && (
-                            <div className="h-4 w-4" />
+                            <span aria-hidden className="h-4 w-4" />
                           )}
                           {option.key === ZoomType.zoomToFit && (
-                            <RiFullscreenLine className="h-4 w-4 text-text-tertiary" />
+                            <span aria-hidden className="i-ri-fullscreen-line h-4 w-4 text-text-tertiary" />
                           )}
                           {option.key !== ZoomType.toggleUserComments
                             && option.key !== ZoomType.toggleUserCursors
                             && option.key !== ZoomType.toggleMiniMap
                             && option.key !== ZoomType.zoomToFit && (
-                            <div className="h-4 w-4" />
+                            <span aria-hidden className="h-4 w-4" />
                           )}
                           <span>{option.text}</span>
                         </div>
                         <div className="flex items-center space-x-0.5">
-                          {
-                            option.key === ZoomType.zoomToFit && (
-                              <ShortcutsName keys={['ctrl', '1']} />
-                            )
-                          }
-                          {
-                            option.key === ZoomType.zoomTo50 && (
-                              <ShortcutsName keys={['shift', '5']} />
-                            )
-                          }
-                          {
-                            option.key === ZoomType.zoomTo100 && (
-                              <ShortcutsName keys={['shift', '1']} />
-                            )
-                          }
+                          {option.key === ZoomType.zoomToFit && (
+                            <ShortcutsName keys={['ctrl', '1']} />
+                          )}
+                          {option.key === ZoomType.zoomTo50 && (
+                            <ShortcutsName keys={['shift', '5']} />
+                          )}
+                          {option.key === ZoomType.zoomTo100 && (
+                            <ShortcutsName keys={['shift', '1']} />
+                          )}
                         </div>
-                      </div>
-                    ))
-                  }
-                </div>
-              </Fragment>
-            ))
-          }
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+                      </DropdownMenuItem>
+                    ))}
+                  </div>
+                </Fragment>
+              ))}
+            </div>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <TipPopup
+          title={t('operator.zoomIn', { ns: 'workflow' })}
+          shortcuts={['ctrl', '+']}
+        >
+          <div
+            className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom >= 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
+            onClick={(e) => {
+              if (zoom >= 2)
+                return
+
+              e.stopPropagation()
+              zoomIn()
+            }}
+          >
+            <span aria-hidden className="i-ri-zoom-in-line h-4 w-4 text-text-tertiary hover:text-text-secondary" />
+          </div>
+        </TipPopup>
+      </div>
+    </div>
   )
 }
 
diff --git a/web/app/components/workflow/panel/version-history-panel/context-menu/__tests__/menu-item.spec.tsx b/web/app/components/workflow/panel/version-history-panel/context-menu/__tests__/menu-item.spec.tsx
index 02b1f8ee34..844e189067 100644
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/__tests__/menu-item.spec.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/__tests__/menu-item.spec.tsx
@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { DropdownMenu, DropdownMenuContent } from '@/app/components/base/ui/dropdown-menu'
 import { VersionHistoryContextMenuOptions } from '../../../../types'
 import MenuItem from '../menu-item'
 
@@ -9,14 +10,18 @@ describe('MenuItem', () => {
     const onClick = vi.fn()
 
     render(
-      <MenuItem
-        item={{
-          key: VersionHistoryContextMenuOptions.delete,
-          name: 'Delete',
-        }}
-        isDestructive
-        onClick={onClick}
-      />,
+      <DropdownMenu open onOpenChange={vi.fn()}>
+        <DropdownMenuContent>
+          <MenuItem
+            item={{
+              key: VersionHistoryContextMenuOptions.delete,
+              name: 'Delete',
+            }}
+            isDestructive
+            onClick={onClick}
+          />
+        </DropdownMenuContent>
+      </DropdownMenu>,
     )
 
     await user.click(screen.getByText('Delete'))
diff --git a/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx b/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
index a635e80bab..f063902753 100644
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
@@ -1,14 +1,13 @@
 import type { FC } from 'react'
 import { RiMoreFill } from '@remixicon/react'
 import * as React from 'react'
-import { useCallback } from 'react'
-import Divider from '@/app/components/base/divider'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import { Button } from '@/app/components/base/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { VersionHistoryContextMenuOptions } from '../../../types'
 import MenuItem from './menu-item'
 import useContextMenu from './use-context-menu'
@@ -28,58 +27,44 @@ const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {
     options,
   } = useContextMenu(props)
 
-  const handleClickTrigger = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation()
-    setOpen(v => !v)
-  }, [setOpen])
-
   return (
-    <PortalToFollowElem
-      placement="bottom-end"
-      offset={{
-        mainAxis: 4,
-        crossAxis: 0,
-      }}
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
     >
-      <PortalToFollowElemTrigger>
-        <Button size="small" className="px-1" onClick={handleClickTrigger}>
-          <RiMoreFill className="h-4 w-4" />
-        </Button>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-10">
-        <div className="flex w-[184px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
-          <div className="flex flex-col p-1">
-            {
-              options.map((option) => {
-                return (
-                  <MenuItem
-                    key={option.key}
-                    item={option}
-                    onClick={handleClickMenuItem.bind(null, option.key)}
-                  />
-                )
-              })
-            }
-          </div>
-          {
-            isShowDelete && (
-              <>
-                <Divider type="horizontal" className="my-0 h-px bg-divider-subtle" />
-                <div className="p-1">
-                  <MenuItem
-                    item={deleteOperation}
-                    isDestructive
-                    onClick={handleClickMenuItem.bind(null, VersionHistoryContextMenuOptions.delete)}
-                  />
-                </div>
-              </>
-            )
-          }
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      <DropdownMenuTrigger
+        render={<Button size="small" className="px-1" onClick={e => e.stopPropagation()} />}
+      >
+        <RiMoreFill className="h-4 w-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="w-[184px] shadow-shadow-shadow-5"
+      >
+        {
+          options.map(option => (
+            <MenuItem
+              key={option.key}
+              item={option}
+              onClick={handleClickMenuItem.bind(null, option.key)}
+            />
+          ))
+        }
+        {
+          isShowDelete && (
+            <>
+              <DropdownMenuSeparator className="my-0" />
+              <MenuItem
+                item={deleteOperation}
+                isDestructive
+                onClick={handleClickMenuItem.bind(null, VersionHistoryContextMenuOptions.delete)}
+              />
+            </>
+          )
+        }
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx b/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
index 5a3f21272f..b1d9ef6ec5 100644
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import type { VersionHistoryContextMenuOptions } from '../../../types'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
+import { DropdownMenuItem } from '@/app/components/base/ui/dropdown-menu'
 
 type MenuItemProps = {
   item: {
@@ -18,23 +19,25 @@ const MenuItem: FC<MenuItemProps> = ({
   isDestructive = false,
 }) => {
   return (
-    <div
+    <DropdownMenuItem
+      variant={isDestructive ? 'destructive' : 'default'}
       className={cn(
-        'flex cursor-pointer items-center justify-between rounded-lg px-2 py-1.5',
-        isDestructive ? 'hover:bg-state-destructive-hover' : 'hover:bg-state-base-hover',
+        'justify-between px-2 py-1.5',
+        isDestructive && 'data-highlighted:bg-state-destructive-hover',
       )}
-      onClick={() => {
+      onClick={(event) => {
+        event.stopPropagation()
         onClick(item.key)
       }}
     >
       <div className={cn(
         'flex-1 system-md-regular text-text-primary',
-        isDestructive && 'hover:text-text-destructive',
+        isDestructive && 'text-inherit',
       )}
       >
         {item.name}
       </div>
-    </div>
+    </DropdownMenuItem>
   )
 }
 
diff --git a/web/app/components/workflow/run/agent-log/__tests__/agent-log-nav-more.spec.tsx b/web/app/components/workflow/run/agent-log/__tests__/agent-log-nav-more.spec.tsx
index d109635af4..35b32a5ce6 100644
--- a/web/app/components/workflow/run/agent-log/__tests__/agent-log-nav-more.spec.tsx
+++ b/web/app/components/workflow/run/agent-log/__tests__/agent-log-nav-more.spec.tsx
@@ -3,6 +3,52 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import AgentLogNavMore from '../agent-log-nav-more'
 
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+  const React = await import('react')
+  const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({ children, render }: { children: React.ReactNode, render?: React.ReactElement }) => {
+      const { open, setOpen } = useDropdownMenuContext()
+
+      if (render)
+        return React.cloneElement(render, { onClick: () => setOpen(!open) } as Record<string, unknown>, children)
+
+      return <button type="button" onClick={() => setOpen(!open)}>{children}</button>
+    },
+    DropdownMenuContent: ({ children }: { children: React.ReactNode }) => {
+      const { open } = useDropdownMenuContext()
+      return open ? <div>{children}</div> : null
+    },
+    DropdownMenuItem: ({ children, onClick }: { children: React.ReactNode, onClick?: React.MouseEventHandler<HTMLButtonElement> }) => {
+      const { setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          onClick={(event) => {
+            onClick?.(event)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+  }
+})
+
 const createLogItem = (overrides: Partial<AgentLogItemWithChildren> = {}): AgentLogItemWithChildren => ({
   message_id: 'message-1',
   label: 'Planner',
diff --git a/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx b/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
index 8bdb6ad227..77f3c778a6 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
@@ -1,12 +1,13 @@
 import type { AgentLogItemWithChildren } from '@/types/workflow'
 import { RiMoreLine } from '@remixicon/react'
 import { useState } from 'react'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import { Button } from '@/app/components/base/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 
 type AgentLogNavMoreProps = {
   options: AgentLogItemWithChildren[]
@@ -19,42 +20,39 @@ const AgentLogNavMore = ({
   const [open, setOpen] = useState(false)
 
   return (
-    <PortalToFollowElem
-      placement="bottom-start"
-      offset={{
-        mainAxis: 2,
-        crossAxis: -54,
-      }}
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
     >
-      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-        <Button
-          className="h-6 w-6"
-          variant="ghost-accent"
-        >
-          <RiMoreLine className="h-4 w-4" />
-        </Button>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent>
-        <div className="w-[136px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
-          {
-            options.map(option => (
-              <div
-                key={option.message_id}
-                className="flex h-8 cursor-pointer items-center rounded-lg px-2 system-md-regular text-text-secondary hover:bg-state-base-hover"
-                onClick={() => {
-                  onShowAgentOrToolLog(option)
-                  setOpen(false)
-                }}
-              >
-                {option.label}
-              </div>
-            ))
-          }
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      <DropdownMenuTrigger
+        render={(
+          <Button
+            className="h-6 w-6"
+            variant="ghost-accent"
+          />
+        )}
+      >
+        <RiMoreLine className="h-4 w-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-start"
+        sideOffset={2}
+        alignOffset={-54}
+        popupClassName="w-[136px] p-1"
+      >
+        {
+          options.map(option => (
+            <DropdownMenuItem
+              key={option.message_id}
+              className="system-md-regular"
+              onClick={() => onShowAgentOrToolLog(option)}
+            >
+              {option.label}
+            </DropdownMenuItem>
+          ))
+        }
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/workflow/workflow-preview/components/__tests__/zoom-in-out.spec.tsx b/web/app/components/workflow/workflow-preview/components/__tests__/zoom-in-out.spec.tsx
index 4991ae7b04..6e8ad90933 100644
--- a/web/app/components/workflow/workflow-preview/components/__tests__/zoom-in-out.spec.tsx
+++ b/web/app/components/workflow/workflow-preview/components/__tests__/zoom-in-out.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, within } from '@testing-library/react'
+import { fireEvent, render, screen, within } from '@testing-library/react'
 import ZoomInOut from '../zoom-in-out'
 
 const {
@@ -26,29 +26,25 @@ vi.mock('reactflow', () => ({
 }))
 
 const getZoomControls = () => {
-  const label = Array.from(document.querySelectorAll('div')).find((element) => {
+  const label = Array.from(document.querySelectorAll('button')).find((element) => {
     return /^\d+%$/.test(element.textContent ?? '') && element.className.includes('w-[34px]')
   })
-  const icons = Array.from(document.querySelectorAll('svg'))
+  const zoomOutIcon = document.querySelector('.i-ri-zoom-out-line')
+  const zoomInIcon = document.querySelector('.i-ri-zoom-in-line')
 
-  if (!label || icons.length < 2)
+  if (!label || !zoomOutIcon || !zoomInIcon)
     throw new Error('Missing zoom controls')
 
   return {
-    zoomOutTrigger: icons[0]!.parentElement as HTMLElement,
+    zoomOutTrigger: zoomOutIcon.parentElement as HTMLElement,
     label,
-    zoomInTrigger: icons[1]!.parentElement as HTMLElement,
+    zoomInTrigger: zoomInIcon.parentElement as HTMLElement,
   }
 }
 
 const openZoomMenu = () => {
   fireEvent.click(getZoomControls().label)
-
-  const portal = document.querySelector('[data-floating-ui-portal]')
-  if (!portal)
-    throw new Error('Missing zoom menu portal')
-
-  return within(portal as HTMLElement)
+  return within(screen.getByRole('menu'))
 }
 
 describe('workflow preview zoom controls', () => {
diff --git a/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx b/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx
index 7a81bccc50..3f714c5ca9 100644
--- a/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx
+++ b/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx
@@ -1,13 +1,8 @@
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
-import {
-  RiZoomInLine,
-  RiZoomOutLine,
-} from '@remixicon/react'
 import {
   Fragment,
   memo,
-  useCallback,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -15,18 +10,17 @@ import {
   useReactFlow,
   useViewport,
 } from 'reactflow'
-import Divider from '@/app/components/base/divider'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import TipPopup from '@/app/components/workflow/operator/tip-popup'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 
 enum ZoomType {
-  zoomIn = 'zoomIn',
-  zoomOut = 'zoomOut',
   zoomToFit = 'zoomToFit',
   zoomTo25 = 'zoomTo25',
   zoomTo50 = 'zoomTo50',
@@ -46,7 +40,7 @@ const ZoomInOut: FC = () => {
   const { zoom } = useViewport()
   const [open, setOpen] = useState(false)
 
-  const ZOOM_IN_OUT_OPTIONS = [
+  const zoomOptions = [
     [
       {
         key: ZoomType.zoomTo200,
@@ -78,6 +72,8 @@ const ZoomInOut: FC = () => {
   ]
 
   const handleZoom = (type: string) => {
+    setOpen(false)
+
     if (type === ZoomType.zoomToFit)
       fitView()
 
@@ -97,119 +93,98 @@ const ZoomInOut: FC = () => {
       zoomTo(2)
   }
 
-  const handleTrigger = useCallback(() => {
-    setOpen(v => !v)
-  }, [])
-
   return (
-    <PortalToFollowElem
-      placement="top-start"
-      open={open}
-      onOpenChange={setOpen}
-      offset={{
-        mainAxis: 4,
-        crossAxis: -2,
-      }}
+    <div
+      className={cn(
+        'h-9 cursor-pointer rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg',
+        'p-0.5 text-[13px] shadow-lg backdrop-blur-[5px]',
+        'hover:bg-state-base-hover',
+      )}
     >
-      <PortalToFollowElemTrigger asChild>
-        <div
-          className={cn(
-            'h-9 cursor-pointer rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg',
-            'p-0.5 text-[13px] shadow-lg backdrop-blur-[5px]',
-            'hover:bg-state-base-hover',
-          )}
+      <div className="flex h-8 w-[98px] items-center justify-between rounded-lg">
+        <TipPopup
+          title={t('operator.zoomOut', { ns: 'workflow' })}
+          shortcuts={['ctrl', '-']}
         >
-          <div className={cn(
-            'flex h-8 w-[98px] items-center justify-between rounded-lg',
-          )}
+          <div
+            className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom <= 0.25 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
+            onClick={(e) => {
+              if (zoom <= 0.25)
+                return
+
+              e.stopPropagation()
+              zoomOut()
+            }}
           >
-            <TipPopup
-              title={t('operator.zoomOut', { ns: 'workflow' })}
-              shortcuts={['ctrl', '-']}
-            >
-              <div
-                className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom <= 0.25 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
-                onClick={(e) => {
-                  if (zoom <= 0.25)
-                    return
-
-                  e.stopPropagation()
-                  zoomOut()
-                }}
-              >
-                <RiZoomOutLine className="h-4 w-4 text-text-tertiary hover:text-text-secondary" />
-              </div>
-            </TipPopup>
-            <div onClick={handleTrigger} className={cn('w-[34px] system-sm-medium text-text-tertiary hover:text-text-secondary')}>
-              {Number.parseFloat(`${zoom * 100}`).toFixed(0)}
-              %
-            </div>
-            <TipPopup
-              title={t('operator.zoomIn', { ns: 'workflow' })}
-              shortcuts={['ctrl', '+']}
-            >
-              <div
-                className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom >= 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
-                onClick={(e) => {
-                  if (zoom >= 2)
-                    return
-
-                  e.stopPropagation()
-                  zoomIn()
-                }}
-              >
-                <RiZoomInLine className="h-4 w-4 text-text-tertiary hover:text-text-secondary" />
-              </div>
-            </TipPopup>
+            <span aria-hidden className="i-ri-zoom-out-line h-4 w-4 text-text-tertiary hover:text-text-secondary" />
           </div>
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-10">
-        <div className="w-[145px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
-          {
-            ZOOM_IN_OUT_OPTIONS.map((options, i) => (
-              <Fragment key={i}>
-                {
-                  i !== 0 && (
-                    <Divider className="m-0" />
-                  )
-                }
-                <div className="p-1">
-                  {
-                    options.map(option => (
-                      <div
+        </TipPopup>
+        <DropdownMenu
+          open={open}
+          onOpenChange={setOpen}
+        >
+          <DropdownMenuTrigger className={cn('flex h-8 w-[34px] items-center justify-center rounded-lg system-sm-medium text-text-tertiary hover:bg-black/5 hover:text-text-secondary', open && 'bg-black/5 text-text-secondary')}>
+            {Number.parseFloat(`${zoom * 100}`).toFixed(0)}
+            %
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            placement="top-start"
+            sideOffset={4}
+            alignOffset={-2}
+            popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
+          >
+            <div className="w-[145px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
+              {zoomOptions.map((options, groupIndex) => (
+                <Fragment key={options[0]!.key}>
+                  {groupIndex !== 0 && (
+                    <DropdownMenuSeparator className="my-0" />
+                  )}
+                  <div className="p-1">
+                    {options.map(option => (
+                      <DropdownMenuItem
                         key={option.key}
-                        className="flex h-8 cursor-pointer items-center justify-between space-x-1 rounded-lg py-1.5 pr-2 pl-3 system-md-regular text-text-secondary hover:bg-state-base-hover"
+                        className="justify-between px-3 py-1.5 system-md-regular text-text-secondary"
                         onClick={() => handleZoom(option.key)}
                       >
                         <span>{option.text}</span>
                         <div className="flex items-center space-x-0.5">
-                          {
-                            option.key === ZoomType.zoomToFit && (
-                              <ShortcutsName keys={['ctrl', '1']} />
-                            )
-                          }
-                          {
-                            option.key === ZoomType.zoomTo50 && (
-                              <ShortcutsName keys={['shift', '5']} />
-                            )
-                          }
-                          {
-                            option.key === ZoomType.zoomTo100 && (
-                              <ShortcutsName keys={['shift', '1']} />
-                            )
-                          }
+                          {option.key === ZoomType.zoomToFit && (
+                            <ShortcutsName keys={['ctrl', '1']} />
+                          )}
+                          {option.key === ZoomType.zoomTo50 && (
+                            <ShortcutsName keys={['shift', '5']} />
+                          )}
+                          {option.key === ZoomType.zoomTo100 && (
+                            <ShortcutsName keys={['shift', '1']} />
+                          )}
                         </div>
-                      </div>
-                    ))
-                  }
-                </div>
-              </Fragment>
-            ))
-          }
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+                      </DropdownMenuItem>
+                    ))}
+                  </div>
+                </Fragment>
+              ))}
+            </div>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <TipPopup
+          title={t('operator.zoomIn', { ns: 'workflow' })}
+          shortcuts={['ctrl', '+']}
+        >
+          <div
+            className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom >= 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
+            onClick={(e) => {
+              if (zoom >= 2)
+                return
+
+              e.stopPropagation()
+              zoomIn()
+            }}
+          >
+            <span aria-hidden className="i-ri-zoom-in-line h-4 w-4 text-text-tertiary hover:text-text-secondary" />
+          </div>
+        </TipPopup>
+      </div>
+    </div>
   )
 }
 
diff --git a/web/docs/overlay-migration.md b/web/docs/overlay-migration.md
index 6762c2bfb1..29ef814fcd 100644
--- a/web/docs/overlay-migration.md
+++ b/web/docs/overlay-migration.md
@@ -9,9 +9,7 @@ This document tracks the migration away from legacy overlay APIs.
   - `@/app/components/base/tooltip`
   - `@/app/components/base/modal`
   - `@/app/components/base/select` (including `custom` / `pure`)
-  - `@/app/components/base/dropdown`
   - `@/app/components/base/dialog`
-  - `@/app/components/base/toast` (including `context`)
 - Replacement primitives:
   - `@/app/components/base/ui/tooltip`
   - `@/app/components/base/ui/dropdown-menu`
@@ -42,12 +40,6 @@ This document tracks the migration away from legacy overlay APIs.
    - Remove remaining allowlist entries.
    - Remove legacy overlay implementations when import count reaches zero.
 
-## Toast migration strategy
-
-- `@/app/components/base/toast` has been replaced by `@/app/components/base/ui/toast`.
-- All new toast usage must go through `@/app/components/base/ui/toast`.
-- When a file with legacy toast usage is touched, prefer migrating that call site in the same change; full-repo toast cleanup is not required in one PR.
-
 ## Allowlist maintenance
 
 - After each migration batch, run:
diff --git a/web/eslint.constants.mjs b/web/eslint.constants.mjs
index fb912d6524..57a14fc22d 100644
--- a/web/eslint.constants.mjs
+++ b/web/eslint.constants.mjs
@@ -52,13 +52,6 @@ export const OVERLAY_RESTRICTED_IMPORT_PATTERNS = [
     ],
     message: 'Deprecated: use @/app/components/base/ui/select instead. See issue #32767.',
   },
-  {
-    group: [
-      '**/base/dropdown',
-      '**/base/dropdown/index',
-    ],
-    message: 'Deprecated: use @/app/components/base/ui/dropdown-menu instead. See issue #32767.',
-  },
   {
     group: [
       '**/base/dialog',
@@ -80,7 +73,6 @@ export const OVERLAY_MIGRATION_LEGACY_BASE_FILES = [
   'app/components/base/chip/index.tsx',
   'app/components/base/date-and-time-picker/date-picker/index.tsx',
   'app/components/base/date-and-time-picker/time-picker/index.tsx',
-  'app/components/base/dropdown/index.tsx',
   'app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx',
   'app/components/base/features/new-feature-panel/text-to-speech/voice-settings.tsx',
   'app/components/base/file-uploader/file-from-link-or-local/index.tsx',

From de15e5b4497a4b4b590cbb454d45afaa349f7182 Mon Sep 17 00:00:00 2001
From: Junghwan <70629228+shaun0927@users.noreply.github.com>
Date: Fri, 17 Apr 2026 15:12:07 +0900
Subject: [PATCH 02/24] fix: scope plugin inner API end-user lookup by tenant
 (#35325)

---
 api/controllers/inner_api/plugin/wraps.py     | 16 ++++-
 .../inner_api/plugin/test_plugin_wraps.py     | 61 ++++++++++++++++---
 2 files changed, 65 insertions(+), 12 deletions(-)

diff --git a/api/controllers/inner_api/plugin/wraps.py b/api/controllers/inner_api/plugin/wraps.py
index a5846e2815..2f309262cb 100644
--- a/api/controllers/inner_api/plugin/wraps.py
+++ b/api/controllers/inner_api/plugin/wraps.py
@@ -20,10 +20,13 @@ class TenantUserPayload(BaseModel):
 
 def get_user(tenant_id: str, user_id: str | None) -> EndUser:
     """
-    Get current user
+    Get current user.
 
     NOTE: user_id is not trusted, it could be maliciously set to any value.
-    As a result, it could only be considered as an end user id.
+    As a result, it could only be considered as an end user id. Even when a
+    concrete end-user ID is supplied, lookups must stay tenant-scoped so one
+    tenant cannot bind another tenant's user record into the plugin request
+    context.
     """
     if not user_id:
         user_id = DefaultEndUserSessionID.DEFAULT_SESSION_ID
@@ -42,7 +45,14 @@ def get_user(tenant_id: str, user_id: str | None) -> EndUser:
                     .limit(1)
                 )
             else:
-                user_model = session.get(EndUser, user_id)
+                user_model = session.scalar(
+                    select(EndUser)
+                    .where(
+                        EndUser.id == user_id,
+                        EndUser.tenant_id == tenant_id,
+                    )
+                    .limit(1)
+                )
 
             if not user_model:
                 user_model = EndUser(
diff --git a/api/tests/unit_tests/controllers/inner_api/plugin/test_plugin_wraps.py b/api/tests/unit_tests/controllers/inner_api/plugin/test_plugin_wraps.py
index 0895fac3a4..d1b09c3a58 100644
--- a/api/tests/unit_tests/controllers/inner_api/plugin/test_plugin_wraps.py
+++ b/api/tests/unit_tests/controllers/inner_api/plugin/test_plugin_wraps.py
@@ -41,17 +41,22 @@ class TestTenantUserPayload:
 class TestGetUser:
     """Test get_user function"""
 
+    @patch("controllers.inner_api.plugin.wraps.select")
     @patch("controllers.inner_api.plugin.wraps.EndUser")
     @patch("controllers.inner_api.plugin.wraps.sessionmaker")
     @patch("controllers.inner_api.plugin.wraps.db")
-    def test_should_return_existing_user_by_id(self, mock_db, mock_sessionmaker, mock_enduser_class, app: Flask):
+    def test_should_return_existing_user_by_id(
+        self, mock_db, mock_sessionmaker, mock_enduser_class, mock_select, app: Flask
+    ):
         """Test returning existing user when found by ID"""
         # Arrange
         mock_user = MagicMock()
         mock_user.id = "user123"
         mock_session = MagicMock()
         mock_sessionmaker.return_value.begin.return_value.__enter__.return_value = mock_session
-        mock_session.get.return_value = mock_user
+        mock_session.scalar.return_value = mock_user
+        mock_query = MagicMock()
+        mock_select.return_value.where.return_value.limit.return_value = mock_query
 
         # Act
         with app.app_context():
@@ -59,13 +64,45 @@ class TestGetUser:
 
         # Assert
         assert result == mock_user
-        mock_session.get.assert_called_once()
+        mock_session.scalar.assert_called_once()
 
+    @patch("controllers.inner_api.plugin.wraps.select")
+    @patch("controllers.inner_api.plugin.wraps.EndUser")
+    @patch("controllers.inner_api.plugin.wraps.sessionmaker")
+    @patch("controllers.inner_api.plugin.wraps.db")
+    def test_should_not_resolve_non_anonymous_users_across_tenants(
+        self,
+        mock_db,
+        mock_sessionmaker,
+        mock_enduser_class,
+        mock_select,
+        app: Flask,
+    ):
+        """Test that explicit user IDs remain scoped to the current tenant."""
+        # Arrange
+        mock_session = MagicMock()
+        mock_sessionmaker.return_value.begin.return_value.__enter__.return_value = mock_session
+        mock_session.scalar.return_value = None
+        mock_new_user = MagicMock()
+        mock_new_user.tenant_id = "tenant-current"
+        mock_enduser_class.return_value = mock_new_user
+
+        # Act
+        with app.app_context():
+            result = get_user("tenant-current", "foreign-user-id")
+
+        # Assert
+        assert result == mock_new_user
+        mock_session.get.assert_not_called()
+        mock_session.scalar.assert_called_once()
+        mock_session.add.assert_called_once_with(mock_new_user)
+
+    @patch("controllers.inner_api.plugin.wraps.select")
     @patch("controllers.inner_api.plugin.wraps.EndUser")
     @patch("controllers.inner_api.plugin.wraps.sessionmaker")
     @patch("controllers.inner_api.plugin.wraps.db")
     def test_should_return_existing_anonymous_user_by_session_id(
-        self, mock_db, mock_sessionmaker, mock_enduser_class, app: Flask
+        self, mock_db, mock_sessionmaker, mock_enduser_class, mock_select, app: Flask
     ):
         """Test returning existing anonymous user by session_id"""
         # Arrange
@@ -73,8 +110,9 @@ class TestGetUser:
         mock_user.session_id = "anonymous_session"
         mock_session = MagicMock()
         mock_sessionmaker.return_value.begin.return_value.__enter__.return_value = mock_session
-        # non-anonymous path uses session.get(); anonymous uses session.scalar()
-        mock_session.get.return_value = mock_user
+        mock_session.scalar.return_value = mock_user
+        mock_query = MagicMock()
+        mock_select.return_value.where.return_value.limit.return_value = mock_query
 
         # Act
         with app.app_context():
@@ -83,17 +121,22 @@ class TestGetUser:
         # Assert
         assert result == mock_user
 
+    @patch("controllers.inner_api.plugin.wraps.select")
     @patch("controllers.inner_api.plugin.wraps.EndUser")
     @patch("controllers.inner_api.plugin.wraps.sessionmaker")
     @patch("controllers.inner_api.plugin.wraps.db")
-    def test_should_create_new_user_when_not_found(self, mock_db, mock_sessionmaker, mock_enduser_class, app: Flask):
+    def test_should_create_new_user_when_not_found(
+        self, mock_db, mock_sessionmaker, mock_enduser_class, mock_select, app: Flask
+    ):
         """Test creating new user when not found in database"""
         # Arrange
         mock_session = MagicMock()
         mock_sessionmaker.return_value.begin.return_value.__enter__.return_value = mock_session
-        mock_session.get.return_value = None
+        mock_session.scalar.return_value = None
         mock_new_user = MagicMock()
         mock_enduser_class.return_value = mock_new_user
+        mock_query = MagicMock()
+        mock_select.return_value.where.return_value.limit.return_value = mock_query
 
         # Act
         with app.app_context():
@@ -134,7 +177,7 @@ class TestGetUser:
         # Arrange
         mock_session = MagicMock()
         mock_sessionmaker.return_value.begin.return_value.__enter__.return_value = mock_session
-        mock_session.get.side_effect = Exception("Database error")
+        mock_session.scalar.side_effect = Exception("Database error")
 
         # Act & Assert
         with app.app_context():

From f5e9b02565c4b8165cdb70074f0b773de8f0b47b Mon Sep 17 00:00:00 2001
From: Jingyi <jingyi.qi@dify.ai>
Date: Thu, 16 Apr 2026 23:31:54 -0700
Subject: [PATCH 03/24] test: add API seeding infrastructure and app creation
 E2E scenarios (#35276)

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 e2e/features/apps/create-agent-app.feature    | 11 ++++
 e2e/features/apps/create-chatflow-app.feature | 10 ++++
 .../apps/create-text-generator-app.feature    | 11 ++++
 e2e/features/apps/delete-app.feature          | 11 ++++
 e2e/features/apps/duplicate-app.feature       | 10 ++++
 e2e/features/apps/export-app.feature          |  9 ++++
 e2e/features/apps/switch-app-mode.feature     | 10 ++++
 .../step-definitions/apps/create-app.steps.ts | 13 +++--
 .../step-definitions/apps/delete-app.steps.ts | 35 ++++++++++++
 .../apps/duplicate-app.steps.ts               | 36 +++++++++++++
 .../step-definitions/apps/export-app.steps.ts | 19 +++++++
 .../apps/switch-app-mode.steps.ts             | 28 ++++++++++
 e2e/features/support/hooks.ts                 |  3 ++
 e2e/features/support/world.ts                 | 17 +++---
 e2e/support/api.ts                            | 54 +++++++++++++++++++
 e2e/vite.config.ts                            |  4 +-
 16 files changed, 268 insertions(+), 13 deletions(-)
 create mode 100644 e2e/features/apps/create-agent-app.feature
 create mode 100644 e2e/features/apps/create-chatflow-app.feature
 create mode 100644 e2e/features/apps/create-text-generator-app.feature
 create mode 100644 e2e/features/apps/delete-app.feature
 create mode 100644 e2e/features/apps/duplicate-app.feature
 create mode 100644 e2e/features/apps/export-app.feature
 create mode 100644 e2e/features/apps/switch-app-mode.feature
 create mode 100644 e2e/features/step-definitions/apps/delete-app.steps.ts
 create mode 100644 e2e/features/step-definitions/apps/duplicate-app.steps.ts
 create mode 100644 e2e/features/step-definitions/apps/export-app.steps.ts
 create mode 100644 e2e/features/step-definitions/apps/switch-app-mode.steps.ts
 create mode 100644 e2e/support/api.ts

diff --git a/e2e/features/apps/create-agent-app.feature b/e2e/features/apps/create-agent-app.feature
new file mode 100644
index 0000000000..75d8dc3a77
--- /dev/null
+++ b/e2e/features/apps/create-agent-app.feature
@@ -0,0 +1,11 @@
+@apps @authenticated @core @mode-matrix
+Feature: Create Agent app
+  Scenario: Create a new Agent app and redirect to the configuration page
+    Given I am signed in as the default E2E admin
+    When I open the apps console
+    And I start creating a blank app
+    And I expand the beginner app types
+    And I select the "Agent" app type
+    And I enter a unique E2E app name
+    And I confirm app creation
+    Then I should land on the app configuration page
diff --git a/e2e/features/apps/create-chatflow-app.feature b/e2e/features/apps/create-chatflow-app.feature
new file mode 100644
index 0000000000..364cccc494
--- /dev/null
+++ b/e2e/features/apps/create-chatflow-app.feature
@@ -0,0 +1,10 @@
+@apps @authenticated @core @mode-matrix
+Feature: Create Chatflow app
+  Scenario: Create a new Chatflow app and redirect to the workflow editor
+    Given I am signed in as the default E2E admin
+    When I open the apps console
+    And I start creating a blank app
+    And I select the "Chatflow" app type
+    And I enter a unique E2E app name
+    And I confirm app creation
+    Then I should land on the workflow editor
diff --git a/e2e/features/apps/create-text-generator-app.feature b/e2e/features/apps/create-text-generator-app.feature
new file mode 100644
index 0000000000..aec0436644
--- /dev/null
+++ b/e2e/features/apps/create-text-generator-app.feature
@@ -0,0 +1,11 @@
+@apps @authenticated @core @mode-matrix
+Feature: Create Text Generator app
+  Scenario: Create a new Text Generator app and redirect to the configuration page
+    Given I am signed in as the default E2E admin
+    When I open the apps console
+    And I start creating a blank app
+    And I expand the beginner app types
+    And I select the "Text Generator" app type
+    And I enter a unique E2E app name
+    And I confirm app creation
+    Then I should land on the app configuration page
diff --git a/e2e/features/apps/delete-app.feature b/e2e/features/apps/delete-app.feature
new file mode 100644
index 0000000000..49326ba098
--- /dev/null
+++ b/e2e/features/apps/delete-app.feature
@@ -0,0 +1,11 @@
+@apps @authenticated @core
+Feature: Delete app
+  Scenario: Delete an existing app from the apps console
+    Given I am signed in as the default E2E admin
+    And there is an existing E2E app available for testing
+    When I open the apps console
+    And I open the options menu for the last created E2E app
+    And I click "Delete" in the app options menu
+    And I type the app name in the deletion confirmation
+    And I confirm the deletion
+    Then the app should no longer appear in the apps console
diff --git a/e2e/features/apps/duplicate-app.feature b/e2e/features/apps/duplicate-app.feature
new file mode 100644
index 0000000000..3645a7d172
--- /dev/null
+++ b/e2e/features/apps/duplicate-app.feature
@@ -0,0 +1,10 @@
+@apps @authenticated @core
+Feature: Duplicate app
+  Scenario: Duplicate an existing app and open the copy in the editor
+    Given I am signed in as the default E2E admin
+    And there is an existing E2E app available for testing
+    When I open the apps console
+    And I open the options menu for the last created E2E app
+    And I click "Duplicate" in the app options menu
+    And I confirm the app duplication
+    Then I should land on the app editor
diff --git a/e2e/features/apps/export-app.feature b/e2e/features/apps/export-app.feature
new file mode 100644
index 0000000000..d6d040fb00
--- /dev/null
+++ b/e2e/features/apps/export-app.feature
@@ -0,0 +1,9 @@
+@apps @authenticated @core
+Feature: Export app DSL
+  Scenario: Export the DSL file for an existing app
+    Given I am signed in as the default E2E admin
+    And there is an existing E2E completion app available for testing
+    When I open the apps console
+    And I open the options menu for the last created E2E app
+    And I click "Export DSL" in the app options menu
+    Then a YAML file named after the app should be downloaded
diff --git a/e2e/features/apps/switch-app-mode.feature b/e2e/features/apps/switch-app-mode.feature
new file mode 100644
index 0000000000..5cdc6341fb
--- /dev/null
+++ b/e2e/features/apps/switch-app-mode.feature
@@ -0,0 +1,10 @@
+@apps @authenticated @core
+Feature: Switch app mode
+  Scenario: Switch a Completion app to Workflow Orchestrate
+    Given I am signed in as the default E2E admin
+    And there is an existing E2E completion app available for testing
+    When I open the apps console
+    And I open the options menu for the last created E2E app
+    And I click "Switch to Workflow Orchestrate" in the app options menu
+    And I confirm the app switch
+    Then I should land on the switched app
diff --git a/e2e/features/step-definitions/apps/create-app.steps.ts b/e2e/features/step-definitions/apps/create-app.steps.ts
index e444b97dc8..931d4662a2 100644
--- a/e2e/features/step-definitions/apps/create-app.steps.ts
+++ b/e2e/features/step-definitions/apps/create-app.steps.ts
@@ -11,7 +11,7 @@ When('I start creating a blank app', async function (this: DifyWorld) {
 
 When('I enter a unique E2E app name', async function (this: DifyWorld) {
   const appName = `E2E App ${Date.now()}`
-
+  this.lastCreatedAppName = appName
   await this.getPage().getByPlaceholder('Give your app a name').fill(appName)
 })
 
@@ -26,10 +26,15 @@ When('I confirm app creation', async function (this: DifyWorld) {
 
 When('I select the {string} app type', async function (this: DifyWorld, appType: string) {
   const dialog = this.getPage().getByRole('dialog')
-  const appTypeTitle = dialog.getByText(appType, { exact: true })
+  // The modal defaults to ADVANCED_CHAT, so the preview panel immediately renders
+  // <h4>Chatflow</h4> alongside the card's <div>Chatflow</div>.
+  // locator('div').getByText(...) would still match the <h4> because getByText
+  // searches inside each div for any descendant. Use :text-is() instead, which
+  // targets only <div> elements whose own normalised text equals appType exactly.
+  const appTypeCard = dialog.locator(`div:text-is("${appType}")`)
 
-  await expect(appTypeTitle).toBeVisible()
-  await appTypeTitle.click()
+  await expect(appTypeCard).toBeVisible()
+  await appTypeCard.click()
 })
 
 When('I expand the beginner app types', async function (this: DifyWorld) {
diff --git a/e2e/features/step-definitions/apps/delete-app.steps.ts b/e2e/features/step-definitions/apps/delete-app.steps.ts
new file mode 100644
index 0000000000..e5da626645
--- /dev/null
+++ b/e2e/features/step-definitions/apps/delete-app.steps.ts
@@ -0,0 +1,35 @@
+import type { DifyWorld } from '../../support/world'
+import { Then, When } from '@cucumber/cucumber'
+import { expect } from '@playwright/test'
+
+When('I type the app name in the deletion confirmation', async function (this: DifyWorld) {
+  const appName = this.lastCreatedAppName
+  if (!appName) {
+    throw new Error(
+      'No app name stored. Run "there is an existing E2E app available for testing" first.',
+    )
+  }
+
+  const page = this.getPage()
+  const dialog = page.getByRole('alertdialog')
+  await expect(dialog).toBeVisible()
+  await dialog.getByPlaceholder('Enter app name…').fill(appName)
+})
+
+When('I confirm the deletion', async function (this: DifyWorld) {
+  const dialog = this.getPage().getByRole('alertdialog')
+  await dialog.getByRole('button', { name: 'Confirm' }).click()
+})
+
+Then('the app should no longer appear in the apps console', async function (this: DifyWorld) {
+  const appName = this.lastCreatedAppName
+  if (!appName) {
+    throw new Error(
+      'No app name stored. Run "there is an existing E2E app available for testing" first.',
+    )
+  }
+
+  await expect(this.getPage().getByTitle(appName)).not.toBeVisible({
+    timeout: 10_000,
+  })
+})
diff --git a/e2e/features/step-definitions/apps/duplicate-app.steps.ts b/e2e/features/step-definitions/apps/duplicate-app.steps.ts
new file mode 100644
index 0000000000..e5e3694e4d
--- /dev/null
+++ b/e2e/features/step-definitions/apps/duplicate-app.steps.ts
@@ -0,0 +1,36 @@
+import type { DifyWorld } from '../../support/world'
+import { Given, When } from '@cucumber/cucumber'
+import { createTestApp } from '../../../support/api'
+
+Given('there is an existing E2E app available for testing', async function (this: DifyWorld) {
+  const name = `E2E Test App ${Date.now()}`
+  const app = await createTestApp(name, 'completion')
+  this.lastCreatedAppName = app.name
+  this.createdAppIds.push(app.id)
+})
+
+When('I open the options menu for the last created E2E app', async function (this: DifyWorld) {
+  const appName = this.lastCreatedAppName
+  if (!appName)
+    throw new Error('No app name stored. Run "I enter a unique E2E app name" first.')
+
+  const page = this.getPage()
+  // Scope to the specific card: the card root is the innermost div that contains
+  // both the unique app name text and a More button (they are in separate branches,
+  // so no child div satisfies both). .last() picks the deepest match in DOM order.
+  const appCard = page
+    .locator('div')
+    .filter({ has: page.getByText(appName, { exact: true }) })
+    .filter({ has: page.getByRole('button', { name: 'More' }) })
+    .last()
+  await appCard.hover()
+  await appCard.getByRole('button', { name: 'More' }).click()
+})
+
+When('I click {string} in the app options menu', async function (this: DifyWorld, label: string) {
+  await this.getPage().getByRole('menuitem', { name: label }).click()
+})
+
+When('I confirm the app duplication', async function (this: DifyWorld) {
+  await this.getPage().getByRole('button', { name: 'Duplicate' }).click()
+})
diff --git a/e2e/features/step-definitions/apps/export-app.steps.ts b/e2e/features/step-definitions/apps/export-app.steps.ts
new file mode 100644
index 0000000000..4ebeecb507
--- /dev/null
+++ b/e2e/features/step-definitions/apps/export-app.steps.ts
@@ -0,0 +1,19 @@
+import type { DifyWorld } from '../../support/world'
+import { Then } from '@cucumber/cucumber'
+import { expect } from '@playwright/test'
+
+Then('a YAML file named after the app should be downloaded', async function (this: DifyWorld) {
+  const appName = this.lastCreatedAppName
+  if (!appName) {
+    throw new Error(
+      'No app name stored. Run "there is an existing E2E app available for testing" first.',
+    )
+  }
+
+  // The export triggers an async API call before the blob download fires.
+  // Poll until the download event is captured by the page listener in DifyWorld.
+  await expect.poll(() => this.capturedDownloads.length, { timeout: 10_000 }).toBeGreaterThan(0)
+
+  const download = this.capturedDownloads.at(-1)!
+  expect(download.suggestedFilename()).toBe(`${appName}.yml`)
+})
diff --git a/e2e/features/step-definitions/apps/switch-app-mode.steps.ts b/e2e/features/step-definitions/apps/switch-app-mode.steps.ts
new file mode 100644
index 0000000000..55ad1ab02c
--- /dev/null
+++ b/e2e/features/step-definitions/apps/switch-app-mode.steps.ts
@@ -0,0 +1,28 @@
+import type { DifyWorld } from '../../support/world'
+import { Given, Then, When } from '@cucumber/cucumber'
+import { expect } from '@playwright/test'
+import { createTestApp } from '../../../support/api'
+
+Given(
+  'there is an existing E2E completion app available for testing',
+  async function (this: DifyWorld) {
+    const name = `E2E Test App ${Date.now()}`
+    const app = await createTestApp(name, 'completion')
+    this.lastCreatedAppName = app.name
+    this.createdAppIds.push(app.id)
+  },
+)
+
+When('I confirm the app switch', async function (this: DifyWorld) {
+  await this.getPage().getByRole('button', { name: 'Start switch' }).click()
+})
+
+Then('I should land on the switched app', async function (this: DifyWorld) {
+  const page = this.getPage()
+  await expect(page).toHaveURL(/\/app\/[^/]+\/workflow(?:\?.*)?$/, { timeout: 15_000 })
+
+  // Capture the new app's ID so the After hook can clean it up
+  const match = page.url().match(/\/app\/([^/]+)\/workflow/)
+  if (match?.[1])
+    this.createdAppIds.push(match[1])
+})
diff --git a/e2e/features/support/hooks.ts b/e2e/features/support/hooks.ts
index 33b337fb93..c1a535ee2c 100644
--- a/e2e/features/support/hooks.ts
+++ b/e2e/features/support/hooks.ts
@@ -6,6 +6,7 @@ import { fileURLToPath } from 'node:url'
 import { After, AfterAll, Before, BeforeAll, setDefaultTimeout, Status } from '@cucumber/cucumber'
 import { chromium } from '@playwright/test'
 import { AUTH_BOOTSTRAP_TIMEOUT_MS, ensureAuthenticatedState } from '../../fixtures/auth'
+import { deleteTestApp } from '../../support/api'
 import { baseURL, cucumberHeadless, cucumberSlowMo } from '../../test-env'
 
 const e2eRoot = fileURLToPath(new URL('../..', import.meta.url))
@@ -88,6 +89,8 @@ After(async function (this: DifyWorld, { pickle, result }) {
     `[e2e] end ${pickle.name} status=${status}${elapsedMs ? ` durationMs=${elapsedMs}` : ''}`,
   )
 
+  for (const id of this.createdAppIds) await deleteTestApp(id).catch(() => {})
+
   await this.closeSession()
 })
 
diff --git a/e2e/features/support/world.ts b/e2e/features/support/world.ts
index 0e9c4b9c84..986f79c8f9 100644
--- a/e2e/features/support/world.ts
+++ b/e2e/features/support/world.ts
@@ -1,12 +1,8 @@
 import type { IWorldOptions } from '@cucumber/cucumber'
-import type { Browser, BrowserContext, ConsoleMessage, Page } from '@playwright/test'
+import type { Browser, BrowserContext, ConsoleMessage, Download, Page } from '@playwright/test'
 import type { AuthSessionMetadata } from '../../fixtures/auth'
 import { setWorldConstructor, World } from '@cucumber/cucumber'
-import {
-
-  authStatePath,
-  readAuthSessionMetadata,
-} from '../../fixtures/auth'
+import { authStatePath, readAuthSessionMetadata } from '../../fixtures/auth'
 import { baseURL, defaultLocale } from '../../test-env'
 
 export class DifyWorld extends World {
@@ -16,6 +12,9 @@ export class DifyWorld extends World {
   pageErrors: string[] = []
   scenarioStartedAt: number | undefined
   session: AuthSessionMetadata | undefined
+  lastCreatedAppName: string | undefined
+  createdAppIds: string[] = []
+  capturedDownloads: Download[] = []
 
   constructor(options: IWorldOptions) {
     super(options)
@@ -25,6 +24,9 @@ export class DifyWorld extends World {
   resetScenarioState() {
     this.consoleErrors = []
     this.pageErrors = []
+    this.lastCreatedAppName = undefined
+    this.createdAppIds = []
+    this.capturedDownloads = []
   }
 
   async startSession(browser: Browser, authenticated: boolean) {
@@ -45,6 +47,9 @@ export class DifyWorld extends World {
     this.page.on('pageerror', (error) => {
       this.pageErrors.push(error.message)
     })
+    this.page.on('download', (dl) => {
+      this.capturedDownloads.push(dl)
+    })
   }
 
   async startAuthenticatedSession(browser: Browser) {
diff --git a/e2e/support/api.ts b/e2e/support/api.ts
new file mode 100644
index 0000000000..c6d6c98bde
--- /dev/null
+++ b/e2e/support/api.ts
@@ -0,0 +1,54 @@
+import { readFile } from 'node:fs/promises'
+import { request } from '@playwright/test'
+import { authStatePath } from '../fixtures/auth'
+import { apiURL } from '../test-env'
+
+type StorageState = {
+  cookies: Array<{ name: string, value: string }>
+}
+
+async function createApiContext() {
+  const state = JSON.parse(await readFile(authStatePath, 'utf8')) as StorageState
+  const csrfToken = state.cookies.find(c => c.name.endsWith('csrf_token'))?.value ?? ''
+
+  return request.newContext({
+    baseURL: apiURL,
+    extraHTTPHeaders: { 'X-CSRF-Token': csrfToken },
+    storageState: authStatePath,
+  })
+}
+
+export type AppSeed = {
+  id: string
+  name: string
+}
+
+export async function createTestApp(name: string, mode = 'workflow'): Promise<AppSeed> {
+  const ctx = await createApiContext()
+  try {
+    const response = await ctx.post('/console/api/apps', {
+      data: {
+        name,
+        mode,
+        icon_type: 'emoji',
+        icon: '🤖',
+        icon_background: '#FFEAD5',
+      },
+    })
+    const body = (await response.json()) as AppSeed
+    return body
+  }
+  finally {
+    await ctx.dispose()
+  }
+}
+
+export async function deleteTestApp(id: string): Promise<void> {
+  const ctx = await createApiContext()
+  try {
+    await ctx.delete(`/console/api/apps/${id}`)
+  }
+  finally {
+    await ctx.dispose()
+  }
+}
diff --git a/e2e/vite.config.ts b/e2e/vite.config.ts
index 2329b534b4..f3dd7bbb0b 100644
--- a/e2e/vite.config.ts
+++ b/e2e/vite.config.ts
@@ -1,5 +1,3 @@
 import { defineConfig } from 'vite-plus'
 
-export default defineConfig({
-
-})
+export default defineConfig({})

From 90d638fba31da0e8ec0292b14e1cb92416109cdb Mon Sep 17 00:00:00 2001
From: sxxtony <166789813+sxxtony@users.noreply.github.com>
Date: Thu, 16 Apr 2026 23:58:32 -0700
Subject: [PATCH 04/24] refactor: migrate DocumentSegmentSummary to TypeBase
 (#34862)

---
 api/models/dataset.py                 | 43 ++++++++++++++++++---------
 api/services/summary_index_service.py |  4 ++-
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/api/models/dataset.py b/api/models/dataset.py
index 50301dd2d7..eee5c39a0e 100644
--- a/api/models/dataset.py
+++ b/api/models/dataset.py
@@ -1715,7 +1715,7 @@ class SegmentAttachmentBinding(TypeBase):
     )
 
 
-class DocumentSegmentSummary(Base):
+class DocumentSegmentSummary(TypeBase):
     __tablename__ = "document_segment_summaries"
     __table_args__ = (
         sa.PrimaryKeyConstraint("id", name="document_segment_summaries_pkey"),
@@ -1725,25 +1725,40 @@ class DocumentSegmentSummary(Base):
         sa.Index("document_segment_summaries_status_idx", "status"),
     )
 
-    id: Mapped[str] = mapped_column(StringUUID, nullable=False, default=lambda: str(uuid4()))
+    id: Mapped[str] = mapped_column(
+        StringUUID,
+        nullable=False,
+        insert_default=lambda: str(uuid4()),
+        default_factory=lambda: str(uuid4()),
+        init=False,
+    )
     dataset_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
     document_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
     # corresponds to DocumentSegment.id or parent chunk id
     chunk_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
-    summary_content: Mapped[str] = mapped_column(LongText, nullable=True)
-    summary_index_node_id: Mapped[str] = mapped_column(String(255), nullable=True)
-    summary_index_node_hash: Mapped[str] = mapped_column(String(255), nullable=True)
-    tokens: Mapped[int | None] = mapped_column(sa.Integer, nullable=True)
-    status: Mapped[str] = mapped_column(
-        EnumText(SummaryStatus, length=32), nullable=False, server_default=sa.text("'generating'")
+    summary_content: Mapped[str | None] = mapped_column(LongText, nullable=True, default=None)
+    summary_index_node_id: Mapped[str | None] = mapped_column(String(255), nullable=True, default=None)
+    summary_index_node_hash: Mapped[str | None] = mapped_column(String(255), nullable=True, default=None)
+    tokens: Mapped[int | None] = mapped_column(sa.Integer, nullable=True, default=None)
+    status: Mapped[SummaryStatus] = mapped_column(
+        EnumText(SummaryStatus, length=32),
+        nullable=False,
+        server_default=sa.text("'generating'"),
+        default=SummaryStatus.GENERATING,
+    )
+    error: Mapped[str | None] = mapped_column(LongText, nullable=True, default=None)
+    enabled: Mapped[bool] = mapped_column(sa.Boolean, nullable=False, server_default=sa.text("true"), default=True)
+    disabled_at: Mapped[datetime | None] = mapped_column(DateTime, nullable=True, default=None)
+    disabled_by: Mapped[str | None] = mapped_column(StringUUID, nullable=True, default=None)
+    created_at: Mapped[datetime] = mapped_column(
+        DateTime, nullable=False, server_default=func.current_timestamp(), init=False
     )
-    error: Mapped[str] = mapped_column(LongText, nullable=True)
-    enabled: Mapped[bool] = mapped_column(sa.Boolean, nullable=False, server_default=sa.text("true"))
-    disabled_at: Mapped[datetime | None] = mapped_column(DateTime, nullable=True)
-    disabled_by = mapped_column(StringUUID, nullable=True)
-    created_at: Mapped[datetime] = mapped_column(DateTime, nullable=False, server_default=func.current_timestamp())
     updated_at: Mapped[datetime] = mapped_column(
-        DateTime, nullable=False, server_default=func.current_timestamp(), onupdate=func.current_timestamp()
+        DateTime,
+        nullable=False,
+        server_default=func.current_timestamp(),
+        onupdate=func.current_timestamp(),
+        init=False,
     )
 
     def __repr__(self):
diff --git a/api/services/summary_index_service.py b/api/services/summary_index_service.py
index a91f49e9e6..cf39469be8 100644
--- a/api/services/summary_index_service.py
+++ b/api/services/summary_index_service.py
@@ -349,7 +349,6 @@ class SummaryIndexService:
                                     summary_record_id,
                                 )
                                 summary_record_in_session = DocumentSegmentSummary(
-                                    id=summary_record_id,  # Use the same ID if available
                                     dataset_id=dataset.id,
                                     document_id=segment.document_id,
                                     chunk_id=segment.id,
@@ -360,6 +359,9 @@ class SummaryIndexService:
                                     status=SummaryStatus.COMPLETED,
                                     enabled=True,
                                 )
+                                if summary_record_in_session is None:
+                                    raise RuntimeError("summary_record_in_session should not be None at this point")
+                                summary_record_in_session.id = summary_record_id
                                 session.add(summary_record_in_session)
                                 logger.info(
                                     "Created new summary record (id=%s) for segment %s after vectorization",

From 90e281c8da17ccefd2746e4dd6f10a71e9672a53 Mon Sep 17 00:00:00 2001
From: James <63717587+jamesrayammons@users.noreply.github.com>
Date: Fri, 17 Apr 2026 09:03:30 +0200
Subject: [PATCH 05/24] test: migrate dataset service document mock tests to
 testcontainers (#35191)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../services/test_dataset_service_document.py | 650 ++++++++++++++++++
 .../services/test_dataset_service_document.py | 436 ------------
 2 files changed, 650 insertions(+), 436 deletions(-)
 create mode 100644 api/tests/test_containers_integration_tests/services/test_dataset_service_document.py

diff --git a/api/tests/test_containers_integration_tests/services/test_dataset_service_document.py b/api/tests/test_containers_integration_tests/services/test_dataset_service_document.py
new file mode 100644
index 0000000000..2bec703f0c
--- /dev/null
+++ b/api/tests/test_containers_integration_tests/services/test_dataset_service_document.py
@@ -0,0 +1,650 @@
+"""Testcontainers integration tests for SQL-backed DocumentService paths."""
+
+import datetime
+import json
+from unittest.mock import create_autospec, patch
+from uuid import uuid4
+
+import pytest
+from werkzeug.exceptions import Forbidden, NotFound
+
+from core.rag.index_processor.constant.index_type import IndexStructureType
+from extensions.storage.storage_type import StorageType
+from models import Account
+from models.dataset import Dataset, Document
+from models.enums import CreatorUserRole, DataSourceType, DocumentCreatedFrom, IndexingStatus
+from models.model import UploadFile
+from services.dataset_service import DocumentService
+from services.errors.account import NoPermissionError
+
+FIXED_UPLOAD_CREATED_AT = datetime.datetime(2024, 1, 1, 0, 0, 0)
+
+
+class DocumentServiceIntegrationFactory:
+    @staticmethod
+    def create_dataset(
+        db_session_with_containers,
+        *,
+        tenant_id: str | None = None,
+        created_by: str | None = None,
+        name: str | None = None,
+    ) -> Dataset:
+        dataset = Dataset(
+            tenant_id=tenant_id or str(uuid4()),
+            name=name or f"dataset-{uuid4()}",
+            data_source_type=DataSourceType.UPLOAD_FILE,
+            created_by=created_by or str(uuid4()),
+        )
+        db_session_with_containers.add(dataset)
+        db_session_with_containers.commit()
+        return dataset
+
+    @staticmethod
+    def create_document(
+        db_session_with_containers,
+        *,
+        dataset: Dataset,
+        name: str = "doc.txt",
+        position: int = 1,
+        tenant_id: str | None = None,
+        indexing_status: str = IndexingStatus.COMPLETED,
+        enabled: bool = True,
+        archived: bool = False,
+        is_paused: bool = False,
+        need_summary: bool = False,
+        doc_form: str = IndexStructureType.PARAGRAPH_INDEX,
+        batch: str | None = None,
+        data_source_type: str = DataSourceType.UPLOAD_FILE,
+        data_source_info: dict | None = None,
+        created_by: str | None = None,
+    ) -> Document:
+        document = Document(
+            tenant_id=tenant_id or dataset.tenant_id,
+            dataset_id=dataset.id,
+            position=position,
+            data_source_type=data_source_type,
+            data_source_info=json.dumps(data_source_info or {}),
+            batch=batch or f"batch-{uuid4()}",
+            name=name,
+            created_from=DocumentCreatedFrom.WEB,
+            created_by=created_by or dataset.created_by,
+            doc_form=doc_form,
+        )
+        document.indexing_status = indexing_status
+        document.enabled = enabled
+        document.archived = archived
+        document.is_paused = is_paused
+        document.need_summary = need_summary
+        if indexing_status == IndexingStatus.COMPLETED:
+            document.completed_at = FIXED_UPLOAD_CREATED_AT
+        db_session_with_containers.add(document)
+        db_session_with_containers.commit()
+        return document
+
+    @staticmethod
+    def create_upload_file(
+        db_session_with_containers,
+        *,
+        tenant_id: str,
+        created_by: str,
+        file_id: str | None = None,
+        name: str = "source.txt",
+    ) -> UploadFile:
+        upload_file = UploadFile(
+            tenant_id=tenant_id,
+            storage_type=StorageType.LOCAL,
+            key=f"uploads/{uuid4()}",
+            name=name,
+            size=128,
+            extension="txt",
+            mime_type="text/plain",
+            created_by_role=CreatorUserRole.ACCOUNT,
+            created_by=created_by,
+            created_at=FIXED_UPLOAD_CREATED_AT,
+            used=False,
+        )
+        if file_id:
+            upload_file.id = file_id
+        db_session_with_containers.add(upload_file)
+        db_session_with_containers.commit()
+        return upload_file
+
+
+@pytest.fixture
+def current_user_mock():
+    with patch("services.dataset_service.current_user", create_autospec(Account, instance=True)) as current_user:
+        current_user.id = str(uuid4())
+        current_user.current_tenant_id = str(uuid4())
+        current_user.current_role = None
+        yield current_user
+
+
+def test_get_document_returns_none_when_document_id_is_missing(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+
+    assert DocumentService.get_document(dataset.id, None) is None
+
+
+def test_get_document_queries_by_dataset_and_document_id(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    document = DocumentServiceIntegrationFactory.create_document(db_session_with_containers, dataset=dataset)
+
+    result = DocumentService.get_document(dataset.id, document.id)
+
+    assert result is not None
+    assert result.id == document.id
+
+
+def test_get_documents_by_ids_returns_empty_for_empty_input(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+
+    result = DocumentService.get_documents_by_ids(dataset.id, [])
+
+    assert result == []
+
+
+def test_get_documents_by_ids_uses_single_batch_query(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    doc_a = DocumentServiceIntegrationFactory.create_document(db_session_with_containers, dataset=dataset, name="a.txt")
+    doc_b = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        name="b.txt",
+        position=2,
+    )
+
+    result = DocumentService.get_documents_by_ids(dataset.id, [doc_a.id, doc_b.id])
+
+    assert {document.id for document in result} == {doc_a.id, doc_b.id}
+
+
+def test_update_documents_need_summary_returns_zero_for_empty_input(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+
+    assert DocumentService.update_documents_need_summary(dataset.id, []) == 0
+
+
+def test_update_documents_need_summary_updates_matching_non_qa_documents(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    paragraph_doc = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        need_summary=True,
+    )
+    qa_doc = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        position=2,
+        need_summary=True,
+        doc_form=IndexStructureType.QA_INDEX,
+    )
+
+    updated_count = DocumentService.update_documents_need_summary(
+        dataset.id,
+        [paragraph_doc.id, qa_doc.id],
+        need_summary=False,
+    )
+
+    db_session_with_containers.expire_all()
+    refreshed_paragraph = db_session_with_containers.get(Document, paragraph_doc.id)
+    refreshed_qa = db_session_with_containers.get(Document, qa_doc.id)
+    assert updated_count == 1
+    assert refreshed_paragraph is not None
+    assert refreshed_qa is not None
+    assert refreshed_paragraph.need_summary is False
+    assert refreshed_qa.need_summary is True
+
+
+def test_get_document_download_url_uses_signed_url_helper(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    upload_file = DocumentServiceIntegrationFactory.create_upload_file(
+        db_session_with_containers,
+        tenant_id=dataset.tenant_id,
+        created_by=dataset.created_by,
+    )
+    document = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        data_source_info={"upload_file_id": upload_file.id},
+    )
+
+    with patch("services.dataset_service.file_helpers.get_signed_file_url", return_value="signed-url") as get_url:
+        result = DocumentService.get_document_download_url(document)
+
+    assert result == "signed-url"
+    get_url.assert_called_once_with(upload_file_id=upload_file.id, as_attachment=True)
+
+
+def test_get_upload_file_id_for_upload_file_document_rejects_invalid_source_type(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    document = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        data_source_type=DataSourceType.WEBSITE_CRAWL,
+        data_source_info={"url": "https://example.com"},
+    )
+
+    with pytest.raises(NotFound, match="invalid source"):
+        DocumentService._get_upload_file_id_for_upload_file_document(
+            document,
+            invalid_source_message="invalid source",
+            missing_file_message="missing file",
+        )
+
+
+def test_get_upload_file_id_for_upload_file_document_rejects_missing_upload_file_id(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    document = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        data_source_info={},
+    )
+
+    with pytest.raises(NotFound, match="missing file"):
+        DocumentService._get_upload_file_id_for_upload_file_document(
+            document,
+            invalid_source_message="invalid source",
+            missing_file_message="missing file",
+        )
+
+
+def test_get_upload_file_id_for_upload_file_document_returns_string_id(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    document = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        data_source_info={"upload_file_id": 99},
+    )
+
+    result = DocumentService._get_upload_file_id_for_upload_file_document(
+        document,
+        invalid_source_message="invalid source",
+        missing_file_message="missing file",
+    )
+
+    assert result == "99"
+
+
+def test_get_upload_file_for_upload_file_document_raises_when_file_service_returns_nothing(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    document = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        data_source_info={"upload_file_id": "missing-file"},
+    )
+
+    with patch("services.dataset_service.FileService.get_upload_files_by_ids", return_value={}):
+        with pytest.raises(NotFound, match="Uploaded file not found"):
+            DocumentService._get_upload_file_for_upload_file_document(document)
+
+
+def test_get_upload_file_for_upload_file_document_returns_upload_file(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    upload_file = DocumentServiceIntegrationFactory.create_upload_file(
+        db_session_with_containers,
+        tenant_id=dataset.tenant_id,
+        created_by=dataset.created_by,
+    )
+    document = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        data_source_info={"upload_file_id": upload_file.id},
+    )
+
+    result = DocumentService._get_upload_file_for_upload_file_document(document)
+
+    assert result.id == upload_file.id
+
+
+def test_get_upload_files_by_document_id_for_zip_download_raises_for_missing_documents(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+
+    with pytest.raises(NotFound, match="Document not found"):
+        DocumentService._get_upload_files_by_document_id_for_zip_download(
+            dataset_id=dataset.id,
+            document_ids=[str(uuid4())],
+            tenant_id=dataset.tenant_id,
+        )
+
+
+def test_get_upload_files_by_document_id_for_zip_download_rejects_cross_tenant_access(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    upload_file = DocumentServiceIntegrationFactory.create_upload_file(
+        db_session_with_containers,
+        tenant_id=dataset.tenant_id,
+        created_by=dataset.created_by,
+    )
+    document = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        tenant_id=str(uuid4()),
+        data_source_info={"upload_file_id": upload_file.id},
+    )
+
+    with pytest.raises(Forbidden, match="No permission"):
+        DocumentService._get_upload_files_by_document_id_for_zip_download(
+            dataset_id=dataset.id,
+            document_ids=[document.id],
+            tenant_id=dataset.tenant_id,
+        )
+
+
+def test_get_upload_files_by_document_id_for_zip_download_rejects_missing_upload_files(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    document = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        data_source_info={"upload_file_id": str(uuid4())},
+    )
+
+    with pytest.raises(NotFound, match="Only uploaded-file documents can be downloaded as ZIP"):
+        DocumentService._get_upload_files_by_document_id_for_zip_download(
+            dataset_id=dataset.id,
+            document_ids=[document.id],
+            tenant_id=dataset.tenant_id,
+        )
+
+
+def test_get_upload_files_by_document_id_for_zip_download_returns_document_keyed_mapping(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    upload_file_a = DocumentServiceIntegrationFactory.create_upload_file(
+        db_session_with_containers,
+        tenant_id=dataset.tenant_id,
+        created_by=dataset.created_by,
+        name="a.txt",
+    )
+    upload_file_b = DocumentServiceIntegrationFactory.create_upload_file(
+        db_session_with_containers,
+        tenant_id=dataset.tenant_id,
+        created_by=dataset.created_by,
+        name="b.txt",
+    )
+    document_a = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        data_source_info={"upload_file_id": upload_file_a.id},
+    )
+    document_b = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        position=2,
+        data_source_info={"upload_file_id": upload_file_b.id},
+    )
+
+    mapping = DocumentService._get_upload_files_by_document_id_for_zip_download(
+        dataset_id=dataset.id,
+        document_ids=[document_a.id, document_b.id],
+        tenant_id=dataset.tenant_id,
+    )
+
+    assert mapping[document_a.id].id == upload_file_a.id
+    assert mapping[document_b.id].id == upload_file_b.id
+
+
+def test_prepare_document_batch_download_zip_raises_not_found_for_missing_dataset(
+    current_user_mock, flask_app_with_containers
+):
+    with flask_app_with_containers.app_context():
+        with pytest.raises(NotFound, match="Dataset not found"):
+            DocumentService.prepare_document_batch_download_zip(
+                dataset_id=str(uuid4()),
+                document_ids=[str(uuid4())],
+                tenant_id=current_user_mock.current_tenant_id,
+                current_user=current_user_mock,
+            )
+
+
+def test_prepare_document_batch_download_zip_translates_permission_error_to_forbidden(
+    db_session_with_containers,
+    current_user_mock,
+):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(
+        db_session_with_containers,
+        tenant_id=current_user_mock.current_tenant_id,
+        created_by=current_user_mock.id,
+    )
+
+    with patch(
+        "services.dataset_service.DatasetService.check_dataset_permission",
+        side_effect=NoPermissionError("denied"),
+    ):
+        with pytest.raises(Forbidden, match="denied"):
+            DocumentService.prepare_document_batch_download_zip(
+                dataset_id=dataset.id,
+                document_ids=[],
+                tenant_id=current_user_mock.current_tenant_id,
+                current_user=current_user_mock,
+            )
+
+
+def test_prepare_document_batch_download_zip_returns_upload_files_in_requested_order(
+    db_session_with_containers,
+    current_user_mock,
+):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(
+        db_session_with_containers,
+        tenant_id=current_user_mock.current_tenant_id,
+        created_by=current_user_mock.id,
+    )
+    upload_file_a = DocumentServiceIntegrationFactory.create_upload_file(
+        db_session_with_containers,
+        tenant_id=dataset.tenant_id,
+        created_by=dataset.created_by,
+        name="a.txt",
+    )
+    upload_file_b = DocumentServiceIntegrationFactory.create_upload_file(
+        db_session_with_containers,
+        tenant_id=dataset.tenant_id,
+        created_by=dataset.created_by,
+        name="b.txt",
+    )
+    document_a = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        data_source_info={"upload_file_id": upload_file_a.id},
+    )
+    document_b = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        position=2,
+        data_source_info={"upload_file_id": upload_file_b.id},
+    )
+
+    upload_files, download_name = DocumentService.prepare_document_batch_download_zip(
+        dataset_id=dataset.id,
+        document_ids=[document_b.id, document_a.id],
+        tenant_id=current_user_mock.current_tenant_id,
+        current_user=current_user_mock,
+    )
+
+    assert [upload_file.id for upload_file in upload_files] == [upload_file_b.id, upload_file_a.id]
+    assert download_name.endswith(".zip")
+
+
+def test_get_document_by_dataset_id_returns_enabled_documents(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    enabled_document = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        enabled=True,
+    )
+    DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        position=2,
+        enabled=False,
+    )
+
+    result = DocumentService.get_document_by_dataset_id(dataset.id)
+
+    assert [document.id for document in result] == [enabled_document.id]
+
+
+def test_get_working_documents_by_dataset_id_returns_completed_enabled_unarchived_documents(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    available_document = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        indexing_status=IndexingStatus.COMPLETED,
+        enabled=True,
+        archived=False,
+    )
+    DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        position=2,
+        indexing_status=IndexingStatus.ERROR,
+    )
+
+    result = DocumentService.get_working_documents_by_dataset_id(dataset.id)
+
+    assert [document.id for document in result] == [available_document.id]
+
+
+def test_get_error_documents_by_dataset_id_returns_error_and_paused_documents(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    error_document = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        indexing_status=IndexingStatus.ERROR,
+    )
+    paused_document = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        position=2,
+        indexing_status=IndexingStatus.PAUSED,
+    )
+    DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        position=3,
+        indexing_status=IndexingStatus.COMPLETED,
+    )
+
+    result = DocumentService.get_error_documents_by_dataset_id(dataset.id)
+
+    assert {document.id for document in result} == {error_document.id, paused_document.id}
+
+
+def test_get_batch_documents_filters_by_current_user_tenant(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    batch = f"batch-{uuid4()}"
+    matching_document = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        batch=batch,
+    )
+    DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        position=2,
+        tenant_id=str(uuid4()),
+        batch=batch,
+    )
+
+    with patch("services.dataset_service.current_user", create_autospec(Account, instance=True)) as current_user:
+        current_user.current_tenant_id = dataset.tenant_id
+        result = DocumentService.get_batch_documents(dataset.id, batch)
+
+    assert [document.id for document in result] == [matching_document.id]
+
+
+def test_get_document_file_detail_returns_upload_file(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    upload_file = DocumentServiceIntegrationFactory.create_upload_file(
+        db_session_with_containers,
+        tenant_id=dataset.tenant_id,
+        created_by=dataset.created_by,
+    )
+
+    result = DocumentService.get_document_file_detail(upload_file.id)
+
+    assert result is not None
+    assert result.id == upload_file.id
+
+
+def test_delete_document_emits_signal_and_commits(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    upload_file = DocumentServiceIntegrationFactory.create_upload_file(
+        db_session_with_containers,
+        tenant_id=dataset.tenant_id,
+        created_by=dataset.created_by,
+    )
+    document = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        data_source_info={"upload_file_id": upload_file.id},
+    )
+
+    with patch("services.dataset_service.document_was_deleted.send") as signal_send:
+        DocumentService.delete_document(document)
+
+    assert db_session_with_containers.get(Document, document.id) is None
+    signal_send.assert_called_once_with(
+        document.id,
+        dataset_id=document.dataset_id,
+        doc_form=document.doc_form,
+        file_id=upload_file.id,
+    )
+
+
+def test_delete_documents_ignores_empty_input(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+
+    with patch("services.dataset_service.batch_clean_document_task.delay") as delay:
+        DocumentService.delete_documents(dataset, [])
+
+    delay.assert_not_called()
+
+
+def test_delete_documents_deletes_rows_and_dispatches_cleanup_task(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    dataset.chunk_structure = IndexStructureType.PARAGRAPH_INDEX
+    db_session_with_containers.commit()
+    upload_file_a = DocumentServiceIntegrationFactory.create_upload_file(
+        db_session_with_containers,
+        tenant_id=dataset.tenant_id,
+        created_by=dataset.created_by,
+        name="a.txt",
+    )
+    upload_file_b = DocumentServiceIntegrationFactory.create_upload_file(
+        db_session_with_containers,
+        tenant_id=dataset.tenant_id,
+        created_by=dataset.created_by,
+        name="b.txt",
+    )
+    document_a = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        data_source_info={"upload_file_id": upload_file_a.id},
+    )
+    document_b = DocumentServiceIntegrationFactory.create_document(
+        db_session_with_containers,
+        dataset=dataset,
+        position=2,
+        data_source_info={"upload_file_id": upload_file_b.id},
+    )
+
+    with patch("services.dataset_service.batch_clean_document_task.delay") as delay:
+        DocumentService.delete_documents(dataset, [document_a.id, document_b.id])
+
+    assert db_session_with_containers.get(Document, document_a.id) is None
+    assert db_session_with_containers.get(Document, document_b.id) is None
+    delay.assert_called_once()
+    args = delay.call_args.args
+    assert args[0] == [document_a.id, document_b.id]
+    assert args[1] == dataset.id
+    assert set(args[3]) == {upload_file_a.id, upload_file_b.id}
+
+
+def test_get_documents_position_returns_next_position_when_documents_exist(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+    DocumentServiceIntegrationFactory.create_document(db_session_with_containers, dataset=dataset, position=3)
+
+    assert DocumentService.get_documents_position(dataset.id) == 4
+
+
+def test_get_documents_position_defaults_to_one_when_dataset_is_empty(db_session_with_containers):
+    dataset = DocumentServiceIntegrationFactory.create_dataset(db_session_with_containers)
+
+    assert DocumentService.get_documents_position(dataset.id) == 1
diff --git a/api/tests/unit_tests/services/test_dataset_service_document.py b/api/tests/unit_tests/services/test_dataset_service_document.py
index 3f9386e704..1633194aa8 100644
--- a/api/tests/unit_tests/services/test_dataset_service_document.py
+++ b/api/tests/unit_tests/services/test_dataset_service_document.py
@@ -12,12 +12,10 @@ from .dataset_service_test_helpers import (
     DocumentService,
     FileInfo,
     FileNotExistsError,
-    Forbidden,
     IndexStructureType,
     InfoList,
     KnowledgeConfig,
     MagicMock,
-    NoPermissionError,
     NotFound,
     NotionIcon,
     NotionInfo,
@@ -35,7 +33,6 @@ from .dataset_service_test_helpers import (
     _make_document,
     _make_features,
     _make_lock_context,
-    _make_session_context,
     _make_upload_knowledge_config,
     create_autospec,
     json,
@@ -82,366 +79,6 @@ class TestDocumentServiceDisplayStatus:
         query.where.assert_called_once()
 
 
-class TestDocumentServiceQueryAndDownloadHelpers:
-    """Unit tests for DocumentService query helpers and download flows."""
-
-    def test_get_document_returns_none_when_document_id_is_missing(self):
-        with patch("services.dataset_service.db") as mock_db:
-            result = DocumentService.get_document("dataset-1", None)
-
-        assert result is None
-        mock_db.session.scalar.assert_not_called()
-
-    def test_get_document_queries_by_dataset_and_document_id(self):
-        document = DatasetServiceUnitDataFactory.create_document_mock()
-
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.session.scalar.return_value = document
-
-            result = DocumentService.get_document("dataset-1", "doc-1")
-
-        assert result is document
-
-    def test_get_documents_by_ids_returns_empty_for_empty_input(self):
-        with patch("services.dataset_service.db") as mock_db:
-            result = DocumentService.get_documents_by_ids("dataset-1", [])
-
-        assert result == []
-        mock_db.session.scalars.assert_not_called()
-
-    def test_get_documents_by_ids_uses_single_batch_query(self):
-        document = DatasetServiceUnitDataFactory.create_document_mock()
-
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.session.scalars.return_value.all.return_value = [document]
-
-            result = DocumentService.get_documents_by_ids("dataset-1", ["doc-1"])
-
-        assert result == [document]
-        mock_db.session.scalars.assert_called_once()
-
-    def test_update_documents_need_summary_returns_zero_for_empty_input(self):
-        with patch("services.dataset_service.session_factory") as session_factory_mock:
-            result = DocumentService.update_documents_need_summary("dataset-1", [])
-
-        assert result == 0
-        session_factory_mock.create_session.assert_not_called()
-
-    def test_update_documents_need_summary_updates_matching_documents_and_commits(self):
-        session = MagicMock()
-        session.execute.return_value.rowcount = 2
-
-        with patch("services.dataset_service.session_factory") as session_factory_mock:
-            session_factory_mock.create_session.return_value = _make_session_context(session)
-
-            result = DocumentService.update_documents_need_summary(
-                "dataset-1",
-                ["doc-1", "doc-2"],
-                need_summary=False,
-            )
-
-        assert result == 2
-        session.commit.assert_called_once()
-
-    def test_get_document_download_url_uses_upload_file_lookup_and_signed_url_helper(self):
-        upload_file = DatasetServiceUnitDataFactory.create_upload_file_mock(file_id="file-1")
-        document = DatasetServiceUnitDataFactory.create_document_mock()
-
-        with (
-            patch.object(DocumentService, "_get_upload_file_for_upload_file_document", return_value=upload_file),
-            patch("services.dataset_service.file_helpers.get_signed_file_url", return_value="signed-url") as get_url,
-        ):
-            result = DocumentService.get_document_download_url(document)
-
-        assert result == "signed-url"
-        get_url.assert_called_once_with(upload_file_id="file-1", as_attachment=True)
-
-    def test_get_upload_file_id_for_upload_file_document_rejects_invalid_source_type(self):
-        document = DatasetServiceUnitDataFactory.create_document_mock(data_source_type="not-upload-file")
-
-        with pytest.raises(NotFound, match="invalid source"):
-            DocumentService._get_upload_file_id_for_upload_file_document(
-                document,
-                invalid_source_message="invalid source",
-                missing_file_message="missing file",
-            )
-
-    def test_get_upload_file_id_for_upload_file_document_rejects_missing_upload_file_id(self):
-        document = DatasetServiceUnitDataFactory.create_document_mock(data_source_info_dict={})
-
-        with pytest.raises(NotFound, match="missing file"):
-            DocumentService._get_upload_file_id_for_upload_file_document(
-                document,
-                invalid_source_message="invalid source",
-                missing_file_message="missing file",
-            )
-
-    def test_get_upload_file_id_for_upload_file_document_returns_string_id(self):
-        document = DatasetServiceUnitDataFactory.create_document_mock(data_source_info_dict={"upload_file_id": 99})
-
-        result = DocumentService._get_upload_file_id_for_upload_file_document(
-            document,
-            invalid_source_message="invalid source",
-            missing_file_message="missing file",
-        )
-
-        assert result == "99"
-
-    def test_get_upload_file_for_upload_file_document_raises_when_file_service_returns_nothing(self):
-        document = DatasetServiceUnitDataFactory.create_document_mock(
-            tenant_id="tenant-1",
-            data_source_info_dict={"upload_file_id": "file-1"},
-        )
-
-        with patch("services.dataset_service.FileService.get_upload_files_by_ids", return_value={}):
-            with pytest.raises(NotFound, match="Uploaded file not found"):
-                DocumentService._get_upload_file_for_upload_file_document(document)
-
-    def test_get_upload_file_for_upload_file_document_returns_upload_file(self):
-        document = DatasetServiceUnitDataFactory.create_document_mock(
-            tenant_id="tenant-1",
-            data_source_info_dict={"upload_file_id": "file-1"},
-        )
-        upload_file = DatasetServiceUnitDataFactory.create_upload_file_mock(file_id="file-1")
-
-        with patch(
-            "services.dataset_service.FileService.get_upload_files_by_ids", return_value={"file-1": upload_file}
-        ):
-            result = DocumentService._get_upload_file_for_upload_file_document(document)
-
-        assert result is upload_file
-
-    def test_enrich_documents_with_summary_index_status_skips_lookup_when_summary_is_disabled(self):
-        dataset = DatasetServiceUnitDataFactory.create_dataset_mock(summary_index_setting={"enable": False})
-        documents = [
-            DatasetServiceUnitDataFactory.create_document_mock(document_id="doc-1", need_summary=True),
-            DatasetServiceUnitDataFactory.create_document_mock(document_id="doc-2", need_summary=False),
-        ]
-
-        DocumentService.enrich_documents_with_summary_index_status(documents, dataset, tenant_id="tenant-1")
-
-        assert documents[0].summary_index_status is None
-        assert documents[1].summary_index_status is None
-
-    def test_enrich_documents_with_summary_index_status_applies_summary_status_map(self):
-        dataset = DatasetServiceUnitDataFactory.create_dataset_mock(
-            dataset_id="dataset-1",
-            summary_index_setting={"enable": True},
-        )
-        documents = [
-            DatasetServiceUnitDataFactory.create_document_mock(document_id="doc-1", need_summary=True),
-            DatasetServiceUnitDataFactory.create_document_mock(document_id="doc-2", need_summary=True),
-            DatasetServiceUnitDataFactory.create_document_mock(document_id="doc-3", need_summary=False),
-        ]
-
-        with patch(
-            "services.summary_index_service.SummaryIndexService.get_documents_summary_index_status",
-            return_value={"doc-1": "completed", "doc-2": None},
-        ) as get_status_map:
-            DocumentService.enrich_documents_with_summary_index_status(documents, dataset, tenant_id="tenant-1")
-
-        get_status_map.assert_called_once_with(
-            document_ids=["doc-1", "doc-2"],
-            dataset_id="dataset-1",
-            tenant_id="tenant-1",
-        )
-        assert documents[0].summary_index_status == "completed"
-        assert documents[1].summary_index_status is None
-        assert documents[2].summary_index_status is None
-
-    def test_generate_document_batch_download_zip_filename_uses_zip_extension(self):
-        fake_uuid = SimpleNamespace(hex="archive-id")
-
-        with patch("services.dataset_service.uuid.uuid4", return_value=fake_uuid):
-            result = DocumentService._generate_document_batch_download_zip_filename()
-
-        assert result == "archive-id.zip"
-
-    def test_get_upload_files_by_document_id_for_zip_download_raises_for_missing_documents(self):
-        with patch.object(DocumentService, "get_documents_by_ids", return_value=[]):
-            with pytest.raises(NotFound, match="Document not found"):
-                DocumentService._get_upload_files_by_document_id_for_zip_download(
-                    dataset_id="dataset-1",
-                    document_ids=["doc-1"],
-                    tenant_id="tenant-1",
-                )
-
-    def test_get_upload_files_by_document_id_for_zip_download_rejects_cross_tenant_access(self):
-        document = DatasetServiceUnitDataFactory.create_document_mock(
-            document_id="doc-1",
-            tenant_id="tenant-other",
-            data_source_info_dict={"upload_file_id": "file-1"},
-        )
-
-        with patch.object(DocumentService, "get_documents_by_ids", return_value=[document]):
-            with pytest.raises(Forbidden, match="No permission"):
-                DocumentService._get_upload_files_by_document_id_for_zip_download(
-                    dataset_id="dataset-1",
-                    document_ids=["doc-1"],
-                    tenant_id="tenant-1",
-                )
-
-    def test_get_upload_files_by_document_id_for_zip_download_rejects_missing_upload_files(self):
-        document = DatasetServiceUnitDataFactory.create_document_mock(
-            document_id="doc-1",
-            tenant_id="tenant-1",
-            data_source_info_dict={"upload_file_id": "file-1"},
-        )
-
-        with (
-            patch.object(DocumentService, "get_documents_by_ids", return_value=[document]),
-            patch("services.dataset_service.FileService.get_upload_files_by_ids", return_value={}),
-        ):
-            with pytest.raises(NotFound, match="Only uploaded-file documents can be downloaded as ZIP"):
-                DocumentService._get_upload_files_by_document_id_for_zip_download(
-                    dataset_id="dataset-1",
-                    document_ids=["doc-1"],
-                    tenant_id="tenant-1",
-                )
-
-    def test_get_upload_files_by_document_id_for_zip_download_returns_document_keyed_mapping(self):
-        document_a = DatasetServiceUnitDataFactory.create_document_mock(
-            document_id="doc-1",
-            tenant_id="tenant-1",
-            data_source_info_dict={"upload_file_id": "file-1"},
-        )
-        document_b = DatasetServiceUnitDataFactory.create_document_mock(
-            document_id="doc-2",
-            tenant_id="tenant-1",
-            data_source_info_dict={"upload_file_id": "file-2"},
-        )
-        upload_file_a = DatasetServiceUnitDataFactory.create_upload_file_mock(file_id="file-1")
-        upload_file_b = DatasetServiceUnitDataFactory.create_upload_file_mock(file_id="file-2")
-
-        with (
-            patch.object(DocumentService, "get_documents_by_ids", return_value=[document_a, document_b]),
-            patch(
-                "services.dataset_service.FileService.get_upload_files_by_ids",
-                return_value={"file-1": upload_file_a, "file-2": upload_file_b},
-            ),
-        ):
-            result = DocumentService._get_upload_files_by_document_id_for_zip_download(
-                dataset_id="dataset-1",
-                document_ids=["doc-1", "doc-2"],
-                tenant_id="tenant-1",
-            )
-
-        assert result == {"doc-1": upload_file_a, "doc-2": upload_file_b}
-
-    def test_prepare_document_batch_download_zip_raises_not_found_for_missing_dataset(self):
-        user = DatasetServiceUnitDataFactory.create_user_mock()
-
-        with patch.object(DatasetService, "get_dataset", return_value=None):
-            with pytest.raises(NotFound, match="Dataset not found"):
-                DocumentService.prepare_document_batch_download_zip(
-                    dataset_id="dataset-1",
-                    document_ids=["doc-1"],
-                    tenant_id="tenant-1",
-                    current_user=user,
-                )
-
-    def test_prepare_document_batch_download_zip_translates_permission_error_to_forbidden(self):
-        dataset = DatasetServiceUnitDataFactory.create_dataset_mock()
-        user = DatasetServiceUnitDataFactory.create_user_mock()
-
-        with (
-            patch.object(DatasetService, "get_dataset", return_value=dataset),
-            patch.object(DatasetService, "check_dataset_permission", side_effect=NoPermissionError("blocked")),
-        ):
-            with pytest.raises(Forbidden, match="blocked"):
-                DocumentService.prepare_document_batch_download_zip(
-                    dataset_id=dataset.id,
-                    document_ids=["doc-1"],
-                    tenant_id="tenant-1",
-                    current_user=user,
-                )
-
-    def test_prepare_document_batch_download_zip_returns_upload_files_in_requested_order(self):
-        dataset = DatasetServiceUnitDataFactory.create_dataset_mock()
-        user = DatasetServiceUnitDataFactory.create_user_mock()
-        upload_file_a = DatasetServiceUnitDataFactory.create_upload_file_mock(file_id="file-a")
-        upload_file_b = DatasetServiceUnitDataFactory.create_upload_file_mock(file_id="file-b")
-
-        with (
-            patch.object(DatasetService, "get_dataset", return_value=dataset),
-            patch.object(DatasetService, "check_dataset_permission"),
-            patch.object(
-                DocumentService,
-                "_get_upload_files_by_document_id_for_zip_download",
-                return_value={"doc-1": upload_file_a, "doc-2": upload_file_b},
-            ),
-            patch.object(DocumentService, "_generate_document_batch_download_zip_filename", return_value="archive.zip"),
-        ):
-            upload_files, download_name = DocumentService.prepare_document_batch_download_zip(
-                dataset_id=dataset.id,
-                document_ids=["doc-2", "doc-1"],
-                tenant_id="tenant-1",
-                current_user=user,
-            )
-
-        assert upload_files == [upload_file_b, upload_file_a]
-        assert download_name == "archive.zip"
-
-    def test_get_document_by_dataset_id_returns_enabled_documents(self):
-        document = DatasetServiceUnitDataFactory.create_document_mock(enabled=True)
-
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.session.scalars.return_value.all.return_value = [document]
-
-            result = DocumentService.get_document_by_dataset_id("dataset-1")
-
-        assert result == [document]
-
-    def test_get_working_documents_by_dataset_id_returns_scalars_result(self):
-        document = DatasetServiceUnitDataFactory.create_document_mock(indexing_status="completed", archived=False)
-
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.session.scalars.return_value.all.return_value = [document]
-
-            result = DocumentService.get_working_documents_by_dataset_id("dataset-1")
-
-        assert result == [document]
-
-    def test_get_error_documents_by_dataset_id_returns_scalars_result(self):
-        document = DatasetServiceUnitDataFactory.create_document_mock(indexing_status="error")
-
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.session.scalars.return_value.all.return_value = [document]
-
-            result = DocumentService.get_error_documents_by_dataset_id("dataset-1")
-
-        assert result == [document]
-
-    def test_get_batch_documents_filters_by_current_user_tenant(self):
-        class FakeAccount:
-            pass
-
-        current_user = FakeAccount()
-        current_user.current_tenant_id = "tenant-1"
-        document = DatasetServiceUnitDataFactory.create_document_mock()
-
-        with (
-            patch("services.dataset_service.Account", FakeAccount),
-            patch("services.dataset_service.current_user", current_user),
-            patch("services.dataset_service.db") as mock_db,
-        ):
-            mock_db.session.scalars.return_value.all.return_value = [document]
-
-            result = DocumentService.get_batch_documents("dataset-1", "batch-1")
-
-        assert result == [document]
-
-    def test_get_document_file_detail_returns_one_or_none(self):
-        upload_file = DatasetServiceUnitDataFactory.create_upload_file_mock()
-
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.session.get.return_value = upload_file
-
-            result = DocumentService.get_document_file_detail(upload_file.id)
-
-        assert result is upload_file
-
-
 class TestDocumentServiceMutations:
     """Unit tests for DocumentService mutation and orchestration helpers."""
 
@@ -466,61 +103,6 @@ class TestDocumentServiceMutations:
 
         assert DocumentService.check_archived(document) is expected
 
-    def test_delete_document_emits_signal_and_commits(self):
-        document = DatasetServiceUnitDataFactory.create_document_mock(
-            data_source_type="upload_file",
-            data_source_info='{"upload_file_id": "file-1"}',
-            data_source_info_dict={"upload_file_id": "file-1"},
-        )
-
-        with (
-            patch("services.dataset_service.document_was_deleted.send") as send_deleted_signal,
-            patch("services.dataset_service.db") as mock_db,
-        ):
-            DocumentService.delete_document(document)
-
-        send_deleted_signal.assert_called_once_with(
-            document.id,
-            dataset_id=document.dataset_id,
-            doc_form=document.doc_form,
-            file_id="file-1",
-        )
-        mock_db.session.delete.assert_called_once_with(document)
-        mock_db.session.commit.assert_called_once()
-
-    def test_delete_documents_ignores_empty_input(self):
-        dataset = DatasetServiceUnitDataFactory.create_dataset_mock()
-
-        with patch("services.dataset_service.db") as mock_db:
-            DocumentService.delete_documents(dataset, [])
-
-        mock_db.session.scalars.assert_not_called()
-
-    def test_delete_documents_deletes_rows_and_dispatches_cleanup_task(self):
-        dataset = DatasetServiceUnitDataFactory.create_dataset_mock(doc_form="text_model")
-        document_a = DatasetServiceUnitDataFactory.create_document_mock(
-            document_id="doc-1",
-            data_source_type="upload_file",
-            data_source_info_dict={"upload_file_id": "file-1"},
-        )
-        document_b = DatasetServiceUnitDataFactory.create_document_mock(
-            document_id="doc-2",
-            data_source_type="upload_file",
-            data_source_info_dict={"upload_file_id": "file-2"},
-        )
-
-        with (
-            patch("services.dataset_service.db") as mock_db,
-            patch("services.dataset_service.batch_clean_document_task") as clean_task,
-        ):
-            mock_db.session.scalars.return_value.all.return_value = [document_a, document_b]
-
-            DocumentService.delete_documents(dataset, ["doc-1", "doc-2"])
-
-        assert mock_db.session.delete.call_count == 2
-        mock_db.session.commit.assert_called_once()
-        clean_task.delay.assert_called_once_with(["doc-1", "doc-2"], dataset.id, dataset.doc_form, ["file-1", "file-2"])
-
     def test_rename_document_raises_when_dataset_is_missing(self, rename_account_context):
         with patch.object(DatasetService, "get_dataset", return_value=None):
             with pytest.raises(ValueError, match="Dataset not found"):
@@ -620,24 +202,6 @@ class TestDocumentServiceMutations:
         mock_redis.setex.assert_called_once_with("document_doc-1_is_sync", 600, 1)
         sync_task.delay.assert_called_once_with("dataset-1", "doc-1")
 
-    def test_get_documents_position_returns_next_position_when_documents_exist(self):
-        document = DatasetServiceUnitDataFactory.create_document_mock(position=7)
-
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.session.scalar.return_value = document
-
-            result = DocumentService.get_documents_position("dataset-1")
-
-        assert result == 8
-
-    def test_get_documents_position_defaults_to_one_when_dataset_is_empty(self):
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.session.scalar.return_value = None
-
-            result = DocumentService.get_documents_position("dataset-1")
-
-        assert result == 1
-
 
 class TestDocumentServiceSaveDocumentWithoutDatasetId:
     """Unit tests for dataset creation around save_document_without_dataset_id."""

From 0c41d0bf51e65c0908050616e0ad51dc89ea168d Mon Sep 17 00:00:00 2001
From: Cocoon-Break <54054995+kuishou68@users.noreply.github.com>
Date: Fri, 17 Apr 2026 15:09:40 +0800
Subject: [PATCH 06/24] fix: guard against KeyError in
 update_prompt_message_tool loop (#35150)

Co-authored-by: Crazywoola <100913391+crazywoola@users.noreply.github.com>
---
 api/core/agent/fc_agent_runner.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/api/core/agent/fc_agent_runner.py b/api/core/agent/fc_agent_runner.py
index d38d24d1e7..29de0b8b1c 100644
--- a/api/core/agent/fc_agent_runner.py
+++ b/api/core/agent/fc_agent_runner.py
@@ -299,7 +299,9 @@ class FunctionCallAgentRunner(BaseAgentRunner):
 
             # update prompt tool
             for prompt_tool in prompt_messages_tools:
-                self.update_prompt_message_tool(tool_instances[prompt_tool.name], prompt_tool)
+                tool_instance = tool_instances.get(prompt_tool.name)
+                if tool_instance:
+                    self.update_prompt_message_tool(tool_instance, prompt_tool)
 
             iteration_step += 1
 

From eaddd4a132dee27d5277a3b8160b3edf7eda8b2f Mon Sep 17 00:00:00 2001
From: Coding On Star <447357187@qq.com>
Date: Fri, 17 Apr 2026 15:27:22 +0800
Subject: [PATCH 07/24] fix(web): stabilize workflow node panel operator
 dropdown trigger (#35352)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: CodingOnStar <hanxujiang@dify.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: jerryzai <jerryzh8710@protonmail.com>
Co-authored-by: NVIDIAN <speedy.hpc@hotmail.com>
Co-authored-by: ai-hpc <ai-hpc@users.noreply.github.com>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: Asuka Minato <i@asukaminato.eu.org>
Co-authored-by: Junghwan <70629228+shaun0927@users.noreply.github.com>
Co-authored-by: HeYinKazune <70251095+HeYin-OS@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 eslint-suppressions.json                      |  5 ----
 .../nodes/_base/components/node-control.tsx   | 21 ++++++++++------
 .../_base/components/panel-operator/index.tsx | 24 ++++++++++---------
 3 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 763d94af9a..173a3a7bd7 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -4679,11 +4679,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/_base/components/node-control.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/_base/components/node-handle.tsx": {
     "react/set-state-in-effect": {
       "count": 1
diff --git a/web/app/components/workflow/nodes/_base/components/node-control.tsx b/web/app/components/workflow/nodes/_base/components/node-control.tsx
index aab4b5065d..547d0b1daa 100644
--- a/web/app/components/workflow/nodes/_base/components/node-control.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-control.tsx
@@ -9,7 +9,11 @@ import { useTranslation } from 'react-i18next'
 import {
   Stop,
 } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
-import Tooltip from '@/app/components/base/tooltip'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/app/components/base/ui/tooltip'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import {
   useNodesInteractions,
@@ -46,7 +50,8 @@ const NodeControl: FC<NodeControlProps> = ({
       `}
     >
       <div
-        className="flex h-6 items-center rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg px-0.5 text-text-tertiary shadow-md backdrop-blur-[5px]"
+        className="nodrag nopan nowheel flex h-6 items-center rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg px-0.5 text-text-tertiary shadow-md backdrop-blur-[5px]"
+        onMouseDown={e => e.stopPropagation()}
         onClick={e => e.stopPropagation()}
       >
         {
@@ -71,11 +76,13 @@ const NodeControl: FC<NodeControlProps> = ({
                 isSingleRunning
                   ? <Stop className="h-3 w-3" />
                   : (
-                      <Tooltip
-                        popupContent={t('panel.runThisStep', { ns: 'workflow' })}
-                        asChild={false}
-                      >
-                        <span className="i-ri-play-large-line h-3 w-3" />
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={<span className="i-ri-play-large-line h-3 w-3" />}
+                        />
+                        <TooltipContent>
+                          {t('panel.runThisStep', { ns: 'workflow' })}
+                        </TooltipContent>
                       </Tooltip>
                     )
               }
diff --git a/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx b/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
index 2109365d75..7b3469aaba 100644
--- a/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
@@ -1,10 +1,12 @@
 import type { OffsetOptions } from '@floating-ui/react'
 import type { Node } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useCallback,
   useState,
 } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -32,6 +34,7 @@ const PanelOperator = ({
   onOpenChange,
   showHelpLink = true,
 }: PanelOperatorProps) => {
+  const { t } = useTranslation()
   const [open, setOpen] = useState(false)
   const sideOffset = typeof offset === 'number'
     ? offset
@@ -54,17 +57,16 @@ const PanelOperator = ({
       open={open}
       onOpenChange={handleOpenChange}
     >
-      <DropdownMenuTrigger render={<div />}>
-        <div
-          className={`
-            flex h-6 w-6 cursor-pointer items-center justify-center rounded-md
-            hover:bg-state-base-hover
-            ${open && 'bg-state-base-hover'}
-            ${triggerClassName}
-          `}
-        >
-          <span aria-hidden className="i-ri-more-fill h-4 w-4 text-text-tertiary" />
-        </div>
+      <DropdownMenuTrigger
+        render={<button type="button" />}
+        aria-label={t('operation.more', { ns: 'common' })}
+        className={cn(
+          'nodrag nopan nowheel flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-state-base-hover',
+          open && 'bg-state-base-hover',
+          triggerClassName,
+        )}
+      >
+        <span aria-hidden className="i-ri-more-fill h-4 w-4 text-text-tertiary" />
       </DropdownMenuTrigger>
       <DropdownMenuContent
         placement="bottom-end"

From a74e12809bc05113fb28737118fb5f97dfc23982 Mon Sep 17 00:00:00 2001
From: zyssyz123 <916125788@qq.com>
Date: Fri, 17 Apr 2026 15:42:29 +0800
Subject: [PATCH 08/24] =?UTF-8?q?fix:=20move=20remote=20credential=20valid?=
 =?UTF-8?q?ation=20outside=20DB=20session=20to=20prevent=20=E2=80=A6=20(#3?=
 =?UTF-8?q?5350)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 api/core/entities/provider_configuration.py   | 177 ++++++++----------
 .../test_entities_provider_configuration.py   | 156 +++++++--------
 2 files changed, 156 insertions(+), 177 deletions(-)

diff --git a/api/core/entities/provider_configuration.py b/api/core/entities/provider_configuration.py
index 1ab66cceee..6bbf163c9d 100644
--- a/api/core/entities/provider_configuration.py
+++ b/api/core/entities/provider_configuration.py
@@ -318,34 +318,28 @@ class ProviderConfiguration(BaseModel):
             else [],
         )
 
-    def validate_provider_credentials(
-        self, credentials: dict[str, Any], credential_id: str = "", session: Session | None = None
-    ):
+    def validate_provider_credentials(self, credentials: dict[str, Any], credential_id: str = ""):
         """
         Validate custom credentials.
         :param credentials: provider credentials
         :param credential_id: (Optional)If provided, can use existing credential's hidden api key to validate
-        :param session: optional database session
         :return:
         """
+        provider_credential_secret_variables = self.extract_secret_variables(
+            self.provider.provider_credential_schema.credential_form_schemas
+            if self.provider.provider_credential_schema
+            else []
+        )
 
-        def _validate(s: Session):
-            # Get provider credential secret variables
-            provider_credential_secret_variables = self.extract_secret_variables(
-                self.provider.provider_credential_schema.credential_form_schemas
-                if self.provider.provider_credential_schema
-                else []
-            )
-
-            if credential_id:
+        if credential_id:
+            with Session(db.engine) as session:
                 try:
                     stmt = select(ProviderCredential).where(
                         ProviderCredential.tenant_id == self.tenant_id,
                         ProviderCredential.provider_name.in_(self._get_provider_names()),
                         ProviderCredential.id == credential_id,
                     )
-                    credential_record = s.execute(stmt).scalar_one_or_none()
-                    # fix origin data
+                    credential_record = session.execute(stmt).scalar_one_or_none()
                     if credential_record and credential_record.encrypted_config:
                         if not credential_record.encrypted_config.startswith("{"):
                             original_credentials = {"openai_api_key": credential_record.encrypted_config}
@@ -356,31 +350,23 @@ class ProviderConfiguration(BaseModel):
                 except JSONDecodeError:
                     original_credentials = {}
 
-                # encrypt credentials
-                for key, value in credentials.items():
-                    if key in provider_credential_secret_variables:
-                        # if send [__HIDDEN__] in secret input, it will be same as original value
-                        if value == HIDDEN_VALUE and key in original_credentials:
-                            credentials[key] = encrypter.decrypt_token(
-                                tenant_id=self.tenant_id, token=original_credentials[key]
-                            )
-
-            model_provider_factory = self.get_model_provider_factory()
-            validated_credentials = model_provider_factory.provider_credentials_validate(
-                provider=self.provider.provider, credentials=credentials
-            )
-
-            for key, value in validated_credentials.items():
+            for key, value in credentials.items():
                 if key in provider_credential_secret_variables:
-                    validated_credentials[key] = encrypter.encrypt_token(self.tenant_id, value)
+                    if value == HIDDEN_VALUE and key in original_credentials:
+                        credentials[key] = encrypter.decrypt_token(
+                            tenant_id=self.tenant_id, token=original_credentials[key]
+                        )
 
-            return validated_credentials
+        model_provider_factory = self.get_model_provider_factory()
+        validated_credentials = model_provider_factory.provider_credentials_validate(
+            provider=self.provider.provider, credentials=credentials
+        )
 
-        if session:
-            return _validate(session)
-        else:
-            with Session(db.engine) as new_session:
-                return _validate(new_session)
+        for key, value in validated_credentials.items():
+            if key in provider_credential_secret_variables:
+                validated_credentials[key] = encrypter.encrypt_token(self.tenant_id, value)
+
+        return validated_credentials
 
     def _generate_provider_credential_name(self, session) -> str:
         """
@@ -457,14 +443,16 @@ class ProviderConfiguration(BaseModel):
         :param credential_name: credential name
         :return:
         """
-        with Session(db.engine) as session:
+        with Session(db.engine) as pre_session:
             if credential_name:
-                if self._check_provider_credential_name_exists(credential_name=credential_name, session=session):
+                if self._check_provider_credential_name_exists(credential_name=credential_name, session=pre_session):
                     raise ValueError(f"Credential with name '{credential_name}' already exists.")
             else:
-                credential_name = self._generate_provider_credential_name(session)
+                credential_name = self._generate_provider_credential_name(pre_session)
 
-            credentials = self.validate_provider_credentials(credentials=credentials, session=session)
+        credentials = self.validate_provider_credentials(credentials=credentials)
+
+        with Session(db.engine) as session:
             provider_record = self._get_provider_record(session)
             try:
                 new_record = ProviderCredential(
@@ -477,7 +465,6 @@ class ProviderConfiguration(BaseModel):
                 session.flush()
 
                 if not provider_record:
-                    # If provider record does not exist, create it
                     provider_record = Provider(
                         tenant_id=self.tenant_id,
                         provider_name=self.provider.provider,
@@ -530,15 +517,15 @@ class ProviderConfiguration(BaseModel):
         :param credential_name: credential name
         :return:
         """
-        with Session(db.engine) as session:
+        with Session(db.engine) as pre_session:
             if credential_name and self._check_provider_credential_name_exists(
-                credential_name=credential_name, session=session, exclude_id=credential_id
+                credential_name=credential_name, session=pre_session, exclude_id=credential_id
             ):
                 raise ValueError(f"Credential with name '{credential_name}' already exists.")
 
-            credentials = self.validate_provider_credentials(
-                credentials=credentials, credential_id=credential_id, session=session
-            )
+        credentials = self.validate_provider_credentials(credentials=credentials, credential_id=credential_id)
+
+        with Session(db.engine) as session:
             provider_record = self._get_provider_record(session)
             stmt = select(ProviderCredential).where(
                 ProviderCredential.id == credential_id,
@@ -546,12 +533,10 @@ class ProviderConfiguration(BaseModel):
                 ProviderCredential.provider_name.in_(self._get_provider_names()),
             )
 
-            # Get the credential record to update
             credential_record = session.execute(stmt).scalar_one_or_none()
             if not credential_record:
                 raise ValueError("Credential record not found.")
             try:
-                # Update credential
                 credential_record.encrypted_config = json.dumps(credentials)
                 credential_record.updated_at = naive_utc_now()
                 if credential_name:
@@ -879,7 +864,6 @@ class ProviderConfiguration(BaseModel):
         model: str,
         credentials: dict[str, Any],
         credential_id: str = "",
-        session: Session | None = None,
     ):
         """
         Validate custom model credentials.
@@ -890,16 +874,14 @@ class ProviderConfiguration(BaseModel):
         :param credential_id: (Optional)If provided, can use existing credential's hidden api key to validate
         :return:
         """
+        provider_credential_secret_variables = self.extract_secret_variables(
+            self.provider.model_credential_schema.credential_form_schemas
+            if self.provider.model_credential_schema
+            else []
+        )
 
-        def _validate(s: Session):
-            # Get provider credential secret variables
-            provider_credential_secret_variables = self.extract_secret_variables(
-                self.provider.model_credential_schema.credential_form_schemas
-                if self.provider.model_credential_schema
-                else []
-            )
-
-            if credential_id:
+        if credential_id:
+            with Session(db.engine) as session:
                 try:
                     stmt = select(ProviderModelCredential).where(
                         ProviderModelCredential.id == credential_id,
@@ -908,7 +890,7 @@ class ProviderConfiguration(BaseModel):
                         ProviderModelCredential.model_name == model,
                         ProviderModelCredential.model_type == model_type,
                     )
-                    credential_record = s.execute(stmt).scalar_one_or_none()
+                    credential_record = session.execute(stmt).scalar_one_or_none()
                     original_credentials = (
                         json.loads(credential_record.encrypted_config)
                         if credential_record and credential_record.encrypted_config
@@ -917,31 +899,23 @@ class ProviderConfiguration(BaseModel):
                 except JSONDecodeError:
                     original_credentials = {}
 
-                # decrypt credentials
-                for key, value in credentials.items():
-                    if key in provider_credential_secret_variables:
-                        # if send [__HIDDEN__] in secret input, it will be same as original value
-                        if value == HIDDEN_VALUE and key in original_credentials:
-                            credentials[key] = encrypter.decrypt_token(
-                                tenant_id=self.tenant_id, token=original_credentials[key]
-                            )
-
-            model_provider_factory = self.get_model_provider_factory()
-            validated_credentials = model_provider_factory.model_credentials_validate(
-                provider=self.provider.provider, model_type=model_type, model=model, credentials=credentials
-            )
-
-            for key, value in validated_credentials.items():
+            for key, value in credentials.items():
                 if key in provider_credential_secret_variables:
-                    validated_credentials[key] = encrypter.encrypt_token(self.tenant_id, value)
+                    if value == HIDDEN_VALUE and key in original_credentials:
+                        credentials[key] = encrypter.decrypt_token(
+                            tenant_id=self.tenant_id, token=original_credentials[key]
+                        )
 
-            return validated_credentials
+        model_provider_factory = self.get_model_provider_factory()
+        validated_credentials = model_provider_factory.model_credentials_validate(
+            provider=self.provider.provider, model_type=model_type, model=model, credentials=credentials
+        )
 
-        if session:
-            return _validate(session)
-        else:
-            with Session(db.engine) as new_session:
-                return _validate(new_session)
+        for key, value in validated_credentials.items():
+            if key in provider_credential_secret_variables:
+                validated_credentials[key] = encrypter.encrypt_token(self.tenant_id, value)
+
+        return validated_credentials
 
     def create_custom_model_credential(
         self, model_type: ModelType, model: str, credentials: dict[str, Any], credential_name: str | None
@@ -954,20 +928,22 @@ class ProviderConfiguration(BaseModel):
         :param credentials: model credentials dict
         :return:
         """
-        with Session(db.engine) as session:
+        with Session(db.engine) as pre_session:
             if credential_name:
                 if self._check_custom_model_credential_name_exists(
-                    model=model, model_type=model_type, credential_name=credential_name, session=session
+                    model=model, model_type=model_type, credential_name=credential_name, session=pre_session
                 ):
                     raise ValueError(f"Model credential with name '{credential_name}' already exists for {model}.")
             else:
                 credential_name = self._generate_custom_model_credential_name(
-                    model=model, model_type=model_type, session=session
+                    model=model, model_type=model_type, session=pre_session
                 )
-            # validate custom model config
-            credentials = self.validate_custom_model_credentials(
-                model_type=model_type, model=model, credentials=credentials, session=session
-            )
+
+        credentials = self.validate_custom_model_credentials(
+            model_type=model_type, model=model, credentials=credentials
+        )
+
+        with Session(db.engine) as session:
             provider_model_record = self._get_custom_model_record(model_type=model_type, model=model, session=session)
 
             try:
@@ -982,7 +958,6 @@ class ProviderConfiguration(BaseModel):
                 session.add(credential)
                 session.flush()
 
-                # save provider model
                 if not provider_model_record:
                     provider_model_record = ProviderModel(
                         tenant_id=self.tenant_id,
@@ -1024,23 +999,24 @@ class ProviderConfiguration(BaseModel):
         :param credential_id: credential id
         :return:
         """
-        with Session(db.engine) as session:
+        with Session(db.engine) as pre_session:
             if credential_name and self._check_custom_model_credential_name_exists(
                 model=model,
                 model_type=model_type,
                 credential_name=credential_name,
-                session=session,
+                session=pre_session,
                 exclude_id=credential_id,
             ):
                 raise ValueError(f"Model credential with name '{credential_name}' already exists for {model}.")
-            # validate custom model config
-            credentials = self.validate_custom_model_credentials(
-                model_type=model_type,
-                model=model,
-                credentials=credentials,
-                credential_id=credential_id,
-                session=session,
-            )
+
+        credentials = self.validate_custom_model_credentials(
+            model_type=model_type,
+            model=model,
+            credentials=credentials,
+            credential_id=credential_id,
+        )
+
+        with Session(db.engine) as session:
             provider_model_record = self._get_custom_model_record(model_type=model_type, model=model, session=session)
 
             stmt = select(ProviderModelCredential).where(
@@ -1055,7 +1031,6 @@ class ProviderConfiguration(BaseModel):
                 raise ValueError("Credential record not found.")
 
             try:
-                # Update credential
                 credential_record.encrypted_config = json.dumps(credentials)
                 credential_record.updated_at = naive_utc_now()
                 if credential_name:
diff --git a/api/tests/unit_tests/core/entities/test_entities_provider_configuration.py b/api/tests/unit_tests/core/entities/test_entities_provider_configuration.py
index fe2c226843..a28143026f 100644
--- a/api/tests/unit_tests/core/entities/test_entities_provider_configuration.py
+++ b/api/tests/unit_tests/core/entities/test_entities_provider_configuration.py
@@ -345,22 +345,26 @@ def test_validate_provider_credentials_handles_hidden_secret_value() -> None:
             )
         ]
     )
-    session = Mock()
-    session.execute.return_value.scalar_one_or_none.return_value = SimpleNamespace(encrypted_config="encrypted-old-key")
+    mock_session = Mock()
+    mock_session.execute.return_value.scalar_one_or_none.return_value = SimpleNamespace(
+        encrypted_config="encrypted-old-key"
+    )
     mock_factory = Mock()
     mock_factory.provider_credentials_validate.return_value = {"openai_api_key": "restored-key", "region": "us"}
 
-    with patch("core.entities.provider_configuration.create_plugin_model_provider_factory", return_value=mock_factory):
-        with patch("core.entities.provider_configuration.encrypter.decrypt_token", return_value="restored-key"):
-            with patch(
-                "core.entities.provider_configuration.encrypter.encrypt_token",
-                side_effect=lambda tenant_id, value: f"enc::{value}",
-            ):
-                validated = configuration.validate_provider_credentials(
-                    credentials={"openai_api_key": HIDDEN_VALUE, "region": "us"},
-                    credential_id="credential-1",
-                    session=session,
-                )
+    with _patched_session(mock_session):
+        with patch(
+            "core.entities.provider_configuration.create_plugin_model_provider_factory", return_value=mock_factory
+        ):
+            with patch("core.entities.provider_configuration.encrypter.decrypt_token", return_value="restored-key"):
+                with patch(
+                    "core.entities.provider_configuration.encrypter.encrypt_token",
+                    side_effect=lambda tenant_id, value: f"enc::{value}",
+                ):
+                    validated = configuration.validate_provider_credentials(
+                        credentials={"openai_api_key": HIDDEN_VALUE, "region": "us"},
+                        credential_id="credential-1",
+                    )
 
     assert validated["openai_api_key"] == "enc::restored-key"
     assert validated["region"] == "us"
@@ -370,23 +374,15 @@ def test_validate_provider_credentials_handles_hidden_secret_value() -> None:
     )
 
 
-def test_validate_provider_credentials_opens_session_when_not_passed() -> None:
+def test_validate_provider_credentials_without_credential_id() -> None:
     configuration = _build_provider_configuration()
-    mock_session = Mock()
     mock_factory = Mock()
     mock_factory.provider_credentials_validate.return_value = {"region": "us"}
 
-    with patch("core.entities.provider_configuration.Session") as mock_session_cls:
-        with patch("core.entities.provider_configuration.db") as mock_db:
-            mock_db.engine = Mock()
-            mock_session_cls.return_value.__enter__.return_value = mock_session
-            with patch(
-                "core.entities.provider_configuration.create_plugin_model_provider_factory", return_value=mock_factory
-            ):
-                validated = configuration.validate_provider_credentials(credentials={"region": "us"})
+    with patch("core.entities.provider_configuration.create_plugin_model_provider_factory", return_value=mock_factory):
+        validated = configuration.validate_provider_credentials(credentials={"region": "us"})
 
     assert validated == {"region": "us"}
-    mock_session_cls.assert_called_once()
 
 
 def test_switch_preferred_provider_type_returns_early_when_no_change_or_unsupported() -> None:
@@ -717,18 +713,22 @@ def test_check_provider_credential_name_exists_and_model_setting_lookup() -> Non
 def test_validate_provider_credentials_handles_invalid_original_json() -> None:
     configuration = _build_provider_configuration()
     configuration.provider.provider_credential_schema = _build_secret_provider_schema()
-    session = Mock()
-    session.execute.return_value.scalar_one_or_none.return_value = SimpleNamespace(encrypted_config="{invalid-json")
+    mock_session = Mock()
+    mock_session.execute.return_value.scalar_one_or_none.return_value = SimpleNamespace(
+        encrypted_config="{invalid-json"
+    )
     mock_factory = Mock()
     mock_factory.provider_credentials_validate.return_value = {"openai_api_key": "new-key"}
 
-    with patch("core.entities.provider_configuration.create_plugin_model_provider_factory", return_value=mock_factory):
-        with patch("core.entities.provider_configuration.encrypter.encrypt_token", return_value="enc-key"):
-            validated = configuration.validate_provider_credentials(
-                credentials={"openai_api_key": HIDDEN_VALUE},
-                credential_id="cred-1",
-                session=session,
-            )
+    with _patched_session(mock_session):
+        with patch(
+            "core.entities.provider_configuration.create_plugin_model_provider_factory", return_value=mock_factory
+        ):
+            with patch("core.entities.provider_configuration.encrypter.encrypt_token", return_value="enc-key"):
+                validated = configuration.validate_provider_credentials(
+                    credentials={"openai_api_key": HIDDEN_VALUE},
+                    credential_id="cred-1",
+                )
 
     assert validated == {"openai_api_key": "enc-key"}
 
@@ -1060,37 +1060,35 @@ def test_get_custom_model_credential_uses_specific_id_or_configuration_fallback(
 def test_validate_custom_model_credentials_supports_hidden_reuse_and_sessionless_path() -> None:
     configuration = _build_provider_configuration()
     configuration.provider.model_credential_schema = _build_secret_model_schema()
-    session = Mock()
-    session.execute.return_value.scalar_one_or_none.return_value = SimpleNamespace(
+    mock_session = Mock()
+    mock_session.execute.return_value.scalar_one_or_none.return_value = SimpleNamespace(
         encrypted_config='{"openai_api_key":"enc"}'
     )
     mock_factory = Mock()
     mock_factory.model_credentials_validate.return_value = {"openai_api_key": "raw"}
 
-    with patch("core.entities.provider_configuration.create_plugin_model_provider_factory", return_value=mock_factory):
-        with patch("core.entities.provider_configuration.encrypter.decrypt_token", return_value="raw"):
-            with patch("core.entities.provider_configuration.encrypter.encrypt_token", return_value="enc-new"):
-                validated = configuration.validate_custom_model_credentials(
-                    model_type=ModelType.LLM,
-                    model="gpt-4o",
-                    credentials={"openai_api_key": HIDDEN_VALUE},
-                    credential_id="cred-1",
-                    session=session,
-                )
-    assert validated == {"openai_api_key": "enc-new"}
-
-    session = Mock()
-    mock_factory = Mock()
-    mock_factory.model_credentials_validate.return_value = {"region": "us"}
-    with _patched_session(session):
+    with _patched_session(mock_session):
         with patch(
             "core.entities.provider_configuration.create_plugin_model_provider_factory", return_value=mock_factory
         ):
-            validated = configuration.validate_custom_model_credentials(
-                model_type=ModelType.LLM,
-                model="gpt-4o",
-                credentials={"region": "us"},
-            )
+            with patch("core.entities.provider_configuration.encrypter.decrypt_token", return_value="raw"):
+                with patch("core.entities.provider_configuration.encrypter.encrypt_token", return_value="enc-new"):
+                    validated = configuration.validate_custom_model_credentials(
+                        model_type=ModelType.LLM,
+                        model="gpt-4o",
+                        credentials={"openai_api_key": HIDDEN_VALUE},
+                        credential_id="cred-1",
+                    )
+    assert validated == {"openai_api_key": "enc-new"}
+
+    mock_factory2 = Mock()
+    mock_factory2.model_credentials_validate.return_value = {"region": "us"}
+    with patch("core.entities.provider_configuration.create_plugin_model_provider_factory", return_value=mock_factory2):
+        validated = configuration.validate_custom_model_credentials(
+            model_type=ModelType.LLM,
+            model="gpt-4o",
+            credentials={"region": "us"},
+        )
     assert validated == {"region": "us"}
 
 
@@ -1570,18 +1568,20 @@ def test_get_specific_provider_credential_logs_when_decrypt_fails() -> None:
 def test_validate_provider_credentials_uses_empty_original_when_record_missing() -> None:
     configuration = _build_provider_configuration()
     configuration.provider.provider_credential_schema = _build_secret_provider_schema()
-    session = Mock()
-    session.execute.return_value.scalar_one_or_none.return_value = None
+    mock_session = Mock()
+    mock_session.execute.return_value.scalar_one_or_none.return_value = None
     mock_factory = Mock()
     mock_factory.provider_credentials_validate.return_value = {"openai_api_key": "raw"}
 
-    with patch("core.entities.provider_configuration.create_plugin_model_provider_factory", return_value=mock_factory):
-        with patch("core.entities.provider_configuration.encrypter.encrypt_token", return_value="enc-new"):
-            validated = configuration.validate_provider_credentials(
-                credentials={"openai_api_key": HIDDEN_VALUE},
-                credential_id="cred-1",
-                session=session,
-            )
+    with _patched_session(mock_session):
+        with patch(
+            "core.entities.provider_configuration.create_plugin_model_provider_factory", return_value=mock_factory
+        ):
+            with patch("core.entities.provider_configuration.encrypter.encrypt_token", return_value="enc-new"):
+                validated = configuration.validate_provider_credentials(
+                    credentials={"openai_api_key": HIDDEN_VALUE},
+                    credential_id="cred-1",
+                )
 
     assert validated == {"openai_api_key": "enc-new"}
 
@@ -1692,20 +1692,24 @@ def test_get_specific_custom_model_credential_logs_when_decrypt_fails() -> None:
 def test_validate_custom_model_credentials_handles_invalid_original_json() -> None:
     configuration = _build_provider_configuration()
     configuration.provider.model_credential_schema = _build_secret_model_schema()
-    session = Mock()
-    session.execute.return_value.scalar_one_or_none.return_value = SimpleNamespace(encrypted_config="{invalid-json")
+    mock_session = Mock()
+    mock_session.execute.return_value.scalar_one_or_none.return_value = SimpleNamespace(
+        encrypted_config="{invalid-json"
+    )
     mock_factory = Mock()
     mock_factory.model_credentials_validate.return_value = {"openai_api_key": "raw"}
 
-    with patch("core.entities.provider_configuration.create_plugin_model_provider_factory", return_value=mock_factory):
-        with patch("core.entities.provider_configuration.encrypter.encrypt_token", return_value="enc-new"):
-            validated = configuration.validate_custom_model_credentials(
-                model_type=ModelType.LLM,
-                model="gpt-4o",
-                credentials={"openai_api_key": HIDDEN_VALUE},
-                credential_id="cred-1",
-                session=session,
-            )
+    with _patched_session(mock_session):
+        with patch(
+            "core.entities.provider_configuration.create_plugin_model_provider_factory", return_value=mock_factory
+        ):
+            with patch("core.entities.provider_configuration.encrypter.encrypt_token", return_value="enc-new"):
+                validated = configuration.validate_custom_model_credentials(
+                    model_type=ModelType.LLM,
+                    model="gpt-4o",
+                    credentials={"openai_api_key": HIDDEN_VALUE},
+                    credential_id="cred-1",
+                )
 
     assert validated == {"openai_api_key": "enc-new"}
 

From 881a9a1a0840cd2af729495896bb74b159df96c6 Mon Sep 17 00:00:00 2001
From: Yunlu Wen <yunlu.wen@dify.ai>
Date: Fri, 17 Apr 2026 15:53:35 +0800
Subject: [PATCH 09/24] refactor(api): move trace providers (#35144)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 api/core/ops/entities/config_entity.py        | 219 +----------
 api/core/ops/ops_trace_manager.py             | 189 ++++-----
 api/providers/README.md                       |   3 +
 api/providers/trace/README.md                 |  78 ++++
 .../trace/trace-aliyun/pyproject.toml         |  14 +
 .../src/dify_trace_aliyun}/__init__.py        |   0
 .../src/dify_trace_aliyun}/aliyun_trace.py    |  34 +-
 .../src/dify_trace_aliyun/config.py           |  32 ++
 .../data_exporter/__init__.py                 |   0
 .../data_exporter/traceclient.py              |   4 +-
 .../dify_trace_aliyun}/entities/__init__.py   |   0
 .../entities/aliyun_trace_entity.py           |   0
 .../dify_trace_aliyun}/entities/semconv.py    |   0
 .../src/dify_trace_aliyun/py.typed}           |   0
 .../src/dify_trace_aliyun}/utils.py           |   6 +-
 .../data_exporter/test_traceclient.py         |  47 ++-
 .../entities/test_aliyun_trace_entity.py      |   3 +-
 .../aliyun_trace/entities/test_semconv.py     |   2 +-
 .../aliyun_trace/test_aliyun_trace.py         |  12 +-
 .../aliyun_trace/test_aliyun_trace_utils.py   |  16 +-
 .../tests/unit_tests/test_config_entity.py    |  85 ++++
 .../trace/trace-arize-phoenix/pyproject.toml  |  10 +
 .../src/dify_trace_arize_phoenix}/__init__.py |   0
 .../arize_phoenix_trace.py                    |   2 +-
 .../src/dify_trace_arize_phoenix/config.py    |  45 +++
 .../src/dify_trace_arize_phoenix/py.typed}    |   0
 .../test_arize_phoenix_trace.py               |  38 +-
 .../unit_tests}/test_arize_phoenix_trace.py   |   2 +-
 .../tests/unit_tests/test_config_entity.py    |  88 +++++
 .../trace/trace-langfuse/pyproject.toml       |  10 +
 .../src/dify_trace_langfuse}/__init__.py      |   0
 .../src/dify_trace_langfuse/config.py         |  19 +
 .../dify_trace_langfuse}/entities/__init__.py |   0
 .../entities/langfuse_trace_entity.py         |   0
 .../dify_trace_langfuse}/langfuse_trace.py    |   8 +-
 .../src/dify_trace_langfuse/py.typed}         |   0
 .../langfuse_trace/test_langfuse_trace.py     |  46 +--
 .../tests/unit_tests/test_config_entity.py    |  42 ++
 .../tests/unit_tests}/test_langfuse_trace.py  |  11 +-
 .../trace/trace-langsmith/pyproject.toml      |  10 +
 .../src/dify_trace_langsmith}/__init__.py     |   0
 .../src/dify_trace_langsmith/config.py        |  20 +
 .../entities}/__init__.py                     |   0
 .../entities/langsmith_trace_entity.py        |   0
 .../dify_trace_langsmith}/langsmith_trace.py  |   8 +-
 .../src/dify_trace_langsmith/py.typed}        |   0
 .../langsmith_trace/test_langsmith_trace.py   |  42 +-
 .../tests/unit_tests/test_config_entity.py    |  35 ++
 .../trace/trace-mlflow/pyproject.toml         |  10 +
 .../src/dify_trace_mlflow}/__init__.py        |   0
 .../src/dify_trace_mlflow/config.py           |  46 +++
 .../src/dify_trace_mlflow}/mlflow_trace.py    |   2 +-
 .../src/dify_trace_mlflow/py.typed            |   0
 .../mlflow_trace/test_mlflow_trace.py         |  18 +-
 api/providers/trace/trace-opik/pyproject.toml |  10 +
 .../src/dify_trace_opik/__init__.py           |   0
 .../trace-opik/src/dify_trace_opik/config.py  |  25 ++
 .../src/dify_trace_opik}/opik_trace.py        |   2 +-
 .../trace-opik/src/dify_trace_opik/py.typed   |   0
 .../unit_tests}/opik_trace/test_opik_trace.py |  32 +-
 .../tests/unit_tests/test_config_entity.py    |  48 +++
 .../tests/unit_tests}/test_opik_trace.py      |  19 +-
 .../trace/trace-tencent/pyproject.toml        |  14 +
 .../src/dify_trace_tencent/__init__.py        |   0
 .../src/dify_trace_tencent}/client.py         |   0
 .../src/dify_trace_tencent/config.py          |  30 ++
 .../dify_trace_tencent}/entities/__init__.py  |   0
 .../dify_trace_tencent}/entities/semconv.py   |   0
 .../entities/tencent_trace_entity.py          |   0
 .../src/dify_trace_tencent/py.typed           |   0
 .../src/dify_trace_tencent}/span_builder.py   |   8 +-
 .../src/dify_trace_tencent}/tencent_trace.py  |  10 +-
 .../src/dify_trace_tencent}/utils.py          |   0
 .../unit_tests}/tencent_trace/test_client.py  |   7 +-
 .../tencent_trace/test_span_builder.py        |  50 +--
 .../tencent_trace/test_tencent_trace.py       |  72 ++--
 .../tencent_trace/test_tencent_trace_utils.py |  13 +-
 .../trace/trace-weave/pyproject.toml          |  10 +
 .../src/dify_trace_weave/__init__.py          |   0
 .../src/dify_trace_weave/config.py            |  29 ++
 .../src/dify_trace_weave/entities/__init__.py |   0
 .../entities/weave_trace_entity.py            |   0
 .../trace-weave/src/dify_trace_weave/py.typed |   0
 .../src/dify_trace_weave}/weave_trace.py      |   4 +-
 .../tests/unit_tests/test_config_entity.py    |  61 +++
 .../weave_trace/test_weave_trace.py           |  36 +-
 api/pyproject.toml                            |  39 +-
 api/pyrefly-local-excludes.txt                |  10 +-
 api/pyrightconfig.json                        |   3 +-
 .../unit_tests/core/ops/test_config_entity.py | 363 +-----------------
 api/uv.lock                                   | 176 ++++++++-
 dev/pytest/pytest_unit_tests.sh               |   1 +
 92 files changed, 1357 insertions(+), 971 deletions(-)
 create mode 100644 api/providers/trace/README.md
 create mode 100644 api/providers/trace/trace-aliyun/pyproject.toml
 rename api/{core/ops/aliyun_trace => providers/trace/trace-aliyun/src/dify_trace_aliyun}/__init__.py (100%)
 rename api/{core/ops/aliyun_trace => providers/trace/trace-aliyun/src/dify_trace_aliyun}/aliyun_trace.py (98%)
 create mode 100644 api/providers/trace/trace-aliyun/src/dify_trace_aliyun/config.py
 rename api/{core/ops/aliyun_trace => providers/trace/trace-aliyun/src/dify_trace_aliyun}/data_exporter/__init__.py (100%)
 rename api/{core/ops/aliyun_trace => providers/trace/trace-aliyun/src/dify_trace_aliyun}/data_exporter/traceclient.py (98%)
 rename api/{core/ops/aliyun_trace => providers/trace/trace-aliyun/src/dify_trace_aliyun}/entities/__init__.py (100%)
 rename api/{core/ops/aliyun_trace => providers/trace/trace-aliyun/src/dify_trace_aliyun}/entities/aliyun_trace_entity.py (100%)
 rename api/{core/ops/aliyun_trace => providers/trace/trace-aliyun/src/dify_trace_aliyun}/entities/semconv.py (100%)
 rename api/{core/ops/arize_phoenix_trace/__init__.py => providers/trace/trace-aliyun/src/dify_trace_aliyun/py.typed} (100%)
 rename api/{core/ops/aliyun_trace => providers/trace/trace-aliyun/src/dify_trace_aliyun}/utils.py (97%)
 rename api/{tests/unit_tests/core/ops => providers/trace/trace-aliyun/tests/unit_tests}/aliyun_trace/data_exporter/test_traceclient.py (86%)
 rename api/{tests/unit_tests/core/ops => providers/trace/trace-aliyun/tests/unit_tests}/aliyun_trace/entities/test_aliyun_trace_entity.py (97%)
 rename api/{tests/unit_tests/core/ops => providers/trace/trace-aliyun/tests/unit_tests}/aliyun_trace/entities/test_semconv.py (97%)
 rename api/{tests/unit_tests/core/ops => providers/trace/trace-aliyun/tests/unit_tests}/aliyun_trace/test_aliyun_trace.py (99%)
 rename api/{tests/unit_tests/core/ops => providers/trace/trace-aliyun/tests/unit_tests}/aliyun_trace/test_aliyun_trace_utils.py (95%)
 create mode 100644 api/providers/trace/trace-aliyun/tests/unit_tests/test_config_entity.py
 create mode 100644 api/providers/trace/trace-arize-phoenix/pyproject.toml
 rename api/{core/ops/langfuse_trace => providers/trace/trace-arize-phoenix/src/dify_trace_arize_phoenix}/__init__.py (100%)
 rename api/{core/ops/arize_phoenix_trace => providers/trace/trace-arize-phoenix/src/dify_trace_arize_phoenix}/arize_phoenix_trace.py (99%)
 create mode 100644 api/providers/trace/trace-arize-phoenix/src/dify_trace_arize_phoenix/config.py
 rename api/{core/ops/langfuse_trace/entities/__init__.py => providers/trace/trace-arize-phoenix/src/dify_trace_arize_phoenix/py.typed} (100%)
 rename api/{tests/unit_tests/core/ops => providers/trace/trace-arize-phoenix/tests/unit_tests}/arize_phoenix_trace/test_arize_phoenix_trace.py (91%)
 rename api/{tests/unit_tests/core/ops => providers/trace/trace-arize-phoenix/tests/unit_tests}/test_arize_phoenix_trace.py (94%)
 create mode 100644 api/providers/trace/trace-arize-phoenix/tests/unit_tests/test_config_entity.py
 create mode 100644 api/providers/trace/trace-langfuse/pyproject.toml
 rename api/{core/ops/langsmith_trace => providers/trace/trace-langfuse/src/dify_trace_langfuse}/__init__.py (100%)
 create mode 100644 api/providers/trace/trace-langfuse/src/dify_trace_langfuse/config.py
 rename api/{core/ops/langsmith_trace => providers/trace/trace-langfuse/src/dify_trace_langfuse}/entities/__init__.py (100%)
 rename api/{core/ops/langfuse_trace => providers/trace/trace-langfuse/src/dify_trace_langfuse}/entities/langfuse_trace_entity.py (100%)
 rename api/{core/ops/langfuse_trace => providers/trace/trace-langfuse/src/dify_trace_langfuse}/langfuse_trace.py (99%)
 rename api/{core/ops/mlflow_trace/__init__.py => providers/trace/trace-langfuse/src/dify_trace_langfuse/py.typed} (100%)
 rename api/{tests/unit_tests/core/ops => providers/trace/trace-langfuse/tests/unit_tests}/langfuse_trace/test_langfuse_trace.py (93%)
 create mode 100644 api/providers/trace/trace-langfuse/tests/unit_tests/test_config_entity.py
 rename api/{tests/unit_tests/core/ops => providers/trace/trace-langfuse/tests/unit_tests}/test_langfuse_trace.py (92%)
 create mode 100644 api/providers/trace/trace-langsmith/pyproject.toml
 rename api/{core/ops/opik_trace => providers/trace/trace-langsmith/src/dify_trace_langsmith}/__init__.py (100%)
 create mode 100644 api/providers/trace/trace-langsmith/src/dify_trace_langsmith/config.py
 rename api/{core/ops/tencent_trace => providers/trace/trace-langsmith/src/dify_trace_langsmith/entities}/__init__.py (100%)
 rename api/{core/ops/langsmith_trace => providers/trace/trace-langsmith/src/dify_trace_langsmith}/entities/langsmith_trace_entity.py (100%)
 rename api/{core/ops/langsmith_trace => providers/trace/trace-langsmith/src/dify_trace_langsmith}/langsmith_trace.py (99%)
 rename api/{core/ops/weave_trace/__init__.py => providers/trace/trace-langsmith/src/dify_trace_langsmith/py.typed} (100%)
 rename api/{tests/unit_tests/core/ops => providers/trace/trace-langsmith/tests/unit_tests}/langsmith_trace/test_langsmith_trace.py (91%)
 create mode 100644 api/providers/trace/trace-langsmith/tests/unit_tests/test_config_entity.py
 create mode 100644 api/providers/trace/trace-mlflow/pyproject.toml
 rename api/{core/ops/weave_trace/entities => providers/trace/trace-mlflow/src/dify_trace_mlflow}/__init__.py (100%)
 create mode 100644 api/providers/trace/trace-mlflow/src/dify_trace_mlflow/config.py
 rename api/{core/ops/mlflow_trace => providers/trace/trace-mlflow/src/dify_trace_mlflow}/mlflow_trace.py (99%)
 create mode 100644 api/providers/trace/trace-mlflow/src/dify_trace_mlflow/py.typed
 rename api/{tests/unit_tests/core/ops => providers/trace/trace-mlflow/tests/unit_tests}/mlflow_trace/test_mlflow_trace.py (98%)
 create mode 100644 api/providers/trace/trace-opik/pyproject.toml
 create mode 100644 api/providers/trace/trace-opik/src/dify_trace_opik/__init__.py
 create mode 100644 api/providers/trace/trace-opik/src/dify_trace_opik/config.py
 rename api/{core/ops/opik_trace => providers/trace/trace-opik/src/dify_trace_opik}/opik_trace.py (99%)
 create mode 100644 api/providers/trace/trace-opik/src/dify_trace_opik/py.typed
 rename api/{tests/unit_tests/core/ops => providers/trace/trace-opik/tests/unit_tests}/opik_trace/test_opik_trace.py (93%)
 create mode 100644 api/providers/trace/trace-opik/tests/unit_tests/test_config_entity.py
 rename api/{tests/unit_tests/core/ops => providers/trace/trace-opik/tests/unit_tests}/test_opik_trace.py (94%)
 create mode 100644 api/providers/trace/trace-tencent/pyproject.toml
 create mode 100644 api/providers/trace/trace-tencent/src/dify_trace_tencent/__init__.py
 rename api/{core/ops/tencent_trace => providers/trace/trace-tencent/src/dify_trace_tencent}/client.py (100%)
 create mode 100644 api/providers/trace/trace-tencent/src/dify_trace_tencent/config.py
 rename api/{core/ops/tencent_trace => providers/trace/trace-tencent/src/dify_trace_tencent}/entities/__init__.py (100%)
 rename api/{core/ops/tencent_trace => providers/trace/trace-tencent/src/dify_trace_tencent}/entities/semconv.py (100%)
 rename api/{core/ops/tencent_trace => providers/trace/trace-tencent/src/dify_trace_tencent}/entities/tencent_trace_entity.py (100%)
 create mode 100644 api/providers/trace/trace-tencent/src/dify_trace_tencent/py.typed
 rename api/{core/ops/tencent_trace => providers/trace/trace-tencent/src/dify_trace_tencent}/span_builder.py (98%)
 rename api/{core/ops/tencent_trace => providers/trace/trace-tencent/src/dify_trace_tencent}/tencent_trace.py (98%)
 rename api/{core/ops/tencent_trace => providers/trace/trace-tencent/src/dify_trace_tencent}/utils.py (100%)
 rename api/{tests/unit_tests/core/ops => providers/trace/trace-tencent/tests/unit_tests}/tencent_trace/test_client.py (98%)
 rename api/{tests/unit_tests/core/ops => providers/trace/trace-tencent/tests/unit_tests}/tencent_trace/test_span_builder.py (89%)
 rename api/{tests/unit_tests/core/ops => providers/trace/trace-tencent/tests/unit_tests}/tencent_trace/test_tencent_trace.py (89%)
 rename api/{tests/unit_tests/core/ops => providers/trace/trace-tencent/tests/unit_tests}/tencent_trace/test_tencent_trace_utils.py (88%)
 create mode 100644 api/providers/trace/trace-weave/pyproject.toml
 create mode 100644 api/providers/trace/trace-weave/src/dify_trace_weave/__init__.py
 create mode 100644 api/providers/trace/trace-weave/src/dify_trace_weave/config.py
 create mode 100644 api/providers/trace/trace-weave/src/dify_trace_weave/entities/__init__.py
 rename api/{core/ops/weave_trace => providers/trace/trace-weave/src/dify_trace_weave}/entities/weave_trace_entity.py (100%)
 create mode 100644 api/providers/trace/trace-weave/src/dify_trace_weave/py.typed
 rename api/{core/ops/weave_trace => providers/trace/trace-weave/src/dify_trace_weave}/weave_trace.py (99%)
 create mode 100644 api/providers/trace/trace-weave/tests/unit_tests/test_config_entity.py
 rename api/{tests/unit_tests/core/ops => providers/trace/trace-weave/tests/unit_tests}/weave_trace/test_weave_trace.py (97%)

diff --git a/api/core/ops/entities/config_entity.py b/api/core/ops/entities/config_entity.py
index fda00ac3b9..d78ce90aa1 100644
--- a/api/core/ops/entities/config_entity.py
+++ b/api/core/ops/entities/config_entity.py
@@ -1,8 +1,8 @@
 from enum import StrEnum
 
-from pydantic import BaseModel, ValidationInfo, field_validator
+from pydantic import BaseModel
 
-from core.ops.utils import validate_integer_id, validate_project_name, validate_url, validate_url_with_path
+from core.ops.utils import validate_project_name, validate_url
 
 
 class TracingProviderEnum(StrEnum):
@@ -52,220 +52,5 @@ class BaseTracingConfig(BaseModel):
         return validate_project_name(v, default_name)
 
 
-class ArizeConfig(BaseTracingConfig):
-    """
-    Model class for Arize tracing config.
-    """
-
-    api_key: str | None = None
-    space_id: str | None = None
-    project: str | None = None
-    endpoint: str = "https://otlp.arize.com"
-
-    @field_validator("project")
-    @classmethod
-    def project_validator(cls, v, info: ValidationInfo):
-        return cls.validate_project_field(v, "default")
-
-    @field_validator("endpoint")
-    @classmethod
-    def endpoint_validator(cls, v, info: ValidationInfo):
-        return cls.validate_endpoint_url(v, "https://otlp.arize.com")
-
-
-class PhoenixConfig(BaseTracingConfig):
-    """
-    Model class for Phoenix tracing config.
-    """
-
-    api_key: str | None = None
-    project: str | None = None
-    endpoint: str = "https://app.phoenix.arize.com"
-
-    @field_validator("project")
-    @classmethod
-    def project_validator(cls, v, info: ValidationInfo):
-        return cls.validate_project_field(v, "default")
-
-    @field_validator("endpoint")
-    @classmethod
-    def endpoint_validator(cls, v, info: ValidationInfo):
-        return validate_url_with_path(v, "https://app.phoenix.arize.com")
-
-
-class LangfuseConfig(BaseTracingConfig):
-    """
-    Model class for Langfuse tracing config.
-    """
-
-    public_key: str
-    secret_key: str
-    host: str = "https://api.langfuse.com"
-
-    @field_validator("host")
-    @classmethod
-    def host_validator(cls, v, info: ValidationInfo):
-        return validate_url_with_path(v, "https://api.langfuse.com")
-
-
-class LangSmithConfig(BaseTracingConfig):
-    """
-    Model class for Langsmith tracing config.
-    """
-
-    api_key: str
-    project: str
-    endpoint: str = "https://api.smith.langchain.com"
-
-    @field_validator("endpoint")
-    @classmethod
-    def endpoint_validator(cls, v, info: ValidationInfo):
-        # LangSmith only allows HTTPS
-        return validate_url(v, "https://api.smith.langchain.com", allowed_schemes=("https",))
-
-
-class OpikConfig(BaseTracingConfig):
-    """
-    Model class for Opik tracing config.
-    """
-
-    api_key: str | None = None
-    project: str | None = None
-    workspace: str | None = None
-    url: str = "https://www.comet.com/opik/api/"
-
-    @field_validator("project")
-    @classmethod
-    def project_validator(cls, v, info: ValidationInfo):
-        return cls.validate_project_field(v, "Default Project")
-
-    @field_validator("url")
-    @classmethod
-    def url_validator(cls, v, info: ValidationInfo):
-        return validate_url_with_path(v, "https://www.comet.com/opik/api/", required_suffix="/api/")
-
-
-class WeaveConfig(BaseTracingConfig):
-    """
-    Model class for Weave tracing config.
-    """
-
-    api_key: str
-    entity: str | None = None
-    project: str
-    endpoint: str = "https://trace.wandb.ai"
-    host: str | None = None
-
-    @field_validator("endpoint")
-    @classmethod
-    def endpoint_validator(cls, v, info: ValidationInfo):
-        # Weave only allows HTTPS for endpoint
-        return validate_url(v, "https://trace.wandb.ai", allowed_schemes=("https",))
-
-    @field_validator("host")
-    @classmethod
-    def host_validator(cls, v, info: ValidationInfo):
-        if v is not None and v.strip() != "":
-            return validate_url(v, v, allowed_schemes=("https", "http"))
-        return v
-
-
-class AliyunConfig(BaseTracingConfig):
-    """
-    Model class for Aliyun tracing config.
-    """
-
-    app_name: str = "dify_app"
-    license_key: str
-    endpoint: str
-
-    @field_validator("app_name")
-    @classmethod
-    def app_name_validator(cls, v, info: ValidationInfo):
-        return cls.validate_project_field(v, "dify_app")
-
-    @field_validator("license_key")
-    @classmethod
-    def license_key_validator(cls, v, info: ValidationInfo):
-        if not v or v.strip() == "":
-            raise ValueError("License key cannot be empty")
-        return v
-
-    @field_validator("endpoint")
-    @classmethod
-    def endpoint_validator(cls, v, info: ValidationInfo):
-        # aliyun uses two URL formats, which may include a URL path
-        return validate_url_with_path(v, "https://tracing-analysis-dc-hz.aliyuncs.com")
-
-
-class TencentConfig(BaseTracingConfig):
-    """
-    Tencent APM tracing config
-    """
-
-    token: str
-    endpoint: str
-    service_name: str
-
-    @field_validator("token")
-    @classmethod
-    def token_validator(cls, v, info: ValidationInfo):
-        if not v or v.strip() == "":
-            raise ValueError("Token cannot be empty")
-        return v
-
-    @field_validator("endpoint")
-    @classmethod
-    def endpoint_validator(cls, v, info: ValidationInfo):
-        return cls.validate_endpoint_url(v, "https://apm.tencentcloudapi.com")
-
-    @field_validator("service_name")
-    @classmethod
-    def service_name_validator(cls, v, info: ValidationInfo):
-        return cls.validate_project_field(v, "dify_app")
-
-
-class MLflowConfig(BaseTracingConfig):
-    """
-    Model class for MLflow tracing config.
-    """
-
-    tracking_uri: str = "http://localhost:5000"
-    experiment_id: str = "0"  # Default experiment id in MLflow is 0
-    username: str | None = None
-    password: str | None = None
-
-    @field_validator("tracking_uri")
-    @classmethod
-    def tracking_uri_validator(cls, v, info: ValidationInfo):
-        if isinstance(v, str) and v.startswith("databricks"):
-            raise ValueError(
-                "Please use Databricks tracing config below to record traces to Databricks-managed MLflow instances."
-            )
-        return validate_url_with_path(v, "http://localhost:5000")
-
-    @field_validator("experiment_id")
-    @classmethod
-    def experiment_id_validator(cls, v, info: ValidationInfo):
-        return validate_integer_id(v)
-
-
-class DatabricksConfig(BaseTracingConfig):
-    """
-    Model class for Databricks (Databricks-managed MLflow) tracing config.
-    """
-
-    experiment_id: str
-    host: str
-    client_id: str | None = None
-    client_secret: str | None = None
-    personal_access_token: str | None = None
-
-    @field_validator("experiment_id")
-    @classmethod
-    def experiment_id_validator(cls, v, info: ValidationInfo):
-        return validate_integer_id(v)
-
-
 OPS_FILE_PATH = "ops_trace/"
 OPS_TRACE_FAILED_KEY = "FAILED_OPS_TRACE"
diff --git a/api/core/ops/ops_trace_manager.py b/api/core/ops/ops_trace_manager.py
index cd63951537..e7ba6e502b 100644
--- a/api/core/ops/ops_trace_manager.py
+++ b/api/core/ops/ops_trace_manager.py
@@ -204,114 +204,117 @@ class TracingProviderConfigEntry(TypedDict):
 
 class OpsTraceProviderConfigMap(collections.UserDict[str, TracingProviderConfigEntry]):
     def __getitem__(self, provider: str) -> TracingProviderConfigEntry:
-        match provider:
-            case TracingProviderEnum.LANGFUSE:
-                from core.ops.entities.config_entity import LangfuseConfig
-                from core.ops.langfuse_trace.langfuse_trace import LangFuseDataTrace
+        try:
+            match provider:
+                case TracingProviderEnum.LANGFUSE:
+                    from dify_trace_langfuse.config import LangfuseConfig
+                    from dify_trace_langfuse.langfuse_trace import LangFuseDataTrace
 
-                return {
-                    "config_class": LangfuseConfig,
-                    "secret_keys": ["public_key", "secret_key"],
-                    "other_keys": ["host", "project_key"],
-                    "trace_instance": LangFuseDataTrace,
-                }
+                    return {
+                        "config_class": LangfuseConfig,
+                        "secret_keys": ["public_key", "secret_key"],
+                        "other_keys": ["host", "project_key"],
+                        "trace_instance": LangFuseDataTrace,
+                    }
 
-            case TracingProviderEnum.LANGSMITH:
-                from core.ops.entities.config_entity import LangSmithConfig
-                from core.ops.langsmith_trace.langsmith_trace import LangSmithDataTrace
+                case TracingProviderEnum.LANGSMITH:
+                    from dify_trace_langsmith.config import LangSmithConfig
+                    from dify_trace_langsmith.langsmith_trace import LangSmithDataTrace
 
-                return {
-                    "config_class": LangSmithConfig,
-                    "secret_keys": ["api_key"],
-                    "other_keys": ["project", "endpoint"],
-                    "trace_instance": LangSmithDataTrace,
-                }
+                    return {
+                        "config_class": LangSmithConfig,
+                        "secret_keys": ["api_key"],
+                        "other_keys": ["project", "endpoint"],
+                        "trace_instance": LangSmithDataTrace,
+                    }
 
-            case TracingProviderEnum.OPIK:
-                from core.ops.entities.config_entity import OpikConfig
-                from core.ops.opik_trace.opik_trace import OpikDataTrace
+                case TracingProviderEnum.OPIK:
+                    from dify_trace_opik.config import OpikConfig
+                    from dify_trace_opik.opik_trace import OpikDataTrace
 
-                return {
-                    "config_class": OpikConfig,
-                    "secret_keys": ["api_key"],
-                    "other_keys": ["project", "url", "workspace"],
-                    "trace_instance": OpikDataTrace,
-                }
+                    return {
+                        "config_class": OpikConfig,
+                        "secret_keys": ["api_key"],
+                        "other_keys": ["project", "url", "workspace"],
+                        "trace_instance": OpikDataTrace,
+                    }
 
-            case TracingProviderEnum.WEAVE:
-                from core.ops.entities.config_entity import WeaveConfig
-                from core.ops.weave_trace.weave_trace import WeaveDataTrace
+                case TracingProviderEnum.WEAVE:
+                    from dify_trace_weave.config import WeaveConfig
+                    from dify_trace_weave.weave_trace import WeaveDataTrace
 
-                return {
-                    "config_class": WeaveConfig,
-                    "secret_keys": ["api_key"],
-                    "other_keys": ["project", "entity", "endpoint", "host"],
-                    "trace_instance": WeaveDataTrace,
-                }
-            case TracingProviderEnum.ARIZE:
-                from core.ops.arize_phoenix_trace.arize_phoenix_trace import ArizePhoenixDataTrace
-                from core.ops.entities.config_entity import ArizeConfig
+                    return {
+                        "config_class": WeaveConfig,
+                        "secret_keys": ["api_key"],
+                        "other_keys": ["project", "entity", "endpoint", "host"],
+                        "trace_instance": WeaveDataTrace,
+                    }
+                case TracingProviderEnum.ARIZE:
+                    from dify_trace_arize_phoenix.arize_phoenix_trace import ArizePhoenixDataTrace
+                    from dify_trace_arize_phoenix.config import ArizeConfig
 
-                return {
-                    "config_class": ArizeConfig,
-                    "secret_keys": ["api_key", "space_id"],
-                    "other_keys": ["project", "endpoint"],
-                    "trace_instance": ArizePhoenixDataTrace,
-                }
-            case TracingProviderEnum.PHOENIX:
-                from core.ops.arize_phoenix_trace.arize_phoenix_trace import ArizePhoenixDataTrace
-                from core.ops.entities.config_entity import PhoenixConfig
+                    return {
+                        "config_class": ArizeConfig,
+                        "secret_keys": ["api_key", "space_id"],
+                        "other_keys": ["project", "endpoint"],
+                        "trace_instance": ArizePhoenixDataTrace,
+                    }
+                case TracingProviderEnum.PHOENIX:
+                    from dify_trace_arize_phoenix.arize_phoenix_trace import ArizePhoenixDataTrace
+                    from dify_trace_arize_phoenix.config import PhoenixConfig
 
-                return {
-                    "config_class": PhoenixConfig,
-                    "secret_keys": ["api_key"],
-                    "other_keys": ["project", "endpoint"],
-                    "trace_instance": ArizePhoenixDataTrace,
-                }
-            case TracingProviderEnum.ALIYUN:
-                from core.ops.aliyun_trace.aliyun_trace import AliyunDataTrace
-                from core.ops.entities.config_entity import AliyunConfig
+                    return {
+                        "config_class": PhoenixConfig,
+                        "secret_keys": ["api_key"],
+                        "other_keys": ["project", "endpoint"],
+                        "trace_instance": ArizePhoenixDataTrace,
+                    }
+                case TracingProviderEnum.ALIYUN:
+                    from dify_trace_aliyun.aliyun_trace import AliyunDataTrace
+                    from dify_trace_aliyun.config import AliyunConfig
 
-                return {
-                    "config_class": AliyunConfig,
-                    "secret_keys": ["license_key"],
-                    "other_keys": ["endpoint", "app_name"],
-                    "trace_instance": AliyunDataTrace,
-                }
-            case TracingProviderEnum.MLFLOW:
-                from core.ops.entities.config_entity import MLflowConfig
-                from core.ops.mlflow_trace.mlflow_trace import MLflowDataTrace
+                    return {
+                        "config_class": AliyunConfig,
+                        "secret_keys": ["license_key"],
+                        "other_keys": ["endpoint", "app_name"],
+                        "trace_instance": AliyunDataTrace,
+                    }
+                case TracingProviderEnum.MLFLOW:
+                    from dify_trace_mlflow.config import MLflowConfig
+                    from dify_trace_mlflow.mlflow_trace import MLflowDataTrace
 
-                return {
-                    "config_class": MLflowConfig,
-                    "secret_keys": ["password"],
-                    "other_keys": ["tracking_uri", "experiment_id", "username"],
-                    "trace_instance": MLflowDataTrace,
-                }
-            case TracingProviderEnum.DATABRICKS:
-                from core.ops.entities.config_entity import DatabricksConfig
-                from core.ops.mlflow_trace.mlflow_trace import MLflowDataTrace
+                    return {
+                        "config_class": MLflowConfig,
+                        "secret_keys": ["password"],
+                        "other_keys": ["tracking_uri", "experiment_id", "username"],
+                        "trace_instance": MLflowDataTrace,
+                    }
+                case TracingProviderEnum.DATABRICKS:
+                    from dify_trace_mlflow.config import DatabricksConfig
+                    from dify_trace_mlflow.mlflow_trace import MLflowDataTrace
 
-                return {
-                    "config_class": DatabricksConfig,
-                    "secret_keys": ["personal_access_token", "client_secret"],
-                    "other_keys": ["host", "client_id", "experiment_id"],
-                    "trace_instance": MLflowDataTrace,
-                }
+                    return {
+                        "config_class": DatabricksConfig,
+                        "secret_keys": ["personal_access_token", "client_secret"],
+                        "other_keys": ["host", "client_id", "experiment_id"],
+                        "trace_instance": MLflowDataTrace,
+                    }
 
-            case TracingProviderEnum.TENCENT:
-                from core.ops.entities.config_entity import TencentConfig
-                from core.ops.tencent_trace.tencent_trace import TencentDataTrace
+                case TracingProviderEnum.TENCENT:
+                    from dify_trace_tencent.config import TencentConfig
+                    from dify_trace_tencent.tencent_trace import TencentDataTrace
 
-                return {
-                    "config_class": TencentConfig,
-                    "secret_keys": ["token"],
-                    "other_keys": ["endpoint", "service_name"],
-                    "trace_instance": TencentDataTrace,
-                }
+                    return {
+                        "config_class": TencentConfig,
+                        "secret_keys": ["token"],
+                        "other_keys": ["endpoint", "service_name"],
+                        "trace_instance": TencentDataTrace,
+                    }
 
-            case _:
-                raise KeyError(f"Unsupported tracing provider: {provider}")
+                case _:
+                    raise KeyError(f"Unsupported tracing provider: {provider}")
+        except ImportError:
+            raise ImportError(f"Provider {provider} is not installed.")
 
 
 provider_config_map = OpsTraceProviderConfigMap()
diff --git a/api/providers/README.md b/api/providers/README.md
index a00ec8bc52..5d5e6db9af 100644
--- a/api/providers/README.md
+++ b/api/providers/README.md
@@ -10,3 +10,6 @@ This directory holds **optional workspace packages** that plug into Dify’s API
 
 Provider tests often live next to the package, e.g. `providers/<type>/<backend>/tests/unit_tests/`. Shared fixtures may live under `providers/` (e.g. `conftest.py`).
 
+## Excluding Providers
+
+In order to build with selected providers, use `--no-group vdb-all` and `--no-group trace-all` to disable default ones, then use `--group vdb-<provider>` and `--group trace-<provider>` to enable specific providers.
diff --git a/api/providers/trace/README.md b/api/providers/trace/README.md
new file mode 100644
index 0000000000..a7ffa5ed26
--- /dev/null
+++ b/api/providers/trace/README.md
@@ -0,0 +1,78 @@
+# Trace providers
+
+This directory holds **optional workspace packages** that send Dify **ops tracing** data (workflows, messages, tools, moderation, etc.) to an external observability backend (Langfuse, LangSmith, OpenTelemetry-style exporters, and others).
+
+Unlike VDB providers, trace plugins are **not** discovered via entry points. The API core imports your package **explicitly** from `core/ops/ops_trace_manager.py` after you register the provider id and mapping.
+
+## Architecture
+
+| Layer | Location | Role |
+|--------|----------|------|
+| Contracts | `api/core/ops/base_trace_instance.py`, `api/core/ops/entities/trace_entity.py`, `api/core/ops/entities/config_entity.py` | `BaseTraceInstance`, `BaseTracingConfig`, and typed `*TraceInfo` payloads |
+| Registry | `api/core/ops/ops_trace_manager.py` | `TracingProviderEnum`, `OpsTraceProviderConfigMap` — maps provider **string** → config class, encrypted keys, and trace class |
+| Your package | `api/providers/trace/trace-<name>/` | Pydantic config + subclass of `BaseTraceInstance` |
+
+At runtime, `OpsTraceManager` decrypts stored credentials, builds your config model, caches a trace instance, and calls `trace(trace_info)` with a concrete `BaseTraceInfo` subtype.
+
+## What you implement
+
+### 1. Config model (`BaseTracingConfig`)
+
+Subclass `BaseTracingConfig` from `core.ops.entities.config_entity`. Use Pydantic validators; reuse helpers from `core.ops.utils` (for example `validate_url`, `validate_url_with_path`, `validate_project_name`) where appropriate.
+
+Fields fall into two groups used by the manager:
+
+- **`secret_keys`** — names of fields that are **encrypted at rest** (API keys, tokens, passwords).
+- **`other_keys`** — non-secret connection settings (hosts, project names, endpoints).
+
+List these key names in your `OpsTraceProviderConfigMap` entry so encrypt/decrypt and merge logic stay correct.
+
+### 2. Trace instance (`BaseTraceInstance`)
+
+Subclass `BaseTraceInstance` and implement:
+
+```python
+def trace(self, trace_info: BaseTraceInfo) -> None:
+    ...
+```
+
+Dispatch on the concrete type with `isinstance` (see `trace_langfuse` or `trace_langsmith` for full patterns). Payload types are defined in `core/ops/entities/trace_entity.py`, including:
+
+- `WorkflowTraceInfo`, `WorkflowNodeTraceInfo`, `DraftNodeExecutionTrace`
+- `MessageTraceInfo`, `ToolTraceInfo`, `ModerationTraceInfo`, `SuggestedQuestionTraceInfo`
+- `DatasetRetrievalTraceInfo`, `GenerateNameTraceInfo`, `PromptGenerationTraceInfo`
+
+You may ignore categories your backend does not support; existing providers often no-op unhandled types.
+
+Optional: use `get_service_account_with_tenant(app_id)` from the base class when you need tenant-scoped account context.
+
+### 3. Register in the API core
+
+Upstream changes are required so Dify knows your provider exists:
+
+1. **`TracingProviderEnum`** (`api/core/ops/entities/config_entity.py`) — add a new member whose **value** is the stable string stored in app tracing config (e.g. `"mybackend"`).
+2. **`OpsTraceProviderConfigMap.__getitem__`** (`api/core/ops/ops_trace_manager.py`) — add a `match` case for that enum member returning:
+   - `config_class`: your Pydantic config type
+   - `secret_keys` / `other_keys`: lists of field names as above
+   - `trace_instance`: your `BaseTraceInstance` subclass  
+   Lazy-import your package inside the case so missing optional installs raise a clear `ImportError`.
+
+If the `match` case is missing, the provider string will not resolve and tracing will be disabled for that app.
+
+## Package layout
+
+Each provider is a normal uv workspace member, for example:
+
+- `api/providers/trace/trace-<name>/pyproject.toml` — project name `dify-trace-<name>`, dependencies on vendor SDKs
+- `api/providers/trace/trace-<name>/src/dify_trace_<name>/` — `config.py`, `<name>_trace.py`, optional `entities/`, and an empty **`py.typed`** file (PEP 561) so the API type checker treats the package as typed; list `py.typed` under `[tool.setuptools.package-data]` for that import name in `pyproject.toml`.
+
+Reference implementations: `trace-langfuse/`, `trace-langsmith/`, `trace-opik/`.
+
+## Wiring into the `api` workspace
+
+In `api/pyproject.toml`:
+
+1. **`[tool.uv.sources]`** — `dify-trace-<name> = { workspace = true }`
+2. **`[dependency-groups]`** — add `trace-<name> = ["dify-trace-<name>"]` and include `dify-trace-<name>` in `trace-all` if it should ship with the default bundle
+
+After changing metadata, run **`uv sync`** from `api/`.
diff --git a/api/providers/trace/trace-aliyun/pyproject.toml b/api/providers/trace/trace-aliyun/pyproject.toml
new file mode 100644
index 0000000000..bcef7e9fb1
--- /dev/null
+++ b/api/providers/trace/trace-aliyun/pyproject.toml
@@ -0,0 +1,14 @@
+[project]
+name = "dify-trace-aliyun"
+version = "0.0.1"
+dependencies = [
+    # versions inherited from parent
+    "opentelemetry-api",
+    "opentelemetry-exporter-otlp-proto-grpc",
+    "opentelemetry-sdk",
+    "opentelemetry-semantic-conventions",
+]
+description = "Dify ops tracing provider (Aliyun)."
+
+[tool.setuptools.packages.find]
+where = ["src"]
diff --git a/api/core/ops/aliyun_trace/__init__.py b/api/providers/trace/trace-aliyun/src/dify_trace_aliyun/__init__.py
similarity index 100%
rename from api/core/ops/aliyun_trace/__init__.py
rename to api/providers/trace/trace-aliyun/src/dify_trace_aliyun/__init__.py
diff --git a/api/core/ops/aliyun_trace/aliyun_trace.py b/api/providers/trace/trace-aliyun/src/dify_trace_aliyun/aliyun_trace.py
similarity index 98%
rename from api/core/ops/aliyun_trace/aliyun_trace.py
rename to api/providers/trace/trace-aliyun/src/dify_trace_aliyun/aliyun_trace.py
index 76e81242f4..54d2f8167f 100644
--- a/api/core/ops/aliyun_trace/aliyun_trace.py
+++ b/api/providers/trace/trace-aliyun/src/dify_trace_aliyun/aliyun_trace.py
@@ -4,7 +4,20 @@ from collections.abc import Sequence
 from opentelemetry.trace import SpanKind
 from sqlalchemy.orm import sessionmaker
 
-from core.ops.aliyun_trace.data_exporter.traceclient import (
+from core.ops.base_trace_instance import BaseTraceInstance
+from core.ops.entities.trace_entity import (
+    BaseTraceInfo,
+    DatasetRetrievalTraceInfo,
+    GenerateNameTraceInfo,
+    MessageTraceInfo,
+    ModerationTraceInfo,
+    SuggestedQuestionTraceInfo,
+    ToolTraceInfo,
+    WorkflowTraceInfo,
+)
+from core.repositories import DifyCoreRepositoryFactory
+from dify_trace_aliyun.config import AliyunConfig
+from dify_trace_aliyun.data_exporter.traceclient import (
     TraceClient,
     build_endpoint,
     convert_datetime_to_nanoseconds,
@@ -12,8 +25,8 @@ from core.ops.aliyun_trace.data_exporter.traceclient import (
     convert_to_trace_id,
     generate_span_id,
 )
-from core.ops.aliyun_trace.entities.aliyun_trace_entity import SpanData, TraceMetadata
-from core.ops.aliyun_trace.entities.semconv import (
+from dify_trace_aliyun.entities.aliyun_trace_entity import SpanData, TraceMetadata
+from dify_trace_aliyun.entities.semconv import (
     DIFY_APP_ID,
     GEN_AI_COMPLETION,
     GEN_AI_INPUT_MESSAGE,
@@ -32,7 +45,7 @@ from core.ops.aliyun_trace.entities.semconv import (
     TOOL_PARAMETERS,
     GenAISpanKind,
 )
-from core.ops.aliyun_trace.utils import (
+from dify_trace_aliyun.utils import (
     create_common_span_attributes,
     create_links_from_trace_id,
     create_status_from_error,
@@ -44,19 +57,6 @@ from core.ops.aliyun_trace.utils import (
     get_workflow_node_status,
     serialize_json_data,
 )
-from core.ops.base_trace_instance import BaseTraceInstance
-from core.ops.entities.config_entity import AliyunConfig
-from core.ops.entities.trace_entity import (
-    BaseTraceInfo,
-    DatasetRetrievalTraceInfo,
-    GenerateNameTraceInfo,
-    MessageTraceInfo,
-    ModerationTraceInfo,
-    SuggestedQuestionTraceInfo,
-    ToolTraceInfo,
-    WorkflowTraceInfo,
-)
-from core.repositories import DifyCoreRepositoryFactory
 from extensions.ext_database import db
 from graphon.entities import WorkflowNodeExecution
 from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionMetadataKey
diff --git a/api/providers/trace/trace-aliyun/src/dify_trace_aliyun/config.py b/api/providers/trace/trace-aliyun/src/dify_trace_aliyun/config.py
new file mode 100644
index 0000000000..e0133e6cc9
--- /dev/null
+++ b/api/providers/trace/trace-aliyun/src/dify_trace_aliyun/config.py
@@ -0,0 +1,32 @@
+from pydantic import ValidationInfo, field_validator
+
+from core.ops.entities.config_entity import BaseTracingConfig
+from core.ops.utils import validate_url_with_path
+
+
+class AliyunConfig(BaseTracingConfig):
+    """
+    Model class for Aliyun tracing config.
+    """
+
+    app_name: str = "dify_app"
+    license_key: str
+    endpoint: str
+
+    @field_validator("app_name")
+    @classmethod
+    def app_name_validator(cls, v, info: ValidationInfo):
+        return cls.validate_project_field(v, "dify_app")
+
+    @field_validator("license_key")
+    @classmethod
+    def license_key_validator(cls, v, info: ValidationInfo):
+        if not v or v.strip() == "":
+            raise ValueError("License key cannot be empty")
+        return v
+
+    @field_validator("endpoint")
+    @classmethod
+    def endpoint_validator(cls, v, info: ValidationInfo):
+        # aliyun uses two URL formats, which may include a URL path
+        return validate_url_with_path(v, "https://tracing-analysis-dc-hz.aliyuncs.com")
diff --git a/api/core/ops/aliyun_trace/data_exporter/__init__.py b/api/providers/trace/trace-aliyun/src/dify_trace_aliyun/data_exporter/__init__.py
similarity index 100%
rename from api/core/ops/aliyun_trace/data_exporter/__init__.py
rename to api/providers/trace/trace-aliyun/src/dify_trace_aliyun/data_exporter/__init__.py
diff --git a/api/core/ops/aliyun_trace/data_exporter/traceclient.py b/api/providers/trace/trace-aliyun/src/dify_trace_aliyun/data_exporter/traceclient.py
similarity index 98%
rename from api/core/ops/aliyun_trace/data_exporter/traceclient.py
rename to api/providers/trace/trace-aliyun/src/dify_trace_aliyun/data_exporter/traceclient.py
index 67d5163b0f..00aab6bf89 100644
--- a/api/core/ops/aliyun_trace/data_exporter/traceclient.py
+++ b/api/providers/trace/trace-aliyun/src/dify_trace_aliyun/data_exporter/traceclient.py
@@ -26,8 +26,8 @@ from opentelemetry.semconv.attributes import service_attributes
 from opentelemetry.trace import Link, SpanContext, TraceFlags
 
 from configs import dify_config
-from core.ops.aliyun_trace.entities.aliyun_trace_entity import SpanData
-from core.ops.aliyun_trace.entities.semconv import ACS_ARMS_SERVICE_FEATURE
+from dify_trace_aliyun.entities.aliyun_trace_entity import SpanData
+from dify_trace_aliyun.entities.semconv import ACS_ARMS_SERVICE_FEATURE
 
 INVALID_SPAN_ID: Final[int] = 0x0000000000000000
 INVALID_TRACE_ID: Final[int] = 0x00000000000000000000000000000000
diff --git a/api/core/ops/aliyun_trace/entities/__init__.py b/api/providers/trace/trace-aliyun/src/dify_trace_aliyun/entities/__init__.py
similarity index 100%
rename from api/core/ops/aliyun_trace/entities/__init__.py
rename to api/providers/trace/trace-aliyun/src/dify_trace_aliyun/entities/__init__.py
diff --git a/api/core/ops/aliyun_trace/entities/aliyun_trace_entity.py b/api/providers/trace/trace-aliyun/src/dify_trace_aliyun/entities/aliyun_trace_entity.py
similarity index 100%
rename from api/core/ops/aliyun_trace/entities/aliyun_trace_entity.py
rename to api/providers/trace/trace-aliyun/src/dify_trace_aliyun/entities/aliyun_trace_entity.py
diff --git a/api/core/ops/aliyun_trace/entities/semconv.py b/api/providers/trace/trace-aliyun/src/dify_trace_aliyun/entities/semconv.py
similarity index 100%
rename from api/core/ops/aliyun_trace/entities/semconv.py
rename to api/providers/trace/trace-aliyun/src/dify_trace_aliyun/entities/semconv.py
diff --git a/api/core/ops/arize_phoenix_trace/__init__.py b/api/providers/trace/trace-aliyun/src/dify_trace_aliyun/py.typed
similarity index 100%
rename from api/core/ops/arize_phoenix_trace/__init__.py
rename to api/providers/trace/trace-aliyun/src/dify_trace_aliyun/py.typed
diff --git a/api/core/ops/aliyun_trace/utils.py b/api/providers/trace/trace-aliyun/src/dify_trace_aliyun/utils.py
similarity index 97%
rename from api/core/ops/aliyun_trace/utils.py
rename to api/providers/trace/trace-aliyun/src/dify_trace_aliyun/utils.py
index 2e02a186cc..5678c66adb 100644
--- a/api/core/ops/aliyun_trace/utils.py
+++ b/api/providers/trace/trace-aliyun/src/dify_trace_aliyun/utils.py
@@ -4,7 +4,8 @@ from typing import Any, TypedDict
 
 from opentelemetry.trace import Link, Status, StatusCode
 
-from core.ops.aliyun_trace.entities.semconv import (
+from core.rag.models.document import Document
+from dify_trace_aliyun.entities.semconv import (
     GEN_AI_FRAMEWORK,
     GEN_AI_SESSION_ID,
     GEN_AI_SPAN_KIND,
@@ -13,7 +14,6 @@ from core.ops.aliyun_trace.entities.semconv import (
     OUTPUT_VALUE,
     GenAISpanKind,
 )
-from core.rag.models.document import Document
 from extensions.ext_database import db
 from graphon.entities import WorkflowNodeExecution
 from graphon.enums import WorkflowNodeExecutionStatus
@@ -48,7 +48,7 @@ def get_workflow_node_status(node_execution: WorkflowNodeExecution) -> Status:
 
 
 def create_links_from_trace_id(trace_id: str | None) -> list[Link]:
-    from core.ops.aliyun_trace.data_exporter.traceclient import create_link
+    from dify_trace_aliyun.data_exporter.traceclient import create_link
 
     links = []
     if trace_id:
diff --git a/api/tests/unit_tests/core/ops/aliyun_trace/data_exporter/test_traceclient.py b/api/providers/trace/trace-aliyun/tests/unit_tests/aliyun_trace/data_exporter/test_traceclient.py
similarity index 86%
rename from api/tests/unit_tests/core/ops/aliyun_trace/data_exporter/test_traceclient.py
rename to api/providers/trace/trace-aliyun/tests/unit_tests/aliyun_trace/data_exporter/test_traceclient.py
index acb43d4036..286dda419c 100644
--- a/api/tests/unit_tests/core/ops/aliyun_trace/data_exporter/test_traceclient.py
+++ b/api/providers/trace/trace-aliyun/tests/unit_tests/aliyun_trace/data_exporter/test_traceclient.py
@@ -5,10 +5,7 @@ from unittest.mock import MagicMock, patch
 
 import httpx
 import pytest
-from opentelemetry.sdk.trace import ReadableSpan
-from opentelemetry.trace import SpanKind, Status, StatusCode
-
-from core.ops.aliyun_trace.data_exporter.traceclient import (
+from dify_trace_aliyun.data_exporter.traceclient import (
     INVALID_SPAN_ID,
     SpanBuilder,
     TraceClient,
@@ -20,7 +17,9 @@ from core.ops.aliyun_trace.data_exporter.traceclient import (
     create_link,
     generate_span_id,
 )
-from core.ops.aliyun_trace.entities.aliyun_trace_entity import SpanData
+from dify_trace_aliyun.entities.aliyun_trace_entity import SpanData
+from opentelemetry.sdk.trace import ReadableSpan
+from opentelemetry.trace import SpanKind, Status, StatusCode
 
 
 @pytest.fixture
@@ -41,8 +40,8 @@ def trace_client_factory():
 
 
 class TestTraceClient:
-    @patch("core.ops.aliyun_trace.data_exporter.traceclient.OTLPSpanExporter")
-    @patch("core.ops.aliyun_trace.data_exporter.traceclient.socket.gethostname")
+    @patch("dify_trace_aliyun.data_exporter.traceclient.OTLPSpanExporter")
+    @patch("dify_trace_aliyun.data_exporter.traceclient.socket.gethostname")
     def test_init(self, mock_gethostname, mock_exporter_class, trace_client_factory):
         mock_gethostname.return_value = "test-host"
         client = trace_client_factory(service_name="test-service", endpoint="http://test-endpoint")
@@ -56,7 +55,7 @@ class TestTraceClient:
         client.shutdown()
         assert client.done is True
 
-    @patch("core.ops.aliyun_trace.data_exporter.traceclient.OTLPSpanExporter")
+    @patch("dify_trace_aliyun.data_exporter.traceclient.OTLPSpanExporter")
     def test_export(self, mock_exporter_class, trace_client_factory):
         mock_exporter = mock_exporter_class.return_value
         client = trace_client_factory(service_name="test-service", endpoint="http://test-endpoint")
@@ -64,8 +63,8 @@ class TestTraceClient:
         client.export(spans)
         mock_exporter.export.assert_called_once_with(spans)
 
-    @patch("core.ops.aliyun_trace.data_exporter.traceclient.httpx.head")
-    @patch("core.ops.aliyun_trace.data_exporter.traceclient.OTLPSpanExporter")
+    @patch("dify_trace_aliyun.data_exporter.traceclient.httpx.head")
+    @patch("dify_trace_aliyun.data_exporter.traceclient.OTLPSpanExporter")
     def test_api_check_success(self, mock_exporter_class, mock_head, trace_client_factory):
         mock_response = MagicMock()
         mock_response.status_code = 405
@@ -74,8 +73,8 @@ class TestTraceClient:
         client = trace_client_factory(service_name="test-service", endpoint="http://test-endpoint")
         assert client.api_check() is True
 
-    @patch("core.ops.aliyun_trace.data_exporter.traceclient.httpx.head")
-    @patch("core.ops.aliyun_trace.data_exporter.traceclient.OTLPSpanExporter")
+    @patch("dify_trace_aliyun.data_exporter.traceclient.httpx.head")
+    @patch("dify_trace_aliyun.data_exporter.traceclient.OTLPSpanExporter")
     def test_api_check_failure_status(self, mock_exporter_class, mock_head, trace_client_factory):
         mock_response = MagicMock()
         mock_response.status_code = 500
@@ -84,8 +83,8 @@ class TestTraceClient:
         client = trace_client_factory(service_name="test-service", endpoint="http://test-endpoint")
         assert client.api_check() is False
 
-    @patch("core.ops.aliyun_trace.data_exporter.traceclient.httpx.head")
-    @patch("core.ops.aliyun_trace.data_exporter.traceclient.OTLPSpanExporter")
+    @patch("dify_trace_aliyun.data_exporter.traceclient.httpx.head")
+    @patch("dify_trace_aliyun.data_exporter.traceclient.OTLPSpanExporter")
     def test_api_check_exception(self, mock_exporter_class, mock_head, trace_client_factory):
         mock_head.side_effect = httpx.RequestError("Connection error")
 
@@ -93,12 +92,12 @@ class TestTraceClient:
         with pytest.raises(ValueError, match="AliyunTrace API check failed: Connection error"):
             client.api_check()
 
-    @patch("core.ops.aliyun_trace.data_exporter.traceclient.OTLPSpanExporter")
+    @patch("dify_trace_aliyun.data_exporter.traceclient.OTLPSpanExporter")
     def test_get_project_url(self, mock_exporter_class, trace_client_factory):
         client = trace_client_factory(service_name="test-service", endpoint="http://test-endpoint")
         assert client.get_project_url() == "https://arms.console.aliyun.com/#/llm"
 
-    @patch("core.ops.aliyun_trace.data_exporter.traceclient.OTLPSpanExporter")
+    @patch("dify_trace_aliyun.data_exporter.traceclient.OTLPSpanExporter")
     def test_add_span(self, mock_exporter_class, trace_client_factory):
         client = trace_client_factory(
             service_name="test-service",
@@ -134,8 +133,8 @@ class TestTraceClient:
             assert len(client.queue) == 2
             mock_notify.assert_called_once()
 
-    @patch("core.ops.aliyun_trace.data_exporter.traceclient.OTLPSpanExporter")
-    @patch("core.ops.aliyun_trace.data_exporter.traceclient.logger")
+    @patch("dify_trace_aliyun.data_exporter.traceclient.OTLPSpanExporter")
+    @patch("dify_trace_aliyun.data_exporter.traceclient.logger")
     def test_add_span_queue_full(self, mock_logger, mock_exporter_class, trace_client_factory):
         client = trace_client_factory(service_name="test-service", endpoint="http://test-endpoint", max_queue_size=1)
 
@@ -159,7 +158,7 @@ class TestTraceClient:
         assert len(client.queue) == 1
         mock_logger.warning.assert_called_with("Queue is full, likely spans will be dropped.")
 
-    @patch("core.ops.aliyun_trace.data_exporter.traceclient.OTLPSpanExporter")
+    @patch("dify_trace_aliyun.data_exporter.traceclient.OTLPSpanExporter")
     def test_export_batch_error(self, mock_exporter_class, trace_client_factory):
         mock_exporter = mock_exporter_class.return_value
         mock_exporter.export.side_effect = Exception("Export failed")
@@ -168,11 +167,11 @@ class TestTraceClient:
         mock_span = MagicMock(spec=ReadableSpan)
         client.queue.append(mock_span)
 
-        with patch("core.ops.aliyun_trace.data_exporter.traceclient.logger") as mock_logger:
+        with patch("dify_trace_aliyun.data_exporter.traceclient.logger") as mock_logger:
             client._export_batch()
             mock_logger.warning.assert_called()
 
-    @patch("core.ops.aliyun_trace.data_exporter.traceclient.OTLPSpanExporter")
+    @patch("dify_trace_aliyun.data_exporter.traceclient.OTLPSpanExporter")
     def test_worker_loop(self, mock_exporter_class, trace_client_factory):
         # We need to test the wait timeout in _worker
         # But _worker runs in a thread. Let's mock condition.wait.
@@ -189,7 +188,7 @@ class TestTraceClient:
             # mock_wait might have been called
             assert mock_wait.called or client.done
 
-    @patch("core.ops.aliyun_trace.data_exporter.traceclient.OTLPSpanExporter")
+    @patch("dify_trace_aliyun.data_exporter.traceclient.OTLPSpanExporter")
     def test_shutdown_flushes(self, mock_exporter_class, trace_client_factory):
         mock_exporter = mock_exporter_class.return_value
         client = trace_client_factory(service_name="test-service", endpoint="http://test-endpoint")
@@ -268,7 +267,7 @@ def test_generate_span_id():
     assert span_id != INVALID_SPAN_ID
 
     # Test retry loop
-    with patch("core.ops.aliyun_trace.data_exporter.traceclient.random.getrandbits") as mock_rand:
+    with patch("dify_trace_aliyun.data_exporter.traceclient.random.getrandbits") as mock_rand:
         mock_rand.side_effect = [INVALID_SPAN_ID, 999]
         span_id = generate_span_id()
         assert span_id == 999
@@ -290,7 +289,7 @@ def test_convert_to_trace_id():
 def test_convert_string_to_id():
     assert convert_string_to_id("test") > 0
     # Test with None string
-    with patch("core.ops.aliyun_trace.data_exporter.traceclient.generate_span_id") as mock_gen:
+    with patch("dify_trace_aliyun.data_exporter.traceclient.generate_span_id") as mock_gen:
         mock_gen.return_value = 12345
         assert convert_string_to_id(None) == 12345
 
diff --git a/api/tests/unit_tests/core/ops/aliyun_trace/entities/test_aliyun_trace_entity.py b/api/providers/trace/trace-aliyun/tests/unit_tests/aliyun_trace/entities/test_aliyun_trace_entity.py
similarity index 97%
rename from api/tests/unit_tests/core/ops/aliyun_trace/entities/test_aliyun_trace_entity.py
rename to api/providers/trace/trace-aliyun/tests/unit_tests/aliyun_trace/entities/test_aliyun_trace_entity.py
index 2fcb927e0c..38d33dd21b 100644
--- a/api/tests/unit_tests/core/ops/aliyun_trace/entities/test_aliyun_trace_entity.py
+++ b/api/providers/trace/trace-aliyun/tests/unit_tests/aliyun_trace/entities/test_aliyun_trace_entity.py
@@ -1,11 +1,10 @@
 import pytest
+from dify_trace_aliyun.entities.aliyun_trace_entity import SpanData, TraceMetadata
 from opentelemetry import trace as trace_api
 from opentelemetry.sdk.trace import Event
 from opentelemetry.trace import SpanKind, Status, StatusCode
 from pydantic import ValidationError
 
-from core.ops.aliyun_trace.entities.aliyun_trace_entity import SpanData, TraceMetadata
-
 
 class TestTraceMetadata:
     def test_trace_metadata_init(self):
diff --git a/api/tests/unit_tests/core/ops/aliyun_trace/entities/test_semconv.py b/api/providers/trace/trace-aliyun/tests/unit_tests/aliyun_trace/entities/test_semconv.py
similarity index 97%
rename from api/tests/unit_tests/core/ops/aliyun_trace/entities/test_semconv.py
rename to api/providers/trace/trace-aliyun/tests/unit_tests/aliyun_trace/entities/test_semconv.py
index 3961555b9a..9cab40748f 100644
--- a/api/tests/unit_tests/core/ops/aliyun_trace/entities/test_semconv.py
+++ b/api/providers/trace/trace-aliyun/tests/unit_tests/aliyun_trace/entities/test_semconv.py
@@ -1,4 +1,4 @@
-from core.ops.aliyun_trace.entities.semconv import (
+from dify_trace_aliyun.entities.semconv import (
     ACS_ARMS_SERVICE_FEATURE,
     GEN_AI_COMPLETION,
     GEN_AI_FRAMEWORK,
diff --git a/api/tests/unit_tests/core/ops/aliyun_trace/test_aliyun_trace.py b/api/providers/trace/trace-aliyun/tests/unit_tests/aliyun_trace/test_aliyun_trace.py
similarity index 99%
rename from api/tests/unit_tests/core/ops/aliyun_trace/test_aliyun_trace.py
rename to api/providers/trace/trace-aliyun/tests/unit_tests/aliyun_trace/test_aliyun_trace.py
index c2324fdec4..c1b11c9186 100644
--- a/api/tests/unit_tests/core/ops/aliyun_trace/test_aliyun_trace.py
+++ b/api/providers/trace/trace-aliyun/tests/unit_tests/aliyun_trace/test_aliyun_trace.py
@@ -4,12 +4,11 @@ from datetime import UTC, datetime
 from types import SimpleNamespace
 from unittest.mock import MagicMock
 
+import dify_trace_aliyun.aliyun_trace as aliyun_trace_module
 import pytest
-from opentelemetry.trace import Link, SpanContext, SpanKind, Status, StatusCode, TraceFlags
-
-import core.ops.aliyun_trace.aliyun_trace as aliyun_trace_module
-from core.ops.aliyun_trace.aliyun_trace import AliyunDataTrace
-from core.ops.aliyun_trace.entities.semconv import (
+from dify_trace_aliyun.aliyun_trace import AliyunDataTrace
+from dify_trace_aliyun.config import AliyunConfig
+from dify_trace_aliyun.entities.semconv import (
     GEN_AI_COMPLETION,
     GEN_AI_INPUT_MESSAGE,
     GEN_AI_OUTPUT_MESSAGE,
@@ -24,7 +23,8 @@ from core.ops.aliyun_trace.entities.semconv import (
     TOOL_PARAMETERS,
     GenAISpanKind,
 )
-from core.ops.entities.config_entity import AliyunConfig
+from opentelemetry.trace import Link, SpanContext, SpanKind, Status, StatusCode, TraceFlags
+
 from core.ops.entities.trace_entity import (
     DatasetRetrievalTraceInfo,
     GenerateNameTraceInfo,
diff --git a/api/tests/unit_tests/core/ops/aliyun_trace/test_aliyun_trace_utils.py b/api/providers/trace/trace-aliyun/tests/unit_tests/aliyun_trace/test_aliyun_trace_utils.py
similarity index 95%
rename from api/tests/unit_tests/core/ops/aliyun_trace/test_aliyun_trace_utils.py
rename to api/providers/trace/trace-aliyun/tests/unit_tests/aliyun_trace/test_aliyun_trace_utils.py
index e4d8f2d5ea..a9e7b80c2a 100644
--- a/api/tests/unit_tests/core/ops/aliyun_trace/test_aliyun_trace_utils.py
+++ b/api/providers/trace/trace-aliyun/tests/unit_tests/aliyun_trace/test_aliyun_trace_utils.py
@@ -1,9 +1,7 @@
 import json
 from unittest.mock import MagicMock
 
-from opentelemetry.trace import Link, StatusCode
-
-from core.ops.aliyun_trace.entities.semconv import (
+from dify_trace_aliyun.entities.semconv import (
     GEN_AI_FRAMEWORK,
     GEN_AI_SESSION_ID,
     GEN_AI_SPAN_KIND,
@@ -11,7 +9,7 @@ from core.ops.aliyun_trace.entities.semconv import (
     INPUT_VALUE,
     OUTPUT_VALUE,
 )
-from core.ops.aliyun_trace.utils import (
+from dify_trace_aliyun.utils import (
     create_common_span_attributes,
     create_links_from_trace_id,
     create_status_from_error,
@@ -23,6 +21,8 @@ from core.ops.aliyun_trace.utils import (
     get_workflow_node_status,
     serialize_json_data,
 )
+from opentelemetry.trace import Link, StatusCode
+
 from core.rag.models.document import Document
 from graphon.entities import WorkflowNodeExecution
 from graphon.enums import WorkflowNodeExecutionStatus
@@ -48,7 +48,7 @@ def test_get_user_id_from_message_data_with_end_user(monkeypatch):
     mock_session = MagicMock()
     mock_session.get.return_value = end_user_data
 
-    from core.ops.aliyun_trace.utils import db
+    from dify_trace_aliyun.utils import db
 
     monkeypatch.setattr(db, "session", mock_session)
 
@@ -63,7 +63,7 @@ def test_get_user_id_from_message_data_end_user_not_found(monkeypatch):
     mock_session = MagicMock()
     mock_session.get.return_value = None
 
-    from core.ops.aliyun_trace.utils import db
+    from dify_trace_aliyun.utils import db
 
     monkeypatch.setattr(db, "session", mock_session)
 
@@ -112,9 +112,9 @@ def test_get_workflow_node_status():
 def test_create_links_from_trace_id(monkeypatch):
     # Mock create_link
     mock_link = MagicMock(spec=Link)
-    import core.ops.aliyun_trace.data_exporter.traceclient
+    import dify_trace_aliyun.data_exporter.traceclient
 
-    monkeypatch.setattr(core.ops.aliyun_trace.data_exporter.traceclient, "create_link", lambda trace_id_str: mock_link)
+    monkeypatch.setattr(dify_trace_aliyun.data_exporter.traceclient, "create_link", lambda trace_id_str: mock_link)
 
     # Trace ID None
     assert create_links_from_trace_id(None) == []
diff --git a/api/providers/trace/trace-aliyun/tests/unit_tests/test_config_entity.py b/api/providers/trace/trace-aliyun/tests/unit_tests/test_config_entity.py
new file mode 100644
index 0000000000..1b24ee7421
--- /dev/null
+++ b/api/providers/trace/trace-aliyun/tests/unit_tests/test_config_entity.py
@@ -0,0 +1,85 @@
+import pytest
+from dify_trace_aliyun.config import AliyunConfig
+from pydantic import ValidationError
+
+
+class TestAliyunConfig:
+    """Test cases for AliyunConfig"""
+
+    def test_valid_config(self):
+        """Test valid Aliyun configuration"""
+        config = AliyunConfig(
+            app_name="test_app",
+            license_key="test_license_key",
+            endpoint="https://custom.tracing-analysis-dc-hz.aliyuncs.com",
+        )
+        assert config.app_name == "test_app"
+        assert config.license_key == "test_license_key"
+        assert config.endpoint == "https://custom.tracing-analysis-dc-hz.aliyuncs.com"
+
+    def test_default_values(self):
+        """Test default values are set correctly"""
+        config = AliyunConfig(license_key="test_license", endpoint="https://tracing-analysis-dc-hz.aliyuncs.com")
+        assert config.app_name == "dify_app"
+
+    def test_missing_required_fields(self):
+        """Test that required fields are enforced"""
+        with pytest.raises(ValidationError):
+            AliyunConfig()
+
+        with pytest.raises(ValidationError):
+            AliyunConfig(license_key="test_license")
+
+        with pytest.raises(ValidationError):
+            AliyunConfig(endpoint="https://tracing-analysis-dc-hz.aliyuncs.com")
+
+    def test_app_name_validation_empty(self):
+        """Test app_name validation with empty value"""
+        config = AliyunConfig(
+            license_key="test_license", endpoint="https://tracing-analysis-dc-hz.aliyuncs.com", app_name=""
+        )
+        assert config.app_name == "dify_app"
+
+    def test_endpoint_validation_empty(self):
+        """Test endpoint validation with empty value"""
+        config = AliyunConfig(license_key="test_license", endpoint="")
+        assert config.endpoint == "https://tracing-analysis-dc-hz.aliyuncs.com"
+
+    def test_endpoint_validation_with_path(self):
+        """Test endpoint validation preserves path for Aliyun endpoints"""
+        config = AliyunConfig(
+            license_key="test_license", endpoint="https://tracing-analysis-dc-hz.aliyuncs.com/api/v1/traces"
+        )
+        assert config.endpoint == "https://tracing-analysis-dc-hz.aliyuncs.com/api/v1/traces"
+
+    def test_endpoint_validation_invalid_scheme(self):
+        """Test endpoint validation rejects invalid schemes"""
+        with pytest.raises(ValidationError, match="URL must start with https:// or http://"):
+            AliyunConfig(license_key="test_license", endpoint="ftp://invalid.tracing-analysis-dc-hz.aliyuncs.com")
+
+    def test_endpoint_validation_no_scheme(self):
+        """Test endpoint validation rejects URLs without scheme"""
+        with pytest.raises(ValidationError, match="URL must start with https:// or http://"):
+            AliyunConfig(license_key="test_license", endpoint="invalid.tracing-analysis-dc-hz.aliyuncs.com")
+
+    def test_license_key_required(self):
+        """Test that license_key is required and cannot be empty"""
+        with pytest.raises(ValidationError):
+            AliyunConfig(license_key="", endpoint="https://tracing-analysis-dc-hz.aliyuncs.com")
+
+    def test_valid_endpoint_format_examples(self):
+        """Test valid endpoint format examples from comments"""
+        valid_endpoints = [
+            # cms2.0 public endpoint
+            "https://proj-xtrace-123456-cn-heyuan.cn-heyuan.log.aliyuncs.com/apm/trace/opentelemetry",
+            # cms2.0 intranet endpoint
+            "https://proj-xtrace-123456-cn-heyuan.cn-heyuan-intranet.log.aliyuncs.com/apm/trace/opentelemetry",
+            # xtrace public endpoint
+            "http://tracing-cn-heyuan.arms.aliyuncs.com",
+            # xtrace intranet endpoint
+            "http://tracing-cn-heyuan-internal.arms.aliyuncs.com",
+        ]
+
+        for endpoint in valid_endpoints:
+            config = AliyunConfig(license_key="test_license", endpoint=endpoint)
+            assert config.endpoint == endpoint
diff --git a/api/providers/trace/trace-arize-phoenix/pyproject.toml b/api/providers/trace/trace-arize-phoenix/pyproject.toml
new file mode 100644
index 0000000000..9e756944c9
--- /dev/null
+++ b/api/providers/trace/trace-arize-phoenix/pyproject.toml
@@ -0,0 +1,10 @@
+[project]
+name = "dify-trace-arize-phoenix"
+version = "0.0.1"
+dependencies = [
+    "arize-phoenix-otel~=0.15.0",
+]
+description = "Dify ops tracing provider (Arize / Phoenix)."
+
+[tool.setuptools.packages.find]
+where = ["src"]
diff --git a/api/core/ops/langfuse_trace/__init__.py b/api/providers/trace/trace-arize-phoenix/src/dify_trace_arize_phoenix/__init__.py
similarity index 100%
rename from api/core/ops/langfuse_trace/__init__.py
rename to api/providers/trace/trace-arize-phoenix/src/dify_trace_arize_phoenix/__init__.py
diff --git a/api/core/ops/arize_phoenix_trace/arize_phoenix_trace.py b/api/providers/trace/trace-arize-phoenix/src/dify_trace_arize_phoenix/arize_phoenix_trace.py
similarity index 99%
rename from api/core/ops/arize_phoenix_trace/arize_phoenix_trace.py
rename to api/providers/trace/trace-arize-phoenix/src/dify_trace_arize_phoenix/arize_phoenix_trace.py
index 78516e1a22..96df49ed0e 100644
--- a/api/core/ops/arize_phoenix_trace/arize_phoenix_trace.py
+++ b/api/providers/trace/trace-arize-phoenix/src/dify_trace_arize_phoenix/arize_phoenix_trace.py
@@ -25,7 +25,6 @@ from opentelemetry.util.types import AttributeValue
 from sqlalchemy.orm import sessionmaker
 
 from core.ops.base_trace_instance import BaseTraceInstance
-from core.ops.entities.config_entity import ArizeConfig, PhoenixConfig
 from core.ops.entities.trace_entity import (
     BaseTraceInfo,
     DatasetRetrievalTraceInfo,
@@ -39,6 +38,7 @@ from core.ops.entities.trace_entity import (
 )
 from core.ops.utils import JSON_DICT_ADAPTER
 from core.repositories import DifyCoreRepositoryFactory
+from dify_trace_arize_phoenix.config import ArizeConfig, PhoenixConfig
 from extensions.ext_database import db
 from graphon.enums import WorkflowNodeExecutionStatus
 from models.model import EndUser, MessageFile
diff --git a/api/providers/trace/trace-arize-phoenix/src/dify_trace_arize_phoenix/config.py b/api/providers/trace/trace-arize-phoenix/src/dify_trace_arize_phoenix/config.py
new file mode 100644
index 0000000000..6eac5b30d2
--- /dev/null
+++ b/api/providers/trace/trace-arize-phoenix/src/dify_trace_arize_phoenix/config.py
@@ -0,0 +1,45 @@
+from pydantic import ValidationInfo, field_validator
+
+from core.ops.entities.config_entity import BaseTracingConfig
+from core.ops.utils import validate_url_with_path
+
+
+class ArizeConfig(BaseTracingConfig):
+    """
+    Model class for Arize tracing config.
+    """
+
+    api_key: str | None = None
+    space_id: str | None = None
+    project: str | None = None
+    endpoint: str = "https://otlp.arize.com"
+
+    @field_validator("project")
+    @classmethod
+    def project_validator(cls, v, info: ValidationInfo):
+        return cls.validate_project_field(v, "default")
+
+    @field_validator("endpoint")
+    @classmethod
+    def endpoint_validator(cls, v, info: ValidationInfo):
+        return cls.validate_endpoint_url(v, "https://otlp.arize.com")
+
+
+class PhoenixConfig(BaseTracingConfig):
+    """
+    Model class for Phoenix tracing config.
+    """
+
+    api_key: str | None = None
+    project: str | None = None
+    endpoint: str = "https://app.phoenix.arize.com"
+
+    @field_validator("project")
+    @classmethod
+    def project_validator(cls, v, info: ValidationInfo):
+        return cls.validate_project_field(v, "default")
+
+    @field_validator("endpoint")
+    @classmethod
+    def endpoint_validator(cls, v, info: ValidationInfo):
+        return validate_url_with_path(v, "https://app.phoenix.arize.com")
diff --git a/api/core/ops/langfuse_trace/entities/__init__.py b/api/providers/trace/trace-arize-phoenix/src/dify_trace_arize_phoenix/py.typed
similarity index 100%
rename from api/core/ops/langfuse_trace/entities/__init__.py
rename to api/providers/trace/trace-arize-phoenix/src/dify_trace_arize_phoenix/py.typed
diff --git a/api/tests/unit_tests/core/ops/arize_phoenix_trace/test_arize_phoenix_trace.py b/api/providers/trace/trace-arize-phoenix/tests/unit_tests/arize_phoenix_trace/test_arize_phoenix_trace.py
similarity index 91%
rename from api/tests/unit_tests/core/ops/arize_phoenix_trace/test_arize_phoenix_trace.py
rename to api/providers/trace/trace-arize-phoenix/tests/unit_tests/arize_phoenix_trace/test_arize_phoenix_trace.py
index 4ce9e22fd7..b0691a87ea 100644
--- a/api/tests/unit_tests/core/ops/arize_phoenix_trace/test_arize_phoenix_trace.py
+++ b/api/providers/trace/trace-arize-phoenix/tests/unit_tests/arize_phoenix_trace/test_arize_phoenix_trace.py
@@ -2,11 +2,7 @@ from datetime import UTC, datetime, timedelta
 from unittest.mock import MagicMock, patch
 
 import pytest
-from opentelemetry.sdk.trace import Tracer
-from opentelemetry.semconv.trace import SpanAttributes as OTELSpanAttributes
-from opentelemetry.trace import StatusCode
-
-from core.ops.arize_phoenix_trace.arize_phoenix_trace import (
+from dify_trace_arize_phoenix.arize_phoenix_trace import (
     ArizePhoenixDataTrace,
     datetime_to_nanos,
     error_to_string,
@@ -15,7 +11,11 @@ from core.ops.arize_phoenix_trace.arize_phoenix_trace import (
     setup_tracer,
     wrap_span_metadata,
 )
-from core.ops.entities.config_entity import ArizeConfig, PhoenixConfig
+from dify_trace_arize_phoenix.config import ArizeConfig, PhoenixConfig
+from opentelemetry.sdk.trace import Tracer
+from opentelemetry.semconv.trace import SpanAttributes as OTELSpanAttributes
+from opentelemetry.trace import StatusCode
+
 from core.ops.entities.trace_entity import (
     DatasetRetrievalTraceInfo,
     GenerateNameTraceInfo,
@@ -80,7 +80,7 @@ def test_datetime_to_nanos():
     expected = int(dt.timestamp() * 1_000_000_000)
     assert datetime_to_nanos(dt) == expected
 
-    with patch("core.ops.arize_phoenix_trace.arize_phoenix_trace.datetime") as mock_dt:
+    with patch("dify_trace_arize_phoenix.arize_phoenix_trace.datetime") as mock_dt:
         mock_now = MagicMock()
         mock_now.timestamp.return_value = 1704110400.0
         mock_dt.now.return_value = mock_now
@@ -142,8 +142,8 @@ def test_wrap_span_metadata():
     assert res == {"a": 1, "b": 2, "created_from": "Dify"}
 
 
-@patch("core.ops.arize_phoenix_trace.arize_phoenix_trace.GrpcOTLPSpanExporter")
-@patch("core.ops.arize_phoenix_trace.arize_phoenix_trace.trace_sdk.TracerProvider")
+@patch("dify_trace_arize_phoenix.arize_phoenix_trace.GrpcOTLPSpanExporter")
+@patch("dify_trace_arize_phoenix.arize_phoenix_trace.trace_sdk.TracerProvider")
 def test_setup_tracer_arize(mock_provider, mock_exporter):
     config = ArizeConfig(endpoint="http://a.com", api_key="k", space_id="s", project="p")
     setup_tracer(config)
@@ -151,8 +151,8 @@ def test_setup_tracer_arize(mock_provider, mock_exporter):
     assert mock_exporter.call_args[1]["endpoint"] == "http://a.com/v1"
 
 
-@patch("core.ops.arize_phoenix_trace.arize_phoenix_trace.HttpOTLPSpanExporter")
-@patch("core.ops.arize_phoenix_trace.arize_phoenix_trace.trace_sdk.TracerProvider")
+@patch("dify_trace_arize_phoenix.arize_phoenix_trace.HttpOTLPSpanExporter")
+@patch("dify_trace_arize_phoenix.arize_phoenix_trace.trace_sdk.TracerProvider")
 def test_setup_tracer_phoenix(mock_provider, mock_exporter):
     config = PhoenixConfig(endpoint="http://p.com", project="p")
     setup_tracer(config)
@@ -162,7 +162,7 @@ def test_setup_tracer_phoenix(mock_provider, mock_exporter):
 
 def test_setup_tracer_exception():
     config = ArizeConfig(endpoint="http://a.com", project="p")
-    with patch("core.ops.arize_phoenix_trace.arize_phoenix_trace.urlparse", side_effect=Exception("boom")):
+    with patch("dify_trace_arize_phoenix.arize_phoenix_trace.urlparse", side_effect=Exception("boom")):
         with pytest.raises(Exception, match="boom"):
             setup_tracer(config)
 
@@ -172,7 +172,7 @@ def test_setup_tracer_exception():
 
 @pytest.fixture
 def trace_instance():
-    with patch("core.ops.arize_phoenix_trace.arize_phoenix_trace.setup_tracer") as mock_setup:
+    with patch("dify_trace_arize_phoenix.arize_phoenix_trace.setup_tracer") as mock_setup:
         mock_tracer = MagicMock(spec=Tracer)
         mock_processor = MagicMock()
         mock_setup.return_value = (mock_tracer, mock_processor)
@@ -228,9 +228,9 @@ def test_trace_exception(trace_instance):
             trace_instance.trace(_make_workflow_info())
 
 
-@patch("core.ops.arize_phoenix_trace.arize_phoenix_trace.sessionmaker")
-@patch("core.ops.arize_phoenix_trace.arize_phoenix_trace.DifyCoreRepositoryFactory")
-@patch("core.ops.arize_phoenix_trace.arize_phoenix_trace.db")
+@patch("dify_trace_arize_phoenix.arize_phoenix_trace.sessionmaker")
+@patch("dify_trace_arize_phoenix.arize_phoenix_trace.DifyCoreRepositoryFactory")
+@patch("dify_trace_arize_phoenix.arize_phoenix_trace.db")
 def test_workflow_trace_full(mock_db, mock_repo_factory, mock_sessionmaker, trace_instance):
     mock_db.engine = MagicMock()
     info = _make_workflow_info()
@@ -262,7 +262,7 @@ def test_workflow_trace_full(mock_db, mock_repo_factory, mock_sessionmaker, trac
     assert trace_instance.tracer.start_span.call_count >= 2
 
 
-@patch("core.ops.arize_phoenix_trace.arize_phoenix_trace.db")
+@patch("dify_trace_arize_phoenix.arize_phoenix_trace.db")
 def test_workflow_trace_no_app_id(mock_db, trace_instance):
     mock_db.engine = MagicMock()
     info = _make_workflow_info()
@@ -271,7 +271,7 @@ def test_workflow_trace_no_app_id(mock_db, trace_instance):
         trace_instance.workflow_trace(info)
 
 
-@patch("core.ops.arize_phoenix_trace.arize_phoenix_trace.db")
+@patch("dify_trace_arize_phoenix.arize_phoenix_trace.db")
 def test_message_trace_success(mock_db, trace_instance):
     mock_db.engine = MagicMock()
     info = _make_message_info()
@@ -291,7 +291,7 @@ def test_message_trace_success(mock_db, trace_instance):
     assert trace_instance.tracer.start_span.call_count >= 1
 
 
-@patch("core.ops.arize_phoenix_trace.arize_phoenix_trace.db")
+@patch("dify_trace_arize_phoenix.arize_phoenix_trace.db")
 def test_message_trace_with_error(mock_db, trace_instance):
     mock_db.engine = MagicMock()
     info = _make_message_info()
diff --git a/api/tests/unit_tests/core/ops/test_arize_phoenix_trace.py b/api/providers/trace/trace-arize-phoenix/tests/unit_tests/test_arize_phoenix_trace.py
similarity index 94%
rename from api/tests/unit_tests/core/ops/test_arize_phoenix_trace.py
rename to api/providers/trace/trace-arize-phoenix/tests/unit_tests/test_arize_phoenix_trace.py
index 4b925390d9..a01c63ae61 100644
--- a/api/tests/unit_tests/core/ops/test_arize_phoenix_trace.py
+++ b/api/providers/trace/trace-arize-phoenix/tests/unit_tests/test_arize_phoenix_trace.py
@@ -1,6 +1,6 @@
+from dify_trace_arize_phoenix.arize_phoenix_trace import _NODE_TYPE_TO_SPAN_KIND, _get_node_span_kind
 from openinference.semconv.trace import OpenInferenceSpanKindValues
 
-from core.ops.arize_phoenix_trace.arize_phoenix_trace import _NODE_TYPE_TO_SPAN_KIND, _get_node_span_kind
 from graphon.enums import BUILT_IN_NODE_TYPES, BuiltinNodeTypes
 
 
diff --git a/api/providers/trace/trace-arize-phoenix/tests/unit_tests/test_config_entity.py b/api/providers/trace/trace-arize-phoenix/tests/unit_tests/test_config_entity.py
new file mode 100644
index 0000000000..11e951c3b1
--- /dev/null
+++ b/api/providers/trace/trace-arize-phoenix/tests/unit_tests/test_config_entity.py
@@ -0,0 +1,88 @@
+import pytest
+from dify_trace_arize_phoenix.config import ArizeConfig, PhoenixConfig
+from pydantic import ValidationError
+
+
+class TestArizeConfig:
+    """Test cases for ArizeConfig"""
+
+    def test_valid_config(self):
+        """Test valid Arize configuration"""
+        config = ArizeConfig(
+            api_key="test_key", space_id="test_space", project="test_project", endpoint="https://custom.arize.com"
+        )
+        assert config.api_key == "test_key"
+        assert config.space_id == "test_space"
+        assert config.project == "test_project"
+        assert config.endpoint == "https://custom.arize.com"
+
+    def test_default_values(self):
+        """Test default values are set correctly"""
+        config = ArizeConfig()
+        assert config.api_key is None
+        assert config.space_id is None
+        assert config.project is None
+        assert config.endpoint == "https://otlp.arize.com"
+
+    def test_project_validation_empty(self):
+        """Test project validation with empty value"""
+        config = ArizeConfig(project="")
+        assert config.project == "default"
+
+    def test_project_validation_none(self):
+        """Test project validation with None value"""
+        config = ArizeConfig(project=None)
+        assert config.project == "default"
+
+    def test_endpoint_validation_empty(self):
+        """Test endpoint validation with empty value"""
+        config = ArizeConfig(endpoint="")
+        assert config.endpoint == "https://otlp.arize.com"
+
+    def test_endpoint_validation_with_path(self):
+        """Test endpoint validation normalizes URL by removing path"""
+        config = ArizeConfig(endpoint="https://custom.arize.com/api/v1")
+        assert config.endpoint == "https://custom.arize.com"
+
+    def test_endpoint_validation_invalid_scheme(self):
+        """Test endpoint validation rejects invalid schemes"""
+        with pytest.raises(ValidationError, match="URL scheme must be one of"):
+            ArizeConfig(endpoint="ftp://invalid.com")
+
+    def test_endpoint_validation_no_scheme(self):
+        """Test endpoint validation rejects URLs without scheme"""
+        with pytest.raises(ValidationError, match="URL scheme must be one of"):
+            ArizeConfig(endpoint="invalid.com")
+
+
+class TestPhoenixConfig:
+    """Test cases for PhoenixConfig"""
+
+    def test_valid_config(self):
+        """Test valid Phoenix configuration"""
+        config = PhoenixConfig(api_key="test_key", project="test_project", endpoint="https://custom.phoenix.com")
+        assert config.api_key == "test_key"
+        assert config.project == "test_project"
+        assert config.endpoint == "https://custom.phoenix.com"
+
+    def test_default_values(self):
+        """Test default values are set correctly"""
+        config = PhoenixConfig()
+        assert config.api_key is None
+        assert config.project is None
+        assert config.endpoint == "https://app.phoenix.arize.com"
+
+    def test_project_validation_empty(self):
+        """Test project validation with empty value"""
+        config = PhoenixConfig(project="")
+        assert config.project == "default"
+
+    def test_endpoint_validation_with_path(self):
+        """Test endpoint validation with path"""
+        config = PhoenixConfig(endpoint="https://app.phoenix.arize.com/s/dify-integration")
+        assert config.endpoint == "https://app.phoenix.arize.com/s/dify-integration"
+
+    def test_endpoint_validation_without_path(self):
+        """Test endpoint validation without path"""
+        config = PhoenixConfig(endpoint="https://app.phoenix.arize.com")
+        assert config.endpoint == "https://app.phoenix.arize.com"
diff --git a/api/providers/trace/trace-langfuse/pyproject.toml b/api/providers/trace/trace-langfuse/pyproject.toml
new file mode 100644
index 0000000000..27d2273a69
--- /dev/null
+++ b/api/providers/trace/trace-langfuse/pyproject.toml
@@ -0,0 +1,10 @@
+[project]
+name = "dify-trace-langfuse"
+version = "0.0.1"
+dependencies = [
+    "langfuse>=4.2.0,<5.0.0",
+]
+description = "Dify ops tracing provider (Langfuse)."
+
+[tool.setuptools.packages.find]
+where = ["src"]
diff --git a/api/core/ops/langsmith_trace/__init__.py b/api/providers/trace/trace-langfuse/src/dify_trace_langfuse/__init__.py
similarity index 100%
rename from api/core/ops/langsmith_trace/__init__.py
rename to api/providers/trace/trace-langfuse/src/dify_trace_langfuse/__init__.py
diff --git a/api/providers/trace/trace-langfuse/src/dify_trace_langfuse/config.py b/api/providers/trace/trace-langfuse/src/dify_trace_langfuse/config.py
new file mode 100644
index 0000000000..90d1a2846b
--- /dev/null
+++ b/api/providers/trace/trace-langfuse/src/dify_trace_langfuse/config.py
@@ -0,0 +1,19 @@
+from pydantic import ValidationInfo, field_validator
+
+from core.ops.entities.config_entity import BaseTracingConfig
+from core.ops.utils import validate_url_with_path
+
+
+class LangfuseConfig(BaseTracingConfig):
+    """
+    Model class for Langfuse tracing config.
+    """
+
+    public_key: str
+    secret_key: str
+    host: str = "https://api.langfuse.com"
+
+    @field_validator("host")
+    @classmethod
+    def host_validator(cls, v, info: ValidationInfo):
+        return validate_url_with_path(v, "https://api.langfuse.com")
diff --git a/api/core/ops/langsmith_trace/entities/__init__.py b/api/providers/trace/trace-langfuse/src/dify_trace_langfuse/entities/__init__.py
similarity index 100%
rename from api/core/ops/langsmith_trace/entities/__init__.py
rename to api/providers/trace/trace-langfuse/src/dify_trace_langfuse/entities/__init__.py
diff --git a/api/core/ops/langfuse_trace/entities/langfuse_trace_entity.py b/api/providers/trace/trace-langfuse/src/dify_trace_langfuse/entities/langfuse_trace_entity.py
similarity index 100%
rename from api/core/ops/langfuse_trace/entities/langfuse_trace_entity.py
rename to api/providers/trace/trace-langfuse/src/dify_trace_langfuse/entities/langfuse_trace_entity.py
diff --git a/api/core/ops/langfuse_trace/langfuse_trace.py b/api/providers/trace/trace-langfuse/src/dify_trace_langfuse/langfuse_trace.py
similarity index 99%
rename from api/core/ops/langfuse_trace/langfuse_trace.py
rename to api/providers/trace/trace-langfuse/src/dify_trace_langfuse/langfuse_trace.py
index 7eacc2be46..68881378a7 100644
--- a/api/core/ops/langfuse_trace/langfuse_trace.py
+++ b/api/providers/trace/trace-langfuse/src/dify_trace_langfuse/langfuse_trace.py
@@ -16,7 +16,6 @@ from langfuse.api.commons.types.usage import Usage
 from sqlalchemy.orm import sessionmaker
 
 from core.ops.base_trace_instance import BaseTraceInstance
-from core.ops.entities.config_entity import LangfuseConfig
 from core.ops.entities.trace_entity import (
     BaseTraceInfo,
     DatasetRetrievalTraceInfo,
@@ -28,7 +27,10 @@ from core.ops.entities.trace_entity import (
     TraceTaskName,
     WorkflowTraceInfo,
 )
-from core.ops.langfuse_trace.entities.langfuse_trace_entity import (
+from core.ops.utils import filter_none_values
+from core.repositories import DifyCoreRepositoryFactory
+from dify_trace_langfuse.config import LangfuseConfig
+from dify_trace_langfuse.entities.langfuse_trace_entity import (
     GenerationUsage,
     LangfuseGeneration,
     LangfuseSpan,
@@ -36,8 +38,6 @@ from core.ops.langfuse_trace.entities.langfuse_trace_entity import (
     LevelEnum,
     UnitEnum,
 )
-from core.ops.utils import filter_none_values
-from core.repositories import DifyCoreRepositoryFactory
 from extensions.ext_database import db
 from graphon.enums import BuiltinNodeTypes
 from models import EndUser, WorkflowNodeExecutionTriggeredFrom
diff --git a/api/core/ops/mlflow_trace/__init__.py b/api/providers/trace/trace-langfuse/src/dify_trace_langfuse/py.typed
similarity index 100%
rename from api/core/ops/mlflow_trace/__init__.py
rename to api/providers/trace/trace-langfuse/src/dify_trace_langfuse/py.typed
diff --git a/api/tests/unit_tests/core/ops/langfuse_trace/test_langfuse_trace.py b/api/providers/trace/trace-langfuse/tests/unit_tests/langfuse_trace/test_langfuse_trace.py
similarity index 93%
rename from api/tests/unit_tests/core/ops/langfuse_trace/test_langfuse_trace.py
rename to api/providers/trace/trace-langfuse/tests/unit_tests/langfuse_trace/test_langfuse_trace.py
index a0bcc92795..952f10c34f 100644
--- a/api/tests/unit_tests/core/ops/langfuse_trace/test_langfuse_trace.py
+++ b/api/providers/trace/trace-langfuse/tests/unit_tests/langfuse_trace/test_langfuse_trace.py
@@ -5,8 +5,16 @@ from types import SimpleNamespace
 from unittest.mock import MagicMock
 
 import pytest
+from dify_trace_langfuse.config import LangfuseConfig
+from dify_trace_langfuse.entities.langfuse_trace_entity import (
+    LangfuseGeneration,
+    LangfuseSpan,
+    LangfuseTrace,
+    LevelEnum,
+    UnitEnum,
+)
+from dify_trace_langfuse.langfuse_trace import LangFuseDataTrace
 
-from core.ops.entities.config_entity import LangfuseConfig
 from core.ops.entities.trace_entity import (
     DatasetRetrievalTraceInfo,
     GenerateNameTraceInfo,
@@ -17,14 +25,6 @@ from core.ops.entities.trace_entity import (
     TraceTaskName,
     WorkflowTraceInfo,
 )
-from core.ops.langfuse_trace.entities.langfuse_trace_entity import (
-    LangfuseGeneration,
-    LangfuseSpan,
-    LangfuseTrace,
-    LevelEnum,
-    UnitEnum,
-)
-from core.ops.langfuse_trace.langfuse_trace import LangFuseDataTrace
 from graphon.enums import BuiltinNodeTypes
 from models import EndUser
 from models.enums import MessageStatus
@@ -43,7 +43,7 @@ def langfuse_config():
 def trace_instance(langfuse_config, monkeypatch):
     # Mock Langfuse client to avoid network calls
     mock_client = MagicMock()
-    monkeypatch.setattr("core.ops.langfuse_trace.langfuse_trace.Langfuse", lambda **kwargs: mock_client)
+    monkeypatch.setattr("dify_trace_langfuse.langfuse_trace.Langfuse", lambda **kwargs: mock_client)
 
     instance = LangFuseDataTrace(langfuse_config)
     return instance
@@ -51,7 +51,7 @@ def trace_instance(langfuse_config, monkeypatch):
 
 def test_init(langfuse_config, monkeypatch):
     mock_langfuse = MagicMock()
-    monkeypatch.setattr("core.ops.langfuse_trace.langfuse_trace.Langfuse", mock_langfuse)
+    monkeypatch.setattr("dify_trace_langfuse.langfuse_trace.Langfuse", mock_langfuse)
     monkeypatch.setenv("FILES_URL", "http://test.url")
 
     instance = LangFuseDataTrace(langfuse_config)
@@ -140,8 +140,8 @@ def test_workflow_trace_with_message_id(trace_instance, monkeypatch):
 
     # Mock DB and Repositories
     mock_session = MagicMock()
-    monkeypatch.setattr("core.ops.langfuse_trace.langfuse_trace.sessionmaker", lambda bind: lambda: mock_session)
-    monkeypatch.setattr("core.ops.langfuse_trace.langfuse_trace.db", MagicMock(engine="engine"))
+    monkeypatch.setattr("dify_trace_langfuse.langfuse_trace.sessionmaker", lambda bind: lambda: mock_session)
+    monkeypatch.setattr("dify_trace_langfuse.langfuse_trace.db", MagicMock(engine="engine"))
 
     # Mock node executions
     node_llm = MagicMock()
@@ -178,7 +178,7 @@ def test_workflow_trace_with_message_id(trace_instance, monkeypatch):
 
     mock_factory = MagicMock()
     mock_factory.create_workflow_node_execution_repository.return_value = repo
-    monkeypatch.setattr("core.ops.langfuse_trace.langfuse_trace.DifyCoreRepositoryFactory", mock_factory)
+    monkeypatch.setattr("dify_trace_langfuse.langfuse_trace.DifyCoreRepositoryFactory", mock_factory)
 
     monkeypatch.setattr(trace_instance, "get_service_account_with_tenant", lambda app_id: MagicMock())
 
@@ -241,13 +241,13 @@ def test_workflow_trace_no_message_id(trace_instance, monkeypatch):
         error="",
     )
 
-    monkeypatch.setattr("core.ops.langfuse_trace.langfuse_trace.sessionmaker", lambda bind: lambda: MagicMock())
-    monkeypatch.setattr("core.ops.langfuse_trace.langfuse_trace.db", MagicMock(engine="engine"))
+    monkeypatch.setattr("dify_trace_langfuse.langfuse_trace.sessionmaker", lambda bind: lambda: MagicMock())
+    monkeypatch.setattr("dify_trace_langfuse.langfuse_trace.db", MagicMock(engine="engine"))
     repo = MagicMock()
     repo.get_by_workflow_execution.return_value = []
     mock_factory = MagicMock()
     mock_factory.create_workflow_node_execution_repository.return_value = repo
-    monkeypatch.setattr("core.ops.langfuse_trace.langfuse_trace.DifyCoreRepositoryFactory", mock_factory)
+    monkeypatch.setattr("dify_trace_langfuse.langfuse_trace.DifyCoreRepositoryFactory", mock_factory)
     monkeypatch.setattr(trace_instance, "get_service_account_with_tenant", lambda app_id: MagicMock())
 
     trace_instance.add_trace = MagicMock()
@@ -280,8 +280,8 @@ def test_workflow_trace_missing_app_id(trace_instance, monkeypatch):
         workflow_app_log_id="log-1",
         error="",
     )
-    monkeypatch.setattr("core.ops.langfuse_trace.langfuse_trace.sessionmaker", lambda bind: lambda: MagicMock())
-    monkeypatch.setattr("core.ops.langfuse_trace.langfuse_trace.db", MagicMock(engine="engine"))
+    monkeypatch.setattr("dify_trace_langfuse.langfuse_trace.sessionmaker", lambda bind: lambda: MagicMock())
+    monkeypatch.setattr("dify_trace_langfuse.langfuse_trace.db", MagicMock(engine="engine"))
 
     with pytest.raises(ValueError, match="No app_id found in trace_info metadata"):
         trace_instance.workflow_trace(trace_info)
@@ -365,7 +365,7 @@ def test_message_trace_with_end_user(trace_instance, monkeypatch):
     mock_end_user = MagicMock(spec=EndUser)
     mock_end_user.session_id = "session-id-123"
 
-    monkeypatch.setattr("core.ops.langfuse_trace.langfuse_trace.db.session.get", lambda model, pk: mock_end_user)
+    monkeypatch.setattr("dify_trace_langfuse.langfuse_trace.db.session.get", lambda model, pk: mock_end_user)
 
     trace_instance.add_trace = MagicMock()
     trace_instance.add_generation = MagicMock()
@@ -681,9 +681,9 @@ def test_workflow_trace_handles_usage_extraction_error(trace_instance, monkeypat
     repo.get_by_workflow_execution.return_value = [node]
     mock_factory = MagicMock()
     mock_factory.create_workflow_node_execution_repository.return_value = repo
-    monkeypatch.setattr("core.ops.langfuse_trace.langfuse_trace.DifyCoreRepositoryFactory", mock_factory)
-    monkeypatch.setattr("core.ops.langfuse_trace.langfuse_trace.sessionmaker", lambda bind: lambda: MagicMock())
-    monkeypatch.setattr("core.ops.langfuse_trace.langfuse_trace.db", MagicMock(engine="engine"))
+    monkeypatch.setattr("dify_trace_langfuse.langfuse_trace.DifyCoreRepositoryFactory", mock_factory)
+    monkeypatch.setattr("dify_trace_langfuse.langfuse_trace.sessionmaker", lambda bind: lambda: MagicMock())
+    monkeypatch.setattr("dify_trace_langfuse.langfuse_trace.db", MagicMock(engine="engine"))
     monkeypatch.setattr(trace_instance, "get_service_account_with_tenant", lambda app_id: MagicMock())
 
     trace_instance.add_trace = MagicMock()
diff --git a/api/providers/trace/trace-langfuse/tests/unit_tests/test_config_entity.py b/api/providers/trace/trace-langfuse/tests/unit_tests/test_config_entity.py
new file mode 100644
index 0000000000..103d888eef
--- /dev/null
+++ b/api/providers/trace/trace-langfuse/tests/unit_tests/test_config_entity.py
@@ -0,0 +1,42 @@
+import pytest
+from dify_trace_langfuse.config import LangfuseConfig
+from pydantic import ValidationError
+
+
+class TestLangfuseConfig:
+    """Test cases for LangfuseConfig"""
+
+    def test_valid_config(self):
+        """Test valid Langfuse configuration"""
+        config = LangfuseConfig(public_key="public_key", secret_key="secret_key", host="https://custom.langfuse.com")
+        assert config.public_key == "public_key"
+        assert config.secret_key == "secret_key"
+        assert config.host == "https://custom.langfuse.com"
+
+    def test_valid_config_with_path(self):
+        host = "https://custom.langfuse.com/api/v1"
+        config = LangfuseConfig(public_key="public_key", secret_key="secret_key", host=host)
+        assert config.public_key == "public_key"
+        assert config.secret_key == "secret_key"
+        assert config.host == host
+
+    def test_default_values(self):
+        """Test default values are set correctly"""
+        config = LangfuseConfig(public_key="public", secret_key="secret")
+        assert config.host == "https://api.langfuse.com"
+
+    def test_missing_required_fields(self):
+        """Test that required fields are enforced"""
+        with pytest.raises(ValidationError):
+            LangfuseConfig()
+
+        with pytest.raises(ValidationError):
+            LangfuseConfig(public_key="public")
+
+        with pytest.raises(ValidationError):
+            LangfuseConfig(secret_key="secret")
+
+    def test_host_validation_empty(self):
+        """Test host validation with empty value"""
+        config = LangfuseConfig(public_key="public", secret_key="secret", host="")
+        assert config.host == "https://api.langfuse.com"
diff --git a/api/tests/unit_tests/core/ops/test_langfuse_trace.py b/api/providers/trace/trace-langfuse/tests/unit_tests/test_langfuse_trace.py
similarity index 92%
rename from api/tests/unit_tests/core/ops/test_langfuse_trace.py
rename to api/providers/trace/trace-langfuse/tests/unit_tests/test_langfuse_trace.py
index 017ac8c891..0340ffb669 100644
--- a/api/tests/unit_tests/core/ops/test_langfuse_trace.py
+++ b/api/providers/trace/trace-langfuse/tests/unit_tests/test_langfuse_trace.py
@@ -4,14 +4,15 @@ from datetime import datetime, timedelta
 from types import SimpleNamespace
 from unittest.mock import MagicMock, patch
 
-from core.ops.entities.config_entity import LangfuseConfig
+from dify_trace_langfuse.config import LangfuseConfig
+from dify_trace_langfuse.langfuse_trace import LangFuseDataTrace
+
 from core.ops.entities.trace_entity import MessageTraceInfo, WorkflowTraceInfo
-from core.ops.langfuse_trace.langfuse_trace import LangFuseDataTrace
 from graphon.enums import BuiltinNodeTypes
 
 
 def _create_trace_instance() -> LangFuseDataTrace:
-    with patch("core.ops.langfuse_trace.langfuse_trace.Langfuse", autospec=True):
+    with patch("dify_trace_langfuse.langfuse_trace.Langfuse", autospec=True):
         return LangFuseDataTrace(
             LangfuseConfig(
                 public_key="public-key",
@@ -116,9 +117,9 @@ class TestLangFuseDataTraceCompletionStartTime:
             patch.object(trace, "add_span"),
             patch.object(trace, "add_generation") as add_generation,
             patch.object(trace, "get_service_account_with_tenant", return_value=MagicMock()),
-            patch("core.ops.langfuse_trace.langfuse_trace.db", MagicMock()),
+            patch("dify_trace_langfuse.langfuse_trace.db", MagicMock()),
             patch(
-                "core.ops.langfuse_trace.langfuse_trace.DifyCoreRepositoryFactory.create_workflow_node_execution_repository",
+                "dify_trace_langfuse.langfuse_trace.DifyCoreRepositoryFactory.create_workflow_node_execution_repository",
                 return_value=repository,
             ),
         ):
diff --git a/api/providers/trace/trace-langsmith/pyproject.toml b/api/providers/trace/trace-langsmith/pyproject.toml
new file mode 100644
index 0000000000..8131952b28
--- /dev/null
+++ b/api/providers/trace/trace-langsmith/pyproject.toml
@@ -0,0 +1,10 @@
+[project]
+name = "dify-trace-langsmith"
+version = "0.0.1"
+dependencies = [
+    "langsmith~=0.7.30",
+]
+description = "Dify ops tracing provider (LangSmith)."
+
+[tool.setuptools.packages.find]
+where = ["src"]
diff --git a/api/core/ops/opik_trace/__init__.py b/api/providers/trace/trace-langsmith/src/dify_trace_langsmith/__init__.py
similarity index 100%
rename from api/core/ops/opik_trace/__init__.py
rename to api/providers/trace/trace-langsmith/src/dify_trace_langsmith/__init__.py
diff --git a/api/providers/trace/trace-langsmith/src/dify_trace_langsmith/config.py b/api/providers/trace/trace-langsmith/src/dify_trace_langsmith/config.py
new file mode 100644
index 0000000000..498b8c5e7e
--- /dev/null
+++ b/api/providers/trace/trace-langsmith/src/dify_trace_langsmith/config.py
@@ -0,0 +1,20 @@
+from pydantic import ValidationInfo, field_validator
+
+from core.ops.entities.config_entity import BaseTracingConfig
+from core.ops.utils import validate_url
+
+
+class LangSmithConfig(BaseTracingConfig):
+    """
+    Model class for Langsmith tracing config.
+    """
+
+    api_key: str
+    project: str
+    endpoint: str = "https://api.smith.langchain.com"
+
+    @field_validator("endpoint")
+    @classmethod
+    def endpoint_validator(cls, v, info: ValidationInfo):
+        # LangSmith only allows HTTPS
+        return validate_url(v, "https://api.smith.langchain.com", allowed_schemes=("https",))
diff --git a/api/core/ops/tencent_trace/__init__.py b/api/providers/trace/trace-langsmith/src/dify_trace_langsmith/entities/__init__.py
similarity index 100%
rename from api/core/ops/tencent_trace/__init__.py
rename to api/providers/trace/trace-langsmith/src/dify_trace_langsmith/entities/__init__.py
diff --git a/api/core/ops/langsmith_trace/entities/langsmith_trace_entity.py b/api/providers/trace/trace-langsmith/src/dify_trace_langsmith/entities/langsmith_trace_entity.py
similarity index 100%
rename from api/core/ops/langsmith_trace/entities/langsmith_trace_entity.py
rename to api/providers/trace/trace-langsmith/src/dify_trace_langsmith/entities/langsmith_trace_entity.py
diff --git a/api/core/ops/langsmith_trace/langsmith_trace.py b/api/providers/trace/trace-langsmith/src/dify_trace_langsmith/langsmith_trace.py
similarity index 99%
rename from api/core/ops/langsmith_trace/langsmith_trace.py
rename to api/providers/trace/trace-langsmith/src/dify_trace_langsmith/langsmith_trace.py
index d960038f15..145bd70dbc 100644
--- a/api/core/ops/langsmith_trace/langsmith_trace.py
+++ b/api/providers/trace/trace-langsmith/src/dify_trace_langsmith/langsmith_trace.py
@@ -9,7 +9,6 @@ from langsmith.schemas import RunBase
 from sqlalchemy.orm import sessionmaker
 
 from core.ops.base_trace_instance import BaseTraceInstance
-from core.ops.entities.config_entity import LangSmithConfig
 from core.ops.entities.trace_entity import (
     BaseTraceInfo,
     DatasetRetrievalTraceInfo,
@@ -21,13 +20,14 @@ from core.ops.entities.trace_entity import (
     TraceTaskName,
     WorkflowTraceInfo,
 )
-from core.ops.langsmith_trace.entities.langsmith_trace_entity import (
+from core.ops.utils import filter_none_values, generate_dotted_order
+from core.repositories import DifyCoreRepositoryFactory
+from dify_trace_langsmith.config import LangSmithConfig
+from dify_trace_langsmith.entities.langsmith_trace_entity import (
     LangSmithRunModel,
     LangSmithRunType,
     LangSmithRunUpdateModel,
 )
-from core.ops.utils import filter_none_values, generate_dotted_order
-from core.repositories import DifyCoreRepositoryFactory
 from extensions.ext_database import db
 from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionMetadataKey
 from models import EndUser, MessageFile, WorkflowNodeExecutionTriggeredFrom
diff --git a/api/core/ops/weave_trace/__init__.py b/api/providers/trace/trace-langsmith/src/dify_trace_langsmith/py.typed
similarity index 100%
rename from api/core/ops/weave_trace/__init__.py
rename to api/providers/trace/trace-langsmith/src/dify_trace_langsmith/py.typed
diff --git a/api/tests/unit_tests/core/ops/langsmith_trace/test_langsmith_trace.py b/api/providers/trace/trace-langsmith/tests/unit_tests/langsmith_trace/test_langsmith_trace.py
similarity index 91%
rename from api/tests/unit_tests/core/ops/langsmith_trace/test_langsmith_trace.py
rename to api/providers/trace/trace-langsmith/tests/unit_tests/langsmith_trace/test_langsmith_trace.py
index 34c64c54a1..45e5894e4a 100644
--- a/api/tests/unit_tests/core/ops/langsmith_trace/test_langsmith_trace.py
+++ b/api/providers/trace/trace-langsmith/tests/unit_tests/langsmith_trace/test_langsmith_trace.py
@@ -3,8 +3,14 @@ from datetime import datetime, timedelta
 from unittest.mock import MagicMock
 
 import pytest
+from dify_trace_langsmith.config import LangSmithConfig
+from dify_trace_langsmith.entities.langsmith_trace_entity import (
+    LangSmithRunModel,
+    LangSmithRunType,
+    LangSmithRunUpdateModel,
+)
+from dify_trace_langsmith.langsmith_trace import LangSmithDataTrace
 
-from core.ops.entities.config_entity import LangSmithConfig
 from core.ops.entities.trace_entity import (
     DatasetRetrievalTraceInfo,
     GenerateNameTraceInfo,
@@ -15,12 +21,6 @@ from core.ops.entities.trace_entity import (
     TraceTaskName,
     WorkflowTraceInfo,
 )
-from core.ops.langsmith_trace.entities.langsmith_trace_entity import (
-    LangSmithRunModel,
-    LangSmithRunType,
-    LangSmithRunUpdateModel,
-)
-from core.ops.langsmith_trace.langsmith_trace import LangSmithDataTrace
 from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionMetadataKey
 from models import EndUser
 
@@ -38,7 +38,7 @@ def langsmith_config():
 def trace_instance(langsmith_config, monkeypatch):
     # Mock LangSmith client
     mock_client = MagicMock()
-    monkeypatch.setattr("core.ops.langsmith_trace.langsmith_trace.Client", lambda **kwargs: mock_client)
+    monkeypatch.setattr("dify_trace_langsmith.langsmith_trace.Client", lambda **kwargs: mock_client)
 
     instance = LangSmithDataTrace(langsmith_config)
     return instance
@@ -46,7 +46,7 @@ def trace_instance(langsmith_config, monkeypatch):
 
 def test_init(langsmith_config, monkeypatch):
     mock_client_class = MagicMock()
-    monkeypatch.setattr("core.ops.langsmith_trace.langsmith_trace.Client", mock_client_class)
+    monkeypatch.setattr("dify_trace_langsmith.langsmith_trace.Client", mock_client_class)
     monkeypatch.setenv("FILES_URL", "http://test.url")
 
     instance = LangSmithDataTrace(langsmith_config)
@@ -138,8 +138,8 @@ def test_workflow_trace(trace_instance, monkeypatch):
 
     # Mock dependencies
     mock_session = MagicMock()
-    monkeypatch.setattr("core.ops.langsmith_trace.langsmith_trace.sessionmaker", lambda bind: lambda: mock_session)
-    monkeypatch.setattr("core.ops.langsmith_trace.langsmith_trace.db", MagicMock(engine="engine"))
+    monkeypatch.setattr("dify_trace_langsmith.langsmith_trace.sessionmaker", lambda bind: lambda: mock_session)
+    monkeypatch.setattr("dify_trace_langsmith.langsmith_trace.db", MagicMock(engine="engine"))
 
     # Mock node executions
     node_llm = MagicMock()
@@ -188,7 +188,7 @@ def test_workflow_trace(trace_instance, monkeypatch):
 
     mock_factory = MagicMock()
     mock_factory.create_workflow_node_execution_repository.return_value = repo
-    monkeypatch.setattr("core.ops.langsmith_trace.langsmith_trace.DifyCoreRepositoryFactory", mock_factory)
+    monkeypatch.setattr("dify_trace_langsmith.langsmith_trace.DifyCoreRepositoryFactory", mock_factory)
 
     monkeypatch.setattr(trace_instance, "get_service_account_with_tenant", lambda app_id: MagicMock())
 
@@ -252,13 +252,13 @@ def test_workflow_trace_no_start_time(trace_instance, monkeypatch):
     )
 
     mock_session = MagicMock()
-    monkeypatch.setattr("core.ops.langsmith_trace.langsmith_trace.sessionmaker", lambda bind: lambda: mock_session)
-    monkeypatch.setattr("core.ops.langsmith_trace.langsmith_trace.db", MagicMock(engine="engine"))
+    monkeypatch.setattr("dify_trace_langsmith.langsmith_trace.sessionmaker", lambda bind: lambda: mock_session)
+    monkeypatch.setattr("dify_trace_langsmith.langsmith_trace.db", MagicMock(engine="engine"))
     repo = MagicMock()
     repo.get_by_workflow_execution.return_value = []
     mock_factory = MagicMock()
     mock_factory.create_workflow_node_execution_repository.return_value = repo
-    monkeypatch.setattr("core.ops.langsmith_trace.langsmith_trace.DifyCoreRepositoryFactory", mock_factory)
+    monkeypatch.setattr("dify_trace_langsmith.langsmith_trace.DifyCoreRepositoryFactory", mock_factory)
     monkeypatch.setattr(trace_instance, "get_service_account_with_tenant", lambda app_id: MagicMock())
 
     trace_instance.add_run = MagicMock()
@@ -283,8 +283,8 @@ def test_workflow_trace_missing_app_id(trace_instance, monkeypatch):
     trace_info.error = ""
 
     mock_session = MagicMock()
-    monkeypatch.setattr("core.ops.langsmith_trace.langsmith_trace.sessionmaker", lambda bind: lambda: mock_session)
-    monkeypatch.setattr("core.ops.langsmith_trace.langsmith_trace.db", MagicMock(engine="engine"))
+    monkeypatch.setattr("dify_trace_langsmith.langsmith_trace.sessionmaker", lambda bind: lambda: mock_session)
+    monkeypatch.setattr("dify_trace_langsmith.langsmith_trace.db", MagicMock(engine="engine"))
 
     with pytest.raises(ValueError, match="No app_id found in trace_info metadata"):
         trace_instance.workflow_trace(trace_info)
@@ -319,7 +319,7 @@ def test_message_trace(trace_instance, monkeypatch):
     # Mock EndUser lookup
     mock_end_user = MagicMock(spec=EndUser)
     mock_end_user.session_id = "session-id-123"
-    monkeypatch.setattr("core.ops.langsmith_trace.langsmith_trace.db.session.get", lambda model, pk: mock_end_user)
+    monkeypatch.setattr("dify_trace_langsmith.langsmith_trace.db.session.get", lambda model, pk: mock_end_user)
 
     trace_instance.add_run = MagicMock()
 
@@ -567,9 +567,9 @@ def test_workflow_trace_usage_extraction_error(trace_instance, monkeypatch, capl
 
     mock_factory = MagicMock()
     mock_factory.create_workflow_node_execution_repository.return_value = repo
-    monkeypatch.setattr("core.ops.langsmith_trace.langsmith_trace.DifyCoreRepositoryFactory", mock_factory)
-    monkeypatch.setattr("core.ops.langsmith_trace.langsmith_trace.sessionmaker", lambda bind: lambda: MagicMock())
-    monkeypatch.setattr("core.ops.langsmith_trace.langsmith_trace.db", MagicMock(engine="engine"))
+    monkeypatch.setattr("dify_trace_langsmith.langsmith_trace.DifyCoreRepositoryFactory", mock_factory)
+    monkeypatch.setattr("dify_trace_langsmith.langsmith_trace.sessionmaker", lambda bind: lambda: MagicMock())
+    monkeypatch.setattr("dify_trace_langsmith.langsmith_trace.db", MagicMock(engine="engine"))
     monkeypatch.setattr(trace_instance, "get_service_account_with_tenant", lambda app_id: MagicMock())
 
     trace_instance.add_run = MagicMock()
diff --git a/api/providers/trace/trace-langsmith/tests/unit_tests/test_config_entity.py b/api/providers/trace/trace-langsmith/tests/unit_tests/test_config_entity.py
new file mode 100644
index 0000000000..37efaf69cf
--- /dev/null
+++ b/api/providers/trace/trace-langsmith/tests/unit_tests/test_config_entity.py
@@ -0,0 +1,35 @@
+import pytest
+from dify_trace_langsmith.config import LangSmithConfig
+from pydantic import ValidationError
+
+
+class TestLangSmithConfig:
+    """Test cases for LangSmithConfig"""
+
+    def test_valid_config(self):
+        """Test valid LangSmith configuration"""
+        config = LangSmithConfig(api_key="test_key", project="test_project", endpoint="https://custom.smith.com")
+        assert config.api_key == "test_key"
+        assert config.project == "test_project"
+        assert config.endpoint == "https://custom.smith.com"
+
+    def test_default_values(self):
+        """Test default values are set correctly"""
+        config = LangSmithConfig(api_key="key", project="project")
+        assert config.endpoint == "https://api.smith.langchain.com"
+
+    def test_missing_required_fields(self):
+        """Test that required fields are enforced"""
+        with pytest.raises(ValidationError):
+            LangSmithConfig()
+
+        with pytest.raises(ValidationError):
+            LangSmithConfig(api_key="key")
+
+        with pytest.raises(ValidationError):
+            LangSmithConfig(project="project")
+
+    def test_endpoint_validation_https_only(self):
+        """Test endpoint validation only allows HTTPS"""
+        with pytest.raises(ValidationError, match="URL scheme must be one of"):
+            LangSmithConfig(api_key="key", project="project", endpoint="http://insecure.com")
diff --git a/api/providers/trace/trace-mlflow/pyproject.toml b/api/providers/trace/trace-mlflow/pyproject.toml
new file mode 100644
index 0000000000..fad6002944
--- /dev/null
+++ b/api/providers/trace/trace-mlflow/pyproject.toml
@@ -0,0 +1,10 @@
+[project]
+name = "dify-trace-mlflow"
+version = "0.0.1"
+dependencies = [
+    "mlflow-skinny>=3.11.1",
+]
+description = "Dify ops tracing provider (MLflow / Databricks)."
+
+[tool.setuptools.packages.find]
+where = ["src"]
diff --git a/api/core/ops/weave_trace/entities/__init__.py b/api/providers/trace/trace-mlflow/src/dify_trace_mlflow/__init__.py
similarity index 100%
rename from api/core/ops/weave_trace/entities/__init__.py
rename to api/providers/trace/trace-mlflow/src/dify_trace_mlflow/__init__.py
diff --git a/api/providers/trace/trace-mlflow/src/dify_trace_mlflow/config.py b/api/providers/trace/trace-mlflow/src/dify_trace_mlflow/config.py
new file mode 100644
index 0000000000..84914165e3
--- /dev/null
+++ b/api/providers/trace/trace-mlflow/src/dify_trace_mlflow/config.py
@@ -0,0 +1,46 @@
+from pydantic import ValidationInfo, field_validator
+
+from core.ops.entities.config_entity import BaseTracingConfig
+from core.ops.utils import validate_integer_id, validate_url_with_path
+
+
+class MLflowConfig(BaseTracingConfig):
+    """
+    Model class for MLflow tracing config.
+    """
+
+    tracking_uri: str = "http://localhost:5000"
+    experiment_id: str = "0"  # Default experiment id in MLflow is 0
+    username: str | None = None
+    password: str | None = None
+
+    @field_validator("tracking_uri")
+    @classmethod
+    def tracking_uri_validator(cls, v, info: ValidationInfo):
+        if isinstance(v, str) and v.startswith("databricks"):
+            raise ValueError(
+                "Please use Databricks tracing config below to record traces to Databricks-managed MLflow instances."
+            )
+        return validate_url_with_path(v, "http://localhost:5000")
+
+    @field_validator("experiment_id")
+    @classmethod
+    def experiment_id_validator(cls, v, info: ValidationInfo):
+        return validate_integer_id(v)
+
+
+class DatabricksConfig(BaseTracingConfig):
+    """
+    Model class for Databricks (Databricks-managed MLflow) tracing config.
+    """
+
+    experiment_id: str
+    host: str
+    client_id: str | None = None
+    client_secret: str | None = None
+    personal_access_token: str | None = None
+
+    @field_validator("experiment_id")
+    @classmethod
+    def experiment_id_validator(cls, v, info: ValidationInfo):
+        return validate_integer_id(v)
diff --git a/api/core/ops/mlflow_trace/mlflow_trace.py b/api/providers/trace/trace-mlflow/src/dify_trace_mlflow/mlflow_trace.py
similarity index 99%
rename from api/core/ops/mlflow_trace/mlflow_trace.py
rename to api/providers/trace/trace-mlflow/src/dify_trace_mlflow/mlflow_trace.py
index 87fcaeabcc..4e4c45a532 100644
--- a/api/core/ops/mlflow_trace/mlflow_trace.py
+++ b/api/providers/trace/trace-mlflow/src/dify_trace_mlflow/mlflow_trace.py
@@ -11,7 +11,6 @@ from mlflow.tracing.provider import detach_span_from_context, set_span_in_contex
 from sqlalchemy import select
 
 from core.ops.base_trace_instance import BaseTraceInstance
-from core.ops.entities.config_entity import DatabricksConfig, MLflowConfig
 from core.ops.entities.trace_entity import (
     BaseTraceInfo,
     DatasetRetrievalTraceInfo,
@@ -24,6 +23,7 @@ from core.ops.entities.trace_entity import (
     WorkflowTraceInfo,
 )
 from core.ops.utils import JSON_DICT_ADAPTER
+from dify_trace_mlflow.config import DatabricksConfig, MLflowConfig
 from extensions.ext_database import db
 from graphon.enums import BuiltinNodeTypes
 from models import EndUser
diff --git a/api/providers/trace/trace-mlflow/src/dify_trace_mlflow/py.typed b/api/providers/trace/trace-mlflow/src/dify_trace_mlflow/py.typed
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/tests/unit_tests/core/ops/mlflow_trace/test_mlflow_trace.py b/api/providers/trace/trace-mlflow/tests/unit_tests/mlflow_trace/test_mlflow_trace.py
similarity index 98%
rename from api/tests/unit_tests/core/ops/mlflow_trace/test_mlflow_trace.py
rename to api/providers/trace/trace-mlflow/tests/unit_tests/mlflow_trace/test_mlflow_trace.py
index afc5726ede..20211456e3 100644
--- a/api/tests/unit_tests/core/ops/mlflow_trace/test_mlflow_trace.py
+++ b/api/providers/trace/trace-mlflow/tests/unit_tests/mlflow_trace/test_mlflow_trace.py
@@ -1,4 +1,4 @@
-"""Comprehensive tests for core.ops.mlflow_trace.mlflow_trace module."""
+"""Comprehensive tests for dify_trace_mlflow.mlflow_trace module."""
 
 from __future__ import annotations
 
@@ -9,8 +9,9 @@ from types import SimpleNamespace
 from unittest.mock import MagicMock, patch
 
 import pytest
+from dify_trace_mlflow.config import DatabricksConfig, MLflowConfig
+from dify_trace_mlflow.mlflow_trace import MLflowDataTrace, datetime_to_nanoseconds
 
-from core.ops.entities.config_entity import DatabricksConfig, MLflowConfig
 from core.ops.entities.trace_entity import (
     DatasetRetrievalTraceInfo,
     GenerateNameTraceInfo,
@@ -20,7 +21,6 @@ from core.ops.entities.trace_entity import (
     ToolTraceInfo,
     WorkflowTraceInfo,
 )
-from core.ops.mlflow_trace.mlflow_trace import MLflowDataTrace, datetime_to_nanoseconds
 from graphon.enums import BuiltinNodeTypes
 
 # ── Helpers ──────────────────────────────────────────────────────────────────
@@ -179,7 +179,7 @@ def _make_node(**overrides):
 
 @pytest.fixture
 def mock_mlflow():
-    with patch("core.ops.mlflow_trace.mlflow_trace.mlflow") as mock:
+    with patch("dify_trace_mlflow.mlflow_trace.mlflow") as mock:
         yield mock
 
 
@@ -187,10 +187,10 @@ def mock_mlflow():
 def mock_tracing():
     """Patch all MLflow tracing functions used by the module."""
     with (
-        patch("core.ops.mlflow_trace.mlflow_trace.start_span_no_context") as mock_start,
-        patch("core.ops.mlflow_trace.mlflow_trace.update_current_trace") as mock_update,
-        patch("core.ops.mlflow_trace.mlflow_trace.set_span_in_context") as mock_set,
-        patch("core.ops.mlflow_trace.mlflow_trace.detach_span_from_context") as mock_detach,
+        patch("dify_trace_mlflow.mlflow_trace.start_span_no_context") as mock_start,
+        patch("dify_trace_mlflow.mlflow_trace.update_current_trace") as mock_update,
+        patch("dify_trace_mlflow.mlflow_trace.set_span_in_context") as mock_set,
+        patch("dify_trace_mlflow.mlflow_trace.detach_span_from_context") as mock_detach,
     ):
         yield {
             "start": mock_start,
@@ -202,7 +202,7 @@ def mock_tracing():
 
 @pytest.fixture
 def mock_db():
-    with patch("core.ops.mlflow_trace.mlflow_trace.db") as mock:
+    with patch("dify_trace_mlflow.mlflow_trace.db") as mock:
         yield mock
 
 
diff --git a/api/providers/trace/trace-opik/pyproject.toml b/api/providers/trace/trace-opik/pyproject.toml
new file mode 100644
index 0000000000..874997168e
--- /dev/null
+++ b/api/providers/trace/trace-opik/pyproject.toml
@@ -0,0 +1,10 @@
+[project]
+name = "dify-trace-opik"
+version = "0.0.1"
+dependencies = [
+    "opik~=1.11.2",
+]
+description = "Dify ops tracing provider (Opik)."
+
+[tool.setuptools.packages.find]
+where = ["src"]
diff --git a/api/providers/trace/trace-opik/src/dify_trace_opik/__init__.py b/api/providers/trace/trace-opik/src/dify_trace_opik/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/providers/trace/trace-opik/src/dify_trace_opik/config.py b/api/providers/trace/trace-opik/src/dify_trace_opik/config.py
new file mode 100644
index 0000000000..c16ff1d903
--- /dev/null
+++ b/api/providers/trace/trace-opik/src/dify_trace_opik/config.py
@@ -0,0 +1,25 @@
+from pydantic import ValidationInfo, field_validator
+
+from core.ops.entities.config_entity import BaseTracingConfig
+from core.ops.utils import validate_url_with_path
+
+
+class OpikConfig(BaseTracingConfig):
+    """
+    Model class for Opik tracing config.
+    """
+
+    api_key: str | None = None
+    project: str | None = None
+    workspace: str | None = None
+    url: str = "https://www.comet.com/opik/api/"
+
+    @field_validator("project")
+    @classmethod
+    def project_validator(cls, v, info: ValidationInfo):
+        return cls.validate_project_field(v, "Default Project")
+
+    @field_validator("url")
+    @classmethod
+    def url_validator(cls, v, info: ValidationInfo):
+        return validate_url_with_path(v, "https://www.comet.com/opik/api/", required_suffix="/api/")
diff --git a/api/core/ops/opik_trace/opik_trace.py b/api/providers/trace/trace-opik/src/dify_trace_opik/opik_trace.py
similarity index 99%
rename from api/core/ops/opik_trace/opik_trace.py
rename to api/providers/trace/trace-opik/src/dify_trace_opik/opik_trace.py
index 672efe45bd..2d124ac989 100644
--- a/api/core/ops/opik_trace/opik_trace.py
+++ b/api/providers/trace/trace-opik/src/dify_trace_opik/opik_trace.py
@@ -10,7 +10,6 @@ from opik.id_helpers import uuid4_to_uuid7
 from sqlalchemy.orm import sessionmaker
 
 from core.ops.base_trace_instance import BaseTraceInstance
-from core.ops.entities.config_entity import OpikConfig
 from core.ops.entities.trace_entity import (
     BaseTraceInfo,
     DatasetRetrievalTraceInfo,
@@ -23,6 +22,7 @@ from core.ops.entities.trace_entity import (
     WorkflowTraceInfo,
 )
 from core.repositories import DifyCoreRepositoryFactory
+from dify_trace_opik.config import OpikConfig
 from extensions.ext_database import db
 from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionMetadataKey
 from models import EndUser, MessageFile, WorkflowNodeExecutionTriggeredFrom
diff --git a/api/providers/trace/trace-opik/src/dify_trace_opik/py.typed b/api/providers/trace/trace-opik/src/dify_trace_opik/py.typed
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/tests/unit_tests/core/ops/opik_trace/test_opik_trace.py b/api/providers/trace/trace-opik/tests/unit_tests/opik_trace/test_opik_trace.py
similarity index 93%
rename from api/tests/unit_tests/core/ops/opik_trace/test_opik_trace.py
rename to api/providers/trace/trace-opik/tests/unit_tests/opik_trace/test_opik_trace.py
index c02ac413f2..eefed3c78c 100644
--- a/api/tests/unit_tests/core/ops/opik_trace/test_opik_trace.py
+++ b/api/providers/trace/trace-opik/tests/unit_tests/opik_trace/test_opik_trace.py
@@ -5,8 +5,9 @@ from types import SimpleNamespace
 from unittest.mock import MagicMock
 
 import pytest
+from dify_trace_opik.config import OpikConfig
+from dify_trace_opik.opik_trace import OpikDataTrace, prepare_opik_uuid, wrap_dict, wrap_metadata
 
-from core.ops.entities.config_entity import OpikConfig
 from core.ops.entities.trace_entity import (
     DatasetRetrievalTraceInfo,
     GenerateNameTraceInfo,
@@ -17,7 +18,6 @@ from core.ops.entities.trace_entity import (
     TraceTaskName,
     WorkflowTraceInfo,
 )
-from core.ops.opik_trace.opik_trace import OpikDataTrace, prepare_opik_uuid, wrap_dict, wrap_metadata
 from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionMetadataKey
 from models import EndUser
 from models.enums import MessageStatus
@@ -37,7 +37,7 @@ def opik_config():
 @pytest.fixture
 def trace_instance(opik_config, monkeypatch):
     mock_client = MagicMock()
-    monkeypatch.setattr("core.ops.opik_trace.opik_trace.Opik", lambda **kwargs: mock_client)
+    monkeypatch.setattr("dify_trace_opik.opik_trace.Opik", lambda **kwargs: mock_client)
 
     instance = OpikDataTrace(opik_config)
     return instance
@@ -67,7 +67,7 @@ def test_prepare_opik_uuid():
 
 def test_init(opik_config, monkeypatch):
     mock_opik = MagicMock()
-    monkeypatch.setattr("core.ops.opik_trace.opik_trace.Opik", mock_opik)
+    monkeypatch.setattr("dify_trace_opik.opik_trace.Opik", mock_opik)
     monkeypatch.setenv("FILES_URL", "http://test.url")
 
     instance = OpikDataTrace(opik_config)
@@ -166,8 +166,8 @@ def test_workflow_trace_with_message_id(trace_instance, monkeypatch):
     )
 
     mock_session = MagicMock()
-    monkeypatch.setattr("core.ops.opik_trace.opik_trace.sessionmaker", lambda bind: lambda: mock_session)
-    monkeypatch.setattr("core.ops.opik_trace.opik_trace.db", MagicMock(engine="engine"))
+    monkeypatch.setattr("dify_trace_opik.opik_trace.sessionmaker", lambda bind: lambda: mock_session)
+    monkeypatch.setattr("dify_trace_opik.opik_trace.db", MagicMock(engine="engine"))
 
     node_llm = MagicMock()
     node_llm.id = LLM_NODE_ID
@@ -203,7 +203,7 @@ def test_workflow_trace_with_message_id(trace_instance, monkeypatch):
 
     mock_factory = MagicMock()
     mock_factory.create_workflow_node_execution_repository.return_value = repo
-    monkeypatch.setattr("core.ops.opik_trace.opik_trace.DifyCoreRepositoryFactory", mock_factory)
+    monkeypatch.setattr("dify_trace_opik.opik_trace.DifyCoreRepositoryFactory", mock_factory)
 
     monkeypatch.setattr(trace_instance, "get_service_account_with_tenant", lambda app_id: MagicMock())
 
@@ -250,13 +250,13 @@ def test_workflow_trace_no_message_id(trace_instance, monkeypatch):
         error="",
     )
 
-    monkeypatch.setattr("core.ops.opik_trace.opik_trace.sessionmaker", lambda bind: lambda: MagicMock())
-    monkeypatch.setattr("core.ops.opik_trace.opik_trace.db", MagicMock(engine="engine"))
+    monkeypatch.setattr("dify_trace_opik.opik_trace.sessionmaker", lambda bind: lambda: MagicMock())
+    monkeypatch.setattr("dify_trace_opik.opik_trace.db", MagicMock(engine="engine"))
     repo = MagicMock()
     repo.get_by_workflow_execution.return_value = []
     mock_factory = MagicMock()
     mock_factory.create_workflow_node_execution_repository.return_value = repo
-    monkeypatch.setattr("core.ops.opik_trace.opik_trace.DifyCoreRepositoryFactory", mock_factory)
+    monkeypatch.setattr("dify_trace_opik.opik_trace.DifyCoreRepositoryFactory", mock_factory)
     monkeypatch.setattr(trace_instance, "get_service_account_with_tenant", lambda app_id: MagicMock())
 
     trace_instance.add_trace = MagicMock()
@@ -286,8 +286,8 @@ def test_workflow_trace_missing_app_id(trace_instance, monkeypatch):
         workflow_app_log_id="339760b2-4b94-4532-8c81-133a97e4680e",
         error="",
     )
-    monkeypatch.setattr("core.ops.opik_trace.opik_trace.sessionmaker", lambda bind: lambda: MagicMock())
-    monkeypatch.setattr("core.ops.opik_trace.opik_trace.db", MagicMock(engine="engine"))
+    monkeypatch.setattr("dify_trace_opik.opik_trace.sessionmaker", lambda bind: lambda: MagicMock())
+    monkeypatch.setattr("dify_trace_opik.opik_trace.db", MagicMock(engine="engine"))
 
     with pytest.raises(ValueError, match="No app_id found in trace_info metadata"):
         trace_instance.workflow_trace(trace_info)
@@ -373,7 +373,7 @@ def test_message_trace_with_end_user(trace_instance, monkeypatch):
     mock_end_user = MagicMock(spec=EndUser)
     mock_end_user.session_id = "session-id-123"
 
-    monkeypatch.setattr("core.ops.opik_trace.opik_trace.db.session.get", lambda model, pk: mock_end_user)
+    monkeypatch.setattr("dify_trace_opik.opik_trace.db.session.get", lambda model, pk: mock_end_user)
 
     trace_instance.add_trace = MagicMock(return_value=MagicMock(id="trace_id_2"))
     trace_instance.add_span = MagicMock()
@@ -658,9 +658,9 @@ def test_workflow_trace_usage_extraction_error_fixed(trace_instance, monkeypatch
     repo.get_by_workflow_execution.return_value = [node]
     mock_factory = MagicMock()
     mock_factory.create_workflow_node_execution_repository.return_value = repo
-    monkeypatch.setattr("core.ops.opik_trace.opik_trace.DifyCoreRepositoryFactory", mock_factory)
-    monkeypatch.setattr("core.ops.opik_trace.opik_trace.sessionmaker", lambda bind: lambda: MagicMock())
-    monkeypatch.setattr("core.ops.opik_trace.opik_trace.db", MagicMock(engine="engine"))
+    monkeypatch.setattr("dify_trace_opik.opik_trace.DifyCoreRepositoryFactory", mock_factory)
+    monkeypatch.setattr("dify_trace_opik.opik_trace.sessionmaker", lambda bind: lambda: MagicMock())
+    monkeypatch.setattr("dify_trace_opik.opik_trace.db", MagicMock(engine="engine"))
     monkeypatch.setattr(trace_instance, "get_service_account_with_tenant", lambda app_id: MagicMock())
 
     trace_instance.add_trace = MagicMock()
diff --git a/api/providers/trace/trace-opik/tests/unit_tests/test_config_entity.py b/api/providers/trace/trace-opik/tests/unit_tests/test_config_entity.py
new file mode 100644
index 0000000000..5a54b70bba
--- /dev/null
+++ b/api/providers/trace/trace-opik/tests/unit_tests/test_config_entity.py
@@ -0,0 +1,48 @@
+import pytest
+from dify_trace_opik.config import OpikConfig
+from pydantic import ValidationError
+
+
+class TestOpikConfig:
+    """Test cases for OpikConfig"""
+
+    def test_valid_config(self):
+        """Test valid Opik configuration"""
+        config = OpikConfig(
+            api_key="test_key",
+            project="test_project",
+            workspace="test_workspace",
+            url="https://custom.comet.com/opik/api/",
+        )
+        assert config.api_key == "test_key"
+        assert config.project == "test_project"
+        assert config.workspace == "test_workspace"
+        assert config.url == "https://custom.comet.com/opik/api/"
+
+    def test_default_values(self):
+        """Test default values are set correctly"""
+        config = OpikConfig()
+        assert config.api_key is None
+        assert config.project is None
+        assert config.workspace is None
+        assert config.url == "https://www.comet.com/opik/api/"
+
+    def test_project_validation_empty(self):
+        """Test project validation with empty value"""
+        config = OpikConfig(project="")
+        assert config.project == "Default Project"
+
+    def test_url_validation_empty(self):
+        """Test URL validation with empty value"""
+        config = OpikConfig(url="")
+        assert config.url == "https://www.comet.com/opik/api/"
+
+    def test_url_validation_missing_suffix(self):
+        """Test URL validation requires /api/ suffix"""
+        with pytest.raises(ValidationError, match="URL should end with /api/"):
+            OpikConfig(url="https://custom.comet.com/opik/")
+
+    def test_url_validation_invalid_scheme(self):
+        """Test URL validation rejects invalid schemes"""
+        with pytest.raises(ValidationError, match="URL must start with https:// or http://"):
+            OpikConfig(url="ftp://custom.comet.com/opik/api/")
diff --git a/api/tests/unit_tests/core/ops/test_opik_trace.py b/api/providers/trace/trace-opik/tests/unit_tests/test_opik_trace.py
similarity index 94%
rename from api/tests/unit_tests/core/ops/test_opik_trace.py
rename to api/providers/trace/trace-opik/tests/unit_tests/test_opik_trace.py
index ad9d0846be..fba290f5b8 100644
--- a/api/tests/unit_tests/core/ops/test_opik_trace.py
+++ b/api/providers/trace/trace-opik/tests/unit_tests/test_opik_trace.py
@@ -14,8 +14,9 @@ import uuid
 from datetime import datetime
 from unittest.mock import MagicMock, patch
 
+from dify_trace_opik.opik_trace import OpikDataTrace, _seed_to_uuid4, prepare_opik_uuid
+
 from core.ops.entities.trace_entity import TraceTaskName, WorkflowTraceInfo
-from core.ops.opik_trace.opik_trace import OpikDataTrace, _seed_to_uuid4, prepare_opik_uuid
 
 # A stable UUID4 used as the workflow_run_id throughout all tests.
 _WORKFLOW_RUN_ID = "a3f1b2c4-d5e6-4f78-9a0b-c1d2e3f4a5b6"
@@ -56,8 +57,8 @@ def _make_workflow_trace_info(
 
 def _make_opik_trace_instance() -> OpikDataTrace:
     """Construct an OpikDataTrace with the Opik SDK client mocked out."""
-    with patch("core.ops.opik_trace.opik_trace.Opik"):
-        from core.ops.entities.config_entity import OpikConfig
+    with patch("dify_trace_opik.opik_trace.Opik"):
+        from dify_trace_opik.config import OpikConfig
 
         config = OpikConfig(api_key="key", project="test-project", url="https://www.comet.com/opik/api/")
         instance = OpikDataTrace(config)
@@ -133,10 +134,10 @@ class TestWorkflowTraceWithoutMessageId:
         fake_repo.get_by_workflow_execution.return_value = node_executions or []
 
         with (
-            patch("core.ops.opik_trace.opik_trace.db") as mock_db,
-            patch("core.ops.opik_trace.opik_trace.sessionmaker"),
+            patch("dify_trace_opik.opik_trace.db") as mock_db,
+            patch("dify_trace_opik.opik_trace.sessionmaker"),
             patch(
-                "core.ops.opik_trace.opik_trace.DifyCoreRepositoryFactory.create_workflow_node_execution_repository",
+                "dify_trace_opik.opik_trace.DifyCoreRepositoryFactory.create_workflow_node_execution_repository",
                 return_value=fake_repo,
             ),
         ):
@@ -265,10 +266,10 @@ class TestWorkflowTraceWithMessageId:
         fake_repo.get_by_workflow_execution.return_value = node_executions or []
 
         with (
-            patch("core.ops.opik_trace.opik_trace.db") as mock_db,
-            patch("core.ops.opik_trace.opik_trace.sessionmaker"),
+            patch("dify_trace_opik.opik_trace.db") as mock_db,
+            patch("dify_trace_opik.opik_trace.sessionmaker"),
             patch(
-                "core.ops.opik_trace.opik_trace.DifyCoreRepositoryFactory.create_workflow_node_execution_repository",
+                "dify_trace_opik.opik_trace.DifyCoreRepositoryFactory.create_workflow_node_execution_repository",
                 return_value=fake_repo,
             ),
         ):
diff --git a/api/providers/trace/trace-tencent/pyproject.toml b/api/providers/trace/trace-tencent/pyproject.toml
new file mode 100644
index 0000000000..eab06fc708
--- /dev/null
+++ b/api/providers/trace/trace-tencent/pyproject.toml
@@ -0,0 +1,14 @@
+[project]
+name = "dify-trace-tencent"
+version = "0.0.1"
+dependencies = [
+    # versions inherited from parent
+    "opentelemetry-api",
+    "opentelemetry-exporter-otlp-proto-grpc",
+    "opentelemetry-sdk",
+    "opentelemetry-semantic-conventions",
+]
+description = "Dify ops tracing provider (Tencent APM)."
+
+[tool.setuptools.packages.find]
+where = ["src"]
diff --git a/api/providers/trace/trace-tencent/src/dify_trace_tencent/__init__.py b/api/providers/trace/trace-tencent/src/dify_trace_tencent/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/core/ops/tencent_trace/client.py b/api/providers/trace/trace-tencent/src/dify_trace_tencent/client.py
similarity index 100%
rename from api/core/ops/tencent_trace/client.py
rename to api/providers/trace/trace-tencent/src/dify_trace_tencent/client.py
diff --git a/api/providers/trace/trace-tencent/src/dify_trace_tencent/config.py b/api/providers/trace/trace-tencent/src/dify_trace_tencent/config.py
new file mode 100644
index 0000000000..398e6c55a8
--- /dev/null
+++ b/api/providers/trace/trace-tencent/src/dify_trace_tencent/config.py
@@ -0,0 +1,30 @@
+from pydantic import ValidationInfo, field_validator
+
+from core.ops.entities.config_entity import BaseTracingConfig
+
+
+class TencentConfig(BaseTracingConfig):
+    """
+    Tencent APM tracing config
+    """
+
+    token: str
+    endpoint: str
+    service_name: str
+
+    @field_validator("token")
+    @classmethod
+    def token_validator(cls, v, info: ValidationInfo):
+        if not v or v.strip() == "":
+            raise ValueError("Token cannot be empty")
+        return v
+
+    @field_validator("endpoint")
+    @classmethod
+    def endpoint_validator(cls, v, info: ValidationInfo):
+        return cls.validate_endpoint_url(v, "https://apm.tencentcloudapi.com")
+
+    @field_validator("service_name")
+    @classmethod
+    def service_name_validator(cls, v, info: ValidationInfo):
+        return cls.validate_project_field(v, "dify_app")
diff --git a/api/core/ops/tencent_trace/entities/__init__.py b/api/providers/trace/trace-tencent/src/dify_trace_tencent/entities/__init__.py
similarity index 100%
rename from api/core/ops/tencent_trace/entities/__init__.py
rename to api/providers/trace/trace-tencent/src/dify_trace_tencent/entities/__init__.py
diff --git a/api/core/ops/tencent_trace/entities/semconv.py b/api/providers/trace/trace-tencent/src/dify_trace_tencent/entities/semconv.py
similarity index 100%
rename from api/core/ops/tencent_trace/entities/semconv.py
rename to api/providers/trace/trace-tencent/src/dify_trace_tencent/entities/semconv.py
diff --git a/api/core/ops/tencent_trace/entities/tencent_trace_entity.py b/api/providers/trace/trace-tencent/src/dify_trace_tencent/entities/tencent_trace_entity.py
similarity index 100%
rename from api/core/ops/tencent_trace/entities/tencent_trace_entity.py
rename to api/providers/trace/trace-tencent/src/dify_trace_tencent/entities/tencent_trace_entity.py
diff --git a/api/providers/trace/trace-tencent/src/dify_trace_tencent/py.typed b/api/providers/trace/trace-tencent/src/dify_trace_tencent/py.typed
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/core/ops/tencent_trace/span_builder.py b/api/providers/trace/trace-tencent/src/dify_trace_tencent/span_builder.py
similarity index 98%
rename from api/core/ops/tencent_trace/span_builder.py
rename to api/providers/trace/trace-tencent/src/dify_trace_tencent/span_builder.py
index 36878dc58f..763a85ffd7 100644
--- a/api/core/ops/tencent_trace/span_builder.py
+++ b/api/providers/trace/trace-tencent/src/dify_trace_tencent/span_builder.py
@@ -14,7 +14,8 @@ from core.ops.entities.trace_entity import (
     ToolTraceInfo,
     WorkflowTraceInfo,
 )
-from core.ops.tencent_trace.entities.semconv import (
+from core.rag.models.document import Document
+from dify_trace_tencent.entities.semconv import (
     GEN_AI_COMPLETION,
     GEN_AI_FRAMEWORK,
     GEN_AI_IS_ENTRY,
@@ -38,9 +39,8 @@ from core.ops.tencent_trace.entities.semconv import (
     TOOL_PARAMETERS,
     GenAISpanKind,
 )
-from core.ops.tencent_trace.entities.tencent_trace_entity import SpanData
-from core.ops.tencent_trace.utils import TencentTraceUtils
-from core.rag.models.document import Document
+from dify_trace_tencent.entities.tencent_trace_entity import SpanData
+from dify_trace_tencent.utils import TencentTraceUtils
 from graphon.entities import WorkflowNodeExecution
 from graphon.enums import WorkflowNodeExecutionMetadataKey, WorkflowNodeExecutionStatus
 
diff --git a/api/core/ops/tencent_trace/tencent_trace.py b/api/providers/trace/trace-tencent/src/dify_trace_tencent/tencent_trace.py
similarity index 98%
rename from api/core/ops/tencent_trace/tencent_trace.py
rename to api/providers/trace/trace-tencent/src/dify_trace_tencent/tencent_trace.py
index d681b9da80..cfcf6b307e 100644
--- a/api/core/ops/tencent_trace/tencent_trace.py
+++ b/api/providers/trace/trace-tencent/src/dify_trace_tencent/tencent_trace.py
@@ -8,7 +8,6 @@ from sqlalchemy import select
 from sqlalchemy.orm import Session, sessionmaker
 
 from core.ops.base_trace_instance import BaseTraceInstance
-from core.ops.entities.config_entity import TencentConfig
 from core.ops.entities.trace_entity import (
     BaseTraceInfo,
     DatasetRetrievalTraceInfo,
@@ -19,11 +18,12 @@ from core.ops.entities.trace_entity import (
     ToolTraceInfo,
     WorkflowTraceInfo,
 )
-from core.ops.tencent_trace.client import TencentTraceClient
-from core.ops.tencent_trace.entities.tencent_trace_entity import SpanData
-from core.ops.tencent_trace.span_builder import TencentSpanBuilder
-from core.ops.tencent_trace.utils import TencentTraceUtils
 from core.repositories import SQLAlchemyWorkflowNodeExecutionRepository
+from dify_trace_tencent.client import TencentTraceClient
+from dify_trace_tencent.config import TencentConfig
+from dify_trace_tencent.entities.tencent_trace_entity import SpanData
+from dify_trace_tencent.span_builder import TencentSpanBuilder
+from dify_trace_tencent.utils import TencentTraceUtils
 from extensions.ext_database import db
 from graphon.entities.workflow_node_execution import (
     WorkflowNodeExecution,
diff --git a/api/core/ops/tencent_trace/utils.py b/api/providers/trace/trace-tencent/src/dify_trace_tencent/utils.py
similarity index 100%
rename from api/core/ops/tencent_trace/utils.py
rename to api/providers/trace/trace-tencent/src/dify_trace_tencent/utils.py
diff --git a/api/tests/unit_tests/core/ops/tencent_trace/test_client.py b/api/providers/trace/trace-tencent/tests/unit_tests/tencent_trace/test_client.py
similarity index 98%
rename from api/tests/unit_tests/core/ops/tencent_trace/test_client.py
rename to api/providers/trace/trace-tencent/tests/unit_tests/tencent_trace/test_client.py
index 870c18e53e..1e656e2462 100644
--- a/api/tests/unit_tests/core/ops/tencent_trace/test_client.py
+++ b/api/providers/trace/trace-tencent/tests/unit_tests/tencent_trace/test_client.py
@@ -8,13 +8,12 @@ from types import SimpleNamespace
 from unittest.mock import MagicMock
 
 import pytest
+from dify_trace_tencent import client as client_module
+from dify_trace_tencent.client import TencentTraceClient, _get_opentelemetry_sdk_version
+from dify_trace_tencent.entities.tencent_trace_entity import SpanData
 from opentelemetry.sdk.trace import Event
 from opentelemetry.trace import Status, StatusCode
 
-from core.ops.tencent_trace import client as client_module
-from core.ops.tencent_trace.client import TencentTraceClient, _get_opentelemetry_sdk_version
-from core.ops.tencent_trace.entities.tencent_trace_entity import SpanData
-
 metric_reader_instances: list[DummyMetricReader] = []
 meter_provider_instances: list[DummyMeterProvider] = []
 
diff --git a/api/tests/unit_tests/core/ops/tencent_trace/test_span_builder.py b/api/providers/trace/trace-tencent/tests/unit_tests/tencent_trace/test_span_builder.py
similarity index 89%
rename from api/tests/unit_tests/core/ops/tencent_trace/test_span_builder.py
rename to api/providers/trace/trace-tencent/tests/unit_tests/tencent_trace/test_span_builder.py
index 6113e5c6c8..e850a801f3 100644
--- a/api/tests/unit_tests/core/ops/tencent_trace/test_span_builder.py
+++ b/api/providers/trace/trace-tencent/tests/unit_tests/tencent_trace/test_span_builder.py
@@ -1,15 +1,7 @@
 from datetime import datetime
 from unittest.mock import MagicMock, patch
 
-from opentelemetry.trace import StatusCode
-
-from core.ops.entities.trace_entity import (
-    DatasetRetrievalTraceInfo,
-    MessageTraceInfo,
-    ToolTraceInfo,
-    WorkflowTraceInfo,
-)
-from core.ops.tencent_trace.entities.semconv import (
+from dify_trace_tencent.entities.semconv import (
     GEN_AI_IS_ENTRY,
     GEN_AI_IS_STREAMING_REQUEST,
     GEN_AI_MODEL_NAME,
@@ -23,7 +15,15 @@ from core.ops.tencent_trace.entities.semconv import (
     TOOL_PARAMETERS,
     GenAISpanKind,
 )
-from core.ops.tencent_trace.span_builder import TencentSpanBuilder
+from dify_trace_tencent.span_builder import TencentSpanBuilder
+from opentelemetry.trace import StatusCode
+
+from core.ops.entities.trace_entity import (
+    DatasetRetrievalTraceInfo,
+    MessageTraceInfo,
+    ToolTraceInfo,
+    WorkflowTraceInfo,
+)
 from core.rag.models.document import Document
 from graphon.entities import WorkflowNodeExecution
 from graphon.enums import WorkflowNodeExecutionMetadataKey, WorkflowNodeExecutionStatus
@@ -31,7 +31,7 @@ from graphon.enums import WorkflowNodeExecutionMetadataKey, WorkflowNodeExecutio
 
 class TestTencentSpanBuilder:
     def test_get_time_nanoseconds(self):
-        with patch("core.ops.tencent_trace.utils.TencentTraceUtils.convert_datetime_to_nanoseconds") as mock_convert:
+        with patch("dify_trace_tencent.utils.TencentTraceUtils.convert_datetime_to_nanoseconds") as mock_convert:
             mock_convert.return_value = 123456789
             dt = datetime.now()
             result = TencentSpanBuilder._get_time_nanoseconds(dt)
@@ -48,7 +48,7 @@ class TestTencentSpanBuilder:
         trace_info.workflow_run_outputs = {"answer": "world"}
         trace_info.metadata = {"conversation_id": "conv_id"}
 
-        with patch("core.ops.tencent_trace.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
+        with patch("dify_trace_tencent.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
             mock_convert_id.side_effect = [1, 2]  # workflow_span_id, message_span_id
             with patch.object(TencentSpanBuilder, "_get_time_nanoseconds", return_value=100):
                 spans = TencentSpanBuilder.build_workflow_spans(trace_info, 123, "user_1")
@@ -70,7 +70,7 @@ class TestTencentSpanBuilder:
         trace_info.workflow_run_outputs = {}
         trace_info.metadata = {}  # No conversation_id
 
-        with patch("core.ops.tencent_trace.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
+        with patch("dify_trace_tencent.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
             mock_convert_id.return_value = 1
             with patch.object(TencentSpanBuilder, "_get_time_nanoseconds", return_value=100):
                 spans = TencentSpanBuilder.build_workflow_spans(trace_info, 123, "user_1")
@@ -98,7 +98,7 @@ class TestTencentSpanBuilder:
         }
         node_execution.outputs = {"text": "world"}
 
-        with patch("core.ops.tencent_trace.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
+        with patch("dify_trace_tencent.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
             mock_convert_id.return_value = 456
             with patch.object(TencentSpanBuilder, "_get_time_nanoseconds", return_value=100):
                 span = TencentSpanBuilder.build_workflow_llm_span(123, 1, trace_info, node_execution)
@@ -123,7 +123,7 @@ class TestTencentSpanBuilder:
             "usage": {"prompt_tokens": 15, "completion_tokens": 25, "total_tokens": 40},
         }
 
-        with patch("core.ops.tencent_trace.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
+        with patch("dify_trace_tencent.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
             mock_convert_id.return_value = 456
             with patch.object(TencentSpanBuilder, "_get_time_nanoseconds", return_value=100):
                 span = TencentSpanBuilder.build_workflow_llm_span(123, 1, trace_info, node_execution)
@@ -142,7 +142,7 @@ class TestTencentSpanBuilder:
         trace_info.metadata = {"conversation_id": "conv_id"}
         trace_info.is_streaming_request = True
 
-        with patch("core.ops.tencent_trace.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
+        with patch("dify_trace_tencent.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
             mock_convert_id.return_value = 789
             with patch.object(TencentSpanBuilder, "_get_time_nanoseconds", return_value=100):
                 span = TencentSpanBuilder.build_message_span(trace_info, 123, "user_1")
@@ -162,7 +162,7 @@ class TestTencentSpanBuilder:
         trace_info.metadata = {}
         trace_info.is_streaming_request = False
 
-        with patch("core.ops.tencent_trace.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
+        with patch("dify_trace_tencent.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
             mock_convert_id.return_value = 789
             with patch.object(TencentSpanBuilder, "_get_time_nanoseconds", return_value=100):
                 span = TencentSpanBuilder.build_message_span(trace_info, 123, "user_1")
@@ -182,7 +182,7 @@ class TestTencentSpanBuilder:
         trace_info.tool_inputs = {"i": 2}
         trace_info.tool_outputs = "result"
 
-        with patch("core.ops.tencent_trace.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
+        with patch("dify_trace_tencent.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
             mock_convert_id.return_value = 101
             with patch.object(TencentSpanBuilder, "_get_time_nanoseconds", return_value=100):
                 span = TencentSpanBuilder.build_tool_span(trace_info, 123, 1)
@@ -204,7 +204,7 @@ class TestTencentSpanBuilder:
         )
         trace_info.documents = [doc]
 
-        with patch("core.ops.tencent_trace.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
+        with patch("dify_trace_tencent.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
             mock_convert_id.return_value = 202
             with patch.object(TencentSpanBuilder, "_get_time_nanoseconds", return_value=100):
                 span = TencentSpanBuilder.build_retrieval_span(trace_info, 123, 1)
@@ -222,7 +222,7 @@ class TestTencentSpanBuilder:
         trace_info.end_time = datetime.now()
         trace_info.documents = []
 
-        with patch("core.ops.tencent_trace.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
+        with patch("dify_trace_tencent.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
             mock_convert_id.return_value = 202
             with patch.object(TencentSpanBuilder, "_get_time_nanoseconds", return_value=100):
                 span = TencentSpanBuilder.build_retrieval_span(trace_info, 123, 1)
@@ -264,7 +264,7 @@ class TestTencentSpanBuilder:
         node_execution.created_at = datetime.now()
         node_execution.finished_at = datetime.now()
 
-        with patch("core.ops.tencent_trace.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
+        with patch("dify_trace_tencent.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
             mock_convert_id.return_value = 303
             with patch.object(TencentSpanBuilder, "_get_time_nanoseconds", return_value=100):
                 span = TencentSpanBuilder.build_workflow_retrieval_span(123, 1, trace_info, node_execution)
@@ -286,7 +286,7 @@ class TestTencentSpanBuilder:
         node_execution.created_at = datetime.now()
         node_execution.finished_at = datetime.now()
 
-        with patch("core.ops.tencent_trace.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
+        with patch("dify_trace_tencent.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
             mock_convert_id.return_value = 303
             with patch.object(TencentSpanBuilder, "_get_time_nanoseconds", return_value=100):
                 span = TencentSpanBuilder.build_workflow_retrieval_span(123, 1, trace_info, node_execution)
@@ -307,7 +307,7 @@ class TestTencentSpanBuilder:
         node_execution.created_at = datetime.now()
         node_execution.finished_at = datetime.now()
 
-        with patch("core.ops.tencent_trace.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
+        with patch("dify_trace_tencent.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
             mock_convert_id.return_value = 404
             with patch.object(TencentSpanBuilder, "_get_time_nanoseconds", return_value=100):
                 span = TencentSpanBuilder.build_workflow_tool_span(123, 1, trace_info, node_execution)
@@ -329,7 +329,7 @@ class TestTencentSpanBuilder:
         node_execution.created_at = datetime.now()
         node_execution.finished_at = datetime.now()
 
-        with patch("core.ops.tencent_trace.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
+        with patch("dify_trace_tencent.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
             mock_convert_id.return_value = 404
             with patch.object(TencentSpanBuilder, "_get_time_nanoseconds", return_value=100):
                 span = TencentSpanBuilder.build_workflow_tool_span(123, 1, trace_info, node_execution)
@@ -350,7 +350,7 @@ class TestTencentSpanBuilder:
         node_execution.created_at = datetime.now()
         node_execution.finished_at = datetime.now()
 
-        with patch("core.ops.tencent_trace.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
+        with patch("dify_trace_tencent.utils.TencentTraceUtils.convert_to_span_id") as mock_convert_id:
             mock_convert_id.return_value = 505
             with patch.object(TencentSpanBuilder, "_get_time_nanoseconds", return_value=100):
                 span = TencentSpanBuilder.build_workflow_task_span(123, 1, trace_info, node_execution)
diff --git a/api/tests/unit_tests/core/ops/tencent_trace/test_tencent_trace.py b/api/providers/trace/trace-tencent/tests/unit_tests/tencent_trace/test_tencent_trace.py
similarity index 89%
rename from api/tests/unit_tests/core/ops/tencent_trace/test_tencent_trace.py
rename to api/providers/trace/trace-tencent/tests/unit_tests/tencent_trace/test_tencent_trace.py
index 7afd0b824a..a91a0aa558 100644
--- a/api/tests/unit_tests/core/ops/tencent_trace/test_tencent_trace.py
+++ b/api/providers/trace/trace-tencent/tests/unit_tests/tencent_trace/test_tencent_trace.py
@@ -2,8 +2,9 @@ import logging
 from unittest.mock import MagicMock, patch
 
 import pytest
+from dify_trace_tencent.config import TencentConfig
+from dify_trace_tencent.tencent_trace import TencentDataTrace
 
-from core.ops.entities.config_entity import TencentConfig
 from core.ops.entities.trace_entity import (
     DatasetRetrievalTraceInfo,
     GenerateNameTraceInfo,
@@ -13,7 +14,6 @@ from core.ops.entities.trace_entity import (
     ToolTraceInfo,
     WorkflowTraceInfo,
 )
-from core.ops.tencent_trace.tencent_trace import TencentDataTrace
 from graphon.entities import WorkflowNodeExecution
 from graphon.enums import BuiltinNodeTypes
 from models import Account, App, TenantAccountJoin
@@ -28,19 +28,19 @@ def tencent_config():
 
 @pytest.fixture
 def mock_trace_client():
-    with patch("core.ops.tencent_trace.tencent_trace.TencentTraceClient") as mock:
+    with patch("dify_trace_tencent.tencent_trace.TencentTraceClient") as mock:
         yield mock
 
 
 @pytest.fixture
 def mock_span_builder():
-    with patch("core.ops.tencent_trace.tencent_trace.TencentSpanBuilder") as mock:
+    with patch("dify_trace_tencent.tencent_trace.TencentSpanBuilder") as mock:
         yield mock
 
 
 @pytest.fixture
 def mock_trace_utils():
-    with patch("core.ops.tencent_trace.tencent_trace.TencentTraceUtils") as mock:
+    with patch("dify_trace_tencent.tencent_trace.TencentTraceUtils") as mock:
         yield mock
 
 
@@ -198,9 +198,9 @@ class TestTencentDataTrace:
         trace_info.workflow_run_id = "run-id"
 
         with patch(
-            "core.ops.tencent_trace.tencent_trace.TencentTraceUtils.convert_to_trace_id", side_effect=Exception("error")
+            "dify_trace_tencent.tencent_trace.TencentTraceUtils.convert_to_trace_id", side_effect=Exception("error")
         ):
-            with patch("core.ops.tencent_trace.tencent_trace.logger.exception") as mock_log:
+            with patch("dify_trace_tencent.tencent_trace.logger.exception") as mock_log:
                 tencent_data_trace.workflow_trace(trace_info)
                 mock_log.assert_called_once_with("[Tencent APM] Failed to process workflow trace")
 
@@ -230,9 +230,9 @@ class TestTencentDataTrace:
         trace_info = MagicMock(spec=MessageTraceInfo)
 
         with patch(
-            "core.ops.tencent_trace.tencent_trace.TencentTraceUtils.convert_to_trace_id", side_effect=Exception("error")
+            "dify_trace_tencent.tencent_trace.TencentTraceUtils.convert_to_trace_id", side_effect=Exception("error")
         ):
-            with patch("core.ops.tencent_trace.tencent_trace.logger.exception") as mock_log:
+            with patch("dify_trace_tencent.tencent_trace.logger.exception") as mock_log:
                 tencent_data_trace.message_trace(trace_info)
                 mock_log.assert_called_once_with("[Tencent APM] Failed to process message trace")
 
@@ -262,9 +262,9 @@ class TestTencentDataTrace:
         trace_info.message_id = "msg-id"
 
         with patch(
-            "core.ops.tencent_trace.tencent_trace.TencentTraceUtils.convert_to_span_id", side_effect=Exception("error")
+            "dify_trace_tencent.tencent_trace.TencentTraceUtils.convert_to_span_id", side_effect=Exception("error")
         ):
-            with patch("core.ops.tencent_trace.tencent_trace.logger.exception") as mock_log:
+            with patch("dify_trace_tencent.tencent_trace.logger.exception") as mock_log:
                 tencent_data_trace.tool_trace(trace_info)
                 mock_log.assert_called_once_with("[Tencent APM] Failed to process tool trace")
 
@@ -294,22 +294,22 @@ class TestTencentDataTrace:
         trace_info.message_id = "msg-id"
 
         with patch(
-            "core.ops.tencent_trace.tencent_trace.TencentTraceUtils.convert_to_span_id", side_effect=Exception("error")
+            "dify_trace_tencent.tencent_trace.TencentTraceUtils.convert_to_span_id", side_effect=Exception("error")
         ):
-            with patch("core.ops.tencent_trace.tencent_trace.logger.exception") as mock_log:
+            with patch("dify_trace_tencent.tencent_trace.logger.exception") as mock_log:
                 tencent_data_trace.dataset_retrieval_trace(trace_info)
                 mock_log.assert_called_once_with("[Tencent APM] Failed to process dataset retrieval trace")
 
     def test_suggested_question_trace(self, tencent_data_trace):
         trace_info = MagicMock(spec=SuggestedQuestionTraceInfo)
-        with patch("core.ops.tencent_trace.tencent_trace.logger.info") as mock_log:
+        with patch("dify_trace_tencent.tencent_trace.logger.info") as mock_log:
             tencent_data_trace.suggested_question_trace(trace_info)
             mock_log.assert_called_once_with("[Tencent APM] Processing suggested question trace")
 
     def test_suggested_question_trace_exception(self, tencent_data_trace):
         trace_info = MagicMock(spec=SuggestedQuestionTraceInfo)
-        with patch("core.ops.tencent_trace.tencent_trace.logger.info", side_effect=Exception("error")):
-            with patch("core.ops.tencent_trace.tencent_trace.logger.exception") as mock_log:
+        with patch("dify_trace_tencent.tencent_trace.logger.info", side_effect=Exception("error")):
+            with patch("dify_trace_tencent.tencent_trace.logger.exception") as mock_log:
                 tencent_data_trace.suggested_question_trace(trace_info)
                 mock_log.assert_called_once_with("[Tencent APM] Failed to process suggested question trace")
 
@@ -342,7 +342,7 @@ class TestTencentDataTrace:
 
         with patch.object(tencent_data_trace, "_get_workflow_node_executions", return_value=[node]):
             with patch.object(tencent_data_trace, "_build_workflow_node_span", side_effect=Exception("node error")):
-                with patch("core.ops.tencent_trace.tencent_trace.logger.exception") as mock_log:
+                with patch("dify_trace_tencent.tencent_trace.logger.exception") as mock_log:
                     tencent_data_trace._process_workflow_nodes(trace_info, 123)
                     # The exception should be caught by the outer handler since convert_to_span_id is called first
                     mock_log.assert_called_once_with("[Tencent APM] Failed to process workflow nodes")
@@ -351,7 +351,7 @@ class TestTencentDataTrace:
         trace_info = MagicMock(spec=WorkflowTraceInfo)
         mock_trace_utils.convert_to_span_id.side_effect = Exception("outer error")
 
-        with patch("core.ops.tencent_trace.tencent_trace.logger.exception") as mock_log:
+        with patch("dify_trace_tencent.tencent_trace.logger.exception") as mock_log:
             tencent_data_trace._process_workflow_nodes(trace_info, 123)
             mock_log.assert_called_once_with("[Tencent APM] Failed to process workflow nodes")
 
@@ -381,7 +381,7 @@ class TestTencentDataTrace:
         node.id = "n1"
         mock_span_builder.build_workflow_llm_span.side_effect = Exception("error")
 
-        with patch("core.ops.tencent_trace.tencent_trace.logger.debug") as mock_log:
+        with patch("dify_trace_tencent.tencent_trace.logger.debug") as mock_log:
             result = tencent_data_trace._build_workflow_node_span(node, 123, MagicMock(), 456)
             assert result is None
             mock_log.assert_called_once()
@@ -403,15 +403,13 @@ class TestTencentDataTrace:
 
         mock_executions = [MagicMock()]
 
-        with patch("core.ops.tencent_trace.tencent_trace.db") as mock_db:
+        with patch("dify_trace_tencent.tencent_trace.db") as mock_db:
             mock_db.engine = "engine"
-            with patch("core.ops.tencent_trace.tencent_trace.Session") as mock_session_ctx:
+            with patch("dify_trace_tencent.tencent_trace.Session") as mock_session_ctx:
                 session = mock_session_ctx.return_value.__enter__.return_value
                 session.scalar.side_effect = [app, account, tenant_join]
 
-                with patch(
-                    "core.ops.tencent_trace.tencent_trace.SQLAlchemyWorkflowNodeExecutionRepository"
-                ) as mock_repo:
+                with patch("dify_trace_tencent.tencent_trace.SQLAlchemyWorkflowNodeExecutionRepository") as mock_repo:
                     mock_repo.return_value.get_by_workflow_execution.return_value = mock_executions
 
                     results = tencent_data_trace._get_workflow_node_executions(trace_info)
@@ -423,7 +421,7 @@ class TestTencentDataTrace:
         trace_info = MagicMock(spec=WorkflowTraceInfo)
         trace_info.metadata = {}
 
-        with patch("core.ops.tencent_trace.tencent_trace.logger.exception") as mock_log:
+        with patch("dify_trace_tencent.tencent_trace.logger.exception") as mock_log:
             results = tencent_data_trace._get_workflow_node_executions(trace_info)
             assert results == []
             mock_log.assert_called_once()
@@ -432,14 +430,14 @@ class TestTencentDataTrace:
         trace_info = MagicMock(spec=WorkflowTraceInfo)
         trace_info.metadata = {"app_id": "app-1"}
 
-        with patch("core.ops.tencent_trace.tencent_trace.db") as mock_db:
+        with patch("dify_trace_tencent.tencent_trace.db") as mock_db:
             mock_db.init_app = MagicMock()  # Ensure init_app is mocked
             mock_db.engine = "engine"
-            with patch("core.ops.tencent_trace.tencent_trace.Session") as mock_session_ctx:
+            with patch("dify_trace_tencent.tencent_trace.Session") as mock_session_ctx:
                 session = mock_session_ctx.return_value.__enter__.return_value
                 session.scalar.return_value = None
 
-                with patch("core.ops.tencent_trace.tencent_trace.logger.exception") as mock_log:
+                with patch("dify_trace_tencent.tencent_trace.logger.exception") as mock_log:
                     results = tencent_data_trace._get_workflow_node_executions(trace_info)
                     assert results == []
                     mock_log.assert_called_once()
@@ -449,8 +447,8 @@ class TestTencentDataTrace:
         trace_info.tenant_id = "tenant-1"
         trace_info.metadata = {"user_id": "user-1"}
 
-        with patch("core.ops.tencent_trace.tencent_trace.sessionmaker", side_effect=Exception("Database error")):
-            with patch("core.ops.tencent_trace.tencent_trace.db") as mock_db:
+        with patch("dify_trace_tencent.tencent_trace.sessionmaker", side_effect=Exception("Database error")):
+            with patch("dify_trace_tencent.tencent_trace.db") as mock_db:
                 mock_db.init_app = MagicMock()
                 mock_db.engine = MagicMock()
 
@@ -476,8 +474,8 @@ class TestTencentDataTrace:
         trace_info.tenant_id = "t"
         trace_info.metadata = {"user_id": "u"}
 
-        with patch("core.ops.tencent_trace.tencent_trace.sessionmaker", side_effect=Exception("error")):
-            with patch("core.ops.tencent_trace.tencent_trace.logger.exception") as mock_log:
+        with patch("dify_trace_tencent.tencent_trace.sessionmaker", side_effect=Exception("error")):
+            with patch("dify_trace_tencent.tencent_trace.logger.exception") as mock_log:
                 user_id = tencent_data_trace._get_user_id(trace_info)
                 assert user_id == "unknown"
                 mock_log.assert_called_once_with("[Tencent APM] Failed to get user ID")
@@ -519,7 +517,7 @@ class TestTencentDataTrace:
         node.process_data = None
         node.outputs = None
 
-        with patch("core.ops.tencent_trace.tencent_trace.logger.debug") as mock_log:
+        with patch("dify_trace_tencent.tencent_trace.logger.debug") as mock_log:
             tencent_data_trace._record_llm_metrics(node)
             # Should not crash
 
@@ -557,7 +555,7 @@ class TestTencentDataTrace:
         trace_info = MagicMock(spec=MessageTraceInfo)
         trace_info.metadata = None
 
-        with patch("core.ops.tencent_trace.tencent_trace.logger.debug") as mock_log:
+        with patch("dify_trace_tencent.tencent_trace.logger.debug") as mock_log:
             tencent_data_trace._record_message_llm_metrics(trace_info)
             # Should not crash
 
@@ -609,7 +607,7 @@ class TestTencentDataTrace:
         trace_info = MagicMock(spec=WorkflowTraceInfo)
         trace_info.start_time = MagicMock()  # This might cause total_seconds() to fail if not mocked right
 
-        with patch("core.ops.tencent_trace.tencent_trace.logger.debug") as mock_log:
+        with patch("dify_trace_tencent.tencent_trace.logger.debug") as mock_log:
             tencent_data_trace._record_workflow_trace_duration(trace_info)
 
     def test_record_message_trace_duration(self, tencent_data_trace):
@@ -631,7 +629,7 @@ class TestTencentDataTrace:
         trace_info = MagicMock(spec=MessageTraceInfo)
         trace_info.start_time = None
 
-        with patch("core.ops.tencent_trace.tencent_trace.logger.debug") as mock_log:
+        with patch("dify_trace_tencent.tencent_trace.logger.debug") as mock_log:
             tencent_data_trace._record_message_trace_duration(trace_info)
 
     def test_del(self, tencent_data_trace):
@@ -641,6 +639,6 @@ class TestTencentDataTrace:
 
     def test_del_exception(self, tencent_data_trace):
         tencent_data_trace.trace_client.shutdown.side_effect = Exception("error")
-        with patch("core.ops.tencent_trace.tencent_trace.logger.exception") as mock_log:
+        with patch("dify_trace_tencent.tencent_trace.logger.exception") as mock_log:
             tencent_data_trace.__del__()
             mock_log.assert_called_once_with("[Tencent APM] Failed to shutdown trace client during cleanup")
diff --git a/api/tests/unit_tests/core/ops/tencent_trace/test_tencent_trace_utils.py b/api/providers/trace/trace-tencent/tests/unit_tests/tencent_trace/test_tencent_trace_utils.py
similarity index 88%
rename from api/tests/unit_tests/core/ops/tencent_trace/test_tencent_trace_utils.py
rename to api/providers/trace/trace-tencent/tests/unit_tests/tencent_trace/test_tencent_trace_utils.py
index ef28d18e20..63c6d680d7 100644
--- a/api/tests/unit_tests/core/ops/tencent_trace/test_tencent_trace_utils.py
+++ b/api/providers/trace/trace-tencent/tests/unit_tests/tencent_trace/test_tencent_trace_utils.py
@@ -8,10 +8,9 @@ from datetime import UTC, datetime
 from unittest.mock import patch
 
 import pytest
+from dify_trace_tencent.utils import TencentTraceUtils
 from opentelemetry.trace import Link, TraceFlags
 
-from core.ops.tencent_trace.utils import TencentTraceUtils
-
 
 def test_convert_to_trace_id_with_valid_uuid() -> None:
     uuid_str = "12345678-1234-5678-1234-567812345678"
@@ -20,7 +19,7 @@ def test_convert_to_trace_id_with_valid_uuid() -> None:
 
 def test_convert_to_trace_id_uses_uuid4_when_none() -> None:
     expected_uuid = uuid.UUID("aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa")
-    with patch("core.ops.tencent_trace.utils.uuid.uuid4", return_value=expected_uuid) as uuid4_mock:
+    with patch("dify_trace_tencent.utils.uuid.uuid4", return_value=expected_uuid) as uuid4_mock:
         assert TencentTraceUtils.convert_to_trace_id(None) == expected_uuid.int
         uuid4_mock.assert_called_once()
 
@@ -45,7 +44,7 @@ def test_convert_to_span_id_is_deterministic_and_sensitive_to_type() -> None:
 
 def test_convert_to_span_id_uses_uuid4_when_none() -> None:
     expected_uuid = uuid.UUID("bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb")
-    with patch("core.ops.tencent_trace.utils.uuid.uuid4", return_value=expected_uuid) as uuid4_mock:
+    with patch("dify_trace_tencent.utils.uuid.uuid4", return_value=expected_uuid) as uuid4_mock:
         span_id = TencentTraceUtils.convert_to_span_id(None, "workflow")
         assert isinstance(span_id, int)
         uuid4_mock.assert_called_once()
@@ -58,7 +57,7 @@ def test_convert_to_span_id_raises_value_error_for_invalid_uuid() -> None:
 
 def test_generate_span_id_skips_invalid_span_id() -> None:
     with patch(
-        "core.ops.tencent_trace.utils.random.getrandbits",
+        "dify_trace_tencent.utils.random.getrandbits",
         side_effect=[TencentTraceUtils.INVALID_SPAN_ID, 42],
     ) as bits_mock:
         assert TencentTraceUtils.generate_span_id() == 42
@@ -75,7 +74,7 @@ def test_convert_datetime_to_nanoseconds_uses_now_when_none() -> None:
     fixed = datetime(2024, 1, 2, 3, 4, 5, tzinfo=UTC)
     expected = int(fixed.timestamp() * 1e9)
 
-    with patch("core.ops.tencent_trace.utils.datetime") as datetime_mock:
+    with patch("dify_trace_tencent.utils.datetime") as datetime_mock:
         datetime_mock.now.return_value = fixed
         assert TencentTraceUtils.convert_datetime_to_nanoseconds(None) == expected
         datetime_mock.now.assert_called_once()
@@ -100,7 +99,7 @@ def test_create_link_accepts_hex_or_uuid(trace_id_str: str, expected_trace_id: i
 @pytest.mark.parametrize("trace_id_str", ["g" * 32, "not-a-uuid", None])
 def test_create_link_falls_back_to_uuid4(trace_id_str: object) -> None:
     fallback_uuid = uuid.UUID("dddddddd-dddd-dddd-dddd-dddddddddddd")
-    with patch("core.ops.tencent_trace.utils.uuid.uuid4", return_value=fallback_uuid) as uuid4_mock:
+    with patch("dify_trace_tencent.utils.uuid.uuid4", return_value=fallback_uuid) as uuid4_mock:
         link = TencentTraceUtils.create_link(trace_id_str)  # type: ignore[arg-type]
         assert link.context.trace_id == fallback_uuid.int
         uuid4_mock.assert_called_once()
diff --git a/api/providers/trace/trace-weave/pyproject.toml b/api/providers/trace/trace-weave/pyproject.toml
new file mode 100644
index 0000000000..ba449f2a93
--- /dev/null
+++ b/api/providers/trace/trace-weave/pyproject.toml
@@ -0,0 +1,10 @@
+[project]
+name = "dify-trace-weave"
+version = "0.0.1"
+dependencies = [
+    "weave>=0.52.36",
+]
+description = "Dify ops tracing provider (Weave)."
+
+[tool.setuptools.packages.find]
+where = ["src"]
diff --git a/api/providers/trace/trace-weave/src/dify_trace_weave/__init__.py b/api/providers/trace/trace-weave/src/dify_trace_weave/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/providers/trace/trace-weave/src/dify_trace_weave/config.py b/api/providers/trace/trace-weave/src/dify_trace_weave/config.py
new file mode 100644
index 0000000000..5942bd57fe
--- /dev/null
+++ b/api/providers/trace/trace-weave/src/dify_trace_weave/config.py
@@ -0,0 +1,29 @@
+from pydantic import ValidationInfo, field_validator
+
+from core.ops.entities.config_entity import BaseTracingConfig
+from core.ops.utils import validate_url
+
+
+class WeaveConfig(BaseTracingConfig):
+    """
+    Model class for Weave tracing config.
+    """
+
+    api_key: str
+    entity: str | None = None
+    project: str
+    endpoint: str = "https://trace.wandb.ai"
+    host: str | None = None
+
+    @field_validator("endpoint")
+    @classmethod
+    def endpoint_validator(cls, v, info: ValidationInfo):
+        # Weave only allows HTTPS for endpoint
+        return validate_url(v, "https://trace.wandb.ai", allowed_schemes=("https",))
+
+    @field_validator("host")
+    @classmethod
+    def host_validator(cls, v, info: ValidationInfo):
+        if v is not None and v.strip() != "":
+            return validate_url(v, v, allowed_schemes=("https", "http"))
+        return v
diff --git a/api/providers/trace/trace-weave/src/dify_trace_weave/entities/__init__.py b/api/providers/trace/trace-weave/src/dify_trace_weave/entities/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/core/ops/weave_trace/entities/weave_trace_entity.py b/api/providers/trace/trace-weave/src/dify_trace_weave/entities/weave_trace_entity.py
similarity index 100%
rename from api/core/ops/weave_trace/entities/weave_trace_entity.py
rename to api/providers/trace/trace-weave/src/dify_trace_weave/entities/weave_trace_entity.py
diff --git a/api/providers/trace/trace-weave/src/dify_trace_weave/py.typed b/api/providers/trace/trace-weave/src/dify_trace_weave/py.typed
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/core/ops/weave_trace/weave_trace.py b/api/providers/trace/trace-weave/src/dify_trace_weave/weave_trace.py
similarity index 99%
rename from api/core/ops/weave_trace/weave_trace.py
rename to api/providers/trace/trace-weave/src/dify_trace_weave/weave_trace.py
index f79544f1c7..4292cbf0f1 100644
--- a/api/core/ops/weave_trace/weave_trace.py
+++ b/api/providers/trace/trace-weave/src/dify_trace_weave/weave_trace.py
@@ -17,7 +17,6 @@ from weave.trace_server.trace_server_interface import (
 )
 
 from core.ops.base_trace_instance import BaseTraceInstance
-from core.ops.entities.config_entity import WeaveConfig
 from core.ops.entities.trace_entity import (
     BaseTraceInfo,
     DatasetRetrievalTraceInfo,
@@ -29,8 +28,9 @@ from core.ops.entities.trace_entity import (
     TraceTaskName,
     WorkflowTraceInfo,
 )
-from core.ops.weave_trace.entities.weave_trace_entity import WeaveTraceModel
 from core.repositories import DifyCoreRepositoryFactory
+from dify_trace_weave.config import WeaveConfig
+from dify_trace_weave.entities.weave_trace_entity import WeaveTraceModel
 from extensions.ext_database import db
 from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionMetadataKey
 from models import EndUser, MessageFile, WorkflowNodeExecutionTriggeredFrom
diff --git a/api/providers/trace/trace-weave/tests/unit_tests/test_config_entity.py b/api/providers/trace/trace-weave/tests/unit_tests/test_config_entity.py
new file mode 100644
index 0000000000..eeb1fe1d87
--- /dev/null
+++ b/api/providers/trace/trace-weave/tests/unit_tests/test_config_entity.py
@@ -0,0 +1,61 @@
+import pytest
+from dify_trace_weave.config import WeaveConfig
+from pydantic import ValidationError
+
+
+class TestWeaveConfig:
+    """Test cases for WeaveConfig"""
+
+    def test_valid_config(self):
+        """Test valid Weave configuration"""
+        config = WeaveConfig(
+            api_key="test_key",
+            entity="test_entity",
+            project="test_project",
+            endpoint="https://custom.wandb.ai",
+            host="https://custom.host.com",
+        )
+        assert config.api_key == "test_key"
+        assert config.entity == "test_entity"
+        assert config.project == "test_project"
+        assert config.endpoint == "https://custom.wandb.ai"
+        assert config.host == "https://custom.host.com"
+
+    def test_default_values(self):
+        """Test default values are set correctly"""
+        config = WeaveConfig(api_key="key", project="project")
+        assert config.entity is None
+        assert config.endpoint == "https://trace.wandb.ai"
+        assert config.host is None
+
+    def test_missing_required_fields(self):
+        """Test that required fields are enforced"""
+        with pytest.raises(ValidationError):
+            WeaveConfig()
+
+        with pytest.raises(ValidationError):
+            WeaveConfig(api_key="key")
+
+        with pytest.raises(ValidationError):
+            WeaveConfig(project="project")
+
+    def test_endpoint_validation_https_only(self):
+        """Test endpoint validation only allows HTTPS"""
+        with pytest.raises(ValidationError, match="URL scheme must be one of"):
+            WeaveConfig(api_key="key", project="project", endpoint="http://insecure.wandb.ai")
+
+    def test_host_validation_optional(self):
+        """Test host validation is optional but validates when provided"""
+        config = WeaveConfig(api_key="key", project="project", host=None)
+        assert config.host is None
+
+        config = WeaveConfig(api_key="key", project="project", host="")
+        assert config.host == ""
+
+        config = WeaveConfig(api_key="key", project="project", host="https://valid.host.com")
+        assert config.host == "https://valid.host.com"
+
+    def test_host_validation_invalid_scheme(self):
+        """Test host validation rejects invalid schemes when provided"""
+        with pytest.raises(ValidationError, match="URL scheme must be one of"):
+            WeaveConfig(api_key="key", project="project", host="ftp://invalid.host.com")
diff --git a/api/tests/unit_tests/core/ops/weave_trace/test_weave_trace.py b/api/providers/trace/trace-weave/tests/unit_tests/weave_trace/test_weave_trace.py
similarity index 97%
rename from api/tests/unit_tests/core/ops/weave_trace/test_weave_trace.py
rename to api/providers/trace/trace-weave/tests/unit_tests/weave_trace/test_weave_trace.py
index 531c7de05f..6028d0c550 100644
--- a/api/tests/unit_tests/core/ops/weave_trace/test_weave_trace.py
+++ b/api/providers/trace/trace-weave/tests/unit_tests/weave_trace/test_weave_trace.py
@@ -1,4 +1,4 @@
-"""Comprehensive tests for core.ops.weave_trace.weave_trace module."""
+"""Comprehensive tests for dify_trace_weave.weave_trace module."""
 
 from __future__ import annotations
 
@@ -7,9 +7,11 @@ from types import SimpleNamespace
 from unittest.mock import MagicMock, patch
 
 import pytest
+from dify_trace_weave.config import WeaveConfig
+from dify_trace_weave.entities.weave_trace_entity import WeaveTraceModel
+from dify_trace_weave.weave_trace import WeaveDataTrace
 from weave.trace_server.trace_server_interface import TraceStatus
 
-from core.ops.entities.config_entity import WeaveConfig
 from core.ops.entities.trace_entity import (
     DatasetRetrievalTraceInfo,
     GenerateNameTraceInfo,
@@ -20,8 +22,6 @@ from core.ops.entities.trace_entity import (
     TraceTaskName,
     WorkflowTraceInfo,
 )
-from core.ops.weave_trace.entities.weave_trace_entity import WeaveTraceModel
-from core.ops.weave_trace.weave_trace import WeaveDataTrace
 from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionMetadataKey
 
 # ── Helpers ──────────────────────────────────────────────────────────────────
@@ -191,14 +191,14 @@ def _make_node(**overrides):
 
 @pytest.fixture
 def mock_wandb():
-    with patch("core.ops.weave_trace.weave_trace.wandb") as mock:
+    with patch("dify_trace_weave.weave_trace.wandb") as mock:
         mock.login.return_value = True
         yield mock
 
 
 @pytest.fixture
 def mock_weave():
-    with patch("core.ops.weave_trace.weave_trace.weave") as mock:
+    with patch("dify_trace_weave.weave_trace.weave") as mock:
         client = MagicMock()
         client.entity = "my-entity"
         client.project = "my-project"
@@ -307,7 +307,7 @@ class TestGetProjectUrl:
         monkeypatch.setattr(trace_instance, "entity", None)
         monkeypatch.setattr(trace_instance, "project_name", None)
         # Force an error by making string formatting fail
-        with patch("core.ops.weave_trace.weave_trace.logger") as mock_logger:
+        with patch("dify_trace_weave.weave_trace.logger") as mock_logger:
             # Simulate exception via property
             original_entity = trace_instance.entity
             trace_instance.entity = None
@@ -594,9 +594,9 @@ class TestWorkflowTrace:
         mock_factory = MagicMock()
         mock_factory.create_workflow_node_execution_repository.return_value = repo
 
-        monkeypatch.setattr("core.ops.weave_trace.weave_trace.DifyCoreRepositoryFactory", mock_factory)
-        monkeypatch.setattr("core.ops.weave_trace.weave_trace.sessionmaker", lambda bind: MagicMock())
-        monkeypatch.setattr("core.ops.weave_trace.weave_trace.db", MagicMock(engine="engine"))
+        monkeypatch.setattr("dify_trace_weave.weave_trace.DifyCoreRepositoryFactory", mock_factory)
+        monkeypatch.setattr("dify_trace_weave.weave_trace.sessionmaker", lambda bind: MagicMock())
+        monkeypatch.setattr("dify_trace_weave.weave_trace.db", MagicMock(engine="engine"))
         return repo
 
     def test_workflow_trace_no_nodes_no_message_id(self, trace_instance, monkeypatch):
@@ -703,8 +703,8 @@ class TestWorkflowTrace:
 
     def test_workflow_trace_missing_app_id_raises(self, trace_instance, monkeypatch):
         """Raises ValueError when app_id is missing from metadata."""
-        monkeypatch.setattr("core.ops.weave_trace.weave_trace.sessionmaker", lambda bind: MagicMock())
-        monkeypatch.setattr("core.ops.weave_trace.weave_trace.db", MagicMock(engine="engine"))
+        monkeypatch.setattr("dify_trace_weave.weave_trace.sessionmaker", lambda bind: MagicMock())
+        monkeypatch.setattr("dify_trace_weave.weave_trace.db", MagicMock(engine="engine"))
 
         trace_info = _make_workflow_trace_info(
             message_id=None,
@@ -802,7 +802,7 @@ class TestMessageTrace:
     def test_basic_message_trace(self, trace_instance, monkeypatch):
         """message_trace creates message run and llm child run."""
         monkeypatch.setattr(
-            "core.ops.weave_trace.weave_trace.db.session.get",
+            "dify_trace_weave.weave_trace.db.session.get",
             lambda model, pk: None,
         )
 
@@ -824,7 +824,7 @@ class TestMessageTrace:
 
         mock_db = MagicMock()
         mock_db.session.get.return_value = None
-        monkeypatch.setattr("core.ops.weave_trace.weave_trace.db", mock_db)
+        monkeypatch.setattr("dify_trace_weave.weave_trace.db", mock_db)
 
         trace_instance.start_call = MagicMock()
         trace_instance.finish_call = MagicMock()
@@ -846,7 +846,7 @@ class TestMessageTrace:
 
         mock_db = MagicMock()
         mock_db.session.get.return_value = end_user
-        monkeypatch.setattr("core.ops.weave_trace.weave_trace.db", mock_db)
+        monkeypatch.setattr("dify_trace_weave.weave_trace.db", mock_db)
 
         trace_instance.start_call = MagicMock()
         trace_instance.finish_call = MagicMock()
@@ -866,7 +866,7 @@ class TestMessageTrace:
         """message_trace handles when from_end_user_id is None."""
         mock_db = MagicMock()
         mock_db.session.get.return_value = None
-        monkeypatch.setattr("core.ops.weave_trace.weave_trace.db", mock_db)
+        monkeypatch.setattr("dify_trace_weave.weave_trace.db", mock_db)
 
         trace_instance.start_call = MagicMock()
         trace_instance.finish_call = MagicMock()
@@ -884,7 +884,7 @@ class TestMessageTrace:
         """trace_id falls back to message_id when trace_id is None."""
         mock_db = MagicMock()
         mock_db.session.get.return_value = None
-        monkeypatch.setattr("core.ops.weave_trace.weave_trace.db", mock_db)
+        monkeypatch.setattr("dify_trace_weave.weave_trace.db", mock_db)
 
         trace_instance.start_call = MagicMock()
         trace_instance.finish_call = MagicMock()
@@ -899,7 +899,7 @@ class TestMessageTrace:
         """message_trace handles file_list=None gracefully."""
         mock_db = MagicMock()
         mock_db.session.get.return_value = None
-        monkeypatch.setattr("core.ops.weave_trace.weave_trace.db", mock_db)
+        monkeypatch.setattr("dify_trace_weave.weave_trace.db", mock_db)
 
         trace_instance.start_call = MagicMock()
         trace_instance.finish_call = MagicMock()
diff --git a/api/pyproject.toml b/api/pyproject.toml
index a1ceea181e..12b8b3d782 100644
--- a/api/pyproject.toml
+++ b/api/pyproject.toml
@@ -32,9 +32,6 @@ dependencies = [
     "flask-restx>=1.3.2,<2.0.0",
     "google-cloud-aiplatform>=1.147.0,<2.0.0",
     "httpx[socks]>=0.28.1,<1.0.0",
-    "langfuse>=4.2.0,<5.0.0",
-    "langsmith>=0.7.31,<1.0.0",
-    "mlflow-skinny>=3.11.1,<4.0.0",
     "opentelemetry-distro>=0.62b0,<1.0.0",
     "opentelemetry-instrumentation-celery>=0.62b0,<1.0.0",
     "opentelemetry-instrumentation-flask>=0.62b0,<1.0.0",
@@ -44,15 +41,12 @@ dependencies = [
     "opentelemetry-propagator-b3>=1.41.0,<2.0.0",
     "readabilipy>=0.3.0,<1.0.0",
     "resend>=2.27.0,<3.0.0",
-    "weave>=0.52.36,<1.0.0",
 
     # Emerging: newer and fast-moving, use compatible pins
-    "arize-phoenix-otel~=0.15.0",
     "fastopenapi[flask]~=0.7.0",
     "graphon~=0.1.2",
     "httpx-sse~=0.4.0",
     "json-repair~=0.59.2",
-    "opik~=1.11.2",
 ]
 # Before adding new dependency, consider place it in
 # alphabet order (a-z) and suitable group.
@@ -61,8 +55,8 @@ dependencies = [
 packages = []
 
 [tool.uv.workspace]
-members = ["providers/vdb/*"]
-exclude = ["providers/vdb/__pycache__"]
+members = ["providers/vdb/*", "providers/trace/*"]
+exclude = ["providers/vdb/__pycache__", "providers/trace/__pycache__"]
 
 [tool.uv.sources]
 dify-vdb-alibabacloud-mysql = { workspace = true }
@@ -95,9 +89,17 @@ dify-vdb-upstash = { workspace = true }
 dify-vdb-vastbase = { workspace = true }
 dify-vdb-vikingdb = { workspace = true }
 dify-vdb-weaviate = { workspace = true }
+dify-trace-aliyun = { workspace = true }
+dify-trace-arize-phoenix = { workspace = true }
+dify-trace-langfuse = { workspace = true }
+dify-trace-langsmith = { workspace = true }
+dify-trace-mlflow = { workspace = true }
+dify-trace-opik = { workspace = true }
+dify-trace-tencent = { workspace = true }
+dify-trace-weave = { workspace = true }
 
 [tool.uv]
-default-groups = ["storage", "tools", "vdb-all"]
+default-groups = ["storage", "tools", "vdb-all", "trace-all"]
 package = false
 override-dependencies = [
     "pyarrow>=18.0.0",
@@ -266,6 +268,25 @@ vdb-weaviate = ["dify-vdb-weaviate"]
 # Optional client used by some tests / integrations (not a vector backend plugin)
 vdb-xinference = ["xinference-client>=2.4.0"]
 
+trace-all = [
+    "dify-trace-aliyun",
+    "dify-trace-arize-phoenix",
+    "dify-trace-langfuse",
+    "dify-trace-langsmith",
+    "dify-trace-mlflow",
+    "dify-trace-opik",
+    "dify-trace-tencent",
+    "dify-trace-weave",
+]
+trace-aliyun = ["dify-trace-aliyun"]
+trace-arize-phoenix = ["dify-trace-arize-phoenix"]
+trace-langfuse = ["dify-trace-langfuse"]
+trace-langsmith = ["dify-trace-langsmith"]
+trace-mlflow = ["dify-trace-mlflow"]
+trace-opik = ["dify-trace-opik"]
+trace-tencent = ["dify-trace-tencent"]
+trace-weave = ["dify-trace-weave"]
+
 [tool.pyrefly]
 project-includes = ["."]
 project-excludes = [".venv", "migrations/"]
diff --git a/api/pyrefly-local-excludes.txt b/api/pyrefly-local-excludes.txt
index 3e5ece1fcf..fbbca24558 100644
--- a/api/pyrefly-local-excludes.txt
+++ b/api/pyrefly-local-excludes.txt
@@ -34,12 +34,12 @@ core/external_data_tool/api/api.py
 core/llm_generator/llm_generator.py
 core/llm_generator/output_parser/structured_output.py
 core/mcp/mcp_client.py
-core/ops/aliyun_trace/data_exporter/traceclient.py
-core/ops/arize_phoenix_trace/arize_phoenix_trace.py
-core/ops/mlflow_trace/mlflow_trace.py
+providers/trace/trace-aliyun/src/dify_trace_aliyun/data_exporter/traceclient.py
+providers/trace/trace-arize-phoenix/src/dify_trace_arize_phoenix/arize_phoenix_trace.py
+providers/trace/trace-mlflow/src/dify_trace_mlflow/mlflow_trace.py
 core/ops/ops_trace_manager.py
-core/ops/tencent_trace/client.py
-core/ops/tencent_trace/utils.py
+providers/trace/trace-tencent/src/dify_trace_tencent/client.py
+providers/trace/trace-tencent/src/dify_trace_tencent/utils.py
 core/plugin/backwards_invocation/base.py
 core/plugin/backwards_invocation/model.py
 core/prompt/utils/extract_thread_messages.py
diff --git a/api/pyrightconfig.json b/api/pyrightconfig.json
index c4582e891d..ac0e2a3a53 100644
--- a/api/pyrightconfig.json
+++ b/api/pyrightconfig.json
@@ -5,7 +5,8 @@
     ".venv",
     "migrations/",
     "core/rag",
-    "providers/",
+    "providers/vdb/",
+    "providers/trace/*/tests",
   ],
   "typeCheckingMode": "strict",
   "allowedUntypedLibraries": [
diff --git a/api/tests/unit_tests/core/ops/test_config_entity.py b/api/tests/unit_tests/core/ops/test_config_entity.py
index 2cbff54c42..69650c85cc 100644
--- a/api/tests/unit_tests/core/ops/test_config_entity.py
+++ b/api/tests/unit_tests/core/ops/test_config_entity.py
@@ -1,16 +1,11 @@
-import pytest
-from pydantic import ValidationError
+from dify_trace_aliyun.config import AliyunConfig
+from dify_trace_arize_phoenix.config import ArizeConfig, PhoenixConfig
+from dify_trace_langfuse.config import LangfuseConfig
+from dify_trace_langsmith.config import LangSmithConfig
+from dify_trace_opik.config import OpikConfig
+from dify_trace_weave.config import WeaveConfig
 
-from core.ops.entities.config_entity import (
-    AliyunConfig,
-    ArizeConfig,
-    LangfuseConfig,
-    LangSmithConfig,
-    OpikConfig,
-    PhoenixConfig,
-    TracingProviderEnum,
-    WeaveConfig,
-)
+from core.ops.entities.config_entity import TracingProviderEnum
 
 
 class TestTracingProviderEnum:
@@ -27,349 +22,8 @@ class TestTracingProviderEnum:
         assert TracingProviderEnum.ALIYUN == "aliyun"
 
 
-class TestArizeConfig:
-    """Test cases for ArizeConfig"""
-
-    def test_valid_config(self):
-        """Test valid Arize configuration"""
-        config = ArizeConfig(
-            api_key="test_key", space_id="test_space", project="test_project", endpoint="https://custom.arize.com"
-        )
-        assert config.api_key == "test_key"
-        assert config.space_id == "test_space"
-        assert config.project == "test_project"
-        assert config.endpoint == "https://custom.arize.com"
-
-    def test_default_values(self):
-        """Test default values are set correctly"""
-        config = ArizeConfig()
-        assert config.api_key is None
-        assert config.space_id is None
-        assert config.project is None
-        assert config.endpoint == "https://otlp.arize.com"
-
-    def test_project_validation_empty(self):
-        """Test project validation with empty value"""
-        config = ArizeConfig(project="")
-        assert config.project == "default"
-
-    def test_project_validation_none(self):
-        """Test project validation with None value"""
-        config = ArizeConfig(project=None)
-        assert config.project == "default"
-
-    def test_endpoint_validation_empty(self):
-        """Test endpoint validation with empty value"""
-        config = ArizeConfig(endpoint="")
-        assert config.endpoint == "https://otlp.arize.com"
-
-    def test_endpoint_validation_with_path(self):
-        """Test endpoint validation normalizes URL by removing path"""
-        config = ArizeConfig(endpoint="https://custom.arize.com/api/v1")
-        assert config.endpoint == "https://custom.arize.com"
-
-    def test_endpoint_validation_invalid_scheme(self):
-        """Test endpoint validation rejects invalid schemes"""
-        with pytest.raises(ValidationError, match="URL scheme must be one of"):
-            ArizeConfig(endpoint="ftp://invalid.com")
-
-    def test_endpoint_validation_no_scheme(self):
-        """Test endpoint validation rejects URLs without scheme"""
-        with pytest.raises(ValidationError, match="URL scheme must be one of"):
-            ArizeConfig(endpoint="invalid.com")
-
-
-class TestPhoenixConfig:
-    """Test cases for PhoenixConfig"""
-
-    def test_valid_config(self):
-        """Test valid Phoenix configuration"""
-        config = PhoenixConfig(api_key="test_key", project="test_project", endpoint="https://custom.phoenix.com")
-        assert config.api_key == "test_key"
-        assert config.project == "test_project"
-        assert config.endpoint == "https://custom.phoenix.com"
-
-    def test_default_values(self):
-        """Test default values are set correctly"""
-        config = PhoenixConfig()
-        assert config.api_key is None
-        assert config.project is None
-        assert config.endpoint == "https://app.phoenix.arize.com"
-
-    def test_project_validation_empty(self):
-        """Test project validation with empty value"""
-        config = PhoenixConfig(project="")
-        assert config.project == "default"
-
-    def test_endpoint_validation_with_path(self):
-        """Test endpoint validation with path"""
-        config = PhoenixConfig(endpoint="https://app.phoenix.arize.com/s/dify-integration")
-        assert config.endpoint == "https://app.phoenix.arize.com/s/dify-integration"
-
-    def test_endpoint_validation_without_path(self):
-        """Test endpoint validation without path"""
-        config = PhoenixConfig(endpoint="https://app.phoenix.arize.com")
-        assert config.endpoint == "https://app.phoenix.arize.com"
-
-
-class TestLangfuseConfig:
-    """Test cases for LangfuseConfig"""
-
-    def test_valid_config(self):
-        """Test valid Langfuse configuration"""
-        config = LangfuseConfig(public_key="public_key", secret_key="secret_key", host="https://custom.langfuse.com")
-        assert config.public_key == "public_key"
-        assert config.secret_key == "secret_key"
-        assert config.host == "https://custom.langfuse.com"
-
-    def test_valid_config_with_path(self):
-        host = "https://custom.langfuse.com/api/v1"
-        config = LangfuseConfig(public_key="public_key", secret_key="secret_key", host=host)
-        assert config.public_key == "public_key"
-        assert config.secret_key == "secret_key"
-        assert config.host == host
-
-    def test_default_values(self):
-        """Test default values are set correctly"""
-        config = LangfuseConfig(public_key="public", secret_key="secret")
-        assert config.host == "https://api.langfuse.com"
-
-    def test_missing_required_fields(self):
-        """Test that required fields are enforced"""
-        with pytest.raises(ValidationError):
-            LangfuseConfig()
-
-        with pytest.raises(ValidationError):
-            LangfuseConfig(public_key="public")
-
-        with pytest.raises(ValidationError):
-            LangfuseConfig(secret_key="secret")
-
-    def test_host_validation_empty(self):
-        """Test host validation with empty value"""
-        config = LangfuseConfig(public_key="public", secret_key="secret", host="")
-        assert config.host == "https://api.langfuse.com"
-
-
-class TestLangSmithConfig:
-    """Test cases for LangSmithConfig"""
-
-    def test_valid_config(self):
-        """Test valid LangSmith configuration"""
-        config = LangSmithConfig(api_key="test_key", project="test_project", endpoint="https://custom.smith.com")
-        assert config.api_key == "test_key"
-        assert config.project == "test_project"
-        assert config.endpoint == "https://custom.smith.com"
-
-    def test_default_values(self):
-        """Test default values are set correctly"""
-        config = LangSmithConfig(api_key="key", project="project")
-        assert config.endpoint == "https://api.smith.langchain.com"
-
-    def test_missing_required_fields(self):
-        """Test that required fields are enforced"""
-        with pytest.raises(ValidationError):
-            LangSmithConfig()
-
-        with pytest.raises(ValidationError):
-            LangSmithConfig(api_key="key")
-
-        with pytest.raises(ValidationError):
-            LangSmithConfig(project="project")
-
-    def test_endpoint_validation_https_only(self):
-        """Test endpoint validation only allows HTTPS"""
-        with pytest.raises(ValidationError, match="URL scheme must be one of"):
-            LangSmithConfig(api_key="key", project="project", endpoint="http://insecure.com")
-
-
-class TestOpikConfig:
-    """Test cases for OpikConfig"""
-
-    def test_valid_config(self):
-        """Test valid Opik configuration"""
-        config = OpikConfig(
-            api_key="test_key",
-            project="test_project",
-            workspace="test_workspace",
-            url="https://custom.comet.com/opik/api/",
-        )
-        assert config.api_key == "test_key"
-        assert config.project == "test_project"
-        assert config.workspace == "test_workspace"
-        assert config.url == "https://custom.comet.com/opik/api/"
-
-    def test_default_values(self):
-        """Test default values are set correctly"""
-        config = OpikConfig()
-        assert config.api_key is None
-        assert config.project is None
-        assert config.workspace is None
-        assert config.url == "https://www.comet.com/opik/api/"
-
-    def test_project_validation_empty(self):
-        """Test project validation with empty value"""
-        config = OpikConfig(project="")
-        assert config.project == "Default Project"
-
-    def test_url_validation_empty(self):
-        """Test URL validation with empty value"""
-        config = OpikConfig(url="")
-        assert config.url == "https://www.comet.com/opik/api/"
-
-    def test_url_validation_missing_suffix(self):
-        """Test URL validation requires /api/ suffix"""
-        with pytest.raises(ValidationError, match="URL should end with /api/"):
-            OpikConfig(url="https://custom.comet.com/opik/")
-
-    def test_url_validation_invalid_scheme(self):
-        """Test URL validation rejects invalid schemes"""
-        with pytest.raises(ValidationError, match="URL must start with https:// or http://"):
-            OpikConfig(url="ftp://custom.comet.com/opik/api/")
-
-
-class TestWeaveConfig:
-    """Test cases for WeaveConfig"""
-
-    def test_valid_config(self):
-        """Test valid Weave configuration"""
-        config = WeaveConfig(
-            api_key="test_key",
-            entity="test_entity",
-            project="test_project",
-            endpoint="https://custom.wandb.ai",
-            host="https://custom.host.com",
-        )
-        assert config.api_key == "test_key"
-        assert config.entity == "test_entity"
-        assert config.project == "test_project"
-        assert config.endpoint == "https://custom.wandb.ai"
-        assert config.host == "https://custom.host.com"
-
-    def test_default_values(self):
-        """Test default values are set correctly"""
-        config = WeaveConfig(api_key="key", project="project")
-        assert config.entity is None
-        assert config.endpoint == "https://trace.wandb.ai"
-        assert config.host is None
-
-    def test_missing_required_fields(self):
-        """Test that required fields are enforced"""
-        with pytest.raises(ValidationError):
-            WeaveConfig()
-
-        with pytest.raises(ValidationError):
-            WeaveConfig(api_key="key")
-
-        with pytest.raises(ValidationError):
-            WeaveConfig(project="project")
-
-    def test_endpoint_validation_https_only(self):
-        """Test endpoint validation only allows HTTPS"""
-        with pytest.raises(ValidationError, match="URL scheme must be one of"):
-            WeaveConfig(api_key="key", project="project", endpoint="http://insecure.wandb.ai")
-
-    def test_host_validation_optional(self):
-        """Test host validation is optional but validates when provided"""
-        config = WeaveConfig(api_key="key", project="project", host=None)
-        assert config.host is None
-
-        config = WeaveConfig(api_key="key", project="project", host="")
-        assert config.host == ""
-
-        config = WeaveConfig(api_key="key", project="project", host="https://valid.host.com")
-        assert config.host == "https://valid.host.com"
-
-    def test_host_validation_invalid_scheme(self):
-        """Test host validation rejects invalid schemes when provided"""
-        with pytest.raises(ValidationError, match="URL scheme must be one of"):
-            WeaveConfig(api_key="key", project="project", host="ftp://invalid.host.com")
-
-
-class TestAliyunConfig:
-    """Test cases for AliyunConfig"""
-
-    def test_valid_config(self):
-        """Test valid Aliyun configuration"""
-        config = AliyunConfig(
-            app_name="test_app",
-            license_key="test_license_key",
-            endpoint="https://custom.tracing-analysis-dc-hz.aliyuncs.com",
-        )
-        assert config.app_name == "test_app"
-        assert config.license_key == "test_license_key"
-        assert config.endpoint == "https://custom.tracing-analysis-dc-hz.aliyuncs.com"
-
-    def test_default_values(self):
-        """Test default values are set correctly"""
-        config = AliyunConfig(license_key="test_license", endpoint="https://tracing-analysis-dc-hz.aliyuncs.com")
-        assert config.app_name == "dify_app"
-
-    def test_missing_required_fields(self):
-        """Test that required fields are enforced"""
-        with pytest.raises(ValidationError):
-            AliyunConfig()
-
-        with pytest.raises(ValidationError):
-            AliyunConfig(license_key="test_license")
-
-        with pytest.raises(ValidationError):
-            AliyunConfig(endpoint="https://tracing-analysis-dc-hz.aliyuncs.com")
-
-    def test_app_name_validation_empty(self):
-        """Test app_name validation with empty value"""
-        config = AliyunConfig(
-            license_key="test_license", endpoint="https://tracing-analysis-dc-hz.aliyuncs.com", app_name=""
-        )
-        assert config.app_name == "dify_app"
-
-    def test_endpoint_validation_empty(self):
-        """Test endpoint validation with empty value"""
-        config = AliyunConfig(license_key="test_license", endpoint="")
-        assert config.endpoint == "https://tracing-analysis-dc-hz.aliyuncs.com"
-
-    def test_endpoint_validation_with_path(self):
-        """Test endpoint validation preserves path for Aliyun endpoints"""
-        config = AliyunConfig(
-            license_key="test_license", endpoint="https://tracing-analysis-dc-hz.aliyuncs.com/api/v1/traces"
-        )
-        assert config.endpoint == "https://tracing-analysis-dc-hz.aliyuncs.com/api/v1/traces"
-
-    def test_endpoint_validation_invalid_scheme(self):
-        """Test endpoint validation rejects invalid schemes"""
-        with pytest.raises(ValidationError, match="URL must start with https:// or http://"):
-            AliyunConfig(license_key="test_license", endpoint="ftp://invalid.tracing-analysis-dc-hz.aliyuncs.com")
-
-    def test_endpoint_validation_no_scheme(self):
-        """Test endpoint validation rejects URLs without scheme"""
-        with pytest.raises(ValidationError, match="URL must start with https:// or http://"):
-            AliyunConfig(license_key="test_license", endpoint="invalid.tracing-analysis-dc-hz.aliyuncs.com")
-
-    def test_license_key_required(self):
-        """Test that license_key is required and cannot be empty"""
-        with pytest.raises(ValidationError):
-            AliyunConfig(license_key="", endpoint="https://tracing-analysis-dc-hz.aliyuncs.com")
-
-    def test_valid_endpoint_format_examples(self):
-        """Test valid endpoint format examples from comments"""
-        valid_endpoints = [
-            # cms2.0 public endpoint
-            "https://proj-xtrace-123456-cn-heyuan.cn-heyuan.log.aliyuncs.com/apm/trace/opentelemetry",
-            # cms2.0 intranet endpoint
-            "https://proj-xtrace-123456-cn-heyuan.cn-heyuan-intranet.log.aliyuncs.com/apm/trace/opentelemetry",
-            # xtrace public endpoint
-            "http://tracing-cn-heyuan.arms.aliyuncs.com",
-            # xtrace intranet endpoint
-            "http://tracing-cn-heyuan-internal.arms.aliyuncs.com",
-        ]
-
-        for endpoint in valid_endpoints:
-            config = AliyunConfig(license_key="test_license", endpoint=endpoint)
-            assert config.endpoint == endpoint
-
-
 class TestConfigIntegration:
-    """Integration tests for configuration classes"""
+    """Cross-provider configuration sanity checks"""
 
     def test_all_configs_can_be_instantiated(self):
         """Test that all config classes can be instantiated with valid data"""
@@ -388,7 +42,6 @@ class TestConfigIntegration:
 
     def test_url_normalization_consistency(self):
         """Test that URL normalization works consistently across configs"""
-        # Test that paths are removed from endpoints
         arize_config = ArizeConfig(endpoint="https://arize.com/api/v1/test")
         phoenix_with_path_config = PhoenixConfig(endpoint="https://app.phoenix.arize.com/s/dify-integration")
         phoenix_without_path_config = PhoenixConfig(endpoint="https://app.phoenix.arize.com")
diff --git a/api/uv.lock b/api/uv.lock
index 77ba905a67..6d507a2d15 100644
--- a/api/uv.lock
+++ b/api/uv.lock
@@ -11,6 +11,14 @@ resolution-markers = [
 [manifest]
 members = [
     "dify-api",
+    "dify-trace-aliyun",
+    "dify-trace-arize-phoenix",
+    "dify-trace-langfuse",
+    "dify-trace-langsmith",
+    "dify-trace-mlflow",
+    "dify-trace-opik",
+    "dify-trace-tencent",
+    "dify-trace-weave",
     "dify-vdb-alibabacloud-mysql",
     "dify-vdb-analyticdb",
     "dify-vdb-baidu",
@@ -1285,7 +1293,6 @@ version = "1.13.3"
 source = { virtual = "." }
 dependencies = [
     { name = "aliyun-log-python-sdk" },
-    { name = "arize-phoenix-otel" },
     { name = "azure-identity" },
     { name = "bleach" },
     { name = "boto3" },
@@ -1308,9 +1315,6 @@ dependencies = [
     { name = "httpx", extra = ["socks"] },
     { name = "httpx-sse" },
     { name = "json-repair" },
-    { name = "langfuse" },
-    { name = "langsmith" },
-    { name = "mlflow-skinny" },
     { name = "opentelemetry-distro" },
     { name = "opentelemetry-instrumentation-celery" },
     { name = "opentelemetry-instrumentation-flask" },
@@ -1318,7 +1322,6 @@ dependencies = [
     { name = "opentelemetry-instrumentation-redis" },
     { name = "opentelemetry-instrumentation-sqlalchemy" },
     { name = "opentelemetry-propagator-b3" },
-    { name = "opik" },
     { name = "psycogreen" },
     { name = "psycopg2-binary" },
     { name = "python-socketio" },
@@ -1327,7 +1330,6 @@ dependencies = [
     { name = "resend" },
     { name = "sendgrid" },
     { name = "sseclient-py" },
-    { name = "weave" },
 ]
 
 [package.dev-dependencies]
@@ -1410,6 +1412,40 @@ tools = [
     { name = "cloudscraper" },
     { name = "nltk" },
 ]
+trace-aliyun = [
+    { name = "dify-trace-aliyun" },
+]
+trace-all = [
+    { name = "dify-trace-aliyun" },
+    { name = "dify-trace-arize-phoenix" },
+    { name = "dify-trace-langfuse" },
+    { name = "dify-trace-langsmith" },
+    { name = "dify-trace-mlflow" },
+    { name = "dify-trace-opik" },
+    { name = "dify-trace-tencent" },
+    { name = "dify-trace-weave" },
+]
+trace-arize-phoenix = [
+    { name = "dify-trace-arize-phoenix" },
+]
+trace-langfuse = [
+    { name = "dify-trace-langfuse" },
+]
+trace-langsmith = [
+    { name = "dify-trace-langsmith" },
+]
+trace-mlflow = [
+    { name = "dify-trace-mlflow" },
+]
+trace-opik = [
+    { name = "dify-trace-opik" },
+]
+trace-tencent = [
+    { name = "dify-trace-tencent" },
+]
+trace-weave = [
+    { name = "dify-trace-weave" },
+]
 vdb-alibabacloud-mysql = [
     { name = "dify-vdb-alibabacloud-mysql" },
 ]
@@ -1539,7 +1575,6 @@ vdb-xinference = [
 [package.metadata]
 requires-dist = [
     { name = "aliyun-log-python-sdk", specifier = ">=0.9.44,<1.0.0" },
-    { name = "arize-phoenix-otel", specifier = "~=0.15.0" },
     { name = "azure-identity", specifier = ">=1.25.3,<2.0.0" },
     { name = "bleach", specifier = ">=6.3.0" },
     { name = "boto3", specifier = ">=1.42.88" },
@@ -1562,9 +1597,6 @@ requires-dist = [
     { name = "httpx", extras = ["socks"], specifier = ">=0.28.1,<1.0.0" },
     { name = "httpx-sse", specifier = "~=0.4.0" },
     { name = "json-repair", specifier = "~=0.59.2" },
-    { name = "langfuse", specifier = ">=4.2.0,<5.0.0" },
-    { name = "langsmith", specifier = ">=0.7.31,<1.0.0" },
-    { name = "mlflow-skinny", specifier = ">=3.11.1,<4.0.0" },
     { name = "opentelemetry-distro", specifier = ">=0.62b0,<1.0.0" },
     { name = "opentelemetry-instrumentation-celery", specifier = ">=0.62b0,<1.0.0" },
     { name = "opentelemetry-instrumentation-flask", specifier = ">=0.62b0,<1.0.0" },
@@ -1572,7 +1604,6 @@ requires-dist = [
     { name = "opentelemetry-instrumentation-redis", specifier = ">=0.62b0,<1.0.0" },
     { name = "opentelemetry-instrumentation-sqlalchemy", specifier = ">=0.62b0,<1.0.0" },
     { name = "opentelemetry-propagator-b3", specifier = ">=1.41.0,<2.0.0" },
-    { name = "opik", specifier = "~=1.11.2" },
     { name = "psycogreen", specifier = ">=1.0.2" },
     { name = "psycopg2-binary", specifier = ">=2.9.11" },
     { name = "python-socketio", specifier = ">=5.13.0" },
@@ -1581,7 +1612,6 @@ requires-dist = [
     { name = "resend", specifier = ">=2.27.0,<3.0.0" },
     { name = "sendgrid", specifier = ">=6.12.5" },
     { name = "sseclient-py", specifier = ">=1.8.0" },
-    { name = "weave", specifier = ">=0.52.36,<1.0.0" },
 ]
 
 [package.metadata.requires-dev]
@@ -1664,6 +1694,24 @@ tools = [
     { name = "cloudscraper", specifier = ">=1.2.71" },
     { name = "nltk", specifier = ">=3.9.1" },
 ]
+trace-aliyun = [{ name = "dify-trace-aliyun", editable = "providers/trace/trace-aliyun" }]
+trace-all = [
+    { name = "dify-trace-aliyun", editable = "providers/trace/trace-aliyun" },
+    { name = "dify-trace-arize-phoenix", editable = "providers/trace/trace-arize-phoenix" },
+    { name = "dify-trace-langfuse", editable = "providers/trace/trace-langfuse" },
+    { name = "dify-trace-langsmith", editable = "providers/trace/trace-langsmith" },
+    { name = "dify-trace-mlflow", editable = "providers/trace/trace-mlflow" },
+    { name = "dify-trace-opik", editable = "providers/trace/trace-opik" },
+    { name = "dify-trace-tencent", editable = "providers/trace/trace-tencent" },
+    { name = "dify-trace-weave", editable = "providers/trace/trace-weave" },
+]
+trace-arize-phoenix = [{ name = "dify-trace-arize-phoenix", editable = "providers/trace/trace-arize-phoenix" }]
+trace-langfuse = [{ name = "dify-trace-langfuse", editable = "providers/trace/trace-langfuse" }]
+trace-langsmith = [{ name = "dify-trace-langsmith", editable = "providers/trace/trace-langsmith" }]
+trace-mlflow = [{ name = "dify-trace-mlflow", editable = "providers/trace/trace-mlflow" }]
+trace-opik = [{ name = "dify-trace-opik", editable = "providers/trace/trace-opik" }]
+trace-tencent = [{ name = "dify-trace-tencent", editable = "providers/trace/trace-tencent" }]
+trace-weave = [{ name = "dify-trace-weave", editable = "providers/trace/trace-weave" }]
 vdb-alibabacloud-mysql = [{ name = "dify-vdb-alibabacloud-mysql", editable = "providers/vdb/vdb-alibabacloud-mysql" }]
 vdb-all = [
     { name = "dify-vdb-alibabacloud-mysql", editable = "providers/vdb/vdb-alibabacloud-mysql" },
@@ -1728,6 +1776,110 @@ vdb-vikingdb = [{ name = "dify-vdb-vikingdb", editable = "providers/vdb/vdb-viki
 vdb-weaviate = [{ name = "dify-vdb-weaviate", editable = "providers/vdb/vdb-weaviate" }]
 vdb-xinference = [{ name = "xinference-client", specifier = ">=2.4.0" }]
 
+[[package]]
+name = "dify-trace-aliyun"
+version = "0.0.1"
+source = { editable = "providers/trace/trace-aliyun" }
+dependencies = [
+    { name = "opentelemetry-api" },
+    { name = "opentelemetry-exporter-otlp-proto-grpc" },
+    { name = "opentelemetry-sdk" },
+    { name = "opentelemetry-semantic-conventions" },
+]
+
+[package.metadata]
+requires-dist = [
+    { name = "opentelemetry-api" },
+    { name = "opentelemetry-exporter-otlp-proto-grpc" },
+    { name = "opentelemetry-sdk" },
+    { name = "opentelemetry-semantic-conventions" },
+]
+
+[[package]]
+name = "dify-trace-arize-phoenix"
+version = "0.0.1"
+source = { editable = "providers/trace/trace-arize-phoenix" }
+dependencies = [
+    { name = "arize-phoenix-otel" },
+]
+
+[package.metadata]
+requires-dist = [{ name = "arize-phoenix-otel", specifier = "~=0.15.0" }]
+
+[[package]]
+name = "dify-trace-langfuse"
+version = "0.0.1"
+source = { editable = "providers/trace/trace-langfuse" }
+dependencies = [
+    { name = "langfuse" },
+]
+
+[package.metadata]
+requires-dist = [{ name = "langfuse", specifier = ">=4.2.0,<5.0.0" }]
+
+[[package]]
+name = "dify-trace-langsmith"
+version = "0.0.1"
+source = { editable = "providers/trace/trace-langsmith" }
+dependencies = [
+    { name = "langsmith" },
+]
+
+[package.metadata]
+requires-dist = [{ name = "langsmith", specifier = "~=0.7.30" }]
+
+[[package]]
+name = "dify-trace-mlflow"
+version = "0.0.1"
+source = { editable = "providers/trace/trace-mlflow" }
+dependencies = [
+    { name = "mlflow-skinny" },
+]
+
+[package.metadata]
+requires-dist = [{ name = "mlflow-skinny", specifier = ">=3.11.1" }]
+
+[[package]]
+name = "dify-trace-opik"
+version = "0.0.1"
+source = { editable = "providers/trace/trace-opik" }
+dependencies = [
+    { name = "opik" },
+]
+
+[package.metadata]
+requires-dist = [{ name = "opik", specifier = "~=1.11.2" }]
+
+[[package]]
+name = "dify-trace-tencent"
+version = "0.0.1"
+source = { editable = "providers/trace/trace-tencent" }
+dependencies = [
+    { name = "opentelemetry-api" },
+    { name = "opentelemetry-exporter-otlp-proto-grpc" },
+    { name = "opentelemetry-sdk" },
+    { name = "opentelemetry-semantic-conventions" },
+]
+
+[package.metadata]
+requires-dist = [
+    { name = "opentelemetry-api" },
+    { name = "opentelemetry-exporter-otlp-proto-grpc" },
+    { name = "opentelemetry-sdk" },
+    { name = "opentelemetry-semantic-conventions" },
+]
+
+[[package]]
+name = "dify-trace-weave"
+version = "0.0.1"
+source = { editable = "providers/trace/trace-weave" }
+dependencies = [
+    { name = "weave" },
+]
+
+[package.metadata]
+requires-dist = [{ name = "weave", specifier = ">=0.52.36" }]
+
 [[package]]
 name = "dify-vdb-alibabacloud-mysql"
 version = "0.0.1"
diff --git a/dev/pytest/pytest_unit_tests.sh b/dev/pytest/pytest_unit_tests.sh
index 962532de81..012c870c19 100755
--- a/dev/pytest/pytest_unit_tests.sh
+++ b/dev/pytest/pytest_unit_tests.sh
@@ -13,6 +13,7 @@ PYTEST_XDIST_ARGS="${PYTEST_XDIST_ARGS:--n auto}"
 pytest --timeout "${PYTEST_TIMEOUT}" ${PYTEST_XDIST_ARGS} \
   api/tests/unit_tests \
   api/providers/vdb/*/tests/unit_tests \
+  api/providers/trace/*/tests/unit_tests \
   --ignore=api/tests/unit_tests/controllers
 
 # Run controller tests sequentially to avoid import race conditions

From e70e4fa41d74e48a28a1b5cfec9ab0bcaef83f86 Mon Sep 17 00:00:00 2001
From: jerryzai <jerryzh8710@protonmail.com>
Date: Fri, 17 Apr 2026 04:12:31 -0400
Subject: [PATCH 10/24] chore(api): migrate file factory builders and account
 commands to use Session(db.engine) (#35236)

Co-authored-by: Asuka Minato <i@asukaminato.eu.org>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 api/commands/account.py                       |  17 +-
 api/factories/file_factory/builders.py        | 186 +++++++++---------
 .../factories/test_build_from_mapping.py      |  44 ++++-
 3 files changed, 141 insertions(+), 106 deletions(-)

diff --git a/api/commands/account.py b/api/commands/account.py
index 6a2a2e0428..761323a73d 100644
--- a/api/commands/account.py
+++ b/api/commands/account.py
@@ -2,6 +2,7 @@ import base64
 import secrets
 
 import click
+from sqlalchemy.orm import Session
 
 from constants.languages import languages
 from extensions.ext_database import db
@@ -43,10 +44,11 @@ def reset_password(email, new_password, password_confirm):
     # encrypt password with salt
     password_hashed = hash_password(new_password, salt)
     base64_password_hashed = base64.b64encode(password_hashed).decode()
-    account = db.session.merge(account)
-    account.password = base64_password_hashed
-    account.password_salt = base64_salt
-    db.session.commit()
+    with Session(db.engine) as session:
+        account = session.merge(account)
+        account.password = base64_password_hashed
+        account.password_salt = base64_salt
+        session.commit()
     AccountService.reset_login_error_rate_limit(normalized_email)
     click.echo(click.style("Password reset successfully.", fg="green"))
 
@@ -77,9 +79,10 @@ def reset_email(email, new_email, email_confirm):
         click.echo(click.style(f"Invalid email: {new_email}", fg="red"))
         return
 
-    account = db.session.merge(account)
-    account.email = normalized_new_email
-    db.session.commit()
+    with Session(db.engine) as session:
+        account = session.merge(account)
+        account.email = normalized_new_email
+        session.commit()
     click.echo(click.style("Email updated successfully.", fg="green"))
 
 
diff --git a/api/factories/file_factory/builders.py b/api/factories/file_factory/builders.py
index 288d37d265..ce1fa441c2 100644
--- a/api/factories/file_factory/builders.py
+++ b/api/factories/file_factory/builders.py
@@ -10,8 +10,8 @@ from typing import Any
 from sqlalchemy import select
 
 from core.app.file_access import FileAccessControllerProtocol
+from core.db.session_factory import session_factory
 from core.workflow.file_reference import build_file_reference
-from extensions.ext_database import db
 from graphon.file import File, FileTransferMethod, FileType, FileUploadConfig, helpers, standardize_file_type
 from models import ToolFile, UploadFile
 
@@ -135,29 +135,30 @@ def _build_from_local_file(
         UploadFile.id == upload_file_id,
         UploadFile.tenant_id == tenant_id,
     )
-    row = db.session.scalar(access_controller.apply_upload_file_filters(stmt))
-    if row is None:
-        raise ValueError("Invalid upload file")
+    with session_factory.create_session() as session:
+        row = session.scalar(access_controller.apply_upload_file_filters(stmt))
+        if row is None:
+            raise ValueError("Invalid upload file")
 
-    detected_file_type = standardize_file_type(extension="." + row.extension, mime_type=row.mime_type)
-    file_type = _resolve_file_type(
-        detected_file_type=detected_file_type,
-        specified_type=mapping.get("type", "custom"),
-        strict_type_validation=strict_type_validation,
-    )
+        detected_file_type = standardize_file_type(extension="." + row.extension, mime_type=row.mime_type)
+        file_type = _resolve_file_type(
+            detected_file_type=detected_file_type,
+            specified_type=mapping.get("type", "custom"),
+            strict_type_validation=strict_type_validation,
+        )
 
-    return File(
-        id=mapping.get("id"),
-        filename=row.name,
-        extension="." + row.extension,
-        mime_type=row.mime_type,
-        type=file_type,
-        transfer_method=transfer_method,
-        remote_url=row.source_url,
-        reference=build_file_reference(record_id=str(row.id)),
-        size=row.size,
-        storage_key=row.key,
-    )
+        return File(
+            id=mapping.get("id"),
+            filename=row.name,
+            extension="." + row.extension,
+            mime_type=row.mime_type,
+            type=file_type,
+            transfer_method=transfer_method,
+            remote_url=row.source_url,
+            reference=build_file_reference(record_id=str(row.id)),
+            size=row.size,
+            storage_key=row.key,
+        )
 
 
 def _build_from_remote_url(
@@ -179,32 +180,33 @@ def _build_from_remote_url(
             UploadFile.id == upload_file_id,
             UploadFile.tenant_id == tenant_id,
         )
-        upload_file = db.session.scalar(access_controller.apply_upload_file_filters(stmt))
-        if upload_file is None:
-            raise ValueError("Invalid upload file")
+        with session_factory.create_session() as session:
+            upload_file = session.scalar(access_controller.apply_upload_file_filters(stmt))
+            if upload_file is None:
+                raise ValueError("Invalid upload file")
 
-        detected_file_type = standardize_file_type(
-            extension="." + upload_file.extension,
-            mime_type=upload_file.mime_type,
-        )
-        file_type = _resolve_file_type(
-            detected_file_type=detected_file_type,
-            specified_type=mapping.get("type"),
-            strict_type_validation=strict_type_validation,
-        )
+            detected_file_type = standardize_file_type(
+                extension="." + upload_file.extension,
+                mime_type=upload_file.mime_type,
+            )
+            file_type = _resolve_file_type(
+                detected_file_type=detected_file_type,
+                specified_type=mapping.get("type"),
+                strict_type_validation=strict_type_validation,
+            )
 
-        return File(
-            id=mapping.get("id"),
-            filename=upload_file.name,
-            extension="." + upload_file.extension,
-            mime_type=upload_file.mime_type,
-            type=file_type,
-            transfer_method=transfer_method,
-            remote_url=helpers.get_signed_file_url(upload_file_id=str(upload_file_id)),
-            reference=build_file_reference(record_id=str(upload_file.id)),
-            size=upload_file.size,
-            storage_key=upload_file.key,
-        )
+            return File(
+                id=mapping.get("id"),
+                filename=upload_file.name,
+                extension="." + upload_file.extension,
+                mime_type=upload_file.mime_type,
+                type=file_type,
+                transfer_method=transfer_method,
+                remote_url=helpers.get_signed_file_url(upload_file_id=str(upload_file_id)),
+                reference=build_file_reference(record_id=str(upload_file.id)),
+                size=upload_file.size,
+                storage_key=upload_file.key,
+            )
 
     url = mapping.get("url") or mapping.get("remote_url")
     if not url:
@@ -247,30 +249,31 @@ def _build_from_tool_file(
         ToolFile.id == tool_file_id,
         ToolFile.tenant_id == tenant_id,
     )
-    tool_file = db.session.scalar(access_controller.apply_tool_file_filters(stmt))
-    if tool_file is None:
-        raise ValueError(f"ToolFile {tool_file_id} not found")
+    with session_factory.create_session() as session:
+        tool_file = session.scalar(access_controller.apply_tool_file_filters(stmt))
+        if tool_file is None:
+            raise ValueError(f"ToolFile {tool_file_id} not found")
 
-    extension = "." + tool_file.file_key.split(".")[-1] if "." in tool_file.file_key else ".bin"
-    detected_file_type = standardize_file_type(extension=extension, mime_type=tool_file.mimetype)
-    file_type = _resolve_file_type(
-        detected_file_type=detected_file_type,
-        specified_type=mapping.get("type"),
-        strict_type_validation=strict_type_validation,
-    )
+        extension = "." + tool_file.file_key.split(".")[-1] if "." in tool_file.file_key else ".bin"
+        detected_file_type = standardize_file_type(extension=extension, mime_type=tool_file.mimetype)
+        file_type = _resolve_file_type(
+            detected_file_type=detected_file_type,
+            specified_type=mapping.get("type"),
+            strict_type_validation=strict_type_validation,
+        )
 
-    return File(
-        id=mapping.get("id"),
-        filename=tool_file.name,
-        type=file_type,
-        transfer_method=transfer_method,
-        remote_url=tool_file.original_url,
-        reference=build_file_reference(record_id=str(tool_file.id)),
-        extension=extension,
-        mime_type=tool_file.mimetype,
-        size=tool_file.size,
-        storage_key=tool_file.file_key,
-    )
+        return File(
+            id=mapping.get("id"),
+            filename=tool_file.name,
+            type=file_type,
+            transfer_method=transfer_method,
+            remote_url=tool_file.original_url,
+            reference=build_file_reference(record_id=str(tool_file.id)),
+            extension=extension,
+            mime_type=tool_file.mimetype,
+            size=tool_file.size,
+            storage_key=tool_file.file_key,
+        )
 
 
 def _build_from_datasource_file(
@@ -289,31 +292,32 @@ def _build_from_datasource_file(
         UploadFile.id == datasource_file_id,
         UploadFile.tenant_id == tenant_id,
     )
-    datasource_file = db.session.scalar(access_controller.apply_upload_file_filters(stmt))
-    if datasource_file is None:
-        raise ValueError(f"DatasourceFile {mapping.get('datasource_file_id')} not found")
+    with session_factory.create_session() as session:
+        datasource_file = session.scalar(access_controller.apply_upload_file_filters(stmt))
+        if datasource_file is None:
+            raise ValueError(f"DatasourceFile {mapping.get('datasource_file_id')} not found")
 
-    extension = "." + datasource_file.key.split(".")[-1] if "." in datasource_file.key else ".bin"
-    detected_file_type = standardize_file_type(extension="." + extension, mime_type=datasource_file.mime_type)
-    file_type = _resolve_file_type(
-        detected_file_type=detected_file_type,
-        specified_type=mapping.get("type"),
-        strict_type_validation=strict_type_validation,
-    )
+        extension = "." + datasource_file.key.split(".")[-1] if "." in datasource_file.key else ".bin"
+        detected_file_type = standardize_file_type(extension="." + extension, mime_type=datasource_file.mime_type)
+        file_type = _resolve_file_type(
+            detected_file_type=detected_file_type,
+            specified_type=mapping.get("type"),
+            strict_type_validation=strict_type_validation,
+        )
 
-    return File(
-        id=mapping.get("datasource_file_id"),
-        filename=datasource_file.name,
-        type=file_type,
-        transfer_method=FileTransferMethod.TOOL_FILE,
-        remote_url=datasource_file.source_url,
-        reference=build_file_reference(record_id=str(datasource_file.id)),
-        extension=extension,
-        mime_type=datasource_file.mime_type,
-        size=datasource_file.size,
-        storage_key=datasource_file.key,
-        url=datasource_file.source_url,
-    )
+        return File(
+            id=mapping.get("datasource_file_id"),
+            filename=datasource_file.name,
+            type=file_type,
+            transfer_method=FileTransferMethod.TOOL_FILE,
+            remote_url=datasource_file.source_url,
+            reference=build_file_reference(record_id=str(datasource_file.id)),
+            extension=extension,
+            mime_type=datasource_file.mime_type,
+            size=datasource_file.size,
+            storage_key=datasource_file.key,
+            url=datasource_file.source_url,
+        )
 
 
 def _is_valid_mapping(mapping: Mapping[str, Any]) -> bool:
diff --git a/api/tests/unit_tests/factories/test_build_from_mapping.py b/api/tests/unit_tests/factories/test_build_from_mapping.py
index 511192001e..efafc8aa79 100644
--- a/api/tests/unit_tests/factories/test_build_from_mapping.py
+++ b/api/tests/unit_tests/factories/test_build_from_mapping.py
@@ -11,6 +11,21 @@ from factories.file_factory.builders import build_from_mapping as _build_from_ma
 from graphon.file import File, FileTransferMethod, FileType, FileUploadConfig
 from models import ToolFile, UploadFile
 
+
+def _make_session_ctx_mock(scalar_return=None):
+    """Return a mock usable as the ``session_factory.create_session()`` context manager.
+
+    Patch ``factories.file_factory.builders.session_factory`` and set
+    ``mock_sf.create_session.return_value = <this mock>`` to intercept DB calls
+    without requiring a live Flask app or database engine.
+    """
+    session = MagicMock()
+    session.__enter__.return_value = session
+    session.__exit__.return_value = False
+    session.scalar.return_value = scalar_return
+    return session
+
+
 # Test Data
 TEST_TENANT_ID = "test_tenant_id"
 TEST_UPLOAD_FILE_ID = str(uuid.uuid4())
@@ -49,8 +64,11 @@ def mock_upload_file():
     mock.source_url = TEST_REMOTE_URL
     mock.size = 1024
     mock.key = "test_key"
-    with patch("factories.file_factory.builders.db.session.scalar", return_value=mock, autospec=True) as m:
-        yield m
+    session = _make_session_ctx_mock(scalar_return=mock)
+    with patch("factories.file_factory.builders.session_factory") as mock_sf:
+        mock_sf.create_session.return_value = session
+        # yield session.scalar so callers can inspect call_args and mutate return_value
+        yield session.scalar
 
 
 @pytest.fixture
@@ -63,7 +81,9 @@ def mock_tool_file():
     mock.mimetype = "application/pdf"
     mock.original_url = "http://example.com/tool.pdf"
     mock.size = 2048
-    with patch("factories.file_factory.builders.db.session.scalar", return_value=mock, autospec=True):
+    session = _make_session_ctx_mock(scalar_return=mock)
+    with patch("factories.file_factory.builders.session_factory") as mock_sf:
+        mock_sf.create_session.return_value = session
         yield mock
 
 
@@ -231,7 +251,9 @@ def test_build_from_remote_url_without_strict_validation(mock_http_head):
 
 def test_tool_file_not_found():
     """Test ToolFile not found in database."""
-    with patch("factories.file_factory.builders.db.session.scalar", return_value=None, autospec=True):
+    session = _make_session_ctx_mock(scalar_return=None)
+    with patch("factories.file_factory.builders.session_factory") as mock_sf:
+        mock_sf.create_session.return_value = session
         mapping = tool_file_mapping()
         with pytest.raises(ValueError, match=f"ToolFile {TEST_TOOL_FILE_ID} not found"):
             build_from_mapping(mapping=mapping, tenant_id=TEST_TENANT_ID)
@@ -239,7 +261,9 @@ def test_tool_file_not_found():
 
 def test_local_file_not_found():
     """Test UploadFile not found in database."""
-    with patch("factories.file_factory.builders.db.session.scalar", return_value=None, autospec=True):
+    session = _make_session_ctx_mock(scalar_return=None)
+    with patch("factories.file_factory.builders.session_factory") as mock_sf:
+        mock_sf.create_session.return_value = session
         mapping = local_file_mapping()
         with pytest.raises(ValueError, match="Invalid upload file"):
             build_from_mapping(mapping=mapping, tenant_id=TEST_TENANT_ID)
@@ -311,7 +335,9 @@ def test_tenant_mismatch():
     mock_file.key = "test_key"
 
     # Mock the database query to return None (no file found for this tenant)
-    with patch("factories.file_factory.builders.db.session.scalar", return_value=None, autospec=True):
+    session = _make_session_ctx_mock(scalar_return=None)
+    with patch("factories.file_factory.builders.session_factory") as mock_sf:
+        mock_sf.create_session.return_value = session
         mapping = local_file_mapping()
         with pytest.raises(ValueError, match="Invalid upload file"):
             build_from_mapping(mapping=mapping, tenant_id=TEST_TENANT_ID)
@@ -350,11 +376,13 @@ def test_build_from_mapping_scopes_tool_file_to_end_user():
         invoke_from=InvokeFrom.WEB_APP,
     )
 
-    with patch("factories.file_factory.builders.db.session.scalar", return_value=tool_file, autospec=True) as scalar:
+    session = _make_session_ctx_mock(scalar_return=tool_file)
+    with patch("factories.file_factory.builders.session_factory") as mock_sf:
+        mock_sf.create_session.return_value = session
         with bind_file_access_scope(scope):
             build_from_mapping(mapping=tool_file_mapping(), tenant_id=TEST_TENANT_ID)
 
-    stmt = scalar.call_args.args[0]
+    stmt = session.scalar.call_args.args[0]
     whereclause = str(stmt.whereclause)
     assert "tool_files.user_id" in whereclause
 

From 0020aa8f599bef78566f6b390359d36a89dd3824 Mon Sep 17 00:00:00 2001
From: YBoy <231405196+YB0y@users.noreply.github.com>
Date: Fri, 17 Apr 2026 02:13:54 -0600
Subject: [PATCH 11/24] refactor(api): type pipeline template retrieval dicts
 with TypedDict (#34874)

---
 .../built_in/built_in_retrieval.py            |  4 +-
 .../customized/customized_retrieval.py        | 36 ++++++++++++++----
 .../database/database_retrieval.py            | 37 +++++++++++++++----
 .../remote/remote_retrieval.py                | 11 ++----
 4 files changed, 65 insertions(+), 23 deletions(-)

diff --git a/api/services/rag_pipeline/pipeline_template/built_in/built_in_retrieval.py b/api/services/rag_pipeline/pipeline_template/built_in/built_in_retrieval.py
index aa7456dcd3..8c9a81af87 100644
--- a/api/services/rag_pipeline/pipeline_template/built_in/built_in_retrieval.py
+++ b/api/services/rag_pipeline/pipeline_template/built_in/built_in_retrieval.py
@@ -50,7 +50,7 @@ class BuiltInPipelineTemplateRetrieval(PipelineTemplateRetrievalBase):
         :param language: language
         :return:
         """
-        builtin_data: dict[str, dict[str, dict]] = cls._get_builtin_data()
+        builtin_data: dict[str, dict[str, dict[str, Any]]] = cls._get_builtin_data()
         return builtin_data.get("pipeline_templates", {}).get(language, {})
 
     @classmethod
@@ -60,5 +60,5 @@ class BuiltInPipelineTemplateRetrieval(PipelineTemplateRetrievalBase):
         :param template_id: Template ID
         :return:
         """
-        builtin_data: dict[str, dict[str, dict]] = cls._get_builtin_data()
+        builtin_data: dict[str, dict[str, dict[str, Any]]] = cls._get_builtin_data()
         return builtin_data.get("pipeline_templates", {}).get(template_id)
diff --git a/api/services/rag_pipeline/pipeline_template/customized/customized_retrieval.py b/api/services/rag_pipeline/pipeline_template/customized/customized_retrieval.py
index 0ffbef8365..9d446f6d4b 100644
--- a/api/services/rag_pipeline/pipeline_template/customized/customized_retrieval.py
+++ b/api/services/rag_pipeline/pipeline_template/customized/customized_retrieval.py
@@ -1,4 +1,4 @@
-from typing import Any
+from typing import Any, TypedDict
 
 import yaml
 from sqlalchemy import select
@@ -10,6 +10,30 @@ from services.rag_pipeline.pipeline_template.pipeline_template_base import Pipel
 from services.rag_pipeline.pipeline_template.pipeline_template_type import PipelineTemplateType
 
 
+class CustomizedTemplateItemDict(TypedDict):
+    id: str
+    name: str
+    description: str
+    icon: dict[str, Any]
+    position: int
+    chunk_structure: str
+
+
+class CustomizedTemplatesResultDict(TypedDict):
+    pipeline_templates: list[CustomizedTemplateItemDict]
+
+
+class CustomizedTemplateDetailDict(TypedDict):
+    id: str
+    name: str
+    icon_info: dict[str, Any]
+    description: str
+    chunk_structure: str
+    export_data: str
+    graph: dict[str, Any]
+    created_by: str
+
+
 class CustomizedPipelineTemplateRetrieval(PipelineTemplateRetrievalBase):
     """
     Retrieval recommended app from database
@@ -17,12 +41,10 @@ class CustomizedPipelineTemplateRetrieval(PipelineTemplateRetrievalBase):
 
     def get_pipeline_templates(self, language: str) -> dict[str, Any]:
         _, current_tenant_id = current_account_with_tenant()
-        result = self.fetch_pipeline_templates_from_customized(tenant_id=current_tenant_id, language=language)
-        return result
+        return self.fetch_pipeline_templates_from_customized(tenant_id=current_tenant_id, language=language)
 
     def get_pipeline_template_detail(self, template_id: str) -> dict[str, Any] | None:
-        result = self.fetch_pipeline_template_detail_from_db(template_id)
-        return result
+        return self.fetch_pipeline_template_detail_from_db(template_id)
 
     def get_type(self) -> str:
         return PipelineTemplateType.CUSTOMIZED
@@ -40,9 +62,9 @@ class CustomizedPipelineTemplateRetrieval(PipelineTemplateRetrievalBase):
             .where(PipelineCustomizedTemplate.tenant_id == tenant_id, PipelineCustomizedTemplate.language == language)
             .order_by(PipelineCustomizedTemplate.position.asc(), PipelineCustomizedTemplate.created_at.desc())
         ).all()
-        recommended_pipelines_results = []
+        recommended_pipelines_results: list[CustomizedTemplateItemDict] = []
         for pipeline_customized_template in pipeline_customized_templates:
-            recommended_pipeline_result = {
+            recommended_pipeline_result: CustomizedTemplateItemDict = {
                 "id": pipeline_customized_template.id,
                 "name": pipeline_customized_template.name,
                 "description": pipeline_customized_template.description,
diff --git a/api/services/rag_pipeline/pipeline_template/database/database_retrieval.py b/api/services/rag_pipeline/pipeline_template/database/database_retrieval.py
index 073eed221c..2964537c35 100644
--- a/api/services/rag_pipeline/pipeline_template/database/database_retrieval.py
+++ b/api/services/rag_pipeline/pipeline_template/database/database_retrieval.py
@@ -1,4 +1,4 @@
-from typing import Any
+from typing import Any, TypedDict
 
 import yaml
 from sqlalchemy import select
@@ -9,18 +9,41 @@ from services.rag_pipeline.pipeline_template.pipeline_template_base import Pipel
 from services.rag_pipeline.pipeline_template.pipeline_template_type import PipelineTemplateType
 
 
+class PipelineTemplateItemDict(TypedDict):
+    id: str
+    name: str
+    description: str
+    icon: dict[str, Any]
+    copyright: str
+    privacy_policy: str
+    position: int
+    chunk_structure: str
+
+
+class PipelineTemplatesResultDict(TypedDict):
+    pipeline_templates: list[PipelineTemplateItemDict]
+
+
+class PipelineTemplateDetailDict(TypedDict):
+    id: str
+    name: str
+    icon_info: dict[str, Any]
+    description: str
+    chunk_structure: str
+    export_data: str
+    graph: dict[str, Any]
+
+
 class DatabasePipelineTemplateRetrieval(PipelineTemplateRetrievalBase):
     """
     Retrieval pipeline   template from database
     """
 
     def get_pipeline_templates(self, language: str) -> dict[str, Any]:
-        result = self.fetch_pipeline_templates_from_db(language)
-        return result
+        return self.fetch_pipeline_templates_from_db(language)
 
     def get_pipeline_template_detail(self, template_id: str) -> dict[str, Any] | None:
-        result = self.fetch_pipeline_template_detail_from_db(template_id)
-        return result
+        return self.fetch_pipeline_template_detail_from_db(template_id)
 
     def get_type(self) -> str:
         return PipelineTemplateType.DATABASE
@@ -39,9 +62,9 @@ class DatabasePipelineTemplateRetrieval(PipelineTemplateRetrievalBase):
             ).all()
         )
 
-        recommended_pipelines_results = []
+        recommended_pipelines_results: list[PipelineTemplateItemDict] = []
         for pipeline_built_in_template in pipeline_built_in_templates:
-            recommended_pipeline_result = {
+            recommended_pipeline_result: PipelineTemplateItemDict = {
                 "id": pipeline_built_in_template.id,
                 "name": pipeline_built_in_template.name,
                 "description": pipeline_built_in_template.description,
diff --git a/api/services/rag_pipeline/pipeline_template/remote/remote_retrieval.py b/api/services/rag_pipeline/pipeline_template/remote/remote_retrieval.py
index d5ef745bec..9565ac46cc 100644
--- a/api/services/rag_pipeline/pipeline_template/remote/remote_retrieval.py
+++ b/api/services/rag_pipeline/pipeline_template/remote/remote_retrieval.py
@@ -17,21 +17,18 @@ class RemotePipelineTemplateRetrieval(PipelineTemplateRetrievalBase):
     """
 
     def get_pipeline_template_detail(self, template_id: str) -> dict[str, Any] | None:
-        result: dict[str, Any] | None
         try:
-            result = self.fetch_pipeline_template_detail_from_dify_official(template_id)
+            return self.fetch_pipeline_template_detail_from_dify_official(template_id)
         except Exception as e:
             logger.warning("fetch recommended app detail from dify official failed: %r, switch to database.", e)
-            result = DatabasePipelineTemplateRetrieval.fetch_pipeline_template_detail_from_db(template_id)
-        return result
+            return DatabasePipelineTemplateRetrieval.fetch_pipeline_template_detail_from_db(template_id)
 
     def get_pipeline_templates(self, language: str) -> dict[str, Any]:
         try:
-            result = self.fetch_pipeline_templates_from_dify_official(language)
+            return self.fetch_pipeline_templates_from_dify_official(language)
         except Exception as e:
             logger.warning("fetch pipeline templates from dify official failed: %r, switch to database.", e)
-            result = DatabasePipelineTemplateRetrieval.fetch_pipeline_templates_from_db(language)
-        return result
+            return DatabasePipelineTemplateRetrieval.fetch_pipeline_templates_from_db(language)
 
     def get_type(self) -> str:
         return PipelineTemplateType.REMOTE

From bd25240123cf046dd36adc819d6a2e8cf5eed012 Mon Sep 17 00:00:00 2001
From: hyl64 <78853927+hyl64@users.noreply.github.com>
Date: Fri, 17 Apr 2026 16:21:32 +0800
Subject: [PATCH 12/24] fix: raise chat settings select dropdown above dialog
 (#35357)

Co-authored-by: Stephen Zhou <hi@hyoban.cc>
---
 .../inputs-form/__tests__/content.spec.tsx          | 13 +++++++++++++
 .../chat/chat-with-history/inputs-form/content.tsx  |  2 +-
 .../inputs-form/__tests__/content.spec.tsx          | 11 +++++++++++
 .../chat/embedded-chatbot/inputs-form/content.tsx   |  2 +-
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/__tests__/content.spec.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/__tests__/content.spec.tsx
index c1a0f3e294..6081024490 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/__tests__/content.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/__tests__/content.spec.tsx
@@ -248,6 +248,19 @@ describe('InputsFormContent', () => {
     expect(mockSetCurrentConversationInputs).toHaveBeenCalledWith(expect.objectContaining({ sel: 'A' }))
   })
 
+  it('renders select dropdown above the settings dialog layer', async () => {
+    const user = userEvent.setup()
+    const context = createMockContext({
+      inputsForms: [{ variable: 'sel', type: InputVarType.select, label: 'Sel', options: ['A', 'B'], default: 'B' }],
+      currentConversationInputs: {},
+    })
+
+    renderWithContext(<InputsFormContent />, context)
+    await user.click(screen.getByText('B'))
+
+    expect(screen.getByText('A').closest('.z-\\[60\\]')).not.toBeNull()
+  })
+
   it('handles select input with existing value (value not in options -> shows placeholder)', () => {
     const context = createMockContext({
       inputsForms: [{ variable: 'sel', type: InputVarType.select, label: 'Sel', options: ['A'], default: undefined }],
diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
index 127cf2c252..4baa46744d 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
@@ -86,7 +86,7 @@ const InputsFormContent = ({ showTip }: Props) => {
           )}
           {form.type === InputVarType.select && (
             <PortalSelect
-              popupClassName="w-[200px]"
+              popupClassName="z-[60] w-[200px]"
               value={inputsFormValue?.[form.variable] ?? form.default ?? ''}
               items={form.options.map((option: string) => ({ value: option, name: option }))}
               onSelect={item => handleFormChange(form.variable, item.value as string)}
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx
index 526fca2061..f682752645 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx
@@ -200,6 +200,17 @@ describe('InputsFormContent', () => {
     expect(mockContextValue.handleNewConversationInputsChange).toHaveBeenCalled()
   })
 
+  it('should render select dropdown above the settings dialog layer', async () => {
+    render(<InputsFormContent />)
+    const selectTrigger = screen.getAllByText(/Select Label/i).find(el => el.tagName === 'SPAN')
+    if (!selectTrigger)
+      throw new Error('Select trigger not found')
+
+    await user.click(selectTrigger)
+
+    expect(screen.getByText('Option 1').closest('.z-\\[60\\]')).not.toBeNull()
+  })
+
   it('should handle single file upload change', async () => {
     render(<InputsFormContent />)
     const uploadButtons = screen.getAllByText('Upload')
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
index 2ce40480c3..733e3b1101 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
@@ -86,7 +86,7 @@ const InputsFormContent = ({ showTip }: Props) => {
           )}
           {form.type === InputVarType.select && (
             <PortalSelect
-              popupClassName="w-[200px]"
+              popupClassName="z-[60] w-[200px]"
               value={inputsFormValue?.[form.variable] ?? form.default ?? ''}
               items={form.options.map((option: string) => ({ value: option, name: option }))}
               onSelect={item => handleFormChange(form.variable, item.value as string)}

From f56ce9d3b1ad33b31a445be8b497d45918643d8e Mon Sep 17 00:00:00 2001
From: hyl64 <78853927+hyl64@users.noreply.github.com>
Date: Fri, 17 Apr 2026 16:34:04 +0800
Subject: [PATCH 13/24] fix: guard chat file preview rendering when mime type
 is missing (#35355)

Co-authored-by: Stephen Zhou <hi@hyoban.cc>
---
 .../__tests__/file-item.spec.tsx                  | 15 +++++++++++++++
 .../file-uploader-in-chat-input/file-item.tsx     |  7 ++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-item.spec.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-item.spec.tsx
index c03f009cee..00dd7d9971 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-item.spec.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-item.spec.tsx
@@ -222,6 +222,21 @@ describe('FileItem (chat-input)', () => {
     expect(document.querySelector('audio')).not.toBeInTheDocument()
   })
 
+  it('should not throw when file type is missing', () => {
+    expect(() => {
+      render(
+        <FileItem
+          file={createFile({
+            name: 'generated.png',
+            type: undefined as unknown as string,
+            supportFileType: 'document',
+          })}
+          canPreview
+        />,
+      )
+    }).not.toThrow()
+  })
+
   it('should close video preview', () => {
     render(
       <FileItem
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
index 34056a85d5..a23d616481 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
@@ -36,6 +36,7 @@ const FileItem = ({
   const [previewUrl, setPreviewUrl] = useState('')
   const ext = getFileExtension(name, type, isRemote)
   const uploadError = progress === -1
+  const [typeCategory = '', typeSubtype = ''] = type?.split('/') ?? []
 
   let tmp_preview_url = url || base64Url
   if (!tmp_preview_url && file?.originalFile)
@@ -121,7 +122,7 @@ const FileItem = ({
         </div>
       </div>
       {
-        type.split('/')[0] === 'audio' && canPreview && previewUrl && (
+        typeCategory === 'audio' && canPreview && previewUrl && (
           <AudioPreview
             title={name}
             url={previewUrl}
@@ -130,7 +131,7 @@ const FileItem = ({
         )
       }
       {
-        type.split('/')[0] === 'video' && canPreview && previewUrl && (
+        typeCategory === 'video' && canPreview && previewUrl && (
           <VideoPreview
             title={name}
             url={previewUrl}
@@ -139,7 +140,7 @@ const FileItem = ({
         )
       }
       {
-        type.split('/')[1] === 'pdf' && canPreview && previewUrl && (
+        typeSubtype === 'pdf' && canPreview && previewUrl && (
           <PdfPreview url={previewUrl} onCancel={() => { setPreviewUrl('') }} />
         )
       }

From dfcc0f8863b58d87ae579450b65509a54f7eb49d Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Fri, 17 Apr 2026 16:46:11 +0800
Subject: [PATCH 14/24] refactor(dify-ui): finish primitive migration from
 web/base/ui to @langgenius/dify-ui (#35349)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .github/workflows/web-tests.yml               |  31 +++
 codecov.yml                                   |   9 +
 eslint-suppressions.json                      |   5 -
 packages/dify-ui/.gitignore                   |   3 +
 packages/dify-ui/.storybook/main.ts           |  27 +++
 packages/dify-ui/.storybook/preview.tsx       |  31 +++
 packages/dify-ui/.storybook/storybook.css     |  19 ++
 packages/dify-ui/AGENTS.md                    |  11 +-
 packages/dify-ui/package.json                 |  93 ++++++++-
 .../alert-dialog/__tests__/index.spec.tsx     |   0
 .../src}/alert-dialog/index.stories.tsx       |   2 +-
 .../dify-ui/src}/alert-dialog/index.tsx       |   6 +-
 .../src}/avatar/__tests__/index.spec.tsx      |   0
 .../dify-ui/src}/avatar/index.stories.tsx     |   2 +-
 .../dify-ui/src}/avatar/index.tsx             |   2 +-
 .../src}/button/__tests__/index.spec.tsx      |   0
 .../dify-ui/src}/button/index.stories.tsx     |   2 +-
 .../dify-ui/src}/button/index.tsx             |   2 +-
 .../context-menu/__tests__/index.spec.tsx     |   0
 .../src}/context-menu/index.stories.tsx       |   2 +-
 .../dify-ui/src}/context-menu/index.tsx       |  13 +-
 .../src}/dialog/__tests__/index.spec.tsx      |   0
 .../dify-ui/src}/dialog/index.stories.tsx     |   2 +-
 .../dify-ui/src}/dialog/index.tsx             |   2 +-
 .../dropdown-menu/__tests__/index.spec.tsx    |   0
 .../src}/dropdown-menu/index.stories.tsx      |   2 +-
 .../dify-ui/src}/dropdown-menu/index.tsx      |  12 +-
 .../number-field/__tests__/index.spec.tsx     |   0
 .../src}/number-field/index.stories.tsx       |   4 +-
 .../dify-ui/src}/number-field/index.tsx       |   2 +-
 .../dify-ui/src}/overlay-shared.ts            |   0
 .../ui => packages/dify-ui/src}/placement.ts  |   0
 .../src}/popover/__tests__/index.spec.tsx     |   0
 .../dify-ui/src}/popover/index.stories.tsx    |   6 +-
 .../dify-ui/src}/popover/index.tsx            |   8 +-
 .../src}/scroll-area/__tests__/index.spec.tsx |   0
 .../src}/scroll-area/index.stories.tsx        |  18 +-
 .../dify-ui/src}/scroll-area/index.tsx        |   2 +-
 .../src}/select/__tests__/index.spec.tsx      |   0
 .../dify-ui/src}/select/index.stories.tsx     |   2 +-
 .../dify-ui/src}/select/index.tsx             |  11 +-
 .../src}/slider/__tests__/index.spec.tsx      |   0
 .../dify-ui/src}/slider/index.stories.tsx     |   2 +-
 .../dify-ui/src}/slider/index.tsx             |   2 +-
 .../src}/switch/__tests__/index.spec.tsx      |   3 +-
 .../dify-ui/src}/switch/index.stories.tsx     |  14 +-
 .../dify-ui/src}/switch/index.tsx             |  85 ++++++---
 .../src}/toast/__tests__/index.spec.tsx       |   0
 .../dify-ui/src}/toast/index.stories.tsx      |   2 +-
 .../dify-ui/src}/toast/index.tsx              |   2 +-
 .../src}/tooltip/__tests__/index.spec.tsx     |   0
 .../dify-ui/src}/tooltip/index.stories.tsx    |   4 +-
 .../dify-ui/src}/tooltip/index.tsx            |   8 +-
 packages/dify-ui/tailwind.config.ts           |  23 +++
 packages/dify-ui/tests/setup.ts               |  44 +++++
 packages/dify-ui/tsconfig.json                |  12 +-
 packages/dify-ui/vite.config.ts               |  27 +++
 packages/tsconfig/nextjs.json                 |   2 +-
 packages/tsconfig/package.json                |   2 +-
 packages/tsconfig/{web.json => react.json}    |   0
 pnpm-lock.yaml                                | 179 ++++++++++++++++++
 pnpm-workspace.yaml                           |   1 +
 web/.storybook/preview.tsx                    |   2 +-
 web/__tests__/app/app-publisher-flow.test.tsx |   2 +-
 .../apps/app-card-operations-flow.test.tsx    |   2 +-
 .../billing/cloud-plan-payment-flow.test.tsx  |   2 +-
 .../billing/self-hosted-plan-flow.test.tsx    |   2 +-
 .../datasets/create-dataset-flow.test.tsx     |   2 +-
 .../datasets/dataset-settings-flow.test.tsx   |   4 +-
 .../explore/sidebar-lifecycle-flow.test.tsx   |   4 +-
 .../plugins/plugin-install-flow.test.ts       |   2 +-
 .../dsl-export-import-flow.test.ts            |   2 +-
 .../tools/tool-provider-detail-flow.test.tsx  |   2 +-
 .../[appId]/overview/card-view.tsx            |   2 +-
 .../[appId]/overview/tracing/config-popup.tsx |   2 +-
 .../[appId]/overview/tracing/panel.tsx        |   2 +-
 .../tracing/provider-config-modal.tsx         |  22 +--
 .../(humanInputLayout)/form/[token]/form.tsx  |   4 +-
 .../webapp-reset-password/check-code/page.tsx |   4 +-
 .../webapp-reset-password/page.tsx            |   4 +-
 .../set-password/page.tsx                     |   4 +-
 .../webapp-signin/check-code/page.tsx         |   4 +-
 .../components/external-member-sso-auth.tsx   |   2 +-
 .../components/mail-and-code-auth.tsx         |   4 +-
 .../components/mail-and-password-auth.tsx     |   4 +-
 .../webapp-signin/components/sso-auth.tsx     |   4 +-
 .../account-page/AvatarWithEdit.tsx           |  10 +-
 .../account-page/email-change-modal.tsx       |   6 +-
 .../(commonLayout)/account-page/index.tsx     |   6 +-
 web/app/account/(commonLayout)/avatar.tsx     |   2 +-
 .../delete-account/components/check-email.tsx |   2 +-
 .../delete-account/components/feed-back.tsx   |   4 +-
 .../components/verify-email.tsx               |   2 +-
 web/app/account/(commonLayout)/header.tsx     |   2 +-
 web/app/account/oauth/authorize/page.tsx      |   6 +-
 web/app/activate/activateForm.tsx             |   2 +-
 .../__tests__/app-sidebar-dropdown.spec.tsx   |   2 +-
 .../dataset-sidebar-dropdown.spec.tsx         |   2 +-
 .../__tests__/app-info-detail-panel.spec.tsx  |   2 +-
 .../__tests__/app-operations.spec.tsx         |   4 +-
 .../__tests__/use-app-info-actions.spec.ts    |   2 +-
 .../app-info/app-info-detail-panel.tsx        |   2 +-
 .../app-sidebar/app-info/app-info-modals.tsx  |  10 +-
 .../app-sidebar/app-info/app-operations.tsx   |  10 +-
 .../app-info/use-app-info-actions.ts          |   2 +-
 .../app-sidebar/app-sidebar-dropdown.tsx      |  10 +-
 .../__tests__/dropdown-callbacks.spec.tsx     |   2 +-
 .../app-sidebar/dataset-info/dropdown.tsx     |  30 +--
 .../app-sidebar/dataset-sidebar-dropdown.tsx  |  10 +-
 .../components/app-sidebar/toggle-button.tsx  |   2 +-
 .../app/annotation/__tests__/index.spec.tsx   |   2 +-
 .../__tests__/index.spec.tsx                  |   2 +-
 .../annotation/add-annotation-modal/index.tsx |   4 +-
 .../app/annotation/batch-action.tsx           |  14 +-
 .../__tests__/csv-uploader.spec.tsx           |   2 +-
 .../__tests__/index.spec.tsx                  |   2 +-
 .../csv-uploader.tsx                          |   4 +-
 .../batch-add-annotation-modal/index.tsx      |   4 +-
 .../index.tsx                                 |   6 +-
 .../__tests__/index.spec.tsx                  |   2 +-
 .../edit-annotation-modal/edit-item/index.tsx |   2 +-
 .../edit-annotation-modal/index.tsx           |  14 +-
 .../app/annotation/header-opts/index.tsx      |  12 +-
 web/app/components/app/annotation/index.tsx   |   4 +-
 .../remove-annotation-confirm-modal/index.tsx |   6 +-
 .../view-annotation-modal/index.tsx           |  16 +-
 .../__tests__/access-control.spec.tsx         |   2 +-
 .../__tests__/index.spec.tsx                  |   2 +-
 .../add-member-or-group-pop.tsx               |   6 +-
 .../app/app-access-control/index.tsx          |   4 +-
 .../specific-groups-or-members.tsx            |   2 +-
 .../app-publisher/__tests__/index.spec.tsx    |   2 +-
 .../publish-with-multiple-model.spec.tsx      |   2 +-
 .../__tests__/version-info-modal.spec.tsx     |   4 +-
 .../app/app-publisher/features-wrapper.tsx    |  16 +-
 .../components/app/app-publisher/index.tsx    |   6 +-
 .../publish-with-multiple-model.tsx           |  10 +-
 .../components/app/app-publisher/sections.tsx |  12 +-
 .../app/app-publisher/version-info-modal.tsx  |   4 +-
 .../warning-mask/cannot-query-dataset.tsx     |   2 +-
 .../base/warning-mask/formatting-changed.tsx  |   2 +-
 .../__tests__/advanced-prompt-input.spec.tsx  |   2 +-
 .../__tests__/simple-prompt-input.spec.tsx    |   2 +-
 .../config-prompt/advanced-prompt-input.tsx   |  14 +-
 .../config-prompt/confirm-add-var/index.tsx   |   2 +-
 .../conversation-history/edit-modal.tsx       |   2 +-
 .../app/configuration/config-prompt/index.tsx |   2 +-
 .../config-prompt/simple-prompt-input.tsx     |  12 +-
 .../config-var/__tests__/index.spec.tsx       |   2 +-
 .../__tests__/form-fields.spec.tsx            |   4 +-
 .../__tests__/index-logic.spec.tsx            |   2 +-
 .../config-modal/__tests__/index.spec.tsx     |   2 +-
 .../config-var/config-modal/form-fields.tsx   |  12 +-
 .../config-var/config-modal/index.tsx         |   2 +-
 .../app/configuration/config-var/index.tsx    |  22 +--
 .../configuration/config-var/modal-foot.tsx   |   2 +-
 .../app/configuration/config-vision/index.tsx |   2 +-
 .../config-vision/param-config.tsx            |   4 +-
 .../config/agent-setting-button.tsx           |   2 +-
 .../agent-setting/__tests__/index.spec.tsx    |   2 +-
 .../config/agent/agent-setting/index.tsx      |   4 +-
 .../config/agent/agent-tools/index.tsx        |   4 +-
 .../agent-tools/setting-built-in-tool.tsx     |   2 +-
 .../__tests__/get-automatic-res.spec.tsx      |   2 +-
 .../automatic/__tests__/result.spec.tsx       |   4 +-
 .../config/automatic/automatic-btn.tsx        |   2 +-
 .../config/automatic/get-automatic-res.tsx    |  22 +--
 .../configuration/config/automatic/result.tsx |   4 +-
 .../__tests__/get-code-generator-res.spec.tsx |   2 +-
 .../code-generator/get-code-generator-res.tsx |  22 +--
 .../app/configuration/config/config-audio.tsx |   4 +-
 .../configuration/config/config-document.tsx  |   4 +-
 .../app/configuration/configuration-view.tsx  |  20 +-
 .../configuration/ctrl-btn-group/index.tsx    |   2 +-
 .../__tests__/config-content.spec.tsx         |   2 +-
 .../params-config/__tests__/index.spec.tsx    |   2 +-
 .../params-config/config-content.tsx          |   4 +-
 .../dataset-config/params-config/index.tsx    |   4 +-
 .../params-config/weighted-score.tsx          |   2 +-
 .../dataset-config/select-dataset/index.tsx   |   2 +-
 .../settings-modal/__tests__/index.spec.tsx   |   2 +-
 .../dataset-config/settings-modal/index.tsx   |   4 +-
 .../debug/__tests__/index.spec.tsx            |   2 +-
 .../__tests__/chat-item.spec.tsx              |   2 +-
 .../debug-with-multiple-model/chat-item.tsx   |   2 +-
 .../debug-with-multiple-model/debug-item.tsx  |   8 +-
 .../debug/debug-with-single-model/index.tsx   |   2 +-
 .../app/configuration/debug/index.tsx         |  14 +-
 .../__tests__/use-configuration-utils.spec.ts |   2 +-
 .../hooks/use-configuration-utils.ts          |   2 +-
 .../prompt-value-panel/index.tsx              |   2 +-
 .../external-data-tool-modal.spec.tsx         |   2 +-
 .../tools/external-data-tool-modal.tsx        |   8 +-
 .../app/create-app-dialog/app-card/index.tsx  |   2 +-
 .../app-list/__tests__/index.spec.tsx         |   2 +-
 .../app/create-app-dialog/app-list/index.tsx  |   2 +-
 .../create-app-modal/__tests__/index.spec.tsx |   2 +-
 .../components/app/create-app-modal/index.tsx |   6 +-
 .../__tests__/index.spec.tsx                  |   2 +-
 .../__tests__/uploader.spec.tsx               |   4 +-
 .../dsl-confirm-modal.tsx                     |   2 +-
 .../app/create-from-dsl-modal/index.tsx       |   4 +-
 .../app/create-from-dsl-modal/uploader.tsx    |   2 +-
 .../duplicate-modal/__tests__/index.spec.tsx  |   2 +-
 .../components/app/duplicate-modal/index.tsx  |   4 +-
 .../components/app/in-site-message/index.tsx  |   2 +-
 .../app/log/__tests__/model-info.spec.tsx     |   2 +-
 web/app/components/app/log/list.tsx           |   2 +-
 web/app/components/app/log/model-info.tsx     |   2 +-
 .../overview/__tests__/trigger-card.spec.tsx  |   4 +-
 .../app/overview/apikey-info-panel/index.tsx  |   2 +-
 .../app/overview/app-card-sections.tsx        |  14 +-
 web/app/components/app/overview/app-card.tsx  |   2 +-
 .../app/overview/customize/index.tsx          |   2 +-
 .../settings/__tests__/index.spec.tsx         |   2 +-
 .../app/overview/settings/index.tsx           |   6 +-
 .../components/app/overview/trigger-card.tsx  |   2 +-
 .../switch-app-modal/__tests__/index.spec.tsx |   2 +-
 .../components/app/switch-app-modal/index.tsx |  22 +--
 .../item/__tests__/action-groups.spec.tsx     |   2 +-
 .../item/__tests__/index.spec.tsx             |   2 +-
 .../app/text-generate/item/action-groups.tsx  |   2 +-
 .../app/text-generate/item/index.tsx          |   2 +-
 .../saved-items/__tests__/index.spec.tsx      |   4 +-
 .../app/text-generate/saved-items/index.tsx   |   2 +-
 .../saved-items/no-data/index.tsx             |   2 +-
 .../components/app/type-selector/index.tsx    |  10 +-
 .../apps/__tests__/app-card.spec.tsx          |  16 +-
 web/app/components/apps/app-card.tsx          |  24 +--
 .../agent-log-modal/__tests__/detail.spec.tsx |   2 +-
 .../agent-log-modal/__tests__/index.spec.tsx  |   2 +-
 .../base/agent-log-modal/detail.tsx           |   2 +-
 .../base/agent-log-modal/index.stories.tsx    |   2 +-
 .../components/base/app-icon-picker/index.tsx |   2 +-
 .../base/audio-btn/__tests__/audio.spec.ts    |   2 +-
 web/app/components/base/audio-btn/audio.ts    |   2 +-
 .../base/audio-gallery/AudioPlayer.tsx        |   2 +-
 .../__tests__/AudioPlayer.spec.tsx            |   2 +-
 .../base/block-input/__tests__/index.spec.tsx |   2 +-
 web/app/components/base/block-input/index.tsx |   2 +-
 .../__tests__/hooks.spec.tsx                  |   2 +-
 .../chat/chat-with-history/chat-wrapper.tsx   |   2 +-
 .../chat-with-history/header-in-mobile.tsx    |  14 +-
 .../chat/chat-with-history/header/index.tsx   |  18 +-
 .../header/mobile-operation-dropdown.tsx      |   8 +-
 .../chat-with-history/header/operation.tsx    |  10 +-
 .../base/chat/chat-with-history/hooks.tsx     |   2 +-
 .../chat-with-history/inputs-form/index.tsx   |   2 +-
 .../chat/chat-with-history/sidebar/index.tsx  |  20 +-
 .../chat-with-history/sidebar/operation.tsx   |  12 +-
 .../sidebar/rename-modal.tsx                  |   2 +-
 .../check-input-forms-hooks.spec.tsx          |   2 +-
 .../base/chat/chat/__tests__/hooks.spec.tsx   |   2 +-
 .../chat/chat/__tests__/question.spec.tsx     |   2 +-
 .../chat/answer/__tests__/operation.spec.tsx  |   2 +-
 .../human-input-content/human-input-form.tsx  |   4 +-
 .../base/chat/chat/answer/operation.tsx       |   2 +-
 .../chat-input-area/__tests__/index.spec.tsx  |   2 +-
 .../base/chat/chat/chat-input-area/index.tsx  |   2 +-
 .../chat/chat/chat-input-area/operation.tsx   |   2 +-
 .../base/chat/chat/check-input-forms-hooks.ts |   2 +-
 web/app/components/base/chat/chat/hooks.ts    |   2 +-
 web/app/components/base/chat/chat/index.tsx   |   2 +-
 .../components/base/chat/chat/question.tsx    |   4 +-
 .../components/base/chat/chat/try-to-ask.tsx  |   2 +-
 .../embedded-chatbot/__tests__/hooks.spec.tsx |   2 +-
 .../chat/embedded-chatbot/chat-wrapper.tsx    |   2 +-
 .../base/chat/embedded-chatbot/hooks.tsx      |   2 +-
 .../inputs-form/__tests__/content.spec.tsx    |   2 +-
 .../embedded-chatbot/inputs-form/index.tsx    |   2 +-
 .../components/base/checkbox-list/index.tsx   |   2 +-
 .../date-picker/footer.tsx                    |   2 +-
 .../time-picker/footer.tsx                    |   2 +-
 .../year-and-month-picker/footer.tsx          |   2 +-
 web/app/components/base/drawer/index.tsx      |   2 +-
 .../components/base/emoji-picker/index.tsx    |   2 +-
 .../components/base/error-boundary/index.tsx  |   2 +-
 .../__tests__/annotation-ctrl-button.spec.tsx |   2 +-
 .../__tests__/config-param-modal.spec.tsx     |   2 +-
 .../annotation-ctrl-button.tsx                |   2 +-
 .../annotation-reply/config-param-modal.tsx   |   4 +-
 .../annotation-reply/index.tsx                |   2 +-
 .../annotation-reply/score-slider/index.tsx   |   2 +-
 .../conversation-opener/index.tsx             |   2 +-
 .../conversation-opener/modal.tsx             |   2 +-
 .../new-feature-panel/feature-bar.tsx         |   2 +-
 .../new-feature-panel/feature-card.tsx        |   2 +-
 .../new-feature-panel/file-upload/index.tsx   |   2 +-
 .../file-upload/setting-content.tsx           |   2 +-
 .../new-feature-panel/image-upload/index.tsx  |   2 +-
 .../moderation-setting-modal.spec.tsx         |   2 +-
 .../new-feature-panel/moderation/index.tsx    |   2 +-
 .../moderation/moderation-content.tsx         |   2 +-
 .../moderation/moderation-setting-modal.tsx   |   4 +-
 .../text-to-speech/index.tsx                  |   2 +-
 .../text-to-speech/param-config-content.tsx   |   2 +-
 .../file-uploader/__tests__/hooks.spec.ts     |   2 +-
 .../file-from-link-or-local/index.tsx         |   2 +-
 .../index.stories.tsx                         |   2 +-
 .../file-uploader-in-attachment/index.tsx     |   2 +-
 .../file-image-item.tsx                       |   2 +-
 .../file-uploader-in-chat-input/file-item.tsx |   2 +-
 .../index.stories.tsx                         |   2 +-
 .../components/base/file-uploader/hooks.ts    |   2 +-
 .../form/components/field/number-input.tsx    |   8 +-
 .../base/form/components/form/actions.tsx     |   2 +-
 .../__tests__/use-check-validated.spec.ts     |   2 +-
 .../base/form/hooks/use-check-validated.ts    |   2 +-
 .../components/base/form/index.stories.tsx    |   2 +-
 .../image-uploader/__tests__/hooks.spec.ts    |   2 +-
 .../__tests__/image-preview.spec.tsx          |   2 +-
 .../components/base/image-uploader/hooks.ts   |   2 +-
 .../base/image-uploader/image-link-input.tsx  |   2 +-
 .../base/image-uploader/image-preview.tsx     |   2 +-
 .../base/inline-delete-confirm/index.tsx      |   2 +-
 .../base/markdown-blocks/button.tsx           |   2 +-
 .../components/base/markdown-blocks/form.tsx  |   6 +-
 .../components/base/modal-like-wrap/index.tsx |   2 +-
 web/app/components/base/modal/index.tsx       |   2 +-
 web/app/components/base/modal/modal.tsx       |   6 +-
 .../base/notion-connector/index.tsx           |   2 +-
 web/app/components/base/pagination/index.tsx  |   2 +-
 web/app/components/base/param-item/index.tsx  |   8 +-
 .../base/portal-to-follow-elem/index.tsx      |  10 +-
 .../plugins/hitl-input-block/input-field.tsx  |   2 +-
 .../workflow-variable-block/component.tsx     |   2 +-
 web/app/components/base/select/index.tsx      |   2 +-
 web/app/components/base/switch/skeleton.tsx   |  41 ----
 .../base/tag-input/__tests__/index.spec.tsx   |   2 +-
 .../base/tag-input/__tests__/interop.spec.tsx |   4 +-
 web/app/components/base/tag-input/index.tsx   |   2 +-
 .../tag-management/__tests__/index.spec.tsx   |   2 +-
 .../tag-management/__tests__/panel.spec.tsx   |   2 +-
 .../__tests__/selector.spec.tsx               |   2 +-
 .../__tests__/tag-item-editor.spec.tsx        |   2 +-
 .../components/base/tag-management/filter.tsx |  10 +-
 .../base/tag-management/index.stories.tsx     |   2 +-
 .../components/base/tag-management/index.tsx  |   2 +-
 .../components/base/tag-management/panel.tsx  |   2 +-
 .../base/tag-management/selector.tsx          |   6 +-
 .../base/tag-management/tag-item-editor.tsx   |  14 +-
 .../base/tag-management/tag-remove-modal.tsx  |   2 +-
 .../text-generation/__tests__/hooks.spec.ts   |   2 +-
 .../components/base/text-generation/hooks.ts  |   2 +-
 web/app/components/base/tooltip/index.tsx     |   2 +-
 .../base/user-avatar-list/index.tsx           |   4 +-
 .../billing/apps-full-in-dialog/index.tsx     |   2 +-
 .../billing/plan-upgrade-modal/index.tsx      |   2 +-
 web/app/components/billing/plan/index.tsx     |   2 +-
 .../billing/pricing/__tests__/dialog.spec.tsx |   2 +-
 .../billing/pricing/__tests__/header.spec.tsx |   2 +-
 web/app/components/billing/pricing/header.tsx |   4 +-
 web/app/components/billing/pricing/index.tsx  |   8 +-
 .../plan-switcher/plan-range-switcher.tsx     |   2 +-
 .../cloud-plan-item/__tests__/index.spec.tsx  |   2 +-
 .../pricing/plans/cloud-plan-item/index.tsx   |   2 +-
 .../__tests__/index.spec.tsx                  |   2 +-
 .../plans/self-hosted-plan-item/index.tsx     |   2 +-
 .../components/billing/upgrade-btn/index.tsx  |   2 +-
 .../custom-page/__tests__/index.spec.tsx      |   2 +-
 .../components/chat-preview-card.tsx          |   2 +-
 .../components/workflow-preview-card.tsx      |   2 +-
 .../__tests__/use-web-app-brand.spec.tsx      |   2 +-
 .../hooks/use-web-app-brand.ts                |   2 +-
 .../custom/custom-web-app-brand/index.tsx     |   4 +-
 .../__tests__/auto-disabled-document.spec.tsx |   4 +-
 .../auto-disabled-document.tsx                |   2 +-
 .../datasets/common/image-previewer/index.tsx |   2 +-
 .../hooks/__tests__/use-upload.spec.tsx       |   4 +-
 .../common/image-uploader/hooks/use-upload.ts |   2 +-
 .../image-uploader-in-chunk/image-item.tsx    |   2 +-
 .../image-item.tsx                            |   2 +-
 .../__tests__/index.spec.tsx                  |   6 +-
 .../common/retrieval-param-config/index.tsx   |   4 +-
 .../__tests__/index.spec.tsx                  |   2 +-
 .../__tests__/uploader.spec.tsx               |   2 +-
 .../dsl-confirm-modal.tsx                     |   2 +-
 .../hooks/__tests__/use-dsl-import.spec.tsx   |   2 +-
 .../hooks/use-dsl-import.ts                   |   2 +-
 .../create-from-dsl-modal/index.tsx           |   2 +-
 .../create-from-dsl-modal/uploader.tsx        |   2 +-
 .../datasets/create-from-pipeline/header.tsx  |   2 +-
 .../list/__tests__/create-card.spec.tsx       |   4 +-
 .../create-from-pipeline/list/create-card.tsx |   2 +-
 .../__tests__/edit-pipeline-info.spec.tsx     |   4 +-
 .../template-card/__tests__/index.spec.tsx    |   4 +-
 .../list/template-card/actions.tsx            |   8 +-
 .../list/template-card/details/index.tsx      |   2 +-
 .../list/template-card/edit-pipeline-info.tsx |   4 +-
 .../list/template-card/index.tsx              |  14 +-
 .../create/embedding-process/index.tsx        |   2 +-
 .../__tests__/index.spec.tsx                  |   2 +-
 .../empty-dataset-creation-modal/index.tsx    |   4 +-
 .../hooks/__tests__/use-file-upload.spec.tsx  |   2 +-
 .../file-uploader/hooks/use-file-upload.ts    |   2 +-
 .../step-one/components/next-step-button.tsx  |   2 +-
 .../components/general-chunking-options.tsx   |   2 +-
 .../components/indexing-mode-section.tsx      |   2 +-
 .../create/step-two/components/inputs.tsx     |  12 +-
 .../components/parent-child-options.tsx       |   2 +-
 .../step-two/components/step-two-footer.tsx   |   2 +-
 .../__tests__/use-document-creation.spec.ts   |   2 +-
 .../step-two/hooks/use-document-creation.ts   |   2 +-
 .../datasets/create/step-two/index.tsx        |   2 +-
 .../language-select/__tests__/index.spec.tsx  |   4 +-
 .../create/step-two/language-select/index.tsx |   2 +-
 .../create/stop-embedding-modal/index.tsx     |   2 +-
 .../website/base/crawled-result-item.tsx      |   2 +-
 .../datasets/create/website/base/header.tsx   |   2 +-
 .../create/website/base/url-input.tsx         |   2 +-
 .../create/website/firecrawl/index.tsx        |   2 +-
 .../website/jina-reader/base/url-input.tsx    |   2 +-
 .../create/website/jina-reader/index.tsx      |   2 +-
 .../datasets/create/website/no-data.tsx       |   2 +-
 .../create/website/watercrawl/index.tsx       |   2 +-
 .../components/__tests__/operations.spec.tsx  |   2 +-
 .../__tests__/rename-modal.spec.tsx           |   2 +-
 .../__tests__/use-document-actions.spec.ts    |   2 +-
 .../hooks/use-document-actions.ts             |   2 +-
 .../documents/components/documents-header.tsx |   2 +-
 .../documents/components/empty-element.tsx    |   2 +-
 .../documents/components/operations.tsx       |  24 +--
 .../documents/components/rename-modal.tsx     |   4 +-
 .../create-from-pipeline/actions/index.tsx    |   2 +-
 .../base/__tests__/header.spec.tsx            |   2 +-
 .../data-source/base/header.tsx               |   2 +-
 .../__tests__/use-local-file-upload.spec.tsx  |   2 +-
 .../online-documents/__tests__/index.spec.tsx |   4 +-
 .../data-source/online-documents/index.tsx    |   2 +-
 .../online-drive/__tests__/index.spec.tsx     |   4 +-
 .../online-drive/connect/index.tsx            |   2 +-
 .../header/breadcrumbs/dropdown/index.tsx     |   6 +-
 .../file-list/list/empty-search-result.tsx    |   2 +-
 .../data-source/online-drive/header.tsx       |   2 +-
 .../data-source/online-drive/index.tsx        |   2 +-
 .../__tests__/crawled-result-item.spec.tsx    |   2 +-
 .../base/crawled-result-item.tsx              |   2 +-
 .../base/options/__tests__/index.spec.tsx     |   4 +-
 .../website-crawl/base/options/index.tsx      |   4 +-
 .../create-from-pipeline/left-header.tsx      |   2 +-
 .../online-document-preview.spec.tsx          |   4 +-
 .../preview/chunk-preview.tsx                 |   2 +-
 .../preview/online-document-preview.tsx       |   2 +-
 .../__tests__/components.spec.tsx             |   4 +-
 .../process-documents/__tests__/form.spec.tsx |   4 +-
 .../__tests__/header.spec.tsx                 |   2 +-
 .../process-documents/actions.tsx             |   2 +-
 .../process-documents/form.tsx                |   2 +-
 .../process-documents/header.tsx              |   2 +-
 .../processing/embedding-process/index.tsx    |   2 +-
 .../documents/detail/__tests__/index.spec.tsx |   2 +-
 .../detail/__tests__/new-segment.spec.tsx     |   2 +-
 .../__tests__/csv-uploader.spec.tsx           |   2 +-
 .../detail/batch-modal/csv-uploader.tsx       |   4 +-
 .../documents/detail/batch-modal/index.tsx    |   2 +-
 .../detail/completed/__tests__/index.spec.tsx |   2 +-
 .../__tests__/new-child-segment.spec.tsx      |   2 +-
 .../completed/common/action-buttons.tsx       |   2 +-
 .../detail/completed/common/batch-action.tsx  |  18 +-
 .../completed/common/regeneration-modal.tsx   |   2 +-
 .../__tests__/use-child-segment-data.spec.ts  |   2 +-
 .../__tests__/use-segment-list-data.spec.ts   |   2 +-
 .../completed/hooks/use-child-segment-data.ts |   2 +-
 .../completed/hooks/use-segment-list-data.ts  |   2 +-
 .../detail/completed/new-child-segment.tsx    |   2 +-
 .../detail/completed/segment-card/index.tsx   |  20 +-
 .../detail/embedding/__tests__/index.spec.tsx |   2 +-
 .../documents/detail/embedding/index.tsx      |   2 +-
 .../datasets/documents/detail/index.tsx       |   2 +-
 .../detail/metadata/__tests__/index.spec.tsx  |   2 +-
 .../metadata/components/doc-type-selector.tsx |   2 +-
 .../__tests__/use-metadata-state.spec.ts      |   2 +-
 .../metadata/hooks/use-metadata-state.ts      |   2 +-
 .../documents/detail/metadata/index.tsx       |   2 +-
 .../datasets/documents/detail/new-segment.tsx |   2 +-
 .../documents/detail/segment-add/index.tsx    |  10 +-
 .../pipeline-settings/left-header.tsx         |   2 +-
 .../process-documents/actions.tsx             |   2 +-
 .../status-item/__tests__/index.spec.tsx      |   2 +-
 .../datasets/documents/status-item/index.tsx  |   4 +-
 .../__tests__/index.spec.tsx                  |   2 +-
 .../external-api/external-api-modal/index.tsx |  18 +-
 .../external-api/external-api-panel/index.tsx |   2 +-
 .../external-knowledge-api-card/index.tsx     |  18 +-
 .../connector/__tests__/index.spec.tsx        |   4 +-
 .../connector/index.tsx                       |   2 +-
 .../create/ExternalApiSelection.tsx           |   2 +-
 .../external-knowledge-base/create/index.tsx  |   2 +-
 .../datasets/extra-info/api-access/card.tsx   |   2 +-
 .../datasets/extra-info/api-access/index.tsx  |   2 +-
 .../datasets/extra-info/service-api/card.tsx  |   2 +-
 .../datasets/extra-info/service-api/index.tsx |   2 +-
 .../modify-external-retrieval-modal.spec.tsx  |   2 +-
 .../__tests__/modify-retrieval-modal.spec.tsx |   4 +-
 .../components/query-input/index.tsx          |   2 +-
 .../modify-external-retrieval-modal.tsx       |   2 +-
 .../hit-testing/modify-retrieval-modal.tsx    |   4 +-
 .../__tests__/operations.spec.tsx             |   2 +-
 .../components/dataset-card-modals.tsx        |   6 +-
 .../components/operations-dropdown.tsx        |   4 +-
 .../__tests__/use-dataset-card-state.spec.ts  |  10 +-
 .../hooks/use-dataset-card-state.ts           |   2 +-
 .../datasets/list/dataset-card/operations.tsx |   6 +-
 web/app/components/datasets/list/index.tsx    |   4 +-
 .../datasets/metadata/add-metadata-button.tsx |   2 +-
 .../__tests__/modal.spec.tsx                  |   2 +-
 .../edit-metadata-batch/input-combined.tsx    |   6 +-
 .../metadata/edit-metadata-batch/modal.tsx    |   4 +-
 .../use-batch-edit-document-metadata.spec.ts  |   2 +-
 .../use-edit-dataset-metadata.spec.ts         |   2 +-
 .../__tests__/use-metadata-document.spec.ts   |   2 +-
 .../hooks/use-batch-edit-document-metadata.ts |   2 +-
 .../hooks/use-edit-dataset-metadata.ts        |   2 +-
 .../metadata/hooks/use-metadata-document.ts   |   2 +-
 .../__tests__/create-metadata-modal.spec.tsx  |   2 +-
 .../dataset-metadata-drawer.spec.tsx          |   2 +-
 .../__tests__/select-metadata-modal.spec.tsx  |   2 +-
 .../create-metadata-modal.tsx                 |   2 +-
 .../dataset-metadata-drawer.tsx               |  28 +--
 .../select-metadata-modal.tsx                 |   4 +-
 .../metadata/metadata-document/index.tsx      |   2 +-
 .../metadata/metadata-document/no-data.tsx    |   2 +-
 .../rename-modal/__tests__/index.spec.tsx     |   2 +-
 .../datasets/rename-modal/index.tsx           |   4 +-
 .../settings/form/__tests__/index.spec.tsx    |   4 +-
 .../hooks/__tests__/use-form-state.spec.ts    |  10 +-
 .../settings/form/hooks/use-form-state.ts     |   2 +-
 .../datasets/settings/form/index.tsx          |   2 +-
 .../settings/index-method/keyword-number.tsx  |  12 +-
 .../settings/permission-selector/index.tsx    |   2 +-
 .../settings/summary-index-setting.tsx        |   2 +-
 .../develop/secret-key/secret-key-button.tsx  |   2 +-
 .../secret-key/secret-key-generate.tsx        |   2 +-
 .../develop/secret-key/secret-key-modal.tsx   |  20 +-
 web/app/components/explore/app-card/index.tsx |   2 +-
 web/app/components/explore/app-list/index.tsx |   2 +-
 .../explore/create-app-modal/index.tsx        |   6 +-
 .../item-operation/__tests__/index.spec.tsx   |   2 +-
 .../explore/item-operation/index.tsx          |  12 +-
 .../explore/sidebar/__tests__/index.spec.tsx  |   4 +-
 web/app/components/explore/sidebar/index.tsx  |  18 +-
 .../explore/try-app/app-info/index.tsx        |   2 +-
 web/app/components/explore/try-app/index.tsx  |   2 +-
 web/app/components/goto-anything/index.tsx    |   2 +-
 .../components/header/account-about/index.tsx |   2 +-
 .../__tests__/compliance.spec.tsx             |   4 +-
 .../__tests__/support.spec.tsx                |   4 +-
 .../header/account-dropdown/compliance.tsx    |   8 +-
 .../header/account-dropdown/index.tsx         |   4 +-
 .../header/account-dropdown/support.tsx       |   2 +-
 .../__tests__/index.spec.tsx                  |   6 +-
 .../workplace-selector/index.tsx              |   6 +-
 .../__tests__/menu-dialog.dialog.spec.tsx     |   2 +-
 .../__tests__/modal.spec.tsx                  |   2 +-
 .../api-based-extension-page/index.tsx        |   2 +-
 .../api-based-extension-page/item.tsx         |  16 +-
 .../api-based-extension-page/modal.tsx        |   4 +-
 .../data-source-page-new/card.tsx             |  14 +-
 .../data-source-page-new/configure.tsx        |   2 +-
 .../data-source-page-new/item.tsx             |   2 +-
 .../data-source-page-new/operator.tsx         |  14 +-
 .../header/account-setting/index.tsx          |   4 +-
 .../language-page/__tests__/index.spec.tsx    |   2 +-
 .../account-setting/language-page/index.tsx   |   2 +-
 .../__tests__/dialog.spec.tsx                 |   2 +-
 .../__tests__/index.spec.tsx                  |   2 +-
 .../edit-workspace-modal/index.tsx            |   6 +-
 .../account-setting/members-page/index.tsx    |   4 +-
 .../members-page/invite-button.tsx            |   2 +-
 .../invite-modal/__tests__/index.spec.tsx     |   4 +-
 .../members-page/invite-modal/index.tsx       |   6 +-
 .../invite-modal/role-selector.tsx            |   6 +-
 .../members-page/invited-modal/index.tsx      |   6 +-
 .../invited-modal/invitation-link.tsx         |   2 +-
 .../members-page/operation/index.tsx          |   8 +-
 .../__tests__/index.spec.tsx                  |   2 +-
 .../transfer-ownership-modal/index.tsx        |   4 +-
 .../member-selector.tsx                       |   2 +-
 .../header/account-setting/menu-dialog.tsx    |   2 +-
 .../model-auth/add-custom-model.tsx           |   6 +-
 .../model-auth/authorized/credential-item.tsx |   2 +-
 .../model-auth/authorized/index.tsx           |  18 +-
 .../model-auth/config-model.tsx               |   2 +-
 .../model-auth/config-provider.tsx            |   6 +-
 .../hooks/__tests__/use-auth.spec.tsx         |   4 +-
 .../model-auth/hooks/use-auth.ts              |   2 +-
 .../manage-custom-model-credentials.tsx       |   6 +-
 .../switch-credential-in-load-balancing.tsx   |   2 +-
 .../model-modal/__tests__/dialog.spec.tsx     |   4 +-
 .../model-provider-page/model-modal/index.tsx |  28 +--
 .../__tests__/parameter-item.select.spec.tsx  |   4 +-
 .../__tests__/parameter-item.spec.tsx         |   2 +-
 .../configuration-button.tsx                  |   2 +-
 .../model-parameter-modal/index.tsx           |  10 +-
 .../model-parameter-modal/parameter-item.tsx  |   8 +-
 .../presets-parameter.tsx                     |  12 +-
 .../model-parameter-modal/trigger.tsx         |   2 +-
 .../model-selector/__tests__/popover.spec.tsx |   2 +-
 .../__tests__/popup-item.spec.tsx             |   2 +-
 .../model-selector/index.tsx                  |   4 +-
 .../model-selector/model-selector-trigger.tsx |   2 +-
 .../model-selector/popup-item.tsx             |  10 +-
 .../model-selector/popup.tsx                  |   2 +-
 .../__tests__/credential-panel.spec.tsx       |   2 +-
 .../model-load-balancing-modal.spec.tsx       |   4 +-
 .../use-change-provider-priority.spec.ts      |   2 +-
 .../__tests__/dialog.spec.tsx                 |   2 +-
 .../use-activate-credential.spec.tsx          |   2 +-
 .../model-auth-dropdown/api-key-section.tsx   |   2 +-
 .../model-auth-dropdown/dropdown-content.tsx  |   6 +-
 .../model-auth-dropdown/index.tsx             |   8 +-
 .../usage-priority-section.tsx                |   2 +-
 .../use-activate-credential.ts                |   2 +-
 .../provider-added-card/model-list-item.tsx   |   2 +-
 .../model-load-balancing-configs.tsx          |   2 +-
 .../model-load-balancing-modal.tsx            |  16 +-
 .../provider-added-card/priority-selector.tsx |   2 +-
 .../provider-card-actions.tsx                 |   4 +-
 .../provider-added-card/quota-panel.tsx       |   2 +-
 .../use-change-provider-priority.ts           |   2 +-
 .../__tests__/index.spec.tsx                  |   4 +-
 .../system-model-selector/index.tsx           |  12 +-
 .../plugin-page/SerpapiPlugin.tsx             |   2 +-
 .../__tests__/SerpapiPlugin.spec.tsx          |   2 +-
 .../plugin-page/__tests__/index.spec.tsx      |   4 +-
 .../install-plugin/__tests__/hooks.spec.ts    |   2 +-
 .../plugins/install-plugin/base/installed.tsx |   2 +-
 .../plugins/install-plugin/hooks.ts           |   2 +-
 .../install-bundle/steps/install.tsx          |   2 +-
 .../install-bundle/steps/installed.tsx        |   2 +-
 .../__tests__/index.spec.tsx                  |   2 +-
 .../install-from-github/index.tsx             |   2 +-
 .../install-from-github/steps/loaded.tsx      |   2 +-
 .../steps/selectPackage.tsx                   |   2 +-
 .../install-from-github/steps/setURL.tsx      |   2 +-
 .../steps/install.tsx                         |   2 +-
 .../steps/uploading.tsx                       |   2 +-
 .../steps/install.tsx                         |   2 +-
 .../plugins/marketplace/list/card-wrapper.tsx |   2 +-
 .../sort-dropdown/__tests__/index.spec.tsx    |   2 +-
 .../marketplace/sort-dropdown/index.tsx       |   4 +-
 .../__tests__/api-key-modal.spec.tsx          |   2 +-
 .../__tests__/authorize-components.spec.tsx   |   2 +-
 .../__tests__/oauth-client-settings.spec.tsx  |   2 +-
 .../authorize/add-api-key-button.tsx          |   4 +-
 .../authorize/add-oauth-button.tsx            |   4 +-
 .../plugin-auth/authorize/api-key-modal.tsx   |   2 +-
 .../authorize/oauth-client-settings.tsx       |   4 +-
 .../authorized-in-data-source-node.tsx        |   2 +-
 .../plugin-auth/authorized-in-node.tsx        |   2 +-
 .../authorized/__tests__/index.spec.tsx       |   2 +-
 .../plugins/plugin-auth/authorized/index.tsx  |  20 +-
 .../plugins/plugin-auth/authorized/item.tsx   |   2 +-
 .../__tests__/use-plugin-auth-action.spec.ts  |   2 +-
 .../hooks/use-plugin-auth-action.ts           |   2 +-
 .../plugin-auth/plugin-auth-in-agent.tsx      |   2 +-
 .../plugin-auth-in-datasource-node.tsx        |   2 +-
 .../__tests__/detail-header.spec.tsx          |   2 +-
 .../__tests__/endpoint-card.spec.tsx          |   2 +-
 .../__tests__/endpoint-modal.spec.tsx         |   2 +-
 .../__tests__/operation-dropdown.spec.tsx     |   2 +-
 .../datasource-action-list.tsx                |   2 +-
 .../detail-header/__tests__/index.spec.tsx    |   4 +-
 .../components/header-modals.tsx              |   4 +-
 .../__tests__/use-plugin-operations.spec.ts   |   2 +-
 .../hooks/use-plugin-operations.ts            |   2 +-
 .../detail-header/index.tsx                   |   4 +-
 .../plugin-detail-panel/endpoint-card.tsx     |  20 +-
 .../plugin-detail-panel/endpoint-list.tsx     |   2 +-
 .../plugin-detail-panel/endpoint-modal.tsx    |   4 +-
 .../model-selector/__tests__/index.spec.tsx   |   2 +-
 .../__tests__/tts-params-panel.spec.tsx       |   4 +-
 .../model-selector/index.tsx                  |   8 +-
 .../model-selector/tts-params-panel.tsx       |   2 +-
 .../operation-dropdown.tsx                    |   8 +-
 .../__tests__/delete-confirm.spec.tsx         |   4 +-
 .../__tests__/log-viewer.spec.tsx             |   2 +-
 .../__tests__/selector-entry.spec.tsx         |   2 +-
 .../__tests__/selector-view.spec.tsx          |   2 +-
 .../__tests__/subscription-card.spec.tsx      |   2 +-
 .../create/__tests__/common-modal.spec.tsx    |   2 +-
 .../create/__tests__/index.spec.tsx           |   4 +-
 .../create/__tests__/oauth-client.spec.tsx    |   2 +-
 .../use-common-modal-state.helpers.spec.ts    |   2 +-
 .../__tests__/use-common-modal-state.spec.ts  |   2 +-
 .../__tests__/use-oauth-client-state.spec.ts  |   2 +-
 .../hooks/use-common-modal-state.helpers.ts   |   2 +-
 .../create/hooks/use-common-modal-state.ts    |   2 +-
 .../create/hooks/use-oauth-client-state.ts    |   2 +-
 .../subscription-list/create/index.tsx        |   4 +-
 .../subscription-list/create/oauth-client.tsx |   4 +-
 .../subscription-list/delete-confirm.tsx      |  10 +-
 .../edit/__tests__/apikey-edit-modal.spec.tsx |   2 +-
 .../edit/__tests__/index.spec.tsx             |   2 +-
 .../edit/__tests__/manual-edit-modal.spec.tsx |   2 +-
 .../edit/__tests__/oauth-edit-modal.spec.tsx  |   2 +-
 .../edit/apikey-edit-modal.tsx                |   2 +-
 .../edit/manual-edit-modal.tsx                |   2 +-
 .../edit/oauth-edit-modal.tsx                 |   2 +-
 .../subscription-list/log-viewer.tsx          |   2 +-
 .../tool-selector/__tests__/index.spec.tsx    |   2 +-
 .../__tests__/reasoning-config-form.spec.tsx  |   4 +-
 .../__tests__/tool-credentials-form.spec.tsx  |   2 +-
 .../components/reasoning-config-form.tsx      |   2 +-
 .../components/tool-credentials-form.tsx      |   4 +-
 .../tool-selector/components/tool-item.tsx    |   4 +-
 .../plugin-item/__tests__/action.spec.tsx     |   2 +-
 .../components/plugins/plugin-item/action.tsx |  14 +-
 .../plugins/plugin-mutation-model/index.tsx   |   2 +-
 .../plugin-page/__tests__/debug-info.spec.tsx |   2 +-
 .../install-plugin-dropdown.spec.tsx          |   4 +-
 .../__tests__/use-reference-setting.spec.ts   |   4 +-
 .../plugins/plugin-page/debug-info.tsx        |   2 +-
 .../plugins/plugin-page/empty/index.tsx       |   2 +-
 .../components/plugins/plugin-page/index.tsx  |   2 +-
 .../plugin-page/install-plugin-dropdown.tsx   |  14 +-
 .../components/error-plugin-item.tsx          |   2 +-
 .../components/plugin-task-list.tsx           |   2 +-
 .../plugin-page/plugin-tasks/index.tsx        |  10 +-
 .../plugins/plugin-page/plugins-panel.tsx     |   2 +-
 .../plugin-page/use-reference-setting.ts      |   2 +-
 web/app/components/plugins/provider-card.tsx  |   2 +-
 .../__tests__/plugins-picker.spec.tsx         |   2 +-
 .../__tests__/strategy-picker.spec.tsx        |   2 +-
 .../auto-update-setting/plugins-picker.tsx    |   2 +-
 .../auto-update-setting/strategy-picker.tsx   |   2 +-
 .../plugins/reference-setting-modal/index.tsx |   2 +-
 .../__tests__/from-market-place.spec.tsx      |   6 +-
 .../update-plugin/__tests__/index.spec.tsx    |   2 +-
 .../update-plugin/downgrade-warning.tsx       |   2 +-
 .../update-plugin/from-market-place.tsx       |  14 +-
 .../update-plugin/plugin-version-picker.tsx   |  12 +-
 .../components/__tests__/conversion.spec.tsx  |   4 +-
 ...blish-as-knowledge-pipeline-modal.spec.tsx |   2 +-
 .../__tests__/update-dsl-modal.spec.tsx       |   4 +-
 .../rag-pipeline/components/conversion.tsx    |  12 +-
 .../editor/form/__tests__/index.spec.tsx      |   2 +-
 .../panel/input-field/editor/form/index.tsx   |   4 +-
 .../field-list/__tests__/hooks.spec.ts        |   2 +-
 .../field-list/__tests__/index.spec.tsx       |   2 +-
 .../panel/input-field/field-list/hooks.ts     |   2 +-
 .../components/panel/input-field/index.tsx    |   2 +-
 .../test-run/preparation/actions/index.tsx    |   2 +-
 .../__tests__/index.spec.tsx                  |   2 +-
 .../__tests__/options.spec.tsx                |   2 +-
 .../document-processing/actions.tsx           |   2 +-
 .../document-processing/options.tsx           |   2 +-
 .../test-run/result/result-preview/index.tsx  |   2 +-
 .../publish-as-knowledge-pipeline-modal.tsx   |   2 +-
 .../__tests__/index.spec.tsx                  |   2 +-
 .../input-field-button.tsx                    |   2 +-
 .../publisher/__tests__/index.spec.tsx        |   2 +-
 .../publisher/__tests__/popup.spec.tsx        |   4 +-
 .../rag-pipeline-header/publisher/index.tsx   |   2 +-
 .../rag-pipeline-header/publisher/popup.tsx   |  24 +--
 .../components/update-dsl-modal.tsx           |   2 +-
 .../components/version-mismatch-modal.tsx     |   2 +-
 .../hooks/__tests__/index.spec.ts             |   2 +-
 .../hooks/__tests__/use-DSL.spec.ts           |   2 +-
 .../__tests__/use-update-dsl-modal.spec.ts    |   2 +-
 .../components/rag-pipeline/hooks/use-DSL.ts  |   2 +-
 .../hooks/use-update-dsl-modal.ts             |   2 +-
 .../use-text-generation-app-state.spec.ts     |   2 +-
 .../hooks/use-text-generation-app-state.ts    |   2 +-
 .../share/text-generation/index.tsx           |   2 +-
 .../share/text-generation/menu-dropdown.tsx   |  14 +-
 .../result/__tests__/index.spec.tsx           |   2 +-
 .../share/text-generation/result/index.tsx    |   4 +-
 .../share/text-generation/run-batch/index.tsx |   2 +-
 .../run-batch/res-download/index.tsx          |   2 +-
 .../share/text-generation/run-once/index.tsx  |   2 +-
 .../__tests__/get-schema.spec.tsx             |   2 +-
 .../__tests__/index.spec.tsx                  |   2 +-
 .../config-credentials.tsx                    |   2 +-
 .../get-schema.tsx                            |   4 +-
 .../edit-custom-collection-modal/index.tsx    |   4 +-
 .../edit-custom-collection-modal/test-api.tsx |   2 +-
 web/app/components/tools/labels/filter.tsx    |  10 +-
 .../tools/mcp/__tests__/modal.spec.tsx        |   2 +-
 .../__tests__/operation-dropdown.spec.tsx     |   2 +-
 .../components/tools/mcp/detail/content.tsx   |  20 +-
 .../tools/mcp/detail/operation-dropdown.tsx   |  12 +-
 .../components/tools/mcp/headers-input.tsx    |   2 +-
 .../tools/mcp/hooks/use-mcp-modal-form.ts     |   2 +-
 .../components/tools/mcp/mcp-server-modal.tsx |   2 +-
 .../components/tools/mcp/mcp-service-card.tsx |  22 +--
 web/app/components/tools/mcp/modal.tsx        |   4 +-
 .../components/tools/mcp/provider-card.tsx    |  12 +-
 .../mcp/sections/authentication-section.tsx   |   2 +-
 .../__tests__/custom-create-card.spec.tsx     |   2 +-
 .../tools/provider/__tests__/detail.spec.tsx  |   2 +-
 .../tools/provider/custom-create-card.tsx     |   2 +-
 web/app/components/tools/provider/detail.tsx  |  22 +--
 .../__tests__/config-credentials.spec.tsx     |   2 +-
 .../setting/build-in/config-credentials.tsx   |   4 +-
 .../__tests__/configure-button.spec.tsx       |   2 +-
 .../workflow-tool/__tests__/index.spec.tsx    |   2 +-
 .../tools/workflow-tool/configure-button.tsx  |   2 +-
 .../workflow-tool/confirm-modal/index.tsx     |   2 +-
 .../__tests__/use-configure-button.spec.ts    |   2 +-
 .../hooks/use-configure-button.ts             |   2 +-
 .../components/tools/workflow-tool/index.tsx  |   4 +-
 .../__tests__/features-trigger.spec.tsx       |   2 +-
 .../workflow-header/features-trigger.tsx      |   4 +-
 .../workflow-onboarding-modal/index.tsx       |   2 +-
 .../hooks/__tests__/use-DSL.spec.ts           |   2 +-
 .../__tests__/use-workflow-run-utils.spec.ts  |   2 +-
 .../components/workflow-app/hooks/use-DSL.ts  |   2 +-
 .../hooks/use-workflow-run-utils.ts           |   2 +-
 .../__tests__/update-dsl-modal.spec.tsx       |   4 +-
 .../__tests__/workflow-edge-events.spec.tsx   |   2 +-
 .../__tests__/tool-picker.spec.tsx            |   2 +-
 .../block-selector/all-start-blocks.tsx       |   2 +-
 .../workflow/block-selector/all-tools.tsx     |   2 +-
 .../market-place-plugin/action.tsx            |  14 +-
 .../workflow/block-selector/tool-picker.tsx   |   2 +-
 .../workflow/comment/comment-input.spec.tsx   |   2 +-
 .../workflow/comment/comment-input.tsx        |   2 +-
 .../workflow/comment/mention-input.spec.tsx   |   2 +-
 .../workflow/comment/mention-input.tsx        |   4 +-
 .../workflow/comment/thread.spec.tsx          |   6 +-
 .../components/workflow/comment/thread.tsx    |  14 +-
 .../workflow/dsl-export-confirm-modal.tsx     |   2 +-
 .../components/workflow/edge-contextmenu.tsx  |  10 +-
 .../header/__tests__/header-layouts.spec.tsx  |   2 +-
 .../header/__tests__/run-mode.spec.tsx        |   2 +-
 .../__tests__/test-run-menu-helpers.spec.tsx  |   2 +-
 .../header/__tests__/test-run-menu.spec.tsx   |   2 +-
 .../workflow/header/chat-variable-button.tsx  |   2 +-
 .../header/checklist/__tests__/index.spec.tsx |   2 +-
 .../checklist/__tests__/plugin-group.spec.tsx |   2 +-
 .../workflow/header/checklist/index.tsx       |  12 +-
 .../header/checklist/plugin-group.tsx         |   4 +-
 .../components/workflow/header/env-button.tsx |   2 +-
 .../header/global-variable-button.tsx         |   2 +-
 .../workflow/header/header-in-restoring.tsx   |   4 +-
 .../header/header-in-view-history.tsx         |   2 +-
 .../workflow/header/online-users.tsx          |  12 +-
 .../components/workflow/header/run-mode.tsx   |   2 +-
 .../workflow/header/test-run-menu-helpers.tsx |   2 +-
 .../workflow/header/test-run-menu.tsx         |   2 +-
 .../header/version-history-button.tsx         |   2 +-
 .../hooks/__tests__/use-checklist.spec.ts     |   2 +-
 .../__tests__/use-leader-restore.spec.ts      |   2 +-
 .../workflow/hooks/use-checklist.ts           |   2 +-
 .../workflow/hooks/use-leader-restore.ts      |   2 +-
 web/app/components/workflow/index.tsx         |  20 +-
 .../__tests__/file-support.spec.tsx           |   2 +-
 .../nodes/_base/components/add-button.tsx     |   2 +-
 .../nodes/_base/components/agent-strategy.tsx |  14 +-
 .../before-run-form/__tests__/index.spec.tsx  |   4 +-
 .../components/before-run-form/index.tsx      |   4 +-
 .../nodes/_base/components/config-vision.tsx  |   2 +-
 .../error-handle-type-selector.tsx            |   2 +-
 .../components/input-number-with-slider.tsx   |   2 +-
 .../components/install-plugin-button.tsx      |   2 +-
 .../layout/__tests__/field-title.spec.tsx     |   2 +-
 .../_base/components/layout/field-title.tsx   |   2 +-
 .../nodes/_base/components/memory-config.tsx  |   4 +-
 .../next-step/__tests__/operator.spec.tsx     |   4 +-
 .../nodes/_base/components/next-step/item.tsx |   2 +-
 .../_base/components/next-step/operator.tsx   |  12 +-
 .../nodes/_base/components/node-control.tsx   |  10 +-
 .../_base/components/panel-operator/index.tsx |  10 +-
 .../nodes/_base/components/prompt/editor.tsx  |   4 +-
 .../components/remove-effect-var-confirm.tsx  |   6 +-
 .../_base/components/retry/retry-on-panel.tsx |   4 +-
 .../__tests__/output-var-list.spec.tsx        |   2 +-
 .../components/variable/output-var-list.tsx   |   2 +-
 .../_base/components/variable/var-list.tsx    |   2 +-
 .../variable/var-reference-picker.trigger.tsx |   2 +-
 .../variable-label/base/variable-label.tsx    |   2 +-
 .../workflow-panel/last-run/no-data.tsx       |   2 +-
 .../workflow-panel/last-run/use-last-run.ts   |   2 +-
 .../nodes/_base/hooks/use-one-step-run.ts     |   4 +-
 .../workflow/nodes/_base/node-sections.tsx    |   2 +-
 .../__tests__/operation-selector.spec.tsx     |   2 +-
 .../components/operation-selector.tsx         |   6 +-
 .../components/workflow/nodes/code/panel.tsx  |   2 +-
 .../nodes/data-source-empty/index.tsx         |   2 +-
 .../nodes/data-source/before-run-form.tsx     |   2 +-
 .../components/__tests__/curl-panel.spec.tsx  |   4 +-
 .../http/components/authorization/index.tsx   |   2 +-
 .../nodes/http/components/curl-panel.tsx      |   4 +-
 .../key-value/key-value-edit/item.tsx         |  10 +-
 .../components/workflow/nodes/http/panel.tsx  |   2 +-
 .../human-input/__tests__/panel.spec.tsx      |   4 +-
 .../__tests__/button-style-dropdown.spec.tsx  |   2 +-
 .../__tests__/form-content-preview.spec.tsx   |   2 +-
 .../components/__tests__/user-action.spec.tsx |   4 +-
 .../components/button-style-dropdown.tsx      |   2 +-
 .../__tests__/email-configure-modal.spec.tsx  |   2 +-
 .../delivery-method/email-configure-modal.tsx |   6 +-
 .../delivery-method/method-item.tsx           |   4 +-
 .../recipient/__tests__/index.spec.tsx        |   5 +-
 .../delivery-method/recipient/email-item.tsx  |   2 +-
 .../delivery-method/recipient/index.tsx       |   2 +-
 .../delivery-method/recipient/member-list.tsx |   2 +-
 .../recipient/member-selector.tsx             |   2 +-
 .../delivery-method/test-email-sender.tsx     |   2 +-
 .../delivery-method/upgrade-modal.tsx         |   2 +-
 .../components/form-content-preview.tsx       |   4 +-
 .../components/single-run-form.tsx            |   6 +-
 .../human-input/components/user-action.tsx    |   4 +-
 .../workflow/nodes/human-input/panel.tsx      |   4 +-
 .../if-else/components/condition-add.tsx      |   2 +-
 .../condition-list/condition-operator.tsx     |   2 +-
 .../components/condition-number-input.tsx     |   2 +-
 .../if-else/components/condition-wrap.tsx     |   2 +-
 .../workflow/nodes/if-else/panel.tsx          |   2 +-
 .../iteration/__tests__/integration.spec.tsx  |   4 +-
 .../workflow/nodes/iteration/node.tsx         |   2 +-
 .../workflow/nodes/iteration/panel.tsx        |   4 +-
 .../components/chunk-structure/index.tsx      |   2 +-
 .../components/chunk-structure/selector.tsx   |   2 +-
 .../components/index-method.tsx               |   2 +-
 .../search-method-option.tsx                  |   2 +-
 .../top-k-and-score-threshold.tsx             |  10 +-
 .../components/metadata/add-condition.tsx     |   2 +-
 .../condition-list/condition-operator.tsx     |   2 +-
 .../condition-list/condition-value-method.tsx |   2 +-
 .../metadata-filter-selector.tsx              |   2 +-
 .../components/metadata/metadata-trigger.tsx  |   2 +-
 .../components/retrieval-config.tsx           |   2 +-
 .../list-operator/__tests__/panel.spec.tsx    |   5 +-
 .../__tests__/limit-config.spec.tsx           |   4 +-
 .../list-operator/components/limit-config.tsx |   2 +-
 .../workflow/nodes/list-operator/panel.tsx    |   2 +-
 .../__tests__/json-importer.spec.tsx          |   2 +-
 .../json-importer.tsx                         |   4 +-
 .../json-schema-config.tsx                    |   4 +-
 .../generated-result.tsx                      |   2 +-
 .../json-schema-generator/index.tsx           |   2 +-
 .../json-schema-generator/prompt-editor.tsx   |   2 +-
 .../visual-editor/add-field.tsx               |   2 +-
 .../edit-card/advanced-actions.tsx            |   2 +-
 .../edit-card/required-switch.tsx             |   2 +-
 .../visual-editor/hooks.ts                    |   2 +-
 .../llm/components/panel-memory-section.tsx   |   2 +-
 .../llm/components/panel-output-section.tsx   |   4 +-
 .../components/reasoning-format-config.tsx    |   2 +-
 .../nodes/llm/components/structure-output.tsx |   2 +-
 .../components/workflow/nodes/llm/panel.tsx   |   2 +-
 .../nodes/loop/__tests__/integration.spec.tsx |   2 +-
 .../nodes/loop/components/condition-add.tsx   |   2 +-
 .../condition-list/condition-operator.tsx     |   2 +-
 .../components/condition-number-input.tsx     |   2 +-
 .../nodes/loop/components/condition-wrap.tsx  |   2 +-
 .../loop/components/loop-variables/item.tsx   |   2 +-
 .../__tests__/integration.spec.tsx            |   4 +-
 .../__tests__/update.spec.tsx                 |   4 +-
 .../components/extract-parameter/update.tsx   |   6 +-
 .../nodes/start/__tests__/use-config.spec.ts  |   2 +-
 .../nodes/start/components/var-list.tsx       |   2 +-
 .../workflow/nodes/start/use-config.ts        |   2 +-
 .../nodes/tool/components/tool-form/item.tsx  |   2 +-
 .../workflow/nodes/tool/hooks/use-config.ts   |   2 +-
 .../components/trigger-form/item.tsx          |   2 +-
 .../components/on-minute-selector.tsx         |   2 +-
 .../__tests__/use-config.spec.tsx             |   4 +-
 .../workflow/nodes/trigger-webhook/panel.tsx  |  20 +-
 .../nodes/trigger-webhook/use-config.ts       |   2 +-
 .../__tests__/integration.spec.tsx            |   4 +-
 .../__tests__/var-group-item.spec.tsx         |   4 +-
 .../components/add-variable/index.tsx         |   2 +-
 .../components/var-group-item.tsx             |   2 +-
 .../nodes/variable-assigner/panel.tsx         |   2 +-
 .../__tests__/hooks.spec.tsx                  |   2 +-
 .../plugins/link-editor-plugin/component.tsx  |   2 +-
 .../plugins/link-editor-plugin/hooks.ts       |   2 +-
 .../toolbar/__tests__/operator.spec.tsx       |   2 +-
 .../note-editor/toolbar/operator.tsx          |  14 +-
 .../operator/__tests__/more-actions.spec.tsx  |   2 +-
 .../workflow/operator/more-actions.tsx        |  14 +-
 .../workflow/operator/zoom-in-out.tsx         |  14 +-
 .../panel/__tests__/inputs-panel.spec.tsx     |   2 +-
 .../panel/__tests__/workflow-preview.spec.tsx |   4 +-
 .../__tests__/object-value-item.spec.tsx      |   2 +-
 .../__tests__/variable-modal.spec.tsx         |   4 +-
 .../components/array-bool-list.tsx            |   2 +-
 .../components/array-value-list.tsx           |   2 +-
 .../components/object-value-item.tsx          |   2 +-
 .../components/variable-modal-trigger.tsx     |   4 +-
 .../components/variable-modal.sections.tsx    |   2 +-
 .../components/variable-modal.tsx             |   4 +-
 .../comments-panel/__tests__/index.spec.tsx   |   4 +-
 .../workflow/panel/comments-panel/index.tsx   |   2 +-
 .../debug-and-preview/__tests__/hooks.spec.ts |   2 +-
 .../__tests__/hooks/handle-resume.spec.ts     |   2 +-
 .../__tests__/hooks/handle-send.spec.ts       |   2 +-
 .../hooks/handle-stop-restart.spec.ts         |   2 +-
 .../__tests__/hooks/misc.spec.ts              |   2 +-
 .../__tests__/hooks/opening-statement.spec.ts |   2 +-
 .../__tests__/hooks/sse-callbacks.spec.ts     |   2 +-
 .../workflow/panel/debug-and-preview/hooks.ts |   2 +-
 .../__tests__/variable-modal.spec.tsx         |   4 +-
 .../panel/env-panel/variable-modal.tsx        |   4 +-
 .../panel/env-panel/variable-trigger.tsx      |   4 +-
 .../workflow/panel/inputs-panel.tsx           |   2 +-
 .../context-menu/__tests__/menu-item.spec.tsx |   2 +-
 .../context-menu/index.tsx                    |   8 +-
 .../context-menu/menu-item.tsx                |   2 +-
 .../delete-confirm-modal.tsx                  |   2 +-
 .../panel/version-history-panel/empty.tsx     |   2 +-
 .../filter/filter-switch.tsx                  |   2 +-
 .../panel/version-history-panel/index.tsx     |   2 +-
 .../restore-confirm-modal.tsx                 |   2 +-
 .../workflow/panel/workflow-preview.tsx       |   4 +-
 .../workflow/run/__tests__/index.spec.tsx     |   2 +-
 .../__tests__/agent-log-nav-more.spec.tsx     |   2 +-
 .../workflow/run/agent-log/agent-log-item.tsx |   2 +-
 .../run/agent-log/agent-log-nav-more.tsx      |   8 +-
 .../workflow/run/agent-log/agent-log-nav.tsx  |   2 +-
 web/app/components/workflow/run/index.tsx     |   2 +-
 .../iteration-log/iteration-log-trigger.tsx   |   2 +-
 .../run/loop-log/loop-log-trigger.tsx         |   2 +-
 .../run/retry-log/retry-log-trigger.tsx       |   2 +-
 .../workflow/selection-contextmenu.tsx        |  16 +-
 .../components/workflow/update-dsl-modal.tsx  |   4 +-
 .../__tests__/value-content-sections.spec.tsx |   2 +-
 .../workflow/variable-inspect/group.tsx       |   2 +-
 .../workflow/variable-inspect/left.tsx        |   2 +-
 .../workflow/variable-inspect/listening.tsx   |   2 +-
 .../components/zoom-in-out.tsx                |  14 +-
 .../education-apply/education-apply-page.tsx  |   4 +-
 .../education-apply/expire-notice-modal.tsx   |   2 +-
 web/app/education-apply/user-info.tsx         |   4 +-
 .../education-apply/verify-state-modal.tsx    |   2 +-
 .../forgot-password/ChangePasswordForm.tsx    |   4 +-
 .../forgot-password/ForgotPasswordForm.tsx    |   4 +-
 web/app/init/InitPasswordPopup.tsx            |   4 +-
 web/app/install/installForm.tsx               |   4 +-
 web/app/layout.tsx                            |   4 +-
 web/app/reset-password/check-code/page.tsx    |   4 +-
 web/app/reset-password/page.tsx               |   4 +-
 web/app/reset-password/set-password/page.tsx  |   4 +-
 web/app/signin/check-code/page.tsx            |   4 +-
 .../signin/components/mail-and-code-auth.tsx  |   4 +-
 .../components/mail-and-password-auth.tsx     |   4 +-
 web/app/signin/components/social-auth.tsx     |   2 +-
 web/app/signin/components/sso-auth.tsx        |   4 +-
 web/app/signin/invite-settings/page.tsx       |   4 +-
 web/app/signin/normal-form.tsx                |   2 +-
 web/app/signin/one-more-step.tsx              |   4 +-
 web/app/signup/check-code/page.tsx            |   4 +-
 web/app/signup/components/input-mail.tsx      |   4 +-
 web/app/signup/set-password/page.tsx          |   4 +-
 web/context/provider-context-provider.tsx     |   2 +-
 web/docs/overlay-migration.md                 |  16 +-
 web/eslint.constants.mjs                      |   8 +-
 web/hooks/use-import-dsl.ts                   |   2 +-
 web/hooks/use-pay.tsx                         |   6 +-
 web/service/base.ts                           |   2 +-
 web/service/fetch.spec.ts                     |   2 +-
 web/service/fetch.ts                          |   2 +-
 web/tailwind.config.ts                        |   2 +
 1056 files changed, 2547 insertions(+), 2069 deletions(-)
 create mode 100644 packages/dify-ui/.gitignore
 create mode 100644 packages/dify-ui/.storybook/main.ts
 create mode 100644 packages/dify-ui/.storybook/preview.tsx
 create mode 100644 packages/dify-ui/.storybook/storybook.css
 rename {web/app/components/base/ui => packages/dify-ui/src}/alert-dialog/__tests__/index.spec.tsx (100%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/alert-dialog/index.stories.tsx (99%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/alert-dialog/index.tsx (94%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/avatar/__tests__/index.spec.tsx (100%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/avatar/index.stories.tsx (97%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/avatar/index.tsx (98%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/button/__tests__/index.spec.tsx (100%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/button/index.stories.tsx (97%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/button/index.tsx (99%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/context-menu/__tests__/index.spec.tsx (100%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/context-menu/index.stories.tsx (99%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/context-menu/index.tsx (95%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/dialog/__tests__/index.spec.tsx (100%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/dialog/index.stories.tsx (99%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/dialog/index.tsx (98%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/dropdown-menu/__tests__/index.spec.tsx (100%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/dropdown-menu/index.stories.tsx (99%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/dropdown-menu/index.tsx (95%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/number-field/__tests__/index.spec.tsx (100%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/number-field/index.stories.tsx (98%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/number-field/index.tsx (99%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/overlay-shared.ts (100%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/placement.ts (100%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/popover/__tests__/index.spec.tsx (100%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/popover/index.stories.tsx (97%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/popover/index.tsx (91%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/scroll-area/__tests__/index.spec.tsx (100%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/scroll-area/index.stories.tsx (98%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/scroll-area/index.tsx (98%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/select/__tests__/index.spec.tsx (100%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/select/index.stories.tsx (99%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/select/index.tsx (96%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/slider/__tests__/index.spec.tsx (100%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/slider/index.stories.tsx (96%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/slider/index.tsx (98%)
 rename {web/app/components/base => packages/dify-ui/src}/switch/__tests__/index.spec.tsx (99%)
 rename {web/app/components/base => packages/dify-ui/src}/switch/index.stories.tsx (96%)
 rename {web/app/components/base => packages/dify-ui/src}/switch/index.tsx (72%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/toast/__tests__/index.spec.tsx (100%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/toast/index.stories.tsx (99%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/toast/index.tsx (99%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/tooltip/__tests__/index.spec.tsx (100%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/tooltip/index.stories.tsx (98%)
 rename {web/app/components/base/ui => packages/dify-ui/src}/tooltip/index.tsx (90%)
 create mode 100644 packages/dify-ui/tailwind.config.ts
 create mode 100644 packages/dify-ui/tests/setup.ts
 create mode 100644 packages/dify-ui/vite.config.ts
 rename packages/tsconfig/{web.json => react.json} (100%)
 delete mode 100644 web/app/components/base/switch/skeleton.tsx

diff --git a/.github/workflows/web-tests.yml b/.github/workflows/web-tests.yml
index f3ab4c62c7..dcee8863ce 100644
--- a/.github/workflows/web-tests.yml
+++ b/.github/workflows/web-tests.yml
@@ -89,3 +89,34 @@ jobs:
           flags: web
         env:
           CODECOV_TOKEN: ${{ env.CODECOV_TOKEN }}
+
+  dify-ui-test:
+    name: dify-ui Tests
+    runs-on: ubuntu-latest
+    env:
+      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+    defaults:
+      run:
+        shell: bash
+        working-directory: ./packages/dify-ui
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup web environment
+        uses: ./.github/actions/setup-web
+
+      - name: Run dify-ui tests
+        run: vp test run --coverage --silent=passed-only
+
+      - name: Report coverage
+        if: ${{ env.CODECOV_TOKEN != '' }}
+        uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2 # v6.0.0
+        with:
+          directory: packages/dify-ui/coverage
+          flags: dify-ui
+        env:
+          CODECOV_TOKEN: ${{ env.CODECOV_TOKEN }}
diff --git a/codecov.yml b/codecov.yml
index 54ac2a4b36..a506087698 100644
--- a/codecov.yml
+++ b/codecov.yml
@@ -3,6 +3,10 @@ coverage:
     project:
       default:
         target: auto
+        # Absorb sub-percent coverage noise (rounding, trivial added lines, CVA variants, etc).
+        threshold: 1%
+        # Deleting covered code during refactors/migrations must not regress base.
+        removed_code_behavior: adjust_base
 
 flags:
   web:
@@ -10,6 +14,11 @@ flags:
       - "web/"
     carryforward: true
 
+  dify-ui:
+    paths:
+      - "packages/dify-ui/"
+    carryforward: true
+
   api:
     paths:
       - "api/"
diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 173a3a7bd7..477391e2de 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -2113,11 +2113,6 @@
       "count": 1
     }
   },
-  "web/app/components/base/switch/index.stories.tsx": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "web/app/components/base/tab-slider/index.tsx": {
     "react/set-state-in-effect": {
       "count": 2
diff --git a/packages/dify-ui/.gitignore b/packages/dify-ui/.gitignore
new file mode 100644
index 0000000000..befe881885
--- /dev/null
+++ b/packages/dify-ui/.gitignore
@@ -0,0 +1,3 @@
+/coverage
+/dist
+/storybook-static
diff --git a/packages/dify-ui/.storybook/main.ts b/packages/dify-ui/.storybook/main.ts
new file mode 100644
index 0000000000..c8b7ee8e3f
--- /dev/null
+++ b/packages/dify-ui/.storybook/main.ts
@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+import tailwindcss from '@tailwindcss/vite'
+import { mergeConfig } from 'vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-docs',
+    '@storybook/addon-themes',
+    '@chromatic-com/storybook',
+  ],
+  framework: '@storybook/react-vite',
+  core: {
+    disableWhatsNewNotifications: true,
+  },
+  docs: {
+    defaultName: 'Documentation',
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      plugins: [tailwindcss()],
+    })
+  },
+}
+
+export default config
diff --git a/packages/dify-ui/.storybook/preview.tsx b/packages/dify-ui/.storybook/preview.tsx
new file mode 100644
index 0000000000..a5bfc5d8af
--- /dev/null
+++ b/packages/dify-ui/.storybook/preview.tsx
@@ -0,0 +1,31 @@
+import type { Preview } from '@storybook/react-vite'
+import { withThemeByDataAttribute } from '@storybook/addon-themes'
+import './storybook.css'
+
+export const decorators = [
+  withThemeByDataAttribute({
+    themes: {
+      light: 'light',
+      dark: 'dark',
+    },
+    defaultTheme: 'light',
+    attributeName: 'data-theme',
+  }),
+]
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      toc: true,
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default preview
diff --git a/packages/dify-ui/.storybook/storybook.css b/packages/dify-ui/.storybook/storybook.css
new file mode 100644
index 0000000000..e9796fd046
--- /dev/null
+++ b/packages/dify-ui/.storybook/storybook.css
@@ -0,0 +1,19 @@
+@import 'tailwindcss';
+
+@config '../tailwind.config.ts';
+
+@import '../src/styles/styles.css';
+
+html {
+  color-scheme: light;
+}
+
+html[data-theme='dark'] {
+  color-scheme: dark;
+}
+
+body {
+  background: var(--color-components-panel-bg);
+  color: var(--color-text-primary, #101828);
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+}
diff --git a/packages/dify-ui/AGENTS.md b/packages/dify-ui/AGENTS.md
index ecc968e130..651b117070 100644
--- a/packages/dify-ui/AGENTS.md
+++ b/packages/dify-ui/AGENTS.md
@@ -1,6 +1,15 @@
 # @langgenius/dify-ui
 
-This package provides shared design tokens (colors, shadows, typography), the `cn()` utility, and a Tailwind CSS preset consumed by `web/`.
+Shared design tokens, the `cn()` utility, a Tailwind CSS preset, and headless primitive components consumed by `web/`.
+
+## Component Authoring Rules
+
+- Use `@base-ui/react` primitives + `cva` + `cn`.
+- Inside dify-ui, cross-component imports use relative paths (`../button`). External consumers use subpath exports (`@langgenius/dify-ui/button`).
+- No imports from `web/`. No dependencies on next / i18next / ky / jotai / zustand.
+- One component per folder: `src/<name>/index.tsx`, optional `index.stories.tsx` and `__tests__/index.spec.tsx`. Add a matching `./<name>` subpath to `package.json#exports`.
+- Props pattern: `Omit<BaseXxx.Root.Props, 'className' | ...> & VariantProps<typeof xxxVariants> & { /* custom */ }`.
+- When a component accepts a prop typed from a shared internal module, `export type` it from that component so consumers import it from the component subpath.
 
 ## Border Radius: Figma Token → Tailwind Class Mapping
 
diff --git a/packages/dify-ui/package.json b/packages/dify-ui/package.json
index b54fde9b89..2b78b25ed6 100644
--- a/packages/dify-ui/package.json
+++ b/packages/dify-ui/package.json
@@ -12,18 +12,109 @@
     "./cn": {
       "types": "./src/cn.ts",
       "import": "./src/cn.ts"
+    },
+    "./alert-dialog": {
+      "types": "./src/alert-dialog/index.tsx",
+      "import": "./src/alert-dialog/index.tsx"
+    },
+    "./avatar": {
+      "types": "./src/avatar/index.tsx",
+      "import": "./src/avatar/index.tsx"
+    },
+    "./button": {
+      "types": "./src/button/index.tsx",
+      "import": "./src/button/index.tsx"
+    },
+    "./context-menu": {
+      "types": "./src/context-menu/index.tsx",
+      "import": "./src/context-menu/index.tsx"
+    },
+    "./dialog": {
+      "types": "./src/dialog/index.tsx",
+      "import": "./src/dialog/index.tsx"
+    },
+    "./dropdown-menu": {
+      "types": "./src/dropdown-menu/index.tsx",
+      "import": "./src/dropdown-menu/index.tsx"
+    },
+    "./number-field": {
+      "types": "./src/number-field/index.tsx",
+      "import": "./src/number-field/index.tsx"
+    },
+    "./popover": {
+      "types": "./src/popover/index.tsx",
+      "import": "./src/popover/index.tsx"
+    },
+    "./scroll-area": {
+      "types": "./src/scroll-area/index.tsx",
+      "import": "./src/scroll-area/index.tsx"
+    },
+    "./select": {
+      "types": "./src/select/index.tsx",
+      "import": "./src/select/index.tsx"
+    },
+    "./slider": {
+      "types": "./src/slider/index.tsx",
+      "import": "./src/slider/index.tsx"
+    },
+    "./switch": {
+      "types": "./src/switch/index.tsx",
+      "import": "./src/switch/index.tsx"
+    },
+    "./toast": {
+      "types": "./src/toast/index.tsx",
+      "import": "./src/toast/index.tsx"
+    },
+    "./tooltip": {
+      "types": "./src/tooltip/index.tsx",
+      "import": "./src/tooltip/index.tsx"
     }
   },
   "scripts": {
+    "storybook": "storybook dev",
+    "storybook:build": "storybook build",
+    "test": "vp test",
+    "test:watch": "vp test --watch",
     "type-check": "tsc"
   },
+  "peerDependencies": {
+    "@base-ui/react": "catalog:",
+    "class-variance-authority": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "tailwindcss": "catalog:"
+  },
   "dependencies": {
     "clsx": "catalog:",
     "tailwind-merge": "catalog:"
   },
   "devDependencies": {
+    "@base-ui/react": "catalog:",
+    "@chromatic-com/storybook": "catalog:",
     "@dify/tsconfig": "workspace:*",
+    "@egoist/tailwindcss-icons": "catalog:",
+    "@iconify-json/ri": "catalog:",
+    "@storybook/addon-docs": "catalog:",
+    "@storybook/addon-links": "catalog:",
+    "@storybook/addon-themes": "catalog:",
+    "@storybook/react-vite": "catalog:",
+    "@tailwindcss/vite": "catalog:",
+    "@testing-library/jest-dom": "catalog:",
+    "@testing-library/react": "catalog:",
+    "@testing-library/user-event": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitejs/plugin-react": "catalog:",
+    "@vitest/coverage-v8": "catalog:",
+    "class-variance-authority": "catalog:",
+    "happy-dom": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "storybook": "catalog:",
     "tailwindcss": "catalog:",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vite-plus": "catalog:",
+    "vitest": "catalog:"
   }
 }
diff --git a/web/app/components/base/ui/alert-dialog/__tests__/index.spec.tsx b/packages/dify-ui/src/alert-dialog/__tests__/index.spec.tsx
similarity index 100%
rename from web/app/components/base/ui/alert-dialog/__tests__/index.spec.tsx
rename to packages/dify-ui/src/alert-dialog/__tests__/index.spec.tsx
diff --git a/web/app/components/base/ui/alert-dialog/index.stories.tsx b/packages/dify-ui/src/alert-dialog/index.stories.tsx
similarity index 99%
rename from web/app/components/base/ui/alert-dialog/index.stories.tsx
rename to packages/dify-ui/src/alert-dialog/index.stories.tsx
index c9deaa53ed..0b6f60f01e 100644
--- a/web/app/components/base/ui/alert-dialog/index.stories.tsx
+++ b/packages/dify-ui/src/alert-dialog/index.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useState } from 'react'
 import {
   AlertDialog,
diff --git a/web/app/components/base/ui/alert-dialog/index.tsx b/packages/dify-ui/src/alert-dialog/index.tsx
similarity index 94%
rename from web/app/components/base/ui/alert-dialog/index.tsx
rename to packages/dify-ui/src/alert-dialog/index.tsx
index 5f2af43df8..7b432c87dc 100644
--- a/web/app/components/base/ui/alert-dialog/index.tsx
+++ b/packages/dify-ui/src/alert-dialog/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import type { ComponentPropsWithoutRef, ReactNode } from 'react'
-import type { ButtonProps } from '@/app/components/base/ui/button'
+import type { ButtonProps } from '../button'
 import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'
-import { cn } from '@langgenius/dify-ui/cn'
-import { Button } from '@/app/components/base/ui/button'
+import { Button } from '../button'
+import { cn } from '../cn'
 
 export const AlertDialog = BaseAlertDialog.Root
 export const AlertDialogTrigger = BaseAlertDialog.Trigger
diff --git a/web/app/components/base/ui/avatar/__tests__/index.spec.tsx b/packages/dify-ui/src/avatar/__tests__/index.spec.tsx
similarity index 100%
rename from web/app/components/base/ui/avatar/__tests__/index.spec.tsx
rename to packages/dify-ui/src/avatar/__tests__/index.spec.tsx
diff --git a/web/app/components/base/ui/avatar/index.stories.tsx b/packages/dify-ui/src/avatar/index.stories.tsx
similarity index 97%
rename from web/app/components/base/ui/avatar/index.stories.tsx
rename to packages/dify-ui/src/avatar/index.stories.tsx
index 22de82e6db..f8b90c0b16 100644
--- a/web/app/components/base/ui/avatar/index.stories.tsx
+++ b/packages/dify-ui/src/avatar/index.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Avatar, AvatarFallback, AvatarRoot } from '.'
 
 const meta = {
diff --git a/web/app/components/base/ui/avatar/index.tsx b/packages/dify-ui/src/avatar/index.tsx
similarity index 98%
rename from web/app/components/base/ui/avatar/index.tsx
rename to packages/dify-ui/src/avatar/index.tsx
index 6fca2e87dc..8cf893fbbd 100644
--- a/web/app/components/base/ui/avatar/index.tsx
+++ b/packages/dify-ui/src/avatar/index.tsx
@@ -1,6 +1,6 @@
 import type { ImageLoadingStatus } from '@base-ui/react/avatar'
 import { Avatar as BaseAvatar } from '@base-ui/react/avatar'
-import { cn } from '@langgenius/dify-ui/cn'
+import { cn } from '../cn'
 
 const avatarSizeClasses = {
   'xxs': { root: 'size-4', text: 'text-[7px]' },
diff --git a/web/app/components/base/ui/button/__tests__/index.spec.tsx b/packages/dify-ui/src/button/__tests__/index.spec.tsx
similarity index 100%
rename from web/app/components/base/ui/button/__tests__/index.spec.tsx
rename to packages/dify-ui/src/button/__tests__/index.spec.tsx
diff --git a/web/app/components/base/ui/button/index.stories.tsx b/packages/dify-ui/src/button/index.stories.tsx
similarity index 97%
rename from web/app/components/base/ui/button/index.stories.tsx
rename to packages/dify-ui/src/button/index.stories.tsx
index 40dce31dd4..b70a76f431 100644
--- a/web/app/components/base/ui/button/index.stories.tsx
+++ b/packages/dify-ui/src/button/index.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import { Button } from '.'
 
diff --git a/web/app/components/base/ui/button/index.tsx b/packages/dify-ui/src/button/index.tsx
similarity index 99%
rename from web/app/components/base/ui/button/index.tsx
rename to packages/dify-ui/src/button/index.tsx
index 73d5ecc3c9..03e5c4a937 100644
--- a/web/app/components/base/ui/button/index.tsx
+++ b/packages/dify-ui/src/button/index.tsx
@@ -1,8 +1,8 @@
 import type { Button as BaseButtonNS } from '@base-ui/react/button'
 import type { VariantProps } from 'class-variance-authority'
 import { Button as BaseButton } from '@base-ui/react/button'
-import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
+import { cn } from '../cn'
 
 const buttonVariants = cva(
   'inline-flex cursor-pointer items-center justify-center whitespace-nowrap outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid data-[disabled]:cursor-not-allowed',
diff --git a/web/app/components/base/ui/context-menu/__tests__/index.spec.tsx b/packages/dify-ui/src/context-menu/__tests__/index.spec.tsx
similarity index 100%
rename from web/app/components/base/ui/context-menu/__tests__/index.spec.tsx
rename to packages/dify-ui/src/context-menu/__tests__/index.spec.tsx
diff --git a/web/app/components/base/ui/context-menu/index.stories.tsx b/packages/dify-ui/src/context-menu/index.stories.tsx
similarity index 99%
rename from web/app/components/base/ui/context-menu/index.stories.tsx
rename to packages/dify-ui/src/context-menu/index.stories.tsx
index b3b43399f6..0be5727e7a 100644
--- a/web/app/components/base/ui/context-menu/index.stories.tsx
+++ b/packages/dify-ui/src/context-menu/index.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useState } from 'react'
 import {
   ContextMenu,
diff --git a/web/app/components/base/ui/context-menu/index.tsx b/packages/dify-ui/src/context-menu/index.tsx
similarity index 95%
rename from web/app/components/base/ui/context-menu/index.tsx
rename to packages/dify-ui/src/context-menu/index.tsx
index c92c4d6ab9..fc2ae1d454 100644
--- a/web/app/components/base/ui/context-menu/index.tsx
+++ b/packages/dify-ui/src/context-menu/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import type { OverlayItemVariant } from '@/app/components/base/ui/overlay-shared'
-import type { Placement } from '@/app/components/base/ui/placement'
+import type { OverlayItemVariant } from '../overlay-shared'
+import type { Placement } from '../placement'
 import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu'
-import { cn } from '@langgenius/dify-ui/cn'
+import { cn } from '../cn'
 import {
   overlayBackdropClassName,
   overlayDestructiveClassName,
@@ -14,8 +14,11 @@ import {
   overlayPopupBaseClassName,
   overlayRowClassName,
   overlaySeparatorClassName,
-} from '@/app/components/base/ui/overlay-shared'
-import { parsePlacement } from '@/app/components/base/ui/placement'
+} from '../overlay-shared'
+import { parsePlacement } from '../placement'
+
+/** @public */
+export type { Placement }
 
 export const ContextMenu = BaseContextMenu.Root
 export const ContextMenuTrigger = BaseContextMenu.Trigger
diff --git a/web/app/components/base/ui/dialog/__tests__/index.spec.tsx b/packages/dify-ui/src/dialog/__tests__/index.spec.tsx
similarity index 100%
rename from web/app/components/base/ui/dialog/__tests__/index.spec.tsx
rename to packages/dify-ui/src/dialog/__tests__/index.spec.tsx
diff --git a/web/app/components/base/ui/dialog/index.stories.tsx b/packages/dify-ui/src/dialog/index.stories.tsx
similarity index 99%
rename from web/app/components/base/ui/dialog/index.stories.tsx
rename to packages/dify-ui/src/dialog/index.stories.tsx
index 0e8f478520..f9caa0d8c5 100644
--- a/web/app/components/base/ui/dialog/index.stories.tsx
+++ b/packages/dify-ui/src/dialog/index.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useState } from 'react'
 import {
   Dialog,
diff --git a/web/app/components/base/ui/dialog/index.tsx b/packages/dify-ui/src/dialog/index.tsx
similarity index 98%
rename from web/app/components/base/ui/dialog/index.tsx
rename to packages/dify-ui/src/dialog/index.tsx
index bc82230f58..c24acd5924 100644
--- a/web/app/components/base/ui/dialog/index.tsx
+++ b/packages/dify-ui/src/dialog/index.tsx
@@ -9,7 +9,7 @@
 
 import type { ReactNode } from 'react'
 import { Dialog as BaseDialog } from '@base-ui/react/dialog'
-import { cn } from '@langgenius/dify-ui/cn'
+import { cn } from '../cn'
 
 export const Dialog = BaseDialog.Root
 /** @public */
diff --git a/web/app/components/base/ui/dropdown-menu/__tests__/index.spec.tsx b/packages/dify-ui/src/dropdown-menu/__tests__/index.spec.tsx
similarity index 100%
rename from web/app/components/base/ui/dropdown-menu/__tests__/index.spec.tsx
rename to packages/dify-ui/src/dropdown-menu/__tests__/index.spec.tsx
diff --git a/web/app/components/base/ui/dropdown-menu/index.stories.tsx b/packages/dify-ui/src/dropdown-menu/index.stories.tsx
similarity index 99%
rename from web/app/components/base/ui/dropdown-menu/index.stories.tsx
rename to packages/dify-ui/src/dropdown-menu/index.stories.tsx
index ae0ad61c68..f73b33ac8b 100644
--- a/web/app/components/base/ui/dropdown-menu/index.stories.tsx
+++ b/packages/dify-ui/src/dropdown-menu/index.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useState } from 'react'
 import {
   DropdownMenu,
diff --git a/web/app/components/base/ui/dropdown-menu/index.tsx b/packages/dify-ui/src/dropdown-menu/index.tsx
similarity index 95%
rename from web/app/components/base/ui/dropdown-menu/index.tsx
rename to packages/dify-ui/src/dropdown-menu/index.tsx
index b0c034f3cb..f742625964 100644
--- a/web/app/components/base/ui/dropdown-menu/index.tsx
+++ b/packages/dify-ui/src/dropdown-menu/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import type { OverlayItemVariant } from '@/app/components/base/ui/overlay-shared'
-import type { Placement } from '@/app/components/base/ui/placement'
+import type { OverlayItemVariant } from '../overlay-shared'
+import type { Placement } from '../placement'
 import { Menu } from '@base-ui/react/menu'
-import { cn } from '@langgenius/dify-ui/cn'
+import { cn } from '../cn'
 import {
   overlayDestructiveClassName,
   overlayIndicatorClassName,
@@ -13,8 +13,10 @@ import {
   overlayPopupBaseClassName,
   overlayRowClassName,
   overlaySeparatorClassName,
-} from '@/app/components/base/ui/overlay-shared'
-import { parsePlacement } from '@/app/components/base/ui/placement'
+} from '../overlay-shared'
+import { parsePlacement } from '../placement'
+
+export type { Placement }
 
 export const DropdownMenu = Menu.Root
 export const DropdownMenuTrigger = Menu.Trigger
diff --git a/web/app/components/base/ui/number-field/__tests__/index.spec.tsx b/packages/dify-ui/src/number-field/__tests__/index.spec.tsx
similarity index 100%
rename from web/app/components/base/ui/number-field/__tests__/index.spec.tsx
rename to packages/dify-ui/src/number-field/__tests__/index.spec.tsx
diff --git a/web/app/components/base/ui/number-field/index.stories.tsx b/packages/dify-ui/src/number-field/index.stories.tsx
similarity index 98%
rename from web/app/components/base/ui/number-field/index.stories.tsx
rename to packages/dify-ui/src/number-field/index.stories.tsx
index 6abb93bf11..a436d997e6 100644
--- a/web/app/components/base/ui/number-field/index.stories.tsx
+++ b/packages/dify-ui/src/number-field/index.stories.tsx
@@ -1,5 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { cn } from '@langgenius/dify-ui/cn'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useId, useState } from 'react'
 import {
   NumberField,
@@ -10,6 +9,7 @@ import {
   NumberFieldInput,
   NumberFieldUnit,
 } from '.'
+import { cn } from '../cn'
 
 type DemoFieldProps = {
   label: string
diff --git a/web/app/components/base/ui/number-field/index.tsx b/packages/dify-ui/src/number-field/index.tsx
similarity index 99%
rename from web/app/components/base/ui/number-field/index.tsx
rename to packages/dify-ui/src/number-field/index.tsx
index 944aa52470..70e66dd91b 100644
--- a/web/app/components/base/ui/number-field/index.tsx
+++ b/packages/dify-ui/src/number-field/index.tsx
@@ -3,8 +3,8 @@
 import type { VariantProps } from 'class-variance-authority'
 import type { HTMLAttributes } from 'react'
 import { NumberField as BaseNumberField } from '@base-ui/react/number-field'
-import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
+import { cn } from '../cn'
 
 export const NumberField = BaseNumberField.Root
 export type NumberFieldRootProps = BaseNumberField.Root.Props
diff --git a/web/app/components/base/ui/overlay-shared.ts b/packages/dify-ui/src/overlay-shared.ts
similarity index 100%
rename from web/app/components/base/ui/overlay-shared.ts
rename to packages/dify-ui/src/overlay-shared.ts
diff --git a/web/app/components/base/ui/placement.ts b/packages/dify-ui/src/placement.ts
similarity index 100%
rename from web/app/components/base/ui/placement.ts
rename to packages/dify-ui/src/placement.ts
diff --git a/web/app/components/base/ui/popover/__tests__/index.spec.tsx b/packages/dify-ui/src/popover/__tests__/index.spec.tsx
similarity index 100%
rename from web/app/components/base/ui/popover/__tests__/index.spec.tsx
rename to packages/dify-ui/src/popover/__tests__/index.spec.tsx
diff --git a/web/app/components/base/ui/popover/index.stories.tsx b/packages/dify-ui/src/popover/index.stories.tsx
similarity index 97%
rename from web/app/components/base/ui/popover/index.stories.tsx
rename to packages/dify-ui/src/popover/index.stories.tsx
index 8dbae184de..dcea5018ab 100644
--- a/web/app/components/base/ui/popover/index.stories.tsx
+++ b/packages/dify-ui/src/popover/index.stories.tsx
@@ -1,5 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import type { Placement } from '../placement'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Placement } from '.'
+import { Button } from '@langgenius/dify-ui/button'
 import { useState } from 'react'
 import {
   Popover,
@@ -9,7 +10,6 @@ import {
   PopoverTitle,
   PopoverTrigger,
 } from '.'
-import { Button } from '../button'
 
 const triggerButtonClassName = 'rounded-lg border border-divider-subtle bg-components-button-secondary-bg px-3 py-1.5 text-sm text-text-secondary shadow-xs hover:bg-state-base-hover'
 
diff --git a/web/app/components/base/ui/popover/index.tsx b/packages/dify-ui/src/popover/index.tsx
similarity index 91%
rename from web/app/components/base/ui/popover/index.tsx
rename to packages/dify-ui/src/popover/index.tsx
index dbde17ae21..32d111a1b8 100644
--- a/web/app/components/base/ui/popover/index.tsx
+++ b/packages/dify-ui/src/popover/index.tsx
@@ -1,10 +1,12 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import type { Placement } from '@/app/components/base/ui/placement'
+import type { Placement } from '../placement'
 import { Popover as BasePopover } from '@base-ui/react/popover'
-import { cn } from '@langgenius/dify-ui/cn'
-import { parsePlacement } from '@/app/components/base/ui/placement'
+import { cn } from '../cn'
+import { parsePlacement } from '../placement'
+
+export type { Placement }
 
 export const Popover = BasePopover.Root
 export const PopoverTrigger = BasePopover.Trigger
diff --git a/web/app/components/base/ui/scroll-area/__tests__/index.spec.tsx b/packages/dify-ui/src/scroll-area/__tests__/index.spec.tsx
similarity index 100%
rename from web/app/components/base/ui/scroll-area/__tests__/index.spec.tsx
rename to packages/dify-ui/src/scroll-area/__tests__/index.spec.tsx
diff --git a/web/app/components/base/ui/scroll-area/index.stories.tsx b/packages/dify-ui/src/scroll-area/index.stories.tsx
similarity index 98%
rename from web/app/components/base/ui/scroll-area/index.stories.tsx
rename to packages/dify-ui/src/scroll-area/index.stories.tsx
index dbe8161f8f..e1f8f9cfb5 100644
--- a/web/app/components/base/ui/scroll-area/index.stories.tsx
+++ b/packages/dify-ui/src/scroll-area/index.stories.tsx
@@ -1,8 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import type { ReactNode } from 'react'
-import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import AppIcon from '@/app/components/base/app-icon'
 import {
   ScrollAreaContent,
   ScrollAreaCorner,
@@ -11,6 +9,7 @@ import {
   ScrollAreaThumb,
   ScrollAreaViewport,
 } from '.'
+import { cn } from '../cn'
 
 const meta = {
   title: 'Base/UI/ScrollArea',
@@ -490,12 +489,13 @@ const ExploreSidebarWebAppsPane = () => {
                         )}
                       >
                         <div className="flex min-w-0 grow items-center gap-2">
-                          <AppIcon
-                            size="tiny"
-                            iconType="emoji"
-                            icon={item.icon}
-                            background={item.iconBackground}
-                          />
+                          <div
+                            aria-hidden
+                            className="flex size-6 shrink-0 items-center justify-center rounded-md text-xs"
+                            style={{ background: item.iconBackground }}
+                          >
+                            {item.icon}
+                          </div>
                           <span className="min-w-0 truncate system-sm-regular">
                             {item.name}
                           </span>
diff --git a/web/app/components/base/ui/scroll-area/index.tsx b/packages/dify-ui/src/scroll-area/index.tsx
similarity index 98%
rename from web/app/components/base/ui/scroll-area/index.tsx
rename to packages/dify-ui/src/scroll-area/index.tsx
index 300946b1bf..4e1832e661 100644
--- a/web/app/components/base/ui/scroll-area/index.tsx
+++ b/packages/dify-ui/src/scroll-area/index.tsx
@@ -2,7 +2,7 @@
 
 import type { ReactNode } from 'react'
 import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area'
-import { cn } from '@langgenius/dify-ui/cn'
+import { cn } from '../cn'
 
 export const ScrollAreaRoot = BaseScrollArea.Root
 type ScrollAreaRootProps = BaseScrollArea.Root.Props
diff --git a/web/app/components/base/ui/select/__tests__/index.spec.tsx b/packages/dify-ui/src/select/__tests__/index.spec.tsx
similarity index 100%
rename from web/app/components/base/ui/select/__tests__/index.spec.tsx
rename to packages/dify-ui/src/select/__tests__/index.spec.tsx
diff --git a/web/app/components/base/ui/select/index.stories.tsx b/packages/dify-ui/src/select/index.stories.tsx
similarity index 99%
rename from web/app/components/base/ui/select/index.stories.tsx
rename to packages/dify-ui/src/select/index.stories.tsx
index 027d0f74df..6dc832a291 100644
--- a/web/app/components/base/ui/select/index.stories.tsx
+++ b/packages/dify-ui/src/select/index.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useState } from 'react'
 import {
   Select,
diff --git a/web/app/components/base/ui/select/index.tsx b/packages/dify-ui/src/select/index.tsx
similarity index 96%
rename from web/app/components/base/ui/select/index.tsx
rename to packages/dify-ui/src/select/index.tsx
index 7de0088af4..62478fad21 100644
--- a/web/app/components/base/ui/select/index.tsx
+++ b/packages/dify-ui/src/select/index.tsx
@@ -2,15 +2,18 @@
 
 import type { VariantProps } from 'class-variance-authority'
 import type { ReactNode } from 'react'
-import type { Placement } from '@/app/components/base/ui/placement'
+import type { Placement } from '../placement'
 import { Select as BaseSelect } from '@base-ui/react/select'
-import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
+import { cn } from '../cn'
 import {
   overlayLabelClassName,
   overlaySeparatorClassName,
-} from '@/app/components/base/ui/overlay-shared'
-import { parsePlacement } from '@/app/components/base/ui/placement'
+} from '../overlay-shared'
+import { parsePlacement } from '../placement'
+
+/** @public */
+export type { Placement }
 
 export const Select = BaseSelect.Root
 export const SelectValue = BaseSelect.Value
diff --git a/web/app/components/base/ui/slider/__tests__/index.spec.tsx b/packages/dify-ui/src/slider/__tests__/index.spec.tsx
similarity index 100%
rename from web/app/components/base/ui/slider/__tests__/index.spec.tsx
rename to packages/dify-ui/src/slider/__tests__/index.spec.tsx
diff --git a/web/app/components/base/ui/slider/index.stories.tsx b/packages/dify-ui/src/slider/index.stories.tsx
similarity index 96%
rename from web/app/components/base/ui/slider/index.stories.tsx
rename to packages/dify-ui/src/slider/index.stories.tsx
index 91bc0d3ecb..a48e202142 100644
--- a/web/app/components/base/ui/slider/index.stories.tsx
+++ b/packages/dify-ui/src/slider/index.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import type * as React from 'react'
 import { useState } from 'react'
 import { Slider } from '.'
diff --git a/web/app/components/base/ui/slider/index.tsx b/packages/dify-ui/src/slider/index.tsx
similarity index 98%
rename from web/app/components/base/ui/slider/index.tsx
rename to packages/dify-ui/src/slider/index.tsx
index ad1bc0ba8f..cfe1361598 100644
--- a/web/app/components/base/ui/slider/index.tsx
+++ b/packages/dify-ui/src/slider/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { Slider as BaseSlider } from '@base-ui/react/slider'
-import { cn } from '@langgenius/dify-ui/cn'
+import { cn } from '../cn'
 
 /** @public */
 export const SliderRoot = BaseSlider.Root
diff --git a/web/app/components/base/switch/__tests__/index.spec.tsx b/packages/dify-ui/src/switch/__tests__/index.spec.tsx
similarity index 99%
rename from web/app/components/base/switch/__tests__/index.spec.tsx
rename to packages/dify-ui/src/switch/__tests__/index.spec.tsx
index 0d46095ebd..055b6e0791 100644
--- a/web/app/components/base/switch/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/switch/__tests__/index.spec.tsx
@@ -1,8 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
-import Switch from '../index'
-import { SwitchSkeleton } from '../skeleton'
+import { Switch, SwitchSkeleton } from '../index'
 
 const getThumb = (switchElement: HTMLElement) => switchElement.querySelector('span')
 
diff --git a/web/app/components/base/switch/index.stories.tsx b/packages/dify-ui/src/switch/index.stories.tsx
similarity index 96%
rename from web/app/components/base/switch/index.stories.tsx
rename to packages/dify-ui/src/switch/index.stories.tsx
index 1b3a52dcc4..f43b9ae154 100644
--- a/web/app/components/base/switch/index.stories.tsx
+++ b/packages/dify-ui/src/switch/index.stories.tsx
@@ -1,16 +1,16 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { ComponentProps } from 'react'
 import { useState, useTransition } from 'react'
-import Switch from '.'
-import { SwitchSkeleton } from './skeleton'
+import { Switch, SwitchSkeleton } from '.'
 
 const meta = {
-  title: 'Base/Data Entry/Switch',
+  title: 'Base/UI/Switch',
   component: Switch,
   parameters: {
     layout: 'centered',
     docs: {
       description: {
-        component: 'Toggle switch built on Base UI with CVA variants, Figma-aligned design tokens, loading spinner, and skeleton placeholder. Import `Switch` for the toggle and `SwitchSkeleton` from `./skeleton` for loading placeholders.',
+        component: 'Toggle switch built on Base UI with CVA variants, Figma-aligned design tokens, loading spinner, and skeleton placeholder. Import `Switch` and `SwitchSkeleton` from `@langgenius/dify-ui/switch`.',
       },
     },
   },
@@ -42,7 +42,7 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-const SwitchDemo = (args: any) => {
+const SwitchDemo = (args: Partial<ComponentProps<typeof Switch>>) => {
   const [enabled, setEnabled] = useState(args.checked ?? false)
 
   return (
@@ -338,7 +338,7 @@ export const Skeleton: Story = {
   parameters: {
     docs: {
       description: {
-        story: '`SwitchSkeleton` renders a non-interactive placeholder with `bg-text-quaternary opacity-20`. Imported separately from `./skeleton`.',
+        story: '`SwitchSkeleton` renders a non-interactive placeholder with `bg-text-quaternary opacity-20`. Exported from `@langgenius/dify-ui/switch` alongside `Switch`.',
       },
     },
   },
diff --git a/web/app/components/base/switch/index.tsx b/packages/dify-ui/src/switch/index.tsx
similarity index 72%
rename from web/app/components/base/switch/index.tsx
rename to packages/dify-ui/src/switch/index.tsx
index 942a2291d0..dd15ef6f79 100644
--- a/web/app/components/base/switch/index.tsx
+++ b/packages/dify-ui/src/switch/index.tsx
@@ -1,10 +1,11 @@
 'use client'
 
+import type { Switch as BaseSwitchNS } from '@base-ui/react/switch'
 import type { VariantProps } from 'class-variance-authority'
+import type { HTMLAttributes } from 'react'
 import { Switch as BaseSwitch } from '@base-ui/react/switch'
-import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
-import * as React from 'react'
+import { cn } from '../cn'
 
 const switchRootStateClassName = 'bg-components-toggle-bg-unchecked hover:bg-components-toggle-bg-unchecked-hover data-checked:bg-components-toggle-bg data-checked:hover:bg-components-toggle-bg-hover data-disabled:cursor-not-allowed data-disabled:bg-components-toggle-bg-unchecked-disabled data-disabled:hover:bg-components-toggle-bg-unchecked-disabled data-disabled:data-checked:bg-components-toggle-bg-disabled data-disabled:data-checked:hover:bg-components-toggle-bg-disabled'
 
@@ -61,46 +62,35 @@ const spinnerSizeConfig: Partial<Record<SwitchSize, {
   },
 }
 
-type SwitchProps = {
-  'checked': boolean
-  'onCheckedChange'?: (checked: boolean) => void
-  'size'?: SwitchSize
-  'disabled'?: boolean
-  'loading'?: boolean
-  'className'?: string
-  'aria-label'?: string
-  'aria-labelledby'?: string
-  'data-testid'?: string
-}
+export type SwitchProps
+  = Omit<BaseSwitchNS.Root.Props, 'className' | 'size' | 'onCheckedChange'>
+    & VariantProps<typeof switchRootVariants>
+    & {
+      onCheckedChange?: (checked: boolean) => void
+      loading?: boolean
+      className?: string
+    }
 
-const Switch = ({
-  ref,
+export function Switch({
   checked,
-  onCheckedChange,
   size = 'md',
-  disabled = false,
+  disabled,
   loading = false,
   className,
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-  'data-testid': dataTestid,
-}: SwitchProps & {
-  ref?: React.Ref<HTMLElement>
-}) => {
+  onCheckedChange,
+  ...props
+}: SwitchProps) {
   const isDisabled = disabled || loading
-  const spinner = loading ? spinnerSizeConfig[size] : undefined
+  const spinner = loading && size ? spinnerSizeConfig[size] : undefined
 
   return (
     <BaseSwitch.Root
-      ref={ref}
       checked={checked}
-      onCheckedChange={value => onCheckedChange?.(value)}
       disabled={isDisabled}
       aria-busy={loading || undefined}
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledBy}
       className={cn(switchRootVariants({ size }), className)}
-      data-testid={dataTestid}
+      onCheckedChange={value => onCheckedChange?.(value)}
+      {...props}
     >
       <BaseSwitch.Thumb
         className={switchThumbVariants({ size })}
@@ -123,6 +113,39 @@ const Switch = ({
   )
 }
 
-Switch.displayName = 'Switch'
+const switchSkeletonVariants = cva(
+  'bg-text-quaternary opacity-20',
+  {
+    variants: {
+      size: {
+        xs: 'h-2.5 w-3.5 rounded-xs',
+        sm: 'h-3 w-5 rounded-[3.5px]',
+        md: 'h-4 w-7 rounded-[5px]',
+        lg: 'h-5 w-9 rounded-md',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+)
 
-export default React.memo(Switch)
+export type SwitchSkeletonProps
+  = Omit<HTMLAttributes<HTMLDivElement>, 'className'>
+    & VariantProps<typeof switchSkeletonVariants>
+    & {
+      className?: string
+    }
+
+export function SwitchSkeleton({
+  size = 'md',
+  className,
+  ...props
+}: SwitchSkeletonProps) {
+  return (
+    <div
+      className={cn(switchSkeletonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
diff --git a/web/app/components/base/ui/toast/__tests__/index.spec.tsx b/packages/dify-ui/src/toast/__tests__/index.spec.tsx
similarity index 100%
rename from web/app/components/base/ui/toast/__tests__/index.spec.tsx
rename to packages/dify-ui/src/toast/__tests__/index.spec.tsx
diff --git a/web/app/components/base/ui/toast/index.stories.tsx b/packages/dify-ui/src/toast/index.stories.tsx
similarity index 99%
rename from web/app/components/base/ui/toast/index.stories.tsx
rename to packages/dify-ui/src/toast/index.stories.tsx
index d292e3434d..cbfb944f19 100644
--- a/web/app/components/base/ui/toast/index.stories.tsx
+++ b/packages/dify-ui/src/toast/index.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import type { ReactNode } from 'react'
 import { toast } from '.'
 
diff --git a/web/app/components/base/ui/toast/index.tsx b/packages/dify-ui/src/toast/index.tsx
similarity index 99%
rename from web/app/components/base/ui/toast/index.tsx
rename to packages/dify-ui/src/toast/index.tsx
index 1f9fea5173..a479621563 100644
--- a/web/app/components/base/ui/toast/index.tsx
+++ b/packages/dify-ui/src/toast/index.tsx
@@ -7,7 +7,7 @@ import type {
 } from '@base-ui/react/toast'
 import type { ReactNode } from 'react'
 import { Toast as BaseToast } from '@base-ui/react/toast'
-import { cn } from '@langgenius/dify-ui/cn'
+import { cn } from '../cn'
 
 type ToastData = Record<string, never>
 type ToastToneStyle = {
diff --git a/web/app/components/base/ui/tooltip/__tests__/index.spec.tsx b/packages/dify-ui/src/tooltip/__tests__/index.spec.tsx
similarity index 100%
rename from web/app/components/base/ui/tooltip/__tests__/index.spec.tsx
rename to packages/dify-ui/src/tooltip/__tests__/index.spec.tsx
diff --git a/web/app/components/base/ui/tooltip/index.stories.tsx b/packages/dify-ui/src/tooltip/index.stories.tsx
similarity index 98%
rename from web/app/components/base/ui/tooltip/index.stories.tsx
rename to packages/dify-ui/src/tooltip/index.stories.tsx
index 16d0675c44..dca3be32f3 100644
--- a/web/app/components/base/ui/tooltip/index.stories.tsx
+++ b/packages/dify-ui/src/tooltip/index.stories.tsx
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import type { Placement } from '../placement'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Placement } from '.'
 import { useState } from 'react'
 import {
   Tooltip,
diff --git a/web/app/components/base/ui/tooltip/index.tsx b/packages/dify-ui/src/tooltip/index.tsx
similarity index 90%
rename from web/app/components/base/ui/tooltip/index.tsx
rename to packages/dify-ui/src/tooltip/index.tsx
index b84921e351..e0fcd7c5c3 100644
--- a/web/app/components/base/ui/tooltip/index.tsx
+++ b/packages/dify-ui/src/tooltip/index.tsx
@@ -1,10 +1,12 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import type { Placement } from '@/app/components/base/ui/placement'
+import type { Placement } from '../placement'
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip'
-import { cn } from '@langgenius/dify-ui/cn'
-import { parsePlacement } from '@/app/components/base/ui/placement'
+import { cn } from '../cn'
+import { parsePlacement } from '../placement'
+
+export type { Placement }
 
 type TooltipContentVariant = 'default' | 'plain'
 
diff --git a/packages/dify-ui/tailwind.config.ts b/packages/dify-ui/tailwind.config.ts
new file mode 100644
index 0000000000..bcf1731775
--- /dev/null
+++ b/packages/dify-ui/tailwind.config.ts
@@ -0,0 +1,23 @@
+import type { Config } from 'tailwindcss'
+import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons'
+import difyUIPreset from './src/tailwind-preset'
+
+const config: Config = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+    './.storybook/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  presets: [difyUIPreset],
+  plugins: [
+    iconsPlugin({
+      collections: getIconCollections(['ri']),
+      extraProperties: {
+        width: '1rem',
+        height: '1rem',
+        display: 'block',
+      },
+    }),
+  ],
+}
+
+export default config
diff --git a/packages/dify-ui/tests/setup.ts b/packages/dify-ui/tests/setup.ts
new file mode 100644
index 0000000000..e1ea15af2b
--- /dev/null
+++ b/packages/dify-ui/tests/setup.ts
@@ -0,0 +1,44 @@
+import { act, cleanup } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+
+if (typeof Element !== 'undefined' && !Element.prototype.getAnimations)
+  Element.prototype.getAnimations = () => []
+
+if (typeof document !== 'undefined' && !document.getAnimations)
+  document.getAnimations = () => []
+
+if (typeof globalThis.ResizeObserver === 'undefined') {
+  globalThis.ResizeObserver = class {
+    observe() {
+      return undefined
+    }
+
+    unobserve() {
+      return undefined
+    }
+
+    disconnect() {
+      return undefined
+    }
+  }
+}
+
+if (typeof globalThis.IntersectionObserver === 'undefined') {
+  globalThis.IntersectionObserver = class {
+    readonly root: Element | Document | null = null
+    readonly rootMargin: string = ''
+    readonly scrollMargin: string = ''
+    readonly thresholds: ReadonlyArray<number> = []
+    constructor(_callback: IntersectionObserverCallback, _options?: IntersectionObserverInit) { /* noop */ }
+    observe(_target: Element) { /* noop */ }
+    unobserve(_target: Element) { /* noop */ }
+    disconnect() { /* noop */ }
+    takeRecords(): IntersectionObserverEntry[] { return [] }
+  }
+}
+
+afterEach(async () => {
+  await act(async () => {
+    cleanup()
+  })
+})
diff --git a/packages/dify-ui/tsconfig.json b/packages/dify-ui/tsconfig.json
index b31c48ead6..678e1de897 100644
--- a/packages/dify-ui/tsconfig.json
+++ b/packages/dify-ui/tsconfig.json
@@ -1,14 +1,10 @@
 {
-  "extends": "@dify/tsconfig/base.json",
+  "extends": "@dify/tsconfig/react.json",
   "compilerOptions": {
-    "rootDir": "src",
-    "declaration": true,
-    "declarationMap": true,
-    "noEmit": false,
-    "outDir": "dist",
-    "sourceMap": true,
+    "rootDir": ".",
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
     "isolatedModules": true,
     "verbatimModuleSyntax": true
   },
-  "include": ["src"]
+  "include": ["src", "tests", ".storybook", "tailwind.config.ts", "vite.config.ts"]
 }
diff --git a/packages/dify-ui/vite.config.ts b/packages/dify-ui/vite.config.ts
new file mode 100644
index 0000000000..a20b7fb35c
--- /dev/null
+++ b/packages/dify-ui/vite.config.ts
@@ -0,0 +1,27 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite-plus'
+
+const isCI = !!process.env.CI
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    tsconfigPaths: true,
+  },
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+    setupFiles: ['./tests/setup.ts'],
+    coverage: {
+      provider: 'v8',
+      include: ['src/**/*.{ts,tsx}'],
+      exclude: [
+        'src/**/*.stories.{ts,tsx}',
+        'src/**/__tests__/**',
+        'src/themes/**',
+        'src/styles/**',
+      ],
+      reporter: isCI ? ['json', 'json-summary'] : ['text', 'json', 'json-summary'],
+    },
+  },
+})
diff --git a/packages/tsconfig/nextjs.json b/packages/tsconfig/nextjs.json
index 81c6436a97..5beddd55ed 100644
--- a/packages/tsconfig/nextjs.json
+++ b/packages/tsconfig/nextjs.json
@@ -1,5 +1,5 @@
 {
-  "extends": "./web.json",
+  "extends": "./react.json",
   "compilerOptions": {
     "plugins": [
       {
diff --git a/packages/tsconfig/package.json b/packages/tsconfig/package.json
index 52cafc5bb3..7a5b20c1db 100644
--- a/packages/tsconfig/package.json
+++ b/packages/tsconfig/package.json
@@ -6,6 +6,6 @@
     "./base.json": "./base.json",
     "./nextjs.json": "./nextjs.json",
     "./node.json": "./node.json",
-    "./web.json": "./web.json"
+    "./react.json": "./react.json"
   }
 }
diff --git a/packages/tsconfig/web.json b/packages/tsconfig/react.json
similarity index 100%
rename from packages/tsconfig/web.json
rename to packages/tsconfig/react.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 914bc342e2..1e0994d0a2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -135,6 +135,9 @@ catalogs:
     '@storybook/react':
       specifier: 10.3.5
       version: 10.3.5
+    '@storybook/react-vite':
+      specifier: 10.3.5
+      version: 10.3.5
     '@streamdown/math':
       specifier: 1.0.2
       version: 1.0.2
@@ -632,15 +635,87 @@ importers:
         specifier: 'catalog:'
         version: 3.5.0
     devDependencies:
+      '@base-ui/react':
+        specifier: 'catalog:'
+        version: 1.4.0(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@chromatic-com/storybook':
+        specifier: 'catalog:'
+        version: 5.1.2(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
       '@dify/tsconfig':
         specifier: workspace:*
         version: link:../tsconfig
+      '@egoist/tailwindcss-icons':
+        specifier: 'catalog:'
+        version: 1.9.2(tailwindcss@4.2.2)
+      '@iconify-json/ri':
+        specifier: 'catalog:'
+        version: 1.2.10
+      '@storybook/addon-docs':
+        specifier: 'catalog:'
+        version: 10.3.5(@types/react@19.2.14)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2))
+      '@storybook/addon-links':
+        specifier: 'catalog:'
+        version: 10.3.5(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
+      '@storybook/addon-themes':
+        specifier: 'catalog:'
+        version: 10.3.5(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
+      '@storybook/react-vite':
+        specifier: 'catalog:'
+        version: 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)(webpack@5.105.4(esbuild@0.27.2))
+      '@tailwindcss/vite':
+        specifier: 'catalog:'
+        version: 4.2.2(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))
+      '@testing-library/jest-dom':
+        specifier: 'catalog:'
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: 'catalog:'
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@testing-library/user-event':
+        specifier: 'catalog:'
+        version: 14.6.1(@testing-library/dom@10.4.1)
+      '@types/react':
+        specifier: 'catalog:'
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: 'catalog:'
+        version: 19.2.3(@types/react@19.2.14)
+      '@vitejs/plugin-react':
+        specifier: 'catalog:'
+        version: 6.0.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))
+      '@vitest/coverage-v8':
+        specifier: 'catalog:'
+        version: 4.1.4(@voidzero-dev/vite-plus-test@0.1.18)
+      class-variance-authority:
+        specifier: 'catalog:'
+        version: 0.7.1
+      happy-dom:
+        specifier: 'catalog:'
+        version: 20.9.0
+      react:
+        specifier: 'catalog:'
+        version: 19.2.5
+      react-dom:
+        specifier: 'catalog:'
+        version: 19.2.5(react@19.2.5)
+      storybook:
+        specifier: 'catalog:'
+        version: 10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       tailwindcss:
         specifier: 'catalog:'
         version: 4.2.2
       typescript:
         specifier: 'catalog:'
         version: 6.0.2
+      vite:
+        specifier: npm:@voidzero-dev/vite-plus-core@0.1.18
+        version: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+      vite-plus:
+        specifier: 'catalog:'
+        version: 0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
+      vitest:
+        specifier: npm:@voidzero-dev/vite-plus-test@0.1.18
+        version: '@voidzero-dev/vite-plus-test@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
 
   packages/iconify-collections:
     devDependencies:
@@ -11202,6 +11277,23 @@ snapshots:
       - vite
       - webpack
 
+  '@storybook/addon-docs@10.3.5(@types/react@19.2.14)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2))':
+    dependencies:
+      '@mdx-js/react': 3.1.1(@types/react@19.2.14)(react@19.2.5)
+      '@storybook/csf-plugin': 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2))
+      '@storybook/icons': 2.0.1(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@storybook/react-dom-shim': 10.3.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
+      storybook: 10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      ts-dedent: 2.2.0
+    transitivePeerDependencies:
+      - '@types/react'
+      - esbuild
+      - rollup
+      - vite
+      - webpack
+
   '@storybook/addon-links@10.3.5(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))':
     dependencies:
       '@storybook/global': 5.0.0
@@ -11229,6 +11321,17 @@ snapshots:
       - rollup
       - webpack
 
+  '@storybook/builder-vite@10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2))':
+    dependencies:
+      '@storybook/csf-plugin': 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2))
+      storybook: 10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      ts-dedent: 2.2.0
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - webpack
+
   '@storybook/csf-plugin@10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))':
     dependencies:
       storybook: 10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
@@ -11239,6 +11342,16 @@ snapshots:
       vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
       webpack: 5.105.4(esbuild@0.27.2)(uglify-js@3.19.3)
 
+  '@storybook/csf-plugin@10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2))':
+    dependencies:
+      storybook: 10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      unplugin: 2.3.11
+    optionalDependencies:
+      esbuild: 0.27.2
+      rollup: 4.59.0
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+      webpack: 5.105.4(esbuild@0.27.2)
+
   '@storybook/global@5.0.0': {}
 
   '@storybook/icons@2.0.1(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
@@ -11296,6 +11409,28 @@ snapshots:
       - typescript
       - webpack
 
+  '@storybook/react-vite@10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)(webpack@5.105.4(esbuild@0.27.2))':
+    dependencies:
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2)
+      '@rollup/pluginutils': 5.3.0(rollup@4.59.0)
+      '@storybook/builder-vite': 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2))
+      '@storybook/react': 10.3.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)
+      empathic: 2.0.0
+      magic-string: 0.30.21
+      react: 19.2.5
+      react-docgen: 8.0.3
+      react-dom: 19.2.5(react@19.2.5)
+      resolve: 1.22.11
+      storybook: 10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      tsconfig-paths: 4.2.0
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - supports-color
+      - typescript
+      - webpack
+
   '@storybook/react@10.3.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)':
     dependencies:
       '@storybook/global': 5.0.0
@@ -16589,6 +16724,17 @@ snapshots:
       esbuild: 0.27.2
       uglify-js: 3.19.3
 
+  terser-webpack-plugin@5.4.0(esbuild@0.27.2)(webpack@5.105.4(esbuild@0.27.2)):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      jest-worker: 27.5.1
+      schema-utils: 4.3.3
+      terser: 5.46.1
+      webpack: 5.105.4(esbuild@0.27.2)
+    optionalDependencies:
+      esbuild: 0.27.2
+    optional: true
+
   terser@5.46.1:
     dependencies:
       '@jridgewell/source-map': 0.3.11
@@ -17118,6 +17264,39 @@ snapshots:
 
   webpack-virtual-modules@0.6.2: {}
 
+  webpack@5.105.4(esbuild@0.27.2):
+    dependencies:
+      '@types/eslint-scope': 3.7.7
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/wasm-edit': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      acorn: 8.16.0
+      acorn-import-phases: 1.0.4(acorn@8.16.0)
+      browserslist: 4.28.1
+      chrome-trace-event: 1.0.4
+      enhanced-resolve: 5.20.1
+      es-module-lexer: 2.0.0
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+      json-parse-even-better-errors: 2.3.1
+      loader-runner: 4.3.1
+      mime-types: 2.1.35
+      neo-async: 2.6.2
+      schema-utils: 4.3.3
+      tapable: 2.3.2
+      terser-webpack-plugin: 5.4.0(esbuild@0.27.2)(webpack@5.105.4(esbuild@0.27.2))
+      watchpack: 2.5.1
+      webpack-sources: 3.3.4
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+    optional: true
+
   webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3):
     dependencies:
       '@types/eslint-scope': 3.7.7
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 0bd1303fb3..12fea26d68 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -55,6 +55,7 @@ catalog:
   '@storybook/addon-themes': 10.3.5
   '@storybook/nextjs-vite': 10.3.5
   '@storybook/react': 10.3.5
+  '@storybook/react-vite': 10.3.5
   '@streamdown/math': 1.0.2
   '@svgdotjs/svg.js': 3.2.5
   '@t3-oss/env-nextjs': 0.13.11
diff --git a/web/.storybook/preview.tsx b/web/.storybook/preview.tsx
index a9144e7128..92b5baab0d 100644
--- a/web/.storybook/preview.tsx
+++ b/web/.storybook/preview.tsx
@@ -1,8 +1,8 @@
 import type { Preview } from '@storybook/react'
 import type { Resource } from 'i18next'
+import { ToastHost } from '@langgenius/dify-ui/toast'
 import { withThemeByDataAttribute } from '@storybook/addon-themes'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { ToastHost } from '../app/components/base/ui/toast'
 import { I18nClientProvider as I18N } from '../app/components/provider/i18n'
 import commonEnUS from '../i18n/en-US/common.json'
 
diff --git a/web/__tests__/app/app-publisher-flow.test.tsx b/web/__tests__/app/app-publisher-flow.test.tsx
index 4f24fc310c..9c09acf6a1 100644
--- a/web/__tests__/app/app-publisher-flow.test.tsx
+++ b/web/__tests__/app/app-publisher-flow.test.tsx
@@ -106,7 +106,7 @@ vi.mock('@/service/apps', () => ({
   fetchAppDetailDirect: (...args: unknown[]) => mockFetchAppDetailDirect(...args),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (...args: unknown[]) => mockToastError(...args),
   },
diff --git a/web/__tests__/apps/app-card-operations-flow.test.tsx b/web/__tests__/apps/app-card-operations-flow.test.tsx
index 4b1c05e7ae..8c3219794d 100644
--- a/web/__tests__/apps/app-card-operations-flow.test.tsx
+++ b/web/__tests__/apps/app-card-operations-flow.test.tsx
@@ -31,7 +31,7 @@ const toastMocks = vi.hoisted(() => ({
 }))
 const mockRouterPush = vi.fn()
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: (message: string, options?: Record<string, unknown>) => toastMocks.mockNotify({ type: 'success', message, ...options }),
     error: (message: string, options?: Record<string, unknown>) => toastMocks.mockNotify({ type: 'error', message, ...options }),
diff --git a/web/__tests__/billing/cloud-plan-payment-flow.test.tsx b/web/__tests__/billing/cloud-plan-payment-flow.test.tsx
index 0c1efbe1af..de145a73e6 100644
--- a/web/__tests__/billing/cloud-plan-payment-flow.test.tsx
+++ b/web/__tests__/billing/cloud-plan-payment-flow.test.tsx
@@ -8,10 +8,10 @@
  * and workspace manager permission enforcement.
  */
 import type { BasicPlan } from '@/app/components/billing/type'
+import { toast, ToastHost } from '@langgenius/dify-ui/toast'
 import { cleanup, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
-import { toast, ToastHost } from '@/app/components/base/ui/toast'
 import { ALL_PLANS } from '@/app/components/billing/config'
 import { PlanRange } from '@/app/components/billing/pricing/plan-switcher/plan-range-switcher'
 import CloudPlanItem from '@/app/components/billing/pricing/plans/cloud-plan-item'
diff --git a/web/__tests__/billing/self-hosted-plan-flow.test.tsx b/web/__tests__/billing/self-hosted-plan-flow.test.tsx
index a3386d0092..f2b5cd3531 100644
--- a/web/__tests__/billing/self-hosted-plan-flow.test.tsx
+++ b/web/__tests__/billing/self-hosted-plan-flow.test.tsx
@@ -1,3 +1,4 @@
+import { toast, ToastHost } from '@langgenius/dify-ui/toast'
 /**
  * Integration test: Self-Hosted Plan Flow
  *
@@ -10,7 +11,6 @@
 import { cleanup, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
-import { toast, ToastHost } from '@/app/components/base/ui/toast'
 import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '@/app/components/billing/config'
 import SelfHostedPlanItem from '@/app/components/billing/pricing/plans/self-hosted-plan-item'
 import { SelfHostedPlan } from '@/app/components/billing/type'
diff --git a/web/__tests__/datasets/create-dataset-flow.test.tsx b/web/__tests__/datasets/create-dataset-flow.test.tsx
index 34d64d8c43..c8504a10c7 100644
--- a/web/__tests__/datasets/create-dataset-flow.test.tsx
+++ b/web/__tests__/datasets/create-dataset-flow.test.tsx
@@ -33,7 +33,7 @@ vi.mock('@/service/knowledge/use-dataset', () => ({
   useInvalidDatasetList: () => vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: { notify: vi.fn() },
   toast: {
     success: vi.fn(),
diff --git a/web/__tests__/datasets/dataset-settings-flow.test.tsx b/web/__tests__/datasets/dataset-settings-flow.test.tsx
index 7c53401b15..eaafcafe62 100644
--- a/web/__tests__/datasets/dataset-settings-flow.test.tsx
+++ b/web/__tests__/datasets/dataset-settings-flow.test.tsx
@@ -59,7 +59,7 @@ vi.mock('@/app/components/datasets/common/check-rerank-model', () => ({
   isReRankModelSelected: () => true,
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: mockToastError,
     success: vi.fn(),
@@ -318,7 +318,7 @@ describe('Dataset Settings Flow - Cross-Module Configuration Cascade', () => {
 
   describe('Form Submission Validation → All Fields Together', () => {
     it('should reject empty name on save', async () => {
-      const { toast } = await import('@/app/components/base/ui/toast')
+      const { toast } = await import('@langgenius/dify-ui/toast')
       const { result } = renderHook(() => useFormState())
 
       act(() => {
diff --git a/web/__tests__/explore/sidebar-lifecycle-flow.test.tsx b/web/__tests__/explore/sidebar-lifecycle-flow.test.tsx
index 64dd5321ac..35c8175a36 100644
--- a/web/__tests__/explore/sidebar-lifecycle-flow.test.tsx
+++ b/web/__tests__/explore/sidebar-lifecycle-flow.test.tsx
@@ -53,8 +53,8 @@ vi.mock('@/service/use-explore', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
+vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
   return {
     ...actual,
     toast: {
diff --git a/web/__tests__/plugins/plugin-install-flow.test.ts b/web/__tests__/plugins/plugin-install-flow.test.ts
index dd5a18b724..d975eb7167 100644
--- a/web/__tests__/plugins/plugin-install-flow.test.ts
+++ b/web/__tests__/plugins/plugin-install-flow.test.ts
@@ -10,7 +10,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { checkForUpdates, fetchReleases, handleUpload } from '@/app/components/plugins/install-plugin/hooks'
 
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign((message: string, options?: { type?: string }) => mockToastNotify({ type: options?.type, message }), {
     success: (message: string) => mockToastNotify({ type: 'success', message }),
     error: (message: string) => mockToastNotify({ type: 'error', message }),
diff --git a/web/__tests__/rag-pipeline/dsl-export-import-flow.test.ts b/web/__tests__/rag-pipeline/dsl-export-import-flow.test.ts
index cdf7aba4f6..cc97065d8f 100644
--- a/web/__tests__/rag-pipeline/dsl-export-import-flow.test.ts
+++ b/web/__tests__/rag-pipeline/dsl-export-import-flow.test.ts
@@ -20,7 +20,7 @@ const mockToast = {
   promise: vi.fn(),
 }
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 const mockEventEmitter = { emit: vi.fn() }
diff --git a/web/__tests__/tools/tool-provider-detail-flow.test.tsx b/web/__tests__/tools/tool-provider-detail-flow.test.tsx
index c52871c946..9cf4772152 100644
--- a/web/__tests__/tools/tool-provider-detail-flow.test.tsx
+++ b/web/__tests__/tools/tool-provider-detail-flow.test.tsx
@@ -133,7 +133,7 @@ vi.mock('@/app/components/base/drawer', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: { notify: vi.fn() },
   toast: {
     success: vi.fn(),
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
index 289e50c257..8ef0b65e0f 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
@@ -5,6 +5,7 @@ import type { BlockEnum } from '@/app/components/workflow/types'
 import type { UpdateAppSiteCodeResponse } from '@/models/app'
 import type { App } from '@/types/app'
 import type { I18nKeysByPrefix } from '@/types/i18n'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -12,7 +13,6 @@ import AppCard from '@/app/components/app/overview/app-card'
 import TriggerCard from '@/app/components/app/overview/trigger-card'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Loading from '@/app/components/base/loading'
-import { toast } from '@/app/components/base/ui/toast'
 import MCPServiceCard from '@/app/components/tools/mcp/mcp-service-card'
 import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
 import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
index 3efd58ac40..471ab86e12 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
@@ -2,12 +2,12 @@
 import type { FC, JSX } from 'react'
 import type { AliyunConfig, ArizeConfig, DatabricksConfig, LangFuseConfig, LangSmithConfig, MLflowConfig, OpikConfig, PhoenixConfig, TencentConfig, WeaveConfig } from './type'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import Indicator from '@/app/components/header/indicator'
 import ProviderConfigModal from './provider-config-modal'
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
index 9c42f85825..35fafb2a79 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import type { AliyunConfig, ArizeConfig, DatabricksConfig, LangFuseConfig, LangSmithConfig, MLflowConfig, OpikConfig, PhoenixConfig, TencentConfig, WeaveConfig } from './type'
 import type { TracingStatus } from '@/models/app'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiArrowDownDoubleLine,
   RiEqualizer2Line,
@@ -14,7 +15,6 @@ import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import { AliyunIcon, ArizeIcon, DatabricksIcon, LangfuseIcon, LangsmithIcon, MlflowIcon, OpikIcon, PhoenixIcon, TencentIcon, WeaveIcon } from '@/app/components/base/icons/src/public/tracing'
 import Loading from '@/app/components/base/loading'
-import { toast } from '@/app/components/base/ui/toast'
 import Indicator from '@/app/components/header/indicator'
 import { useAppContext } from '@/context/app-context'
 import { usePathname } from '@/next/navigation'
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
index 6ff8725f63..4f2497ad71 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
@@ -1,6 +1,17 @@
 'use client'
 import type { FC } from 'react'
 import type { AliyunConfig, ArizeConfig, DatabricksConfig, LangFuseConfig, LangSmithConfig, MLflowConfig, OpikConfig, PhoenixConfig, TencentConfig, WeaveConfig } from './type'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
@@ -12,17 +23,6 @@ import {
   PortalToFollowElem,
   PortalToFollowElemContent,
 } from '@/app/components/base/portal-to-follow-elem'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { addTracingConfig, removeTracingConfig, updateTracingConfig } from '@/service/apps'
 import { docURL } from './config'
 import Field from './field'
diff --git a/web/app/(humanInputLayout)/form/[token]/form.tsx b/web/app/(humanInputLayout)/form/[token]/form.tsx
index be30585101..76dcd24293 100644
--- a/web/app/(humanInputLayout)/form/[token]/form.tsx
+++ b/web/app/(humanInputLayout)/form/[token]/form.tsx
@@ -1,8 +1,9 @@
 'use client'
-import type { ButtonProps } from '@/app/components/base/ui/button'
+import type { ButtonProps } from '@langgenius/dify-ui/button'
 import type { FormInputItem, UserAction } from '@/app/components/workflow/nodes/human-input/types'
 import type { SiteInfo } from '@/models/share'
 import type { HumanInputFormError } from '@/service/use-share'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCheckboxCircleFill,
@@ -19,7 +20,6 @@ import ExpirationTime from '@/app/components/base/chat/chat/answer/human-input-c
 import { getButtonStyle } from '@/app/components/base/chat/chat/answer/human-input-content/utils'
 import Loading from '@/app/components/base/loading'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
-import { Button } from '@/app/components/base/ui/button'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { useParams } from '@/next/navigation'
 import { useGetHumanInputForm, useSubmitHumanInputForm } from '@/service/use-share'
diff --git a/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx b/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
index d19e5a7d2d..d5b3237b12 100644
--- a/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
@@ -1,10 +1,10 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
 
diff --git a/web/app/(shareLayout)/webapp-reset-password/page.tsx b/web/app/(shareLayout)/webapp-reset-password/page.tsx
index cb6ece219c..2174ac0e8e 100644
--- a/web/app/(shareLayout)/webapp-reset-password/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/page.tsx
@@ -1,11 +1,11 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiArrowLeftLine, RiLockPasswordLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
diff --git a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
index df102e609a..9a290f8789 100644
--- a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
@@ -1,12 +1,12 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCheckboxCircleFill } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { validPassword } from '@/config'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { changeWebAppPasswordWithToken } from '@/service/common'
diff --git a/web/app/(shareLayout)/webapp-signin/check-code/page.tsx b/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
index b17fff4e52..c8d3351ded 100644
--- a/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
+++ b/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FormEvent } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
 import { useWebAppStore } from '@/context/web-app-context'
diff --git a/web/app/(shareLayout)/webapp-signin/components/external-member-sso-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/external-member-sso-auth.tsx
index 9b4a369908..fe6b157c1e 100644
--- a/web/app/(shareLayout)/webapp-signin/components/external-member-sso-auth.tsx
+++ b/web/app/(shareLayout)/webapp-signin/components/external-member-sso-auth.tsx
@@ -1,9 +1,9 @@
 'use client'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback, useEffect } from 'react'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import Loading from '@/app/components/base/loading'
-import { toast } from '@/app/components/base/ui/toast'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { fetchWebOAuth2SSOUrl, fetchWebOIDCSSOUrl, fetchWebSAMLSSOUrl } from '@/service/share'
diff --git a/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx
index f600dba8b2..2d2fde1808 100644
--- a/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx
+++ b/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx
@@ -1,9 +1,9 @@
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
diff --git a/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx
index 7fe5363927..79607a77df 100644
--- a/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx
+++ b/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx
@@ -1,10 +1,10 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { noop } from 'es-toolkit/function'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
 import { useWebAppStore } from '@/context/web-app-context'
diff --git a/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx
index d8759cc1d6..53ff80ced5 100644
--- a/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx
+++ b/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { fetchMembersOAuth2SSOUrl, fetchMembersOIDCSSOUrl, fetchMembersSAMLSSOUrl } from '@/service/share'
 import { SSOProtocol } from '@/types/feature'
diff --git a/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx b/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
index 05048008b4..429eece383 100644
--- a/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
+++ b/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
@@ -1,9 +1,13 @@
 'use client'
 
+import type { AvatarProps } from '@langgenius/dify-ui/avatar'
 import type { Area } from 'react-easy-crop'
 import type { OnImageInput } from '@/app/components/base/app-icon-picker/ImageInput'
-import type { AvatarProps } from '@/app/components/base/ui/avatar'
 import type { ImageFile } from '@/types/app'
+import { Avatar } from '@langgenius/dify-ui/avatar'
+import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiDeleteBin5Line, RiPencilLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
@@ -12,10 +16,6 @@ import ImageInput from '@/app/components/base/app-icon-picker/ImageInput'
 import getCroppedImg from '@/app/components/base/app-icon-picker/utils'
 import Divider from '@/app/components/base/divider'
 import { useLocalFileUploader } from '@/app/components/base/image-uploader/hooks'
-import { Avatar } from '@/app/components/base/ui/avatar'
-import { Button } from '@/app/components/base/ui/button'
-import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
-import { toast } from '@/app/components/base/ui/toast'
 import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
 import { updateUserProfile } from '@/service/common'
 
diff --git a/web/app/account/(commonLayout)/account-page/email-change-modal.tsx b/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
index 1b91c801bd..f3bb71c2d2 100644
--- a/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
+++ b/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
@@ -1,12 +1,12 @@
 import type { ResponseError } from '@/service/fetch'
+import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
-import { toast } from '@/app/components/base/ui/toast'
 import { useRouter } from '@/next/navigation'
 import {
   checkEmailExisted,
diff --git a/web/app/account/(commonLayout)/account-page/index.tsx b/web/app/account/(commonLayout)/account-page/index.tsx
index 8ad1b45467..a26fa942db 100644
--- a/web/app/account/(commonLayout)/account-page/index.tsx
+++ b/web/app/account/(commonLayout)/account-page/index.tsx
@@ -1,6 +1,9 @@
 'use client'
 import type { IItem } from '@/app/components/header/account-setting/collapse'
 import type { App } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiGraduationCapFill,
 } from '@remixicon/react'
@@ -10,9 +13,6 @@ import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import Input from '@/app/components/base/input'
 import PremiumBadge from '@/app/components/base/premium-badge'
-import { Button } from '@/app/components/base/ui/button'
-import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
-import { toast } from '@/app/components/base/ui/toast'
 import Collapse from '@/app/components/header/account-setting/collapse'
 import { IS_CE_EDITION, validPassword } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
diff --git a/web/app/account/(commonLayout)/avatar.tsx b/web/app/account/(commonLayout)/avatar.tsx
index 538e09b0fd..0893b130c4 100644
--- a/web/app/account/(commonLayout)/avatar.tsx
+++ b/web/app/account/(commonLayout)/avatar.tsx
@@ -1,5 +1,6 @@
 'use client'
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
+import { Avatar } from '@langgenius/dify-ui/avatar'
 import {
   RiGraduationCapFill,
 } from '@remixicon/react'
@@ -8,7 +9,6 @@ import { useTranslation } from 'react-i18next'
 import { resetUser } from '@/app/components/base/amplitude/utils'
 import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
 import PremiumBadge from '@/app/components/base/premium-badge'
-import { Avatar } from '@/app/components/base/ui/avatar'
 import { useProviderContext } from '@/context/provider-context'
 import { useRouter } from '@/next/navigation'
 import { useLogout, useUserProfile } from '@/service/use-common'
diff --git a/web/app/account/(commonLayout)/delete-account/components/check-email.tsx b/web/app/account/(commonLayout)/delete-account/components/check-email.tsx
index 3c7b7112f3..7e3351a10a 100644
--- a/web/app/account/(commonLayout)/delete-account/components/check-email.tsx
+++ b/web/app/account/(commonLayout)/delete-account/components/check-email.tsx
@@ -1,8 +1,8 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
 import { useAppContext } from '@/context/app-context'
 import Link from '@/next/link'
 import { useSendDeleteAccountEmail } from '../state'
diff --git a/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx b/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
index 9690bf8ed1..ee1e72e6e7 100644
--- a/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
+++ b/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
@@ -1,10 +1,10 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import CustomDialog from '@/app/components/base/dialog'
 import Textarea from '@/app/components/base/textarea'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { useRouter } from '@/next/navigation'
 import { useLogout } from '@/service/use-common'
diff --git a/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx b/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx
index 01e19e51b1..91c0d7737d 100644
--- a/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx
+++ b/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx
@@ -1,8 +1,8 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
 import Countdown from '@/app/components/signin/countdown'
 import Link from '@/next/link'
 import { useAccountDeleteStore, useConfirmDeleteAccount, useSendDeleteAccountEmail } from '../state'
diff --git a/web/app/account/(commonLayout)/header.tsx b/web/app/account/(commonLayout)/header.tsx
index 688a1d7729..f0912d45d5 100644
--- a/web/app/account/(commonLayout)/header.tsx
+++ b/web/app/account/(commonLayout)/header.tsx
@@ -1,9 +1,9 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiArrowRightUpLine, RiRobot2Line } from '@remixicon/react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
-import { Button } from '@/app/components/base/ui/button'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useRouter } from '@/next/navigation'
 import Avatar from './avatar'
diff --git a/web/app/account/oauth/authorize/page.tsx b/web/app/account/oauth/authorize/page.tsx
index f370efcd3e..cd035ce16f 100644
--- a/web/app/account/oauth/authorize/page.tsx
+++ b/web/app/account/oauth/authorize/page.tsx
@@ -1,5 +1,8 @@
 'use client'
 
+import { Avatar } from '@langgenius/dify-ui/avatar'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiAccountCircleLine,
   RiGlobalLine,
@@ -11,9 +14,6 @@ import * as React from 'react'
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
-import { Avatar } from '@/app/components/base/ui/avatar'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { setPostLoginRedirect } from '@/app/signin/utils/post-login-redirect'
 import { useRouter, useSearchParams } from '@/next/navigation'
diff --git a/web/app/activate/activateForm.tsx b/web/app/activate/activateForm.tsx
index 9b0a5f5b21..5fafa8eca1 100644
--- a/web/app/activate/activateForm.tsx
+++ b/web/app/activate/activateForm.tsx
@@ -1,9 +1,9 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
-import { Button } from '@/app/components/base/ui/button'
 
 import useDocumentTitle from '@/hooks/use-document-title'
 import { useRouter, useSearchParams } from '@/next/navigation'
diff --git a/web/app/components/app-sidebar/__tests__/app-sidebar-dropdown.spec.tsx b/web/app/components/app-sidebar/__tests__/app-sidebar-dropdown.spec.tsx
index 5e18bbc343..5557118c78 100644
--- a/web/app/components/app-sidebar/__tests__/app-sidebar-dropdown.spec.tsx
+++ b/web/app/components/app-sidebar/__tests__/app-sidebar-dropdown.spec.tsx
@@ -19,7 +19,7 @@ vi.mock('@/context/app-context', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/dropdown-menu', () => {
+vi.mock('@langgenius/dify-ui/dropdown-menu', () => {
   const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
 
   const useDropdownMenuContext = () => {
diff --git a/web/app/components/app-sidebar/__tests__/dataset-sidebar-dropdown.spec.tsx b/web/app/components/app-sidebar/__tests__/dataset-sidebar-dropdown.spec.tsx
index 5060987cda..5c45df470a 100644
--- a/web/app/components/app-sidebar/__tests__/dataset-sidebar-dropdown.spec.tsx
+++ b/web/app/components/app-sidebar/__tests__/dataset-sidebar-dropdown.spec.tsx
@@ -21,7 +21,7 @@ vi.mock('@/hooks/use-knowledge', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/dropdown-menu', () => {
+vi.mock('@langgenius/dify-ui/dropdown-menu', () => {
   const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
 
   const useDropdownMenuContext = () => {
diff --git a/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx b/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx
index 2171974253..9af90359f0 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx
+++ b/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx
@@ -35,7 +35,7 @@ vi.mock('@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view',
   ),
 }))
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({ children, onClick, className, size, variant }: {
     children: React.ReactNode
     onClick?: () => void
diff --git a/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx b/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx
index 461cedc20c..ff6aed2c71 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx
+++ b/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import AppOperations from '../app-operations'
 
-vi.mock('../../../base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({ children, onClick, className, size, variant, id, tabIndex, ...rest }: {
     'children': React.ReactNode
     'onClick'?: () => void
@@ -30,7 +30,7 @@ vi.mock('../../../base/ui/button', () => ({
   ),
 }))
 
-vi.mock('../../../base/ui/dropdown-menu', () => {
+vi.mock('@langgenius/dify-ui/dropdown-menu', () => {
   const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
 
   const useDropdownMenuContext = () => {
diff --git a/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts b/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts
index 5b10b4c32b..23e5e51949 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts
+++ b/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts
@@ -50,7 +50,7 @@ vi.mock('@/app/components/app/store', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(toastMocks.api, {
     success: vi.fn((message, options) => toastMocks.call({ type: 'success', message, ...options })),
     error: vi.fn((message, options) => toastMocks.call({ type: 'error', message, ...options })),
diff --git a/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx b/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
index 624630b179..9afa0063dc 100644
--- a/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
@@ -1,6 +1,7 @@
 import type { Operation } from './app-operations'
 import type { AppInfoModalType } from './use-app-info-actions'
 import type { App, AppSSO } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiDeleteBinLine,
   RiEditLine,
@@ -14,7 +15,6 @@ import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view'
 import ContentDialog from '@/app/components/base/content-dialog'
-import { Button } from '@/app/components/base/ui/button'
 import { AppModeEnum } from '@/types/app'
 import AppIcon from '../../base/app-icon'
 import { getAppModeLabel } from './app-mode-labels'
diff --git a/web/app/components/app-sidebar/app-info/app-info-modals.tsx b/web/app/components/app-sidebar/app-info/app-info-modals.tsx
index fa84ecc0b6..7d142e0cc6 100644
--- a/web/app/components/app-sidebar/app-info/app-info-modals.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-modals.tsx
@@ -3,10 +3,6 @@ import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-moda
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import type { App, AppSSO } from '@/types/app'
-import * as React from 'react'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Input from '@/app/components/base/input'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -15,7 +11,11 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
+} from '@langgenius/dify-ui/alert-dialog'
+import * as React from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '@/app/components/base/input'
 import dynamic from '@/next/dynamic'
 
 const SwitchAppModal = dynamic(() => import('@/app/components/app/switch-app-modal'), { ssr: false })
diff --git a/web/app/components/app-sidebar/app-info/app-operations.tsx b/web/app/components/app-sidebar/app-info/app-operations.tsx
index 095fb31206..cc6afd739c 100644
--- a/web/app/components/app-sidebar/app-info/app-operations.tsx
+++ b/web/app/components/app-sidebar/app-info/app-operations.tsx
@@ -1,15 +1,15 @@
 import type { JSX } from 'react'
-import { RiMoreLine } from '@remixicon/react'
-import { cloneElement, useEffect, useMemo, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '../../base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import { RiMoreLine } from '@remixicon/react'
+import { cloneElement, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
 export type Operation = {
   id: string
diff --git a/web/app/components/app-sidebar/app-info/use-app-info-actions.ts b/web/app/components/app-sidebar/app-info/use-app-info-actions.ts
index 3192d48f81..5ca0e85c18 100644
--- a/web/app/components/app-sidebar/app-info/use-app-info-actions.ts
+++ b/web/app/components/app-sidebar/app-info/use-app-info-actions.ts
@@ -1,10 +1,10 @@
 import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { toast } from '@/app/components/base/ui/toast'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useProviderContext } from '@/context/provider-context'
 import { useRouter } from '@/next/navigation'
diff --git a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
index 617d14f426..0b5f13d918 100644
--- a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
+++ b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
@@ -1,5 +1,10 @@
 import type { NavIcon } from './nav-link'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import {
   RiEqualizer2Line,
   RiMenuLine,
@@ -8,11 +13,6 @@ import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
 import { useAppContext } from '@/context/app-context'
 import AppIcon from '../base/app-icon'
 import Divider from '../base/divider'
diff --git a/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx b/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx
index b514b6e095..ceb8302ee6 100644
--- a/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx
+++ b/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx
@@ -112,7 +112,7 @@ vi.mock('@/service/datasets', () => ({
   deleteDataset: (...args: unknown[]) => mockDeleteDataset(...args),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: (...args: unknown[]) => mockToast(...args),
 }))
 
diff --git a/web/app/components/app-sidebar/dataset-info/dropdown.tsx b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
index e69b3d7e32..8f3a25738a 100644
--- a/web/app/components/app-sidebar/dataset-info/dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
@@ -1,9 +1,23 @@
 import type { DataSet } from '@/models/datasets'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useRouter } from '@/next/navigation'
@@ -13,20 +27,6 @@ import { useInvalid } from '@/service/use-base'
 import { useExportPipelineDSL } from '@/service/use-pipeline'
 import { downloadBlob } from '@/utils/download'
 import ActionButton from '../../base/action-button'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle,
-} from '../../base/ui/alert-dialog'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from '../../base/ui/dropdown-menu'
 import RenameDatasetModal from '../../datasets/rename-modal'
 import Menu from './menu'
 
diff --git a/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx b/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
index 3968a0df6f..805636fb55 100644
--- a/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
@@ -1,17 +1,17 @@
 import type { NavIcon } from './nav-link'
 import type { DataSet } from '@/models/datasets'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import {
   RiMenuLine,
 } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useKnowledge } from '@/hooks/use-knowledge'
 import { DOC_FORM_TEXT } from '@/models/datasets'
diff --git a/web/app/components/app-sidebar/toggle-button.tsx b/web/app/components/app-sidebar/toggle-button.tsx
index 5800ff2263..6aca77fb4f 100644
--- a/web/app/components/app-sidebar/toggle-button.tsx
+++ b/web/app/components/app-sidebar/toggle-button.tsx
@@ -1,8 +1,8 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import Tooltip from '../base/tooltip'
 import ShortcutsName from '../workflow/shortcuts-name'
 
diff --git a/web/app/components/app/annotation/__tests__/index.spec.tsx b/web/app/components/app/annotation/__tests__/index.spec.tsx
index cd9b127c7f..2bd94d03b0 100644
--- a/web/app/components/app/annotation/__tests__/index.spec.tsx
+++ b/web/app/components/app/annotation/__tests__/index.spec.tsx
@@ -2,9 +2,9 @@
 import type { Mock } from 'vitest'
 import type { AnnotationItem } from '../type'
 import type { App } from '@/types/app'
+import { toast } from '@langgenius/dify-ui/toast'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import { toast } from '@/app/components/base/ui/toast'
 import { useProviderContext } from '@/context/provider-context'
 import {
   addAnnotation,
diff --git a/web/app/components/app/annotation/add-annotation-modal/__tests__/index.spec.tsx b/web/app/components/app/annotation/add-annotation-modal/__tests__/index.spec.tsx
index d7e46f9f92..497c623f3e 100644
--- a/web/app/components/app/annotation/add-annotation-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/annotation/add-annotation-modal/__tests__/index.spec.tsx
@@ -9,7 +9,7 @@ vi.mock('@/context/provider-context', () => ({
 }))
 
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: vi.fn(args => mockToastNotify(args)),
   },
diff --git a/web/app/components/app/annotation/add-annotation-modal/index.tsx b/web/app/components/app/annotation/add-annotation-modal/index.tsx
index dbdf909c0a..ba987a8a8a 100644
--- a/web/app/components/app/annotation/add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/add-annotation-modal/index.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { FC } from 'react'
 import type { AnnotationItemBasic } from '../type'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
 import Drawer from '@/app/components/base/drawer-plus'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import AnnotationFull from '@/app/components/billing/annotation-full'
 import { useProviderContext } from '@/context/provider-context'
 import EditItem, { EditItemType } from './edit-item'
diff --git a/web/app/components/app/annotation/batch-action.tsx b/web/app/components/app/annotation/batch-action.tsx
index da7d0c70dd..938dcb03bd 100644
--- a/web/app/components/app/annotation/batch-action.tsx
+++ b/web/app/components/app/annotation/batch-action.tsx
@@ -1,10 +1,4 @@
 import type { FC } from 'react'
-import { cn } from '@langgenius/dify-ui/cn'
-import { RiDeleteBinLine } from '@remixicon/react'
-import { useBoolean } from 'ahooks'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-import Divider from '@/app/components/base/divider'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -12,7 +6,13 @@ import {
   AlertDialogConfirmButton,
   AlertDialogContent,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
+} from '@langgenius/dify-ui/alert-dialog'
+import { cn } from '@langgenius/dify-ui/cn'
+import { RiDeleteBinLine } from '@remixicon/react'
+import { useBoolean } from 'ahooks'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import Divider from '@/app/components/base/divider'
 
 const i18nPrefix = 'batchAction'
 
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/__tests__/csv-uploader.spec.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/__tests__/csv-uploader.spec.tsx
index d26ab051ef..5fc1cd25e1 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/__tests__/csv-uploader.spec.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/__tests__/csv-uploader.spec.tsx
@@ -10,7 +10,7 @@ const toastMocks = vi.hoisted(() => ({
   promise: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: (message: string, options?: Record<string, unknown>) => toastMocks.notify({ type: 'success', message, ...options }),
     error: (message: string, options?: Record<string, unknown>) => toastMocks.notify({ type: 'error', message, ...options }),
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/__tests__/index.spec.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/__tests__/index.spec.tsx
index 3176b1addb..c5d7232e12 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/__tests__/index.spec.tsx
@@ -43,7 +43,7 @@ vi.mock('@/app/components/billing/annotation-full', () => ({
 }))
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: (args: unknown) => mockNotify(args),
   },
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
index 02dcf27aea..dc63b5c9be 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiDeleteBinLine } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 
 export type Props = {
   file: File | undefined
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
index 20a35714e8..550794cce7 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import AnnotationFull from '@/app/components/billing/annotation-full'
 import { useProviderContext } from '@/context/provider-context'
 import { annotationBatchImport, checkAnnotationBatchImportProgress } from '@/service/annotation'
diff --git a/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.tsx b/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.tsx
index b960e1d59c..6b0ef19e7b 100644
--- a/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.tsx
+++ b/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.tsx
@@ -1,8 +1,6 @@
 'use client'
 
 import type { FC } from 'react'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -10,7 +8,9 @@ import {
   AlertDialogConfirmButton,
   AlertDialogContent,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
+} from '@langgenius/dify-ui/alert-dialog'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 
 type Props = {
   isShow: boolean
diff --git a/web/app/components/app/annotation/edit-annotation-modal/__tests__/index.spec.tsx b/web/app/components/app/annotation/edit-annotation-modal/__tests__/index.spec.tsx
index 4844017dde..733529dff8 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/__tests__/index.spec.tsx
@@ -1,6 +1,6 @@
+import { toast } from '@langgenius/dify-ui/toast'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { toast } from '@/app/components/base/ui/toast'
 import EditAnnotationModal from '../index'
 
 const { mockAddAnnotation, mockEditAnnotation } = vi.hoisted(() => ({
diff --git a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
index 4a62569816..609d7847bc 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine, RiEditFill, RiEditLine } from '@remixicon/react'
 import * as React from 'react'
@@ -7,7 +8,6 @@ import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Robot, User } from '@/app/components/base/icons/src/public/avatar'
 import Textarea from '@/app/components/base/textarea'
-import { Button } from '@/app/components/base/ui/button'
 
 export enum EditItemType {
   Query = 'query',
diff --git a/web/app/components/app/annotation/edit-annotation-modal/index.tsx b/web/app/components/app/annotation/edit-annotation-modal/index.tsx
index c3d5b140eb..8e690eca9b 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/index.tsx
@@ -1,10 +1,5 @@
 'use client'
 import type { FC } from 'react'
-import * as React from 'react'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Drawer from '@/app/components/base/drawer-plus'
-import { MessageCheckRemove } from '@/app/components/base/icons/src/vender/line/communication'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -12,8 +7,13 @@ import {
   AlertDialogConfirmButton,
   AlertDialogContent,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/alert-dialog'
+import { toast } from '@langgenius/dify-ui/toast'
+import * as React from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Drawer from '@/app/components/base/drawer-plus'
+import { MessageCheckRemove } from '@/app/components/base/icons/src/vender/line/communication'
 import AnnotationFull from '@/app/components/billing/annotation-full'
 import { useProviderContext } from '@/context/provider-context'
 import useTimestamp from '@/hooks/use-timestamp'
diff --git a/web/app/components/app/annotation/header-opts/index.tsx b/web/app/components/app/annotation/header-opts/index.tsx
index 0871a722f8..fc27524c71 100644
--- a/web/app/components/app/annotation/header-opts/index.tsx
+++ b/web/app/components/app/annotation/header-opts/index.tsx
@@ -2,19 +2,19 @@
 import type { FC } from 'react'
 import type { AnnotationItemBasic } from '../type'
 import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import * as React from 'react'
 import { Fragment, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   useCSVDownloader,
 } from 'react-papaparse'
-import { Button } from '@/app/components/base/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
 import { useLocale } from '@/context/i18n'
 
 import { LanguagesSupported } from '@/i18n-config/language'
diff --git a/web/app/components/app/annotation/index.tsx b/web/app/components/app/annotation/index.tsx
index 419aaba25d..cbad5b40ea 100644
--- a/web/app/components/app/annotation/index.tsx
+++ b/web/app/components/app/annotation/index.tsx
@@ -5,6 +5,8 @@ import type { AnnotationItem, AnnotationItemBasic } from './type'
 import type { AnnotationReplyConfig } from '@/models/debug'
 import type { App } from '@/types/app'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { useDebounce } from 'ahooks'
 import * as React from 'react'
@@ -15,8 +17,6 @@ import ConfigParamModal from '@/app/components/base/features/new-feature-panel/a
 import { MessageFast } from '@/app/components/base/icons/src/vender/solid/communication'
 import Loading from '@/app/components/base/loading'
 import Pagination from '@/app/components/base/pagination'
-import Switch from '@/app/components/base/switch'
-import { toast } from '@/app/components/base/ui/toast'
 import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
 import { APP_PAGE_LIMIT } from '@/config'
 import { useProviderContext } from '@/context/provider-context'
diff --git a/web/app/components/app/annotation/remove-annotation-confirm-modal/index.tsx b/web/app/components/app/annotation/remove-annotation-confirm-modal/index.tsx
index 70e28b048c..864e098ca5 100644
--- a/web/app/components/app/annotation/remove-annotation-confirm-modal/index.tsx
+++ b/web/app/components/app/annotation/remove-annotation-confirm-modal/index.tsx
@@ -1,7 +1,5 @@
 'use client'
 import type { FC } from 'react'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -9,7 +7,9 @@ import {
   AlertDialogConfirmButton,
   AlertDialogContent,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
+} from '@langgenius/dify-ui/alert-dialog'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 
 type Props = {
   isShow: boolean
diff --git a/web/app/components/app/annotation/view-annotation-modal/index.tsx b/web/app/components/app/annotation/view-annotation-modal/index.tsx
index 8a5b53aa87..c9f7e8a78f 100644
--- a/web/app/components/app/annotation/view-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/view-annotation-modal/index.tsx
@@ -1,6 +1,14 @@
 'use client'
 import type { FC } from 'react'
 import type { AnnotationItem, HitHistoryItem } from '../type'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
@@ -10,14 +18,6 @@ import Drawer from '@/app/components/base/drawer-plus'
 import { MessageCheckRemove } from '@/app/components/base/icons/src/vender/line/communication'
 import Pagination from '@/app/components/base/pagination'
 import TabSlider from '@/app/components/base/tab-slider-plain'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
 import { APP_PAGE_LIMIT } from '@/config'
 import useTimestamp from '@/hooks/use-timestamp'
 import { fetchHitHistoryList } from '@/service/annotation'
diff --git a/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx b/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx
index 86ed6ac435..bbac21942e 100644
--- a/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx
+++ b/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable ts/no-explicit-any */
 import type { AccessControlAccount, AccessControlGroup, Subject } from '@/models/access-control'
 import type { App } from '@/types/app'
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { toast } from '@/app/components/base/ui/toast'
 import useAccessControlStore from '@/context/access-control-store'
 import { AccessMode, SubjectType } from '@/models/access-control'
 import AccessControlDialog from '../access-control-dialog'
diff --git a/web/app/components/app/app-access-control/__tests__/index.spec.tsx b/web/app/components/app/app-access-control/__tests__/index.spec.tsx
index 612d17d88a..05b86f0290 100644
--- a/web/app/components/app/app-access-control/__tests__/index.spec.tsx
+++ b/web/app/components/app/app-access-control/__tests__/index.spec.tsx
@@ -1,6 +1,6 @@
 import type { App } from '@/types/app'
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { toast } from '@/app/components/base/ui/toast'
 import useAccessControlStore from '@/context/access-control-store'
 import { AccessMode } from '@/models/access-control'
 import AccessControl from '../index'
diff --git a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
index 8c8087cf17..38f9c2ab50 100644
--- a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
+++ b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
@@ -1,14 +1,14 @@
 'use client'
 import type { AccessControlAccount, AccessControlGroup, Subject, SubjectAccount, SubjectGroup } from '@/models/access-control'
 import { FloatingOverlay } from '@floating-ui/react'
+import { Avatar } from '@langgenius/dify-ui/avatar'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { RiAddCircleFill, RiArrowRightSLine, RiOrganizationChart } from '@remixicon/react'
 import { useDebounce } from 'ahooks'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Avatar } from '@/app/components/base/ui/avatar'
-import { Button } from '@/app/components/base/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/app/components/base/ui/popover'
 import { useSelector } from '@/context/app-context'
 import { SubjectType } from '@/models/access-control'
 import { useSearchForWhiteListCandidates } from '@/service/access-control'
diff --git a/web/app/components/app/app-access-control/index.tsx b/web/app/components/app/app-access-control/index.tsx
index aeaae3d46d..2997d4b4cf 100644
--- a/web/app/components/app/app-access-control/index.tsx
+++ b/web/app/components/app/app-access-control/index.tsx
@@ -2,11 +2,11 @@
 import type { Subject } from '@/models/access-control'
 import type { App } from '@/types/app'
 import { Description as DialogDescription, DialogTitle } from '@headlessui/react'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiBuildingLine, RiGlobalLine, RiVerifiedBadgeLine } from '@remixicon/react'
 import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { AccessMode, SubjectType } from '@/models/access-control'
 import { useUpdateAccessMode } from '@/service/access-control'
diff --git a/web/app/components/app/app-access-control/specific-groups-or-members.tsx b/web/app/components/app/app-access-control/specific-groups-or-members.tsx
index 5b5c8342fc..1caabb3ff9 100644
--- a/web/app/components/app/app-access-control/specific-groups-or-members.tsx
+++ b/web/app/components/app/app-access-control/specific-groups-or-members.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { AccessControlAccount, AccessControlGroup } from '@/models/access-control'
+import { Avatar } from '@langgenius/dify-ui/avatar'
 import { RiAlertFill, RiCloseCircleFill, RiLockLine, RiOrganizationChart } from '@remixicon/react'
 import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Avatar } from '@/app/components/base/ui/avatar'
 import { AccessMode } from '@/models/access-control'
 import { useAppWhiteListSubjects } from '@/service/access-control'
 import useAccessControlStore from '../../../../context/access-control-store'
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 bba2f53afc..06d91e9400 100644
--- a/web/app/components/app/app-publisher/__tests__/index.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/index.spec.tsx
@@ -93,7 +93,7 @@ vi.mock('@/service/use-workflow', () => ({
   useInvalidateAppWorkflow: () => mockInvalidateAppWorkflow,
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (...args: unknown[]) => mockToastError(...args),
   },
diff --git a/web/app/components/app/app-publisher/__tests__/publish-with-multiple-model.spec.tsx b/web/app/components/app/app-publisher/__tests__/publish-with-multiple-model.spec.tsx
index 465252c6c4..16628d742a 100644
--- a/web/app/components/app/app-publisher/__tests__/publish-with-multiple-model.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/publish-with-multiple-model.spec.tsx
@@ -22,7 +22,7 @@ vi.mock('../../header/account-setting/model-provider-page/model-icon', () => ({
   default: ({ modelName }: { modelName: string }) => <span data-testid="model-icon">{modelName}</span>,
 }))
 
-vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+vi.mock('@langgenius/dify-ui/dropdown-menu', async () => {
   const ReactModule = await vi.importActual<typeof import('react')>('react')
   const OpenContext = ReactModule.createContext<{ open: boolean, setOpen: (nextOpen: boolean) => void } | null>(null)
 
diff --git a/web/app/components/app/app-publisher/__tests__/version-info-modal.spec.tsx b/web/app/components/app/app-publisher/__tests__/version-info-modal.spec.tsx
index ed86bb8571..4a461bd942 100644
--- a/web/app/components/app/app-publisher/__tests__/version-info-modal.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/version-info-modal.spec.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable ts/no-explicit-any */
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { toast } from '@/app/components/base/ui/toast'
 import VersionInfoModal from '../version-info-modal'
 
 vi.mock('react-i18next', () => ({
@@ -9,7 +9,7 @@ vi.mock('react-i18next', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: vi.fn(),
   },
diff --git a/web/app/components/app/app-publisher/features-wrapper.tsx b/web/app/components/app/app-publisher/features-wrapper.tsx
index 7c39535701..8679b2830d 100644
--- a/web/app/components/app/app-publisher/features-wrapper.tsx
+++ b/web/app/components/app/app-publisher/features-wrapper.tsx
@@ -2,13 +2,6 @@ import type { AppPublisherProps } from '@/app/components/app/app-publisher'
 import type { ModelAndParameter } from '@/app/components/app/configuration/debug/types'
 import type { FileUpload } from '@/app/components/base/features/types'
 import type { PublishWorkflowParams } from '@/types/workflow'
-import { produce } from 'immer'
-import * as React from 'react'
-import { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import AppPublisher from '@/app/components/app/app-publisher'
-import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
-import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -17,7 +10,14 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
+} from '@langgenius/dify-ui/alert-dialog'
+import { produce } from 'immer'
+import * as React from 'react'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import AppPublisher from '@/app/components/app/app-publisher'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
+import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { Resolution } from '@/types/app'
 
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index ce3698dbb7..562f2d7759 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -2,6 +2,9 @@ import type { ModelAndParameter } from '../configuration/debug/types'
 import type { CollaborationUpdate } from '@/app/components/workflow/collaboration/types/collaboration'
 import type { InputVar, Variable } from '@/app/components/workflow/types'
 import type { PublishWorkflowParams } from '@/types/workflow'
+import { Button } from '@langgenius/dify-ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useKeyPress } from 'ahooks'
 import {
   memo,
@@ -15,8 +18,6 @@ import { useTranslation } from 'react-i18next'
 import EmbeddedModal from '@/app/components/app/overview/embedded'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { trackEvent } from '@/app/components/base/amplitude'
-import { Button } from '@/app/components/base/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/app/components/base/ui/popover'
 import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
 import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
 import { WorkflowContext } from '@/app/components/workflow/context'
@@ -31,7 +32,6 @@ import { useInvalidateAppWorkflow } from '@/service/use-workflow'
 import { fetchPublishedWorkflow } from '@/service/workflow'
 import { AppModeEnum } from '@/types/app'
 import { basePath } from '@/utils/var'
-import { toast } from '../../base/ui/toast'
 import { getKeyboardKeyCodeBySystem } from '../../workflow/utils'
 import AccessControl from '../app-access-control'
 import {
diff --git a/web/app/components/app/app-publisher/publish-with-multiple-model.tsx b/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
index fbff371577..038b9328bb 100644
--- a/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
+++ b/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
@@ -1,16 +1,16 @@
 import type { FC } from 'react'
 import type { ModelAndParameter } from '../configuration/debug/types'
 import type { Model, ModelItem } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import { RiArrowDownSLine } from '@remixicon/react'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import { RiArrowDownSLine } from '@remixicon/react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { useProviderContext } from '@/context/provider-context'
 import ModelIcon from '../../header/account-setting/model-provider-page/model-icon'
diff --git a/web/app/components/app/app-publisher/sections.tsx b/web/app/components/app/app-publisher/sections.tsx
index d4864a3763..57522095ae 100644
--- a/web/app/components/app/app-publisher/sections.tsx
+++ b/web/app/components/app/app-publisher/sections.tsx
@@ -2,16 +2,16 @@ import type { CSSProperties, ReactNode } from 'react'
 import type { ModelAndParameter } from '../configuration/debug/types'
 import type { AppPublisherProps } from './index'
 import type { PublishWorkflowParams } from '@/types/workflow'
-import { useTranslation } from 'react-i18next'
-import Divider from '@/app/components/base/divider'
-import { CodeBrowser } from '@/app/components/base/icons/src/vender/line/development'
-import Loading from '@/app/components/base/loading'
-import { Button } from '@/app/components/base/ui/button'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from '@/app/components/base/ui/tooltip'
+} from '@langgenius/dify-ui/tooltip'
+import { useTranslation } from 'react-i18next'
+import Divider from '@/app/components/base/divider'
+import { CodeBrowser } from '@/app/components/base/icons/src/vender/line/development'
+import Loading from '@/app/components/base/loading'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import WorkflowToolConfigureButton from '@/app/components/tools/workflow-tool/configure-button'
 import { appDefaultIconBackground } from '@/config'
diff --git a/web/app/components/app/app-publisher/version-info-modal.tsx b/web/app/components/app/app-publisher/version-info-modal.tsx
index d5f4c9c189..3fe4c61fb7 100644
--- a/web/app/components/app/app-publisher/version-info-modal.tsx
+++ b/web/app/components/app/app-publisher/version-info-modal.tsx
@@ -1,12 +1,12 @@
 import type { FC } from 'react'
 import type { VersionHistory } from '@/types/workflow'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import Input from '../../base/input'
 import Textarea from '../../base/textarea'
 
diff --git a/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx b/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx
index 029743dfb6..51b365f446 100644
--- a/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx
+++ b/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import WarningMask from '.'
 
 type IFormattingChangedProps = {
diff --git a/web/app/components/app/configuration/base/warning-mask/formatting-changed.tsx b/web/app/components/app/configuration/base/warning-mask/formatting-changed.tsx
index 4b25b023b2..07467a5ab1 100644
--- a/web/app/components/app/configuration/base/warning-mask/formatting-changed.tsx
+++ b/web/app/components/app/configuration/base/warning-mask/formatting-changed.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import WarningMask from '.'
 
 type IFormattingChangedProps = {
diff --git a/web/app/components/app/configuration/config-prompt/__tests__/advanced-prompt-input.spec.tsx b/web/app/components/app/configuration/config-prompt/__tests__/advanced-prompt-input.spec.tsx
index f7cfff94fb..ced1ddcfe3 100644
--- a/web/app/components/app/configuration/config-prompt/__tests__/advanced-prompt-input.spec.tsx
+++ b/web/app/components/app/configuration/config-prompt/__tests__/advanced-prompt-input.spec.tsx
@@ -59,7 +59,7 @@ vi.mock('@/context/modal-context', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (...args: unknown[]) => mockToastError(...args),
   },
diff --git a/web/app/components/app/configuration/config-prompt/__tests__/simple-prompt-input.spec.tsx b/web/app/components/app/configuration/config-prompt/__tests__/simple-prompt-input.spec.tsx
index 0f8b9b032f..b4e6e0be2f 100644
--- a/web/app/components/app/configuration/config-prompt/__tests__/simple-prompt-input.spec.tsx
+++ b/web/app/components/app/configuration/config-prompt/__tests__/simple-prompt-input.spec.tsx
@@ -57,7 +57,7 @@ vi.mock('@/context/modal-context', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (...args: unknown[]) => mockToastError(...args),
   },
diff --git a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
index 1de6e6ce0c..5fd394ad45 100644
--- a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
@@ -2,7 +2,14 @@
 import type { FC } from 'react'
 import type { ExternalDataTool } from '@/models/common'
 import type { PromptRole, PromptVariable } from '@/models/debug'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@langgenius/dify-ui/tooltip'
 import {
   RiDeleteBinLine,
   RiErrorWarningFill,
@@ -20,13 +27,6 @@ import {
 } from '@/app/components/base/icons/src/vender/line/files'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '@/app/components/base/prompt-editor/plugins/variable-block'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/app/components/base/ui/tooltip'
 import ConfigContext from '@/context/debug-configuration'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useModalContext } from '@/context/modal-context'
diff --git a/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx b/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx
index 03755df018..8846530af2 100644
--- a/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx
+++ b/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import VarHighlight from '../../base/var-highlight'
 
 type IConfirmAddVarProps = {
diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
index 477e1db4a0..7906a5f8da 100644
--- a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
+++ b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import type { ConversationHistoriesRole } from '@/models/debug'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   isShow: boolean
diff --git a/web/app/components/app/configuration/config-prompt/index.tsx b/web/app/components/app/configuration/config-prompt/index.tsx
index 8a77d4bb58..20463da174 100644
--- a/web/app/components/app/configuration/config-prompt/index.tsx
+++ b/web/app/components/app/configuration/config-prompt/index.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { PromptItem, PromptVariable } from '@/models/debug'
 import type { AppModeEnum } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiAddLine,
 } from '@remixicon/react'
@@ -10,7 +11,6 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import AdvancedMessageInput from '@/app/components/app/configuration/config-prompt/advanced-prompt-input'
-import { Button } from '@/app/components/base/ui/button'
 import { MAX_PROMPT_MESSAGE_LENGTH } from '@/config'
 import ConfigContext from '@/context/debug-configuration'
 import { PromptRole } from '@/models/debug'
diff --git a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
index 6b5c3acccb..2935504f15 100644
--- a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
@@ -4,6 +4,12 @@ import type { ExternalDataTool } from '@/models/common'
 import type { PromptVariable } from '@/models/debug'
 import type { GenRes } from '@/service/debug'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@langgenius/dify-ui/tooltip'
 import { useBoolean } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
@@ -18,12 +24,6 @@ import { useFeaturesStore } from '@/app/components/base/features/hooks'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER } from '@/app/components/base/prompt-editor/plugins/update-block'
 import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '@/app/components/base/prompt-editor/plugins/variable-block'
-import { toast } from '@/app/components/base/ui/toast'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/app/components/base/ui/tooltip'
 import ConfigContext from '@/context/debug-configuration'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useModalContext } from '@/context/modal-context'
diff --git a/web/app/components/app/configuration/config-var/__tests__/index.spec.tsx b/web/app/components/app/configuration/config-var/__tests__/index.spec.tsx
index 4486489a20..51683ad948 100644
--- a/web/app/components/app/configuration/config-var/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/config-var/__tests__/index.spec.tsx
@@ -2,10 +2,10 @@ import type { ReactNode } from 'react'
 import type { IConfigVarProps } from '../index'
 import type { ExternalDataTool } from '@/models/common'
 import type { PromptVariable } from '@/models/debug'
+import { toast } from '@langgenius/dify-ui/toast'
 import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import * as React from 'react'
 import { vi } from 'vitest'
-import { toast } from '@/app/components/base/ui/toast'
 import DebugConfigurationContext from '@/context/debug-configuration'
 import { AppModeEnum } from '@/types/app'
 
diff --git a/web/app/components/app/configuration/config-var/config-modal/__tests__/form-fields.spec.tsx b/web/app/components/app/configuration/config-var/config-modal/__tests__/form-fields.spec.tsx
index 8cc8775bf5..5f0f4129d6 100644
--- a/web/app/components/app/configuration/config-var/config-modal/__tests__/form-fields.spec.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/__tests__/form-fields.spec.tsx
@@ -44,8 +44,8 @@ vi.mock('@/app/components/base/select', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/ui/select', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/select')>()
+vi.mock('@langgenius/dify-ui/select', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/select')>()
 
   return {
     ...actual,
diff --git a/web/app/components/app/configuration/config-var/config-modal/__tests__/index-logic.spec.tsx b/web/app/components/app/configuration/config-var/config-modal/__tests__/index-logic.spec.tsx
index 4888d284d2..77f2b54533 100644
--- a/web/app/components/app/configuration/config-var/config-modal/__tests__/index-logic.spec.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/__tests__/index-logic.spec.tsx
@@ -1,10 +1,10 @@
 /* eslint-disable ts/no-explicit-any */
 import type { InputVar } from '@/app/components/workflow/types'
 import type { App, AppSSO } from '@/types/app'
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { useStore } from '@/app/components/app/store'
-import { toast } from '@/app/components/base/ui/toast'
 import { InputVarType } from '@/app/components/workflow/types'
 import DebugConfigurationContext from '@/context/debug-configuration'
 import { AppModeEnum } from '@/types/app'
diff --git a/web/app/components/app/configuration/config-var/config-modal/__tests__/index.spec.tsx b/web/app/components/app/configuration/config-var/config-modal/__tests__/index.spec.tsx
index d15d6527c5..094a293943 100644
--- a/web/app/components/app/configuration/config-var/config-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/__tests__/index.spec.tsx
@@ -1,9 +1,9 @@
 import type { InputVar } from '@/app/components/workflow/types'
 import type { App, AppSSO } from '@/types/app'
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
 import { useStore } from '@/app/components/app/store'
-import { toast } from '@/app/components/base/ui/toast'
 import { InputVarType } from '@/app/components/workflow/types'
 import { AppModeEnum } from '@/types/app'
 import ConfigModal from '../index'
diff --git a/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx b/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
index 279a9279cf..748108e19a 100644
--- a/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
@@ -3,11 +3,6 @@ import type { ChangeEvent, FC } from 'react'
 import type { Item as SelectOptionItem } from './type-select'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import type { InputVar, UploadFileSetting } from '@/app/components/workflow/types'
-import * as React from 'react'
-import Checkbox from '@/app/components/base/checkbox'
-import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
-import Input from '@/app/components/base/input'
-import Textarea from '@/app/components/base/textarea'
 import {
   Select,
   SelectContent,
@@ -16,7 +11,12 @@ import {
   SelectItemText,
   SelectTrigger,
   SelectValue,
-} from '@/app/components/base/ui/select'
+} from '@langgenius/dify-ui/select'
+import * as React from 'react'
+import Checkbox from '@/app/components/base/checkbox'
+import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
+import Input from '@/app/components/base/input'
+import Textarea from '@/app/components/base/textarea'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import FileUploadSetting from '@/app/components/workflow/nodes/_base/components/file-upload-setting'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
diff --git a/web/app/components/app/configuration/config-var/config-modal/index.tsx b/web/app/components/app/configuration/config-var/config-modal/index.tsx
index 18484683fa..824b8a8d82 100644
--- a/web/app/components/app/configuration/config-var/config-modal/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/index.tsx
@@ -2,13 +2,13 @@
 import type { ChangeEvent, FC } from 'react'
 import type { Item as SelectItem } from './type-select'
 import type { InputVar, InputVarType, MoreInfo } from '@/app/components/workflow/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Modal from '@/app/components/base/modal'
-import { toast } from '@/app/components/base/ui/toast'
 import ConfigContext from '@/context/debug-configuration'
 import { AppModeEnum } from '@/types/app'
 import { checkKeys, getNewVarInWorkflow, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
diff --git a/web/app/components/app/configuration/config-var/index.tsx b/web/app/components/app/configuration/config-var/index.tsx
index aca2817249..34c6bf5786 100644
--- a/web/app/components/app/configuration/config-var/index.tsx
+++ b/web/app/components/app/configuration/config-var/index.tsx
@@ -4,15 +4,6 @@ import type { InputVar } from '@/app/components/workflow/types'
 import type { ExternalDataTool } from '@/models/common'
 import type { PromptVariable } from '@/models/debug'
 import type { I18nKeysByPrefix } from '@/types/i18n'
-import { cn } from '@langgenius/dify-ui/cn'
-import { useBoolean } from 'ahooks'
-import { produce } from 'immer'
-import * as React from 'react'
-import { useCallback, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { ReactSortable } from 'react-sortablejs'
-import { useContext } from 'use-context-selector'
-import Tooltip from '@/app/components/base/tooltip'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -21,8 +12,17 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/alert-dialog'
+import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
+import { useBoolean } from 'ahooks'
+import { produce } from 'immer'
+import * as React from 'react'
+import { useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ReactSortable } from 'react-sortablejs'
+import { useContext } from 'use-context-selector'
+import Tooltip from '@/app/components/base/tooltip'
 import { InputVarType } from '@/app/components/workflow/types'
 import ConfigContext from '@/context/debug-configuration'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
diff --git a/web/app/components/app/configuration/config-var/modal-foot.tsx b/web/app/components/app/configuration/config-var/modal-foot.tsx
index 3168d2a273..d8a869610f 100644
--- a/web/app/components/app/configuration/config-var/modal-foot.tsx
+++ b/web/app/components/app/configuration/config-var/modal-foot.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 type IModalFootProps = {
   onConfirm: () => void
diff --git a/web/app/components/app/configuration/config-vision/index.tsx b/web/app/components/app/configuration/config-vision/index.tsx
index e1fd88eb3f..b9cb54cc34 100644
--- a/web/app/components/app/configuration/config-vision/index.tsx
+++ b/web/app/components/app/configuration/config-vision/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -10,7 +11,6 @@ import { useContext } from 'use-context-selector'
 // import { Resolution } from '@/types/app'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import { Vision } from '@/app/components/base/icons/src/vender/features'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
diff --git a/web/app/components/app/configuration/config-vision/param-config.tsx b/web/app/components/app/configuration/config-vision/param-config.tsx
index 3be4c60aa9..51092f8ae7 100644
--- a/web/app/components/app/configuration/config-vision/param-config.tsx
+++ b/web/app/components/app/configuration/config-vision/param-config.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { RiSettings2Line } from '@remixicon/react'
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/app/components/base/ui/popover'
 import ParamConfigContent from './param-config-content'
 
 const ParamsConfig: FC = () => {
diff --git a/web/app/components/app/configuration/config/agent-setting-button.tsx b/web/app/components/app/configuration/config/agent-setting-button.tsx
index 0f1021e7ce..9831660571 100644
--- a/web/app/components/app/configuration/config/agent-setting-button.tsx
+++ b/web/app/components/app/configuration/config/agent-setting-button.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import type { AgentConfig } from '@/models/debug'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiSettings2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import AgentSetting from './agent/agent-setting'
 
 type Props = {
diff --git a/web/app/components/app/configuration/config/agent/agent-setting/__tests__/index.spec.tsx b/web/app/components/app/configuration/config/agent/agent-setting/__tests__/index.spec.tsx
index cdab20df16..08a6e0f62b 100644
--- a/web/app/components/app/configuration/config/agent/agent-setting/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-setting/__tests__/index.spec.tsx
@@ -12,7 +12,7 @@ vi.mock('ahooks', async (importOriginal) => {
   }
 })
 
-vi.mock('@/app/components/base/ui/slider', () => ({
+vi.mock('@langgenius/dify-ui/slider', () => ({
   Slider: (props: { className?: string, min?: number, max?: number, value: number, onValueChange: (value: number) => void }) => (
     <input
       type="range"
diff --git a/web/app/components/app/configuration/config/agent/agent-setting/index.tsx b/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
index 31b76bc46d..beae6b2a49 100644
--- a/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
@@ -1,6 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import type { AgentConfig } from '@/models/debug'
+import { Button } from '@langgenius/dify-ui/button'
+import { Slider } from '@langgenius/dify-ui/slider'
 import { RiCloseLine } from '@remixicon/react'
 import { useClickAway } from 'ahooks'
 import * as React from 'react'
@@ -8,8 +10,6 @@ import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { CuteRobot } from '@/app/components/base/icons/src/vender/solid/communication'
 import { Unblur } from '@/app/components/base/icons/src/vender/solid/education'
-import { Button } from '@/app/components/base/ui/button'
-import { Slider } from '@/app/components/base/ui/slider'
 import { DEFAULT_AGENT_PROMPT, MAX_ITERATIONS_NUM } from '@/config'
 import ItemPanel from './item-panel'
 
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
index 4f60bc9310..6100e415cc 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -4,7 +4,9 @@ import type { Collection } from '@/app/components/tools/types'
 import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import type { AgentTool } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import {
   RiDeleteBinLine,
   RiEqualizer2Line,
@@ -21,9 +23,7 @@ import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
 import AppIcon from '@/app/components/base/app-icon'
 import { DefaultToolIcon } from '@/app/components/base/icons/src/public/other'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { CollectionType } from '@/app/components/tools/types'
 import { addDefaultValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
index ae9ec962c7..71922d5a7e 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { Collection, Tool } from '@/app/components/tools/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowLeftLine,
@@ -14,7 +15,6 @@ import ActionButton from '@/app/components/base/action-button'
 import Drawer from '@/app/components/base/drawer'
 import Loading from '@/app/components/base/loading'
 import TabSlider from '@/app/components/base/tab-slider-plain'
-import { Button } from '@/app/components/base/ui/button'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import Icon from '@/app/components/plugins/card/base/card-icon'
 import Description from '@/app/components/plugins/card/base/description'
diff --git a/web/app/components/app/configuration/config/automatic/__tests__/get-automatic-res.spec.tsx b/web/app/components/app/configuration/config/automatic/__tests__/get-automatic-res.spec.tsx
index 154a7a5a14..e5f96ef940 100644
--- a/web/app/components/app/configuration/config/automatic/__tests__/get-automatic-res.spec.tsx
+++ b/web/app/components/app/configuration/config/automatic/__tests__/get-automatic-res.spec.tsx
@@ -21,7 +21,7 @@ vi.mock('react-i18next', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (...args: unknown[]) => mockToastError(...args),
   },
diff --git a/web/app/components/app/configuration/config/automatic/__tests__/result.spec.tsx b/web/app/components/app/configuration/config/automatic/__tests__/result.spec.tsx
index 30f41b7828..54efa4a92c 100644
--- a/web/app/components/app/configuration/config/automatic/__tests__/result.spec.tsx
+++ b/web/app/components/app/configuration/config/automatic/__tests__/result.spec.tsx
@@ -1,5 +1,5 @@
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { toast } from '@/app/components/base/ui/toast'
 import Result from '../result'
 import { GeneratorType } from '../types'
 
@@ -19,7 +19,7 @@ vi.mock('copy-to-clipboard', () => ({
   default: (...args: unknown[]) => mockCopy(...args),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
   },
diff --git a/web/app/components/app/configuration/config/automatic/automatic-btn.tsx b/web/app/components/app/configuration/config/automatic/automatic-btn.tsx
index af14fb037d..f9e9fa362a 100644
--- a/web/app/components/app/configuration/config/automatic/automatic-btn.tsx
+++ b/web/app/components/app/configuration/config/automatic/automatic-btn.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiSparklingFill,
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 type IAutomaticBtnProps = {
   onClick: () => void
diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index d9200af773..aff540cecf 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -4,6 +4,17 @@ import type { FormValue } from '@/app/components/header/account-setting/model-pr
 // type
 import type { GenRes } from '@/service/debug'
 import type { AppModeEnum, CompletionParams, Model, ModelModeType } from '@/types/app'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiDatabase2Line,
   RiFileExcel2Line,
@@ -22,17 +33,6 @@ import { useTranslation } from 'react-i18next'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
diff --git a/web/app/components/app/configuration/config/automatic/result.tsx b/web/app/components/app/configuration/config/automatic/result.tsx
index 4beefe8386..057fd48aeb 100644
--- a/web/app/components/app/configuration/config/automatic/result.tsx
+++ b/web/app/components/app/configuration/config/automatic/result.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { GenRes } from '@/service/debug'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiClipboardLine } from '@remixicon/react'
 import copy from 'copy-to-clipboard'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import CodeEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor'
 import PromptRes from './prompt-res'
 import PromptResInWorkflow from './prompt-res-in-workflow'
diff --git a/web/app/components/app/configuration/config/code-generator/__tests__/get-code-generator-res.spec.tsx b/web/app/components/app/configuration/config/code-generator/__tests__/get-code-generator-res.spec.tsx
index 25039bae96..fa7e9b6bd0 100644
--- a/web/app/components/app/configuration/config/code-generator/__tests__/get-code-generator-res.spec.tsx
+++ b/web/app/components/app/configuration/config/code-generator/__tests__/get-code-generator-res.spec.tsx
@@ -21,7 +21,7 @@ vi.mock('react-i18next', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (...args: unknown[]) => mockToastError(...args),
   },
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index eb1ee7e10c..c69c0f5dae 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -3,6 +3,17 @@ import type { FormValue } from '@/app/components/header/account-setting/model-pr
 import type { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import type { GenRes } from '@/service/debug'
 import type { AppModeEnum, CompletionParams, Model, ModelModeType } from '@/types/app'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   useBoolean,
   useSessionStorageState,
@@ -13,17 +24,6 @@ import { useTranslation } from 'react-i18next'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
diff --git a/web/app/components/app/configuration/config/config-audio.tsx b/web/app/components/app/configuration/config/config-audio.tsx
index 15a52610e6..25b6d64eec 100644
--- a/web/app/components/app/configuration/config/config-audio.tsx
+++ b/web/app/components/app/configuration/config/config-audio.tsx
@@ -1,14 +1,14 @@
 'use client'
 import type { FC } from 'react'
+import { Switch } from '@langgenius/dify-ui/switch'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 
+import { useContext } from 'use-context-selector'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import { Microphone01 } from '@/app/components/base/icons/src/vender/features'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import ConfigContext from '@/context/debug-configuration'
diff --git a/web/app/components/app/configuration/config/config-document.tsx b/web/app/components/app/configuration/config/config-document.tsx
index 859fd39426..156c605267 100644
--- a/web/app/components/app/configuration/config/config-document.tsx
+++ b/web/app/components/app/configuration/config/config-document.tsx
@@ -1,14 +1,14 @@
 'use client'
 import type { FC } from 'react'
+import { Switch } from '@langgenius/dify-ui/switch'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 
+import { useContext } from 'use-context-selector'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import { Document } from '@/app/components/base/icons/src/vender/features'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import ConfigContext from '@/context/debug-configuration'
diff --git a/web/app/components/app/configuration/configuration-view.tsx b/web/app/components/app/configuration/configuration-view.tsx
index 35ab462ad1..3a9882db18 100644
--- a/web/app/components/app/configuration/configuration-view.tsx
+++ b/web/app/components/app/configuration/configuration-view.tsx
@@ -2,6 +2,16 @@
 import type { FC } from 'react'
 import type { ConfigurationViewModel } from './hooks/use-configuration'
 import { CodeBracketIcon } from '@heroicons/react/20/solid'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import AppPublisher from '@/app/components/app/app-publisher/features-wrapper'
@@ -15,16 +25,6 @@ import Drawer from '@/app/components/base/drawer'
 import { FeaturesProvider } from '@/app/components/base/features'
 import NewFeaturePanel from '@/app/components/base/features/new-feature-panel'
 import Loading from '@/app/components/base/loading'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import PluginDependency from '@/app/components/workflow/plugin-dependency'
 import ConfigContext from '@/context/debug-configuration'
diff --git a/web/app/components/app/configuration/ctrl-btn-group/index.tsx b/web/app/components/app/configuration/ctrl-btn-group/index.tsx
index fa8a8bdab3..6ac485c097 100644
--- a/web/app/components/app/configuration/ctrl-btn-group/index.tsx
+++ b/web/app/components/app/configuration/ctrl-btn-group/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import s from './style.module.css'
 
 type IContrlBtnGroupProps = {
diff --git a/web/app/components/app/configuration/dataset-config/params-config/__tests__/config-content.spec.tsx b/web/app/components/app/configuration/dataset-config/params-config/__tests__/config-content.spec.tsx
index a17b39e4b4..80b9239524 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/__tests__/config-content.spec.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/__tests__/config-content.spec.tsx
@@ -3,9 +3,9 @@ import type { IndexingType } from '@/app/components/datasets/create/step-two'
 import type { DataSet } from '@/models/datasets'
 import type { DatasetConfigs } from '@/models/debug'
 import type { RetrievalConfig } from '@/types/app'
+import { toast } from '@langgenius/dify-ui/toast'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { toast } from '@/app/components/base/ui/toast'
 import {
   useCurrentProviderAndModel,
   useModelListAndDefaultModelAndCurrentProviderAndModel,
diff --git a/web/app/components/app/configuration/dataset-config/params-config/__tests__/index.spec.tsx b/web/app/components/app/configuration/dataset-config/params-config/__tests__/index.spec.tsx
index a892de7fee..b5924a5f23 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/__tests__/index.spec.tsx
@@ -1,9 +1,9 @@
 import type { MockedFunction, MockInstance } from 'vitest'
 import type { DatasetConfigs } from '@/models/debug'
+import { toast } from '@langgenius/dify-ui/toast'
 import { render, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
-import { toast } from '@/app/components/base/ui/toast'
 import {
   useCurrentProviderAndModel,
   useModelListAndDefaultModelAndCurrentProviderAndModel,
diff --git a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
index bb260fb499..d0e6b2fe9f 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
@@ -10,14 +10,14 @@ import type {
   DatasetConfigs,
 } from '@/models/debug'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
+import { toast } from '@langgenius/dify-ui/toast'
 import { memo, useCallback, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import ScoreThresholdItem from '@/app/components/base/param-item/score-threshold-item'
 import TopKItem from '@/app/components/base/param-item/top-k-item'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
-import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useCurrentProviderAndModel, useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
diff --git a/web/app/components/app/configuration/dataset-config/params-config/index.tsx b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
index ce78ad6e99..d4578af1d7 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
@@ -1,14 +1,14 @@
 'use client'
 import type { DataSet } from '@/models/datasets'
 import type { DatasetConfigs } from '@/models/debug'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { memo, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useCurrentProviderAndModel, useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import {
diff --git a/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx b/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
index e5080f26e4..5c2cca05d3 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
@@ -1,7 +1,7 @@
+import { Slider } from '@langgenius/dify-ui/slider'
 import { noop } from 'es-toolkit/function'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Slider } from '@/app/components/base/ui/slider'
 
 const weightedScoreSliderSlotClassNames = {
   track: 'bg-util-colors-teal-teal-500',
diff --git a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
index ff371fc2df..13d11574d5 100644
--- a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { DataSet } from '@/models/datasets'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useInfiniteScroll } from 'ahooks'
 import * as React from 'react'
@@ -10,7 +11,6 @@ import AppIcon from '@/app/components/base/app-icon'
 import Badge from '@/app/components/base/badge'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 import { ModelFeatureEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import FeatureIcon from '@/app/components/header/account-setting/model-provider-page/model-selector/feature-icon'
 import { useKnowledge } from '@/hooks/use-knowledge'
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/__tests__/index.spec.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/__tests__/index.spec.tsx
index d699a4baec..cf1df79d1e 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/__tests__/index.spec.tsx
@@ -19,7 +19,7 @@ const toastMocks = vi.hoisted(() => ({
   promise: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(toastMocks.call, {
     success: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'success', message, ...options })),
     error: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'error', message, ...options })),
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
index 872d081307..74e4ca5fe5 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
@@ -2,15 +2,15 @@ import type { FC } from 'react'
 import type { Member } from '@/models/common'
 import type { DataSet } from '@/models/datasets'
 import type { RetrievalConfig } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
 import { isEqual } from 'es-toolkit/predicate'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import { IndexingType } from '@/app/components/datasets/create/step-two'
 import IndexMethod from '@/app/components/datasets/settings/index-method'
diff --git a/web/app/components/app/configuration/debug/__tests__/index.spec.tsx b/web/app/components/app/configuration/debug/__tests__/index.spec.tsx
index 4a50ecc626..c17a74e24c 100644
--- a/web/app/components/app/configuration/debug/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/debug/__tests__/index.spec.tsx
@@ -46,7 +46,7 @@ const mockState = vi.hoisted(() => ({
   },
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(mockState.mockToastCall, {
     success: vi.fn((message: string, options?: Record<string, unknown>) =>
       mockState.mockToastCall({ type: 'success', message, ...options })),
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/__tests__/chat-item.spec.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/__tests__/chat-item.spec.tsx
index 61eb8f2ae8..719479498a 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/__tests__/chat-item.spec.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/__tests__/chat-item.spec.tsx
@@ -90,7 +90,7 @@ vi.mock('@/app/components/base/chat/chat', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/ui/avatar', () => ({
+vi.mock('@langgenius/dify-ui/avatar', () => ({
   Avatar: ({ name }: { name: string }) => <div data-testid="avatar">{name}</div>,
 }))
 
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx
index 56345890ff..d5b353c899 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import type { ModelAndParameter } from '../types'
 import type { InputForm } from '@/app/components/base/chat/chat/type'
 import type { ChatConfig, OnSend } from '@/app/components/base/chat/types'
+import { Avatar } from '@langgenius/dify-ui/avatar'
 import {
   memo,
   useCallback,
@@ -11,7 +12,6 @@ import Chat from '@/app/components/base/chat/chat'
 import { useChat } from '@/app/components/base/chat/chat/hooks'
 import { getLastAnswer } from '@/app/components/base/chat/utils'
 import { useFeatures } from '@/app/components/base/features/hooks'
-import { Avatar } from '@/app/components/base/ui/avatar'
 import { ModelFeatureEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useAppContext } from '@/context/app-context'
 import { useDebugConfigurationContext } from '@/context/debug-configuration'
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
index 2e535baeac..e76bbb0728 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
@@ -1,15 +1,15 @@
 import type { CSSProperties, FC } from 'react'
 import type { ModelAndParameter } from '../types'
-import { memo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import ActionButton from '@/app/components/base/action-button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import { memo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import ActionButton from '@/app/components/base/action-button'
 import { ModelStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useDebugConfigurationContext } from '@/context/debug-configuration'
 import { useProviderContext } from '@/context/provider-context'
diff --git a/web/app/components/app/configuration/debug/debug-with-single-model/index.tsx b/web/app/components/app/configuration/debug/debug-with-single-model/index.tsx
index a9f9f1116b..aef3d5ef9c 100644
--- a/web/app/components/app/configuration/debug/debug-with-single-model/index.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-single-model/index.tsx
@@ -1,13 +1,13 @@
 import type { InputForm } from '@/app/components/base/chat/chat/type'
 import type { ChatConfig, ChatItem, OnSend } from '@/app/components/base/chat/types'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
+import { Avatar } from '@langgenius/dify-ui/avatar'
 import { memo, useCallback, useImperativeHandle, useMemo } from 'react'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Chat from '@/app/components/base/chat/chat'
 import { useChat } from '@/app/components/base/chat/chat/hooks'
 import { getLastAnswer, isValidGeneratedAnswer } from '@/app/components/base/chat/utils'
 import { useFeatures } from '@/app/components/base/features/hooks'
-import { Avatar } from '@/app/components/base/ui/avatar'
 import { ModelFeatureEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useAppContext } from '@/context/app-context'
 import { useDebugConfigurationContext } from '@/context/debug-configuration'
diff --git a/web/app/components/app/configuration/debug/index.tsx b/web/app/components/app/configuration/debug/index.tsx
index 88bca7111c..87beccae24 100644
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@@ -5,6 +5,13 @@ import type { ModelAndParameter } from './types'
 import type { ModelParameterModalProps } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import type { Inputs } from '@/models/debug'
 import type { ModelConfig as BackendModelConfig, VisionFile, VisionSettings } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@langgenius/dify-ui/tooltip'
 import {
   RiAddLine,
   RiEqualizer2Line,
@@ -28,13 +35,6 @@ import AgentLogModal from '@/app/components/base/agent-log-modal'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
 import PromptLogModal from '@/app/components/base/prompt-log-modal'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/app/components/base/ui/tooltip'
 import { ModelFeatureEnum, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config'
diff --git a/web/app/components/app/configuration/hooks/__tests__/use-configuration-utils.spec.ts b/web/app/components/app/configuration/hooks/__tests__/use-configuration-utils.spec.ts
index c0353c233d..4c72e4690c 100644
--- a/web/app/components/app/configuration/hooks/__tests__/use-configuration-utils.spec.ts
+++ b/web/app/components/app/configuration/hooks/__tests__/use-configuration-utils.spec.ts
@@ -52,7 +52,7 @@ vi.mock('@/app/components/workflow/nodes/knowledge-retrieval/utils', async () =>
   }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (...args: unknown[]) => mockToastError(...args),
     success: (...args: unknown[]) => mockToastSuccess(...args),
diff --git a/web/app/components/app/configuration/hooks/use-configuration-utils.ts b/web/app/components/app/configuration/hooks/use-configuration-utils.ts
index 6911fdcd01..8a7b1c811e 100644
--- a/web/app/components/app/configuration/hooks/use-configuration-utils.ts
+++ b/web/app/components/app/configuration/hooks/use-configuration-utils.ts
@@ -4,9 +4,9 @@ import type { Collection } from '@/app/components/tools/types'
 import type { DataSet } from '@/models/datasets'
 import type { AnnotationReplyConfig, DatasetConfigs, ModelConfig, PromptVariable } from '@/models/debug'
 import type { ModelConfig as BackendModelConfig, UserInputFormItem, VisionSettings } from '@/types/app'
+import { toast } from '@langgenius/dify-ui/toast'
 import { clone } from 'es-toolkit/object'
 import { produce } from 'immer'
-import { toast } from '@/app/components/base/ui/toast'
 import { getMultipleRetrievalConfig, getSelectedDatasetsMode } from '@/app/components/workflow/nodes/knowledge-retrieval/utils'
 import { DEFAULT_AGENT_SETTING, DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config'
 import { PromptMode } from '@/models/debug'
diff --git a/web/app/components/app/configuration/prompt-value-panel/index.tsx b/web/app/components/app/configuration/prompt-value-panel/index.tsx
index a9df145ca1..94bc48da29 100644
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { Inputs } from '@/models/debug'
 import type { VisionFile, VisionSettings } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowDownSLine,
@@ -19,7 +20,6 @@ import Input from '@/app/components/base/input'
 import Select from '@/app/components/base/select'
 import Textarea from '@/app/components/base/textarea'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
 import ConfigContext from '@/context/debug-configuration'
 import { AppModeEnum, ModelModeType } from '@/types/app'
diff --git a/web/app/components/app/configuration/tools/__tests__/external-data-tool-modal.spec.tsx b/web/app/components/app/configuration/tools/__tests__/external-data-tool-modal.spec.tsx
index ceca00a9ae..2a725d88ca 100644
--- a/web/app/components/app/configuration/tools/__tests__/external-data-tool-modal.spec.tsx
+++ b/web/app/components/app/configuration/tools/__tests__/external-data-tool-modal.spec.tsx
@@ -11,7 +11,7 @@ vi.mock('react-i18next', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (...args: unknown[]) => mockToastError(...args),
   },
diff --git a/web/app/components/app/configuration/tools/external-data-tool-modal.tsx b/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
index 68a1ee875d..b09b7b1c70 100644
--- a/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
+++ b/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
@@ -2,6 +2,10 @@ import type { FC } from 'react'
 import type {
   ExternalDataTool,
 } from '@/models/common'
+import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
+import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger, SelectValue } from '@langgenius/dify-ui/select'
+import { toast } from '@langgenius/dify-ui/toast'
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -9,10 +13,6 @@ import AppIcon from '@/app/components/base/app-icon'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import FormGeneration from '@/app/components/base/features/new-feature-panel/moderation/form-generation'
 import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
-import { Button } from '@/app/components/base/ui/button'
-import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
-import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger, SelectValue } from '@/app/components/base/ui/select'
-import { toast } from '@/app/components/base/ui/toast'
 import ApiBasedExtensionSelector from '@/app/components/header/account-setting/api-based-extension-page/selector'
 import { useDocLink, useLocale } from '@/context/i18n'
 import { useCodeBasedExtensions } from '@/service/use-common'
diff --git a/web/app/components/app/create-app-dialog/app-card/index.tsx b/web/app/components/app/create-app-dialog/app-card/index.tsx
index fef7199ca2..65bd74344a 100644
--- a/web/app/components/app/create-app-dialog/app-card/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-card/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { App } from '@/models/explore'
 import { PlusIcon } from '@heroicons/react/20/solid'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiInformation2Line } from '@remixicon/react'
 import { useCallback } from 'react'
@@ -8,7 +9,6 @@ import { useTranslation } from 'react-i18next'
 import { useContextSelector } from 'use-context-selector'
 import { trackEvent } from '@/app/components/base/amplitude'
 import AppIcon from '@/app/components/base/app-icon'
-import { Button } from '@/app/components/base/ui/button'
 import AppListContext from '@/context/app-list-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { AppTypeIcon, AppTypeLabel } from '../../type-selector'
diff --git a/web/app/components/app/create-app-dialog/app-list/__tests__/index.spec.tsx b/web/app/components/app/create-app-dialog/app-list/__tests__/index.spec.tsx
index 34024da54c..0c6462c2f9 100644
--- a/web/app/components/app/create-app-dialog/app-list/__tests__/index.spec.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/__tests__/index.spec.tsx
@@ -86,7 +86,7 @@ vi.mock('@/app/components/explore/create-app-modal', () => ({
       )
     : null,
 }))
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: (...args: unknown[]) => mockToastSuccess(...args),
     error: (...args: unknown[]) => mockToastError(...args),
diff --git a/web/app/components/app/create-app-dialog/app-list/index.tsx b/web/app/components/app/create-app-dialog/app-list/index.tsx
index 19089d6364..1924de3893 100644
--- a/web/app/components/app/create-app-dialog/app-list/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/index.tsx
@@ -3,6 +3,7 @@
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { App } from '@/models/explore'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiRobot2Line } from '@remixicon/react'
 import { useDebounceFn } from 'ahooks'
 import * as React from 'react'
@@ -12,7 +13,6 @@ import AppTypeSelector from '@/app/components/app/type-selector'
 import Divider from '@/app/components/base/divider'
 import Input from '@/app/components/base/input'
 import Loading from '@/app/components/base/loading'
-import { toast } from '@/app/components/base/ui/toast'
 import CreateAppModal from '@/app/components/explore/create-app-modal'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
diff --git a/web/app/components/app/create-app-modal/__tests__/index.spec.tsx b/web/app/components/app/create-app-modal/__tests__/index.spec.tsx
index 305b90981b..24fb21747f 100644
--- a/web/app/components/app/create-app-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/create-app-modal/__tests__/index.spec.tsx
@@ -41,7 +41,7 @@ const toastMocks = vi.hoisted(() => ({
   mockToastSuccess: vi.fn(),
   mockToastError: vi.fn(),
 }))
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: toastMocks.mockToastSuccess,
     error: toastMocks.mockToastError,
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index 073107755f..2ff8a0aacd 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -1,8 +1,10 @@
 'use client'
 
 import type { AppIconSelection } from '../../base/app-icon-picker'
-import { cn } from '@langgenius/dify-ui/cn'
+import { Button } from '@langgenius/dify-ui/button'
 
+import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiArrowRightLine, RiArrowRightSLine, RiExchange2Fill } from '@remixicon/react'
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import { useCallback, useEffect, useRef, useState } from 'react'
@@ -13,8 +15,6 @@ import FullScreenModal from '@/app/components/base/fullscreen-modal'
 import { BubbleTextMod, ChatBot, ListSparkle, Logic } from '@/app/components/base/icons/src/vender/solid/communication'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
diff --git a/web/app/components/app/create-from-dsl-modal/__tests__/index.spec.tsx b/web/app/components/app/create-from-dsl-modal/__tests__/index.spec.tsx
index ae555a872b..f56b815399 100644
--- a/web/app/components/app/create-from-dsl-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/create-from-dsl-modal/__tests__/index.spec.tsx
@@ -83,7 +83,7 @@ vi.mock('@/utils/app-redirection', () => ({
   getRedirection: (...args: unknown[]) => mockGetRedirection(...args),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(
     (...args: unknown[]) => toastMocks.call(...args),
     {
diff --git a/web/app/components/app/create-from-dsl-modal/__tests__/uploader.spec.tsx b/web/app/components/app/create-from-dsl-modal/__tests__/uploader.spec.tsx
index 8b935db118..ba097b355c 100644
--- a/web/app/components/app/create-from-dsl-modal/__tests__/uploader.spec.tsx
+++ b/web/app/components/app/create-from-dsl-modal/__tests__/uploader.spec.tsx
@@ -1,5 +1,5 @@
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { toast } from '@/app/components/base/ui/toast'
 import Uploader from '../uploader'
 
 vi.mock('react-i18next', () => ({
@@ -8,7 +8,7 @@ vi.mock('react-i18next', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: vi.fn(),
   },
diff --git a/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx b/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx
index 59ba840a07..d0c97e185c 100644
--- a/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx
+++ b/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx
@@ -1,6 +1,6 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 
 type DSLConfirmModalProps = {
   versions?: {
diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx
index d4b857ee6b..4f99fe9027 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -1,7 +1,9 @@
 'use client'
 
 import type { MouseEventHandler } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import { noop } from 'es-toolkit/function'
@@ -9,8 +11,6 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
diff --git a/web/app/components/app/create-from-dsl-modal/uploader.tsx b/web/app/components/app/create-from-dsl-modal/uploader.tsx
index 1daa7e9f7b..aeecb280d0 100644
--- a/web/app/components/app/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/app/create-from-dsl-modal/uploader.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiDeleteBinLine,
   RiUploadCloud2Line,
@@ -10,7 +11,6 @@ import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import { Yaml as YamlIcon } from '@/app/components/base/icons/src/public/files'
-import { toast } from '@/app/components/base/ui/toast'
 import { formatFileSize } from '@/utils/format'
 
 type Props = {
diff --git a/web/app/components/app/duplicate-modal/__tests__/index.spec.tsx b/web/app/components/app/duplicate-modal/__tests__/index.spec.tsx
index a2ff6bc2fd..ceec1aa3c0 100644
--- a/web/app/components/app/duplicate-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/duplicate-modal/__tests__/index.spec.tsx
@@ -20,7 +20,7 @@ vi.mock('@/context/provider-context', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (...args: unknown[]) => toastErrorMock(...args),
   },
diff --git a/web/app/components/app/duplicate-modal/index.tsx b/web/app/components/app/duplicate-modal/index.tsx
index c28ead7821..e55ac6cf66 100644
--- a/web/app/components/app/duplicate-modal/index.tsx
+++ b/web/app/components/app/duplicate-modal/index.tsx
@@ -1,6 +1,8 @@
 'use client'
 import type { AppIconType } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
@@ -9,8 +11,6 @@ import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { useProviderContext } from '@/context/provider-context'
 import AppIconPicker from '../../base/app-icon-picker'
diff --git a/web/app/components/app/in-site-message/index.tsx b/web/app/components/app/in-site-message/index.tsx
index 5482086483..4038fb375d 100644
--- a/web/app/components/app/in-site-message/index.tsx
+++ b/web/app/components/app/in-site-message/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useEffect, useMemo, useState } from 'react'
 import { trackEvent } from '@/app/components/base/amplitude'
 import { MarkdownWithDirective } from '@/app/components/base/markdown-with-directive'
-import { Button } from '@/app/components/base/ui/button'
 
 type InSiteMessageAction = 'link' | 'close'
 type InSiteMessageButtonType = 'primary' | 'default'
diff --git a/web/app/components/app/log/__tests__/model-info.spec.tsx b/web/app/components/app/log/__tests__/model-info.spec.tsx
index f41aaf4c00..44dcffe7bf 100644
--- a/web/app/components/app/log/__tests__/model-info.spec.tsx
+++ b/web/app/components/app/log/__tests__/model-info.spec.tsx
@@ -34,7 +34,7 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/model-name'
   ),
 }))
 
-vi.mock('@/app/components/base/ui/popover', async () => {
+vi.mock('@langgenius/dify-ui/popover', async () => {
   const React = await import('react')
   const PopoverContext = React.createContext<{ open: boolean, onOpenChange?: (open: boolean) => void } | null>(null)
 
diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx
index 551bae0212..da96d41804 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -9,6 +9,7 @@ import {
   HandThumbUpIcon,
 } from '@heroicons/react/24/outline'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine, RiEditFill } from '@remixicon/react'
 import dayjs from 'dayjs'
 import timezone from 'dayjs/plugin/timezone'
@@ -30,7 +31,6 @@ import Drawer from '@/app/components/base/drawer'
 import Loading from '@/app/components/base/loading'
 import MessageLogModal from '@/app/components/base/message-log-modal'
 import Tooltip from '@/app/components/base/tooltip'
-import { toast } from '@/app/components/base/ui/toast'
 import { WorkflowContextProvider } from '@/app/components/workflow/context'
 import { useAppContext } from '@/context/app-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
diff --git a/web/app/components/app/log/model-info.tsx b/web/app/components/app/log/model-info.tsx
index e768f30a50..314627d855 100644
--- a/web/app/components/app/log/model-info.tsx
+++ b/web/app/components/app/log/model-info.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import {
   RiInformation2Line,
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Popover, PopoverContent, PopoverTrigger } from '@/app/components/base/ui/popover'
 import { useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import ModelIcon from '@/app/components/header/account-setting/model-provider-page/model-icon'
 import ModelName from '@/app/components/header/account-setting/model-provider-page/model-name'
diff --git a/web/app/components/app/overview/__tests__/trigger-card.spec.tsx b/web/app/components/app/overview/__tests__/trigger-card.spec.tsx
index d51a23bb05..7e183a3b15 100644
--- a/web/app/components/app/overview/__tests__/trigger-card.spec.tsx
+++ b/web/app/components/app/overview/__tests__/trigger-card.spec.tsx
@@ -73,8 +73,8 @@ vi.mock('@/app/components/workflow/block-icon', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/switch', () => ({
-  default: ({ checked, onCheckedChange, disabled }: { checked: boolean, onCheckedChange: (v: boolean) => void, disabled: boolean }) => (
+vi.mock('@langgenius/dify-ui/switch', () => ({
+  Switch: ({ checked, onCheckedChange, disabled }: { checked: boolean, onCheckedChange: (v: boolean) => void, disabled: boolean }) => (
     <button
       data-testid="switch"
       data-checked={checked ? 'true' : 'false'}
diff --git a/web/app/components/app/overview/apikey-info-panel/index.tsx b/web/app/components/app/overview/apikey-info-panel/index.tsx
index 9df9204183..cd7264636a 100644
--- a/web/app/components/app/overview/apikey-info-panel/index.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
-import { Button } from '@/app/components/base/ui/button'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { IS_CE_EDITION } from '@/config'
 import { useModalContext } from '@/context/modal-context'
diff --git a/web/app/components/app/overview/app-card-sections.tsx b/web/app/components/app/overview/app-card-sections.tsx
index 93067d02b7..8fef355f34 100644
--- a/web/app/components/app/overview/app-card-sections.tsx
+++ b/web/app/components/app/overview/app-card-sections.tsx
@@ -5,10 +5,6 @@ import type { OverviewOperationKey } from './app-card-utils'
 import type { ConfigParams } from './settings'
 import type { AppDetailResponse } from '@/models/app'
 import type { AppSSO } from '@/types/app'
-import { RiArrowRightSLine, RiBookOpenLine, RiBuildingLine, RiEqualizer2Line, RiExternalLinkLine, RiGlobalLine, RiLockLine, RiPaintBrushLine, RiVerifiedBadgeLine, RiWindowLine } from '@remixicon/react'
-import CopyFeedback from '@/app/components/base/copy-feedback'
-import Divider from '@/app/components/base/divider'
-import ShareQRCode from '@/app/components/base/qrcode'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -17,13 +13,17 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from '@/app/components/base/ui/tooltip'
+} from '@langgenius/dify-ui/tooltip'
+import { RiArrowRightSLine, RiBookOpenLine, RiBuildingLine, RiEqualizer2Line, RiExternalLinkLine, RiGlobalLine, RiLockLine, RiPaintBrushLine, RiVerifiedBadgeLine, RiWindowLine } from '@remixicon/react'
+import CopyFeedback from '@/app/components/base/copy-feedback'
+import Divider from '@/app/components/base/divider'
+import ShareQRCode from '@/app/components/base/qrcode'
 import { AccessMode } from '@/models/access-control'
 import { AppModeEnum } from '@/types/app'
 import AccessControl from '../app-access-control'
diff --git a/web/app/components/app/overview/app-card.tsx b/web/app/components/app/overview/app-card.tsx
index f02929c823..5cfe3f65ac 100644
--- a/web/app/components/app/overview/app-card.tsx
+++ b/web/app/components/app/overview/app-card.tsx
@@ -2,12 +2,12 @@
 import type { ConfigParams } from './settings'
 import type { AppDetailResponse } from '@/models/app'
 import type { AppSSO } from '@/types/app'
+import { Switch } from '@langgenius/dify-ui/switch'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppBasic from '@/app/components/app-sidebar/basic'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import SecretKeyButton from '@/app/components/develop/secret-key/secret-key-button'
 import Indicator from '@/app/components/header/indicator'
diff --git a/web/app/components/app/overview/customize/index.tsx b/web/app/components/app/overview/customize/index.tsx
index b1d7066779..e4b8aabf69 100644
--- a/web/app/components/app/overview/customize/index.tsx
+++ b/web/app/components/app/overview/customize/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
 import Tag from '@/app/components/base/tag'
-import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 import { AppModeEnum } from '@/types/app'
 
diff --git a/web/app/components/app/overview/settings/__tests__/index.spec.tsx b/web/app/components/app/overview/settings/__tests__/index.spec.tsx
index 7a723ce09d..a13ccad1f1 100644
--- a/web/app/components/app/overview/settings/__tests__/index.spec.tsx
+++ b/web/app/components/app/overview/settings/__tests__/index.spec.tsx
@@ -36,7 +36,7 @@ const toastMocks = vi.hoisted(() => ({
   promise: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(toastMocks.call, {
     success: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'success', message, ...options })),
     error: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'error', message, ...options })),
diff --git a/web/app/components/app/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
index d719d035e0..b8ac9af607 100644
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@@ -3,7 +3,10 @@ import type { FC } from 'react'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import type { AppDetailResponse } from '@/models/app'
 import type { AppIconType, AppSSO, Language } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiArrowRightSLine, RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
@@ -17,11 +20,8 @@ import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import PremiumBadge from '@/app/components/base/premium-badge'
 import { SimpleSelect } from '@/app/components/base/select'
-import Switch from '@/app/components/base/switch'
 import Textarea from '@/app/components/base/textarea'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
diff --git a/web/app/components/app/overview/trigger-card.tsx b/web/app/components/app/overview/trigger-card.tsx
index aa1190cde3..3283391b13 100644
--- a/web/app/components/app/overview/trigger-card.tsx
+++ b/web/app/components/app/overview/trigger-card.tsx
@@ -3,10 +3,10 @@ import type { AppDetailResponse } from '@/models/app'
 import type { AppTrigger } from '@/service/use-tools'
 import type { AppSSO } from '@/types/app'
 import type { I18nKeysByPrefix } from '@/types/i18n'
+import { Switch } from '@langgenius/dify-ui/switch'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
-import Switch from '@/app/components/base/switch'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { useTriggerStatusStore } from '@/app/components/workflow/store/trigger-status'
 import { BlockEnum } from '@/app/components/workflow/types'
diff --git a/web/app/components/app/switch-app-modal/__tests__/index.spec.tsx b/web/app/components/app/switch-app-modal/__tests__/index.spec.tsx
index 1db8f00a9b..99bf1e7436 100644
--- a/web/app/components/app/switch-app-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/switch-app-modal/__tests__/index.spec.tsx
@@ -133,7 +133,7 @@ const toastMocks = vi.hoisted(() => ({
   promise: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: (message: string, options?: Record<string, unknown>) => toastMocks.notify({ type: 'success', message, ...options }),
     error: (message: string, options?: Record<string, unknown>) => toastMocks.notify({ type: 'error', message, ...options }),
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index 272214c5ee..8da710210e 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -1,7 +1,18 @@
 'use client'
 
 import type { App } from '@/types/app'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useEffect, useState } from 'react'
@@ -12,17 +23,6 @@ import Checkbox from '@/app/components/base/checkbox'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
diff --git a/web/app/components/app/text-generate/item/__tests__/action-groups.spec.tsx b/web/app/components/app/text-generate/item/__tests__/action-groups.spec.tsx
index d2f54bbfd0..fe98dde67f 100644
--- a/web/app/components/app/text-generate/item/__tests__/action-groups.spec.tsx
+++ b/web/app/components/app/text-generate/item/__tests__/action-groups.spec.tsx
@@ -20,7 +20,7 @@ vi.mock('copy-to-clipboard', () => ({
   default: (...args: unknown[]) => mockCopy(...args),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: (...args: unknown[]) => mockSuccess(...args),
   },
diff --git a/web/app/components/app/text-generate/item/__tests__/index.spec.tsx b/web/app/components/app/text-generate/item/__tests__/index.spec.tsx
index 8401585f94..f87c98b617 100644
--- a/web/app/components/app/text-generate/item/__tests__/index.spec.tsx
+++ b/web/app/components/app/text-generate/item/__tests__/index.spec.tsx
@@ -63,7 +63,7 @@ vi.mock('@/app/components/base/markdown', () => ({
   Markdown: ({ content }: { content: string }) => <div>{`markdown:${content}`}</div>,
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     warning: (...args: unknown[]) => mockToastWarning(...args),
     success: vi.fn(),
diff --git a/web/app/components/app/text-generate/item/action-groups.tsx b/web/app/components/app/text-generate/item/action-groups.tsx
index 9d9ba6daa3..4ebdbe48bb 100644
--- a/web/app/components/app/text-generate/item/action-groups.tsx
+++ b/web/app/components/app/text-generate/item/action-groups.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import type { FeedbackType } from '@/app/components/base/chat/chat/type'
 import type { WorkflowProcess } from '@/app/components/base/chat/types'
 import type { AppSourceType } from '@/service/share'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiBookmark3Line,
   RiClipboardLine,
@@ -16,7 +17,6 @@ import copy from 'copy-to-clipboard'
 import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import NewAudioButton from '@/app/components/base/new-audio-button'
-import { toast } from '@/app/components/base/ui/toast'
 import { AppSourceType as AppSourceTypeEnum } from '@/service/share'
 import { getCopyContent, MAX_GENERATION_DEPTH } from './utils'
 
diff --git a/web/app/components/app/text-generate/item/index.tsx b/web/app/components/app/text-generate/item/index.tsx
index a6f5e6875b..78ab1b5b32 100644
--- a/web/app/components/app/text-generate/item/index.tsx
+++ b/web/app/components/app/text-generate/item/index.tsx
@@ -4,6 +4,7 @@ import type { FeedbackType } from '@/app/components/base/chat/chat/type'
 import type { WorkflowProcess } from '@/app/components/base/chat/types'
 import type { SiteInfo } from '@/models/share'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiPlayList2Line,
   RiSparklingFill,
@@ -16,7 +17,6 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import { useChatContext } from '@/app/components/base/chat/chat/context'
 import Loading from '@/app/components/base/loading'
 import { Markdown } from '@/app/components/base/markdown'
-import { toast } from '@/app/components/base/ui/toast'
 import { useParams } from '@/next/navigation'
 import { fetchTextGenerationMessage } from '@/service/debug'
 import { AppSourceType, fetchMoreLikeThis, submitHumanInputForm, updateFeedback } from '@/service/share'
diff --git a/web/app/components/app/text-generate/saved-items/__tests__/index.spec.tsx b/web/app/components/app/text-generate/saved-items/__tests__/index.spec.tsx
index 3989817a71..2ed6215a95 100644
--- a/web/app/components/app/text-generate/saved-items/__tests__/index.spec.tsx
+++ b/web/app/components/app/text-generate/saved-items/__tests__/index.spec.tsx
@@ -1,10 +1,10 @@
 import type { ISavedItemsProps } from '../index'
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen } from '@testing-library/react'
-import copy from 'copy-to-clipboard'
 
+import copy from 'copy-to-clipboard'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { toast } from '@/app/components/base/ui/toast'
 import SavedItems from '../index'
 
 vi.mock('copy-to-clipboard', () => ({
diff --git a/web/app/components/app/text-generate/saved-items/index.tsx b/web/app/components/app/text-generate/saved-items/index.tsx
index 605461dbd7..2bdb90624f 100644
--- a/web/app/components/app/text-generate/saved-items/index.tsx
+++ b/web/app/components/app/text-generate/saved-items/index.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { SavedMessage } from '@/models/debug'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiClipboardLine,
   RiDeleteBinLine,
@@ -12,7 +13,6 @@ import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import { Markdown } from '@/app/components/base/markdown'
 import NewAudioButton from '@/app/components/base/new-audio-button'
-import { toast } from '@/app/components/base/ui/toast'
 import NoData from './no-data'
 
 export type ISavedItemsProps = {
diff --git a/web/app/components/app/text-generate/saved-items/no-data/index.tsx b/web/app/components/app/text-generate/saved-items/no-data/index.tsx
index 2bf6e9b20a..006e49e039 100644
--- a/web/app/components/app/text-generate/saved-items/no-data/index.tsx
+++ b/web/app/components/app/text-generate/saved-items/no-data/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiAddLine,
   RiBookmark3Line,
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 type INoDataProps = {
   onStartCreateContent: () => void
diff --git a/web/app/components/app/type-selector/index.tsx b/web/app/components/app/type-selector/index.tsx
index 873593a600..dd73083454 100644
--- a/web/app/components/app/type-selector/index.tsx
+++ b/web/app/components/app/type-selector/index.tsx
@@ -1,14 +1,14 @@
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
 import { RiArrowDownSLine, RiCloseCircleFill, RiExchange2Fill, RiFilter3Line } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BubbleTextMod, ChatBot, ListSparkle, Logic } from '@/app/components/base/icons/src/vender/solid/communication'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/app/components/base/ui/popover'
 import { AppModeEnum } from '@/types/app'
 
 type AppSelectorProps = {
diff --git a/web/app/components/apps/__tests__/app-card.spec.tsx b/web/app/components/apps/__tests__/app-card.spec.tsx
index 84f8b87fa7..0c80ee000e 100644
--- a/web/app/components/apps/__tests__/app-card.spec.tsx
+++ b/web/app/components/apps/__tests__/app-card.spec.tsx
@@ -34,7 +34,7 @@ const toastMocks = vi.hoisted(() => {
   }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: toastMocks.api,
 }))
 
@@ -190,7 +190,7 @@ vi.mock('@/next/dynamic', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/ui/dropdown-menu', () => {
+vi.mock('@langgenius/dify-ui/dropdown-menu', () => {
   type DropdownMenuContextValue = {
     isOpen: boolean
     setOpen: (open: boolean) => void
@@ -1658,7 +1658,7 @@ describe('AppCard', () => {
 
     it('should reset delete input when dialog closes', async () => {
       vi.resetModules()
-      vi.doMock('@/app/components/base/ui/alert-dialog', createMockAlertDialogModule)
+      vi.doMock('@langgenius/dify-ui/alert-dialog', createMockAlertDialogModule)
 
       const { default: IsolatedAppCard } = await import('../app-card')
       render(<IsolatedAppCard app={mockApp} />)
@@ -1675,12 +1675,12 @@ describe('AppCard', () => {
 
       expect(await screen.findByRole('textbox')).toHaveValue('')
 
-      vi.doUnmock('@/app/components/base/ui/alert-dialog')
+      vi.doUnmock('@langgenius/dify-ui/alert-dialog')
     })
 
     it('should keep delete input when dialog remains open', async () => {
       vi.resetModules()
-      vi.doMock('@/app/components/base/ui/alert-dialog', createMockAlertDialogModule)
+      vi.doMock('@langgenius/dify-ui/alert-dialog', createMockAlertDialogModule)
 
       const { default: IsolatedAppCard } = await import('../app-card')
       render(<IsolatedAppCard app={mockApp} />)
@@ -1694,13 +1694,13 @@ describe('AppCard', () => {
       expect(await screen.findByRole('alertdialog')).toBeInTheDocument()
       expect(await screen.findByRole('textbox')).toHaveValue('partial name')
 
-      vi.doUnmock('@/app/components/base/ui/alert-dialog')
+      vi.doUnmock('@langgenius/dify-ui/alert-dialog')
     })
 
     it('should keep delete dialog open when close is requested during deletion', async () => {
       vi.resetModules()
       mockDeleteMutationPending = true
-      vi.doMock('@/app/components/base/ui/alert-dialog', createMockAlertDialogModule)
+      vi.doMock('@langgenius/dify-ui/alert-dialog', createMockAlertDialogModule)
 
       const { default: IsolatedAppCard } = await import('../app-card')
       render(<IsolatedAppCard app={mockApp} />)
@@ -1713,7 +1713,7 @@ describe('AppCard', () => {
 
       expect(await screen.findByRole('alertdialog')).toBeInTheDocument()
 
-      vi.doUnmock('@/app/components/base/ui/alert-dialog')
+      vi.doUnmock('@langgenius/dify-ui/alert-dialog')
       mockDeleteMutationPending = false
     })
   })
diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index 152dc3c877..d0bd9967c4 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -6,15 +6,6 @@ import type { CreateAppModalProps } from '@/app/components/explore/create-app-mo
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import type { WorkflowOnlineUser } from '@/models/app'
 import type { App } from '@/types/app'
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useCallback, useEffect, useId, useMemo, useState } from 'react'
-import { Trans, useTranslation } from 'react-i18next'
-import { AppTypeIcon } from '@/app/components/app/type-selector'
-import AppIcon from '@/app/components/base/app-icon'
-import Input from '@/app/components/base/input'
-import TagSelector from '@/app/components/base/tag-management/selector'
-import Tooltip from '@/app/components/base/tooltip'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -23,15 +14,24 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
+} from '@langgenius/dify-ui/alert-dialog'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/dropdown-menu'
+import { toast } from '@langgenius/dify-ui/toast'
+import * as React from 'react'
+import { useCallback, useEffect, useId, useMemo, useState } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { AppTypeIcon } from '@/app/components/app/type-selector'
+import AppIcon from '@/app/components/base/app-icon'
+import Input from '@/app/components/base/input'
+import TagSelector from '@/app/components/base/tag-management/selector'
+import Tooltip from '@/app/components/base/tooltip'
 import { UserAvatarList } from '@/app/components/base/user-avatar-list'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
diff --git a/web/app/components/base/agent-log-modal/__tests__/detail.spec.tsx b/web/app/components/base/agent-log-modal/__tests__/detail.spec.tsx
index 6ce1e54a47..78d4a06c4a 100644
--- a/web/app/components/base/agent-log-modal/__tests__/detail.spec.tsx
+++ b/web/app/components/base/agent-log-modal/__tests__/detail.spec.tsx
@@ -23,7 +23,7 @@ vi.mock('@/service/log', () => ({
   fetchAgentLogDetail: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
diff --git a/web/app/components/base/agent-log-modal/__tests__/index.spec.tsx b/web/app/components/base/agent-log-modal/__tests__/index.spec.tsx
index d1581c40b5..d8c595202a 100644
--- a/web/app/components/base/agent-log-modal/__tests__/index.spec.tsx
+++ b/web/app/components/base/agent-log-modal/__tests__/index.spec.tsx
@@ -21,7 +21,7 @@ vi.mock('@/service/log', () => ({
   fetchAgentLogDetail: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
diff --git a/web/app/components/base/agent-log-modal/detail.tsx b/web/app/components/base/agent-log-modal/detail.tsx
index 8080c52c46..b12777dfe5 100644
--- a/web/app/components/base/agent-log-modal/detail.tsx
+++ b/web/app/components/base/agent-log-modal/detail.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 import type { AgentIteration, AgentLogDetailResponse } from '@/models/log'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { uniq } from 'es-toolkit/array'
 import { flatten } from 'es-toolkit/compat'
 import * as React from 'react'
@@ -10,7 +11,6 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Loading from '@/app/components/base/loading'
-import { toast } from '@/app/components/base/ui/toast'
 import { fetchAgentLogDetail } from '@/service/log'
 import ResultPanel from './result'
 import TracingPanel from './tracing'
diff --git a/web/app/components/base/agent-log-modal/index.stories.tsx b/web/app/components/base/agent-log-modal/index.stories.tsx
index e8b49600a5..1ebb1944df 100644
--- a/web/app/components/base/agent-log-modal/index.stories.tsx
+++ b/web/app/components/base/agent-log-modal/index.stories.tsx
@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 import type { AgentLogDetailResponse } from '@/models/log'
+import { ToastHost } from '@langgenius/dify-ui/toast'
 import { useEffect, useRef } from 'react'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { ToastHost } from '@/app/components/base/ui/toast'
 import AgentLogModal from '.'
 
 const MOCK_RESPONSE: AgentLogDetailResponse = {
diff --git a/web/app/components/base/app-icon-picker/index.tsx b/web/app/components/base/app-icon-picker/index.tsx
index f90d78a983..77bc0cd434 100644
--- a/web/app/components/base/app-icon-picker/index.tsx
+++ b/web/app/components/base/app-icon-picker/index.tsx
@@ -2,12 +2,12 @@ import type { FC } from 'react'
 import type { Area } from 'react-easy-crop'
 import type { OnImageInput } from './ImageInput'
 import type { AppIconType, ImageFile } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiImageCircleAiLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
 import Divider from '../divider'
 import EmojiPickerInner from '../emoji-picker/Inner'
diff --git a/web/app/components/base/audio-btn/__tests__/audio.spec.ts b/web/app/components/base/audio-btn/__tests__/audio.spec.ts
index 16f880719d..85ce6763af 100644
--- a/web/app/components/base/audio-btn/__tests__/audio.spec.ts
+++ b/web/app/components/base/audio-btn/__tests__/audio.spec.ts
@@ -6,7 +6,7 @@ import AudioPlayer from '../audio'
 const mockToastNotify = vi.hoisted(() => vi.fn())
 const mockTextToAudioStream = vi.hoisted(() => vi.fn())
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (message: string) => mockToastNotify({ type: 'error', message }),
   },
diff --git a/web/app/components/base/audio-btn/audio.ts b/web/app/components/base/audio-btn/audio.ts
index 5afe2bb656..24615b333f 100644
--- a/web/app/components/base/audio-btn/audio.ts
+++ b/web/app/components/base/audio-btn/audio.ts
@@ -1,4 +1,4 @@
-import { toast } from '@/app/components/base/ui/toast'
+import { toast } from '@langgenius/dify-ui/toast'
 import { AppSourceType, textToAudioStream } from '@/service/share'
 
 declare global {
diff --git a/web/app/components/base/audio-gallery/AudioPlayer.tsx b/web/app/components/base/audio-gallery/AudioPlayer.tsx
index c3b2056698..1290fff871 100644
--- a/web/app/components/base/audio-gallery/AudioPlayer.tsx
+++ b/web/app/components/base/audio-gallery/AudioPlayer.tsx
@@ -1,8 +1,8 @@
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { t } from 'i18next'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { toast } from '@/app/components/base/ui/toast'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
 
diff --git a/web/app/components/base/audio-gallery/__tests__/AudioPlayer.spec.tsx b/web/app/components/base/audio-gallery/__tests__/AudioPlayer.spec.tsx
index fc5578d5a4..f05c5d2582 100644
--- a/web/app/components/base/audio-gallery/__tests__/AudioPlayer.spec.tsx
+++ b/web/app/components/base/audio-gallery/__tests__/AudioPlayer.spec.tsx
@@ -1,5 +1,5 @@
+import { toast } from '@langgenius/dify-ui/toast'
 import { act, fireEvent, render, screen } from '@testing-library/react'
-import { toast } from '@/app/components/base/ui/toast'
 import useThemeMock from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
 import AudioPlayer from '../AudioPlayer'
diff --git a/web/app/components/base/block-input/__tests__/index.spec.tsx b/web/app/components/base/block-input/__tests__/index.spec.tsx
index 5eb5ca0cc4..abacf045c0 100644
--- a/web/app/components/base/block-input/__tests__/index.spec.tsx
+++ b/web/app/components/base/block-input/__tests__/index.spec.tsx
@@ -1,6 +1,6 @@
+import { toast } from '@langgenius/dify-ui/toast'
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import { toast } from '@/app/components/base/ui/toast'
 import BlockInput, { getInputKeys } from '../index'
 
 vi.mock('@/utils/var', () => ({
diff --git a/web/app/components/base/block-input/index.tsx b/web/app/components/base/block-input/index.tsx
index 70f66ad3ad..acdc13b02f 100644
--- a/web/app/components/base/block-input/index.tsx
+++ b/web/app/components/base/block-input/index.tsx
@@ -2,12 +2,12 @@
 
 import type { ChangeEvent, FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { checkKeys } from '@/utils/var'
 import VarHighlight from '../../app/configuration/base/var-highlight'
-import { toast } from '../ui/toast'
 
 // regex to match the {{}} and replace it with a span
 const regex = /\{\{([^}]+)\}\}/g
diff --git a/web/app/components/base/chat/chat-with-history/__tests__/hooks.spec.tsx b/web/app/components/base/chat/chat-with-history/__tests__/hooks.spec.tsx
index 3f69cab96f..e2dee20cad 100644
--- a/web/app/components/base/chat/chat-with-history/__tests__/hooks.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/__tests__/hooks.spec.tsx
@@ -2,9 +2,9 @@ import type { ReactNode } from 'react'
 import type { ChatConfig } from '../../types'
 import type { InstalledApp } from '@/models/explore'
 import type { AppConversationData, AppData, AppMeta, ConversationItem } from '@/models/share'
+import { ToastHost } from '@langgenius/dify-ui/toast'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { act, renderHook, waitFor } from '@testing-library/react'
-import { ToastHost } from '@/app/components/base/ui/toast'
 import {
   AppSourceType,
   delConversation,
diff --git a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
index 1b59618c8c..5e685bff28 100644
--- a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
+++ b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
@@ -5,6 +5,7 @@ import type {
   ChatItemInTree,
   OnSend,
 } from '../types'
+import { Avatar } from '@langgenius/dify-ui/avatar'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import AnswerIcon from '@/app/components/base/answer-icon'
@@ -12,7 +13,6 @@ import AppIcon from '@/app/components/base/app-icon'
 import InputsForm from '@/app/components/base/chat/chat-with-history/inputs-form'
 import SuggestedQuestions from '@/app/components/base/chat/chat/answer/suggested-questions'
 import { Markdown } from '@/app/components/base/markdown'
-import { Avatar } from '@/app/components/base/ui/avatar'
 import { InputVarType } from '@/app/components/workflow/types'
 import {
   AppSourceType,
diff --git a/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx b/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx
index d101a41449..308058957c 100644
--- a/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx
+++ b/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx
@@ -1,10 +1,4 @@
 import type { ConversationItem } from '@/models/share'
-import { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import ActionButton from '@/app/components/base/action-button'
-import AppIcon from '@/app/components/base/app-icon'
-import InputsFormContent from '@/app/components/base/chat/chat-with-history/inputs-form/content'
-import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -13,7 +7,13 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
+} from '@langgenius/dify-ui/alert-dialog'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import ActionButton from '@/app/components/base/action-button'
+import AppIcon from '@/app/components/base/app-icon'
+import InputsFormContent from '@/app/components/base/chat/chat-with-history/inputs-form/content'
+import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
 import { useChatWithHistoryContext } from './context'
 import MobileOperationDropdown from './header/mobile-operation-dropdown'
 import Operation from './header/operation'
diff --git a/web/app/components/base/chat/chat-with-history/header/index.tsx b/web/app/components/base/chat/chat-with-history/header/index.tsx
index b0361c69a6..95b6146afa 100644
--- a/web/app/components/base/chat/chat-with-history/header/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/index.tsx
@@ -1,4 +1,13 @@
 import type { ConversationItem } from '@/models/share'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiEditBoxLine,
@@ -12,15 +21,6 @@ import AppIcon from '@/app/components/base/app-icon'
 import ViewFormDropdown from '@/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown'
 import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
 import Tooltip from '@/app/components/base/tooltip'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
 import {
   useChatWithHistoryContext,
 } from '../context'
diff --git a/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx b/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
index 5d80db7ac3..97180704f8 100644
--- a/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
@@ -1,12 +1,12 @@
-import { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 
 type Props = {
   handleResetChat: () => void
diff --git a/web/app/components/base/chat/chat-with-history/header/operation.tsx b/web/app/components/base/chat/chat-with-history/header/operation.tsx
index d439a43c1f..4155603541 100644
--- a/web/app/components/base/chat/chat-with-history/header/operation.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/operation.tsx
@@ -1,16 +1,16 @@
 'use client'
+import type { Placement } from '@langgenius/dify-ui/dropdown-menu'
 import type { FC } from 'react'
-import type { Placement } from '@/app/components/base/ui/placement'
 import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import * as React from 'react'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
 type Props = {
   title: string
diff --git a/web/app/components/base/chat/chat-with-history/hooks.tsx b/web/app/components/base/chat/chat-with-history/hooks.tsx
index df261d750c..223c35f6dd 100644
--- a/web/app/components/base/chat/chat-with-history/hooks.tsx
+++ b/web/app/components/base/chat/chat-with-history/hooks.tsx
@@ -3,13 +3,13 @@ import type { Callback, ChatConfig, ChatItem, Feedback } from '../types'
 import type { InstalledApp } from '@/models/explore'
 import type { AppData, ConversationItem } from '@/models/share'
 import type { HumanInputFilledFormData, HumanInputFormData } from '@/types/workflow'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useLocalStorageState } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
-import { toast } from '@/app/components/base/ui/toast'
 import { InputVarType } from '@/app/components/workflow/types'
 import { useWebAppStore } from '@/context/web-app-context'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
index def5545a3f..302e5e8c1f 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
@@ -1,10 +1,10 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import InputsFormContent from '@/app/components/base/chat/chat-with-history/inputs-form/content'
 import Divider from '@/app/components/base/divider'
 import { Message3Fill } from '@/app/components/base/icons/src/public/other'
-import { Button } from '@/app/components/base/ui/button'
 import { useChatWithHistoryContext } from '../context'
 
 type Props = {
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
index 1627d5890c..999f035301 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
@@ -1,4 +1,14 @@
 import type { ConversationItem } from '@/models/share'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiEditBoxLine,
@@ -15,16 +25,6 @@ import AppIcon from '@/app/components/base/app-icon'
 import List from '@/app/components/base/chat/chat-with-history/sidebar/list'
 import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
 import MenuDropdown from '@/app/components/share/text-generation/menu-dropdown'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useChatWithHistoryContext } from '../context'
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx b/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
index adda03fb55..a350e3f316 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
@@ -1,17 +1,17 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useBoolean } from 'ahooks'
-import * as React from 'react'
-import { useCallback, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import { useBoolean } from 'ahooks'
+import * as React from 'react'
+import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 
 type Props = {
   isActive?: boolean
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 ab5252da64..5cf981363c 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,11 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 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'
-import { Button } from '@/app/components/base/ui/button'
 
 type IRenameModalProps = {
   isShow: boolean
diff --git a/web/app/components/base/chat/chat/__tests__/check-input-forms-hooks.spec.tsx b/web/app/components/base/chat/chat/__tests__/check-input-forms-hooks.spec.tsx
index 1e96c1f798..28cc3b9eef 100644
--- a/web/app/components/base/chat/chat/__tests__/check-input-forms-hooks.spec.tsx
+++ b/web/app/components/base/chat/chat/__tests__/check-input-forms-hooks.spec.tsx
@@ -5,7 +5,7 @@ import { TransferMethod } from '@/types/app'
 import { useCheckInputsForms } from '../check-input-forms-hooks'
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: (args: unknown) => mockNotify(args),
   },
diff --git a/web/app/components/base/chat/chat/__tests__/hooks.spec.tsx b/web/app/components/base/chat/chat/__tests__/hooks.spec.tsx
index 9d65246a7f..738ab79bca 100644
--- a/web/app/components/base/chat/chat/__tests__/hooks.spec.tsx
+++ b/web/app/components/base/chat/chat/__tests__/hooks.spec.tsx
@@ -20,7 +20,7 @@ vi.mock('@/app/components/base/audio-btn/audio.player.manager', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: { notify: vi.fn() },
   toast: {
     success: vi.fn(),
diff --git a/web/app/components/base/chat/chat/__tests__/question.spec.tsx b/web/app/components/base/chat/chat/__tests__/question.spec.tsx
index b9c365a850..df02cc1e03 100644
--- a/web/app/components/base/chat/chat/__tests__/question.spec.tsx
+++ b/web/app/components/base/chat/chat/__tests__/question.spec.tsx
@@ -1,11 +1,11 @@
 import type { Theme } from '../../embedded-chatbot/theme/theme-context'
 import type { ChatConfig, ChatItem, OnRegenerate } from '../../types'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import copy from 'copy-to-clipboard'
 import * as React from 'react'
-import { toast } from '@/app/components/base/ui/toast'
 import { ThemeBuilder } from '../../embedded-chatbot/theme/theme-context'
 import { ChatContextProvider } from '../context-provider'
 import Question from '../question'
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 e3bc2dcd38..9eaf5fe374 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
@@ -29,7 +29,7 @@ const {
 
 vi.mock('copy-to-clipboard', () => ({ default: vi.fn() }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: { notify: vi.fn() },
 }))
 
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx b/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx
index 5da8a754fa..0e7881d972 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx
@@ -1,10 +1,10 @@
 'use client'
+import type { ButtonProps } from '@langgenius/dify-ui/button'
 import type { HumanInputFormProps } from './type'
-import type { ButtonProps } from '@/app/components/base/ui/button'
 import type { UserAction } from '@/app/components/workflow/nodes/human-input/types'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
-import { Button } from '@/app/components/base/ui/button'
 import ContentItem from './content-item'
 import { getButtonStyle, initializeInputs, splitByOutputVar } from './utils'
 
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index 5a2cccb1e9..e7d1c17a3e 100644
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -4,6 +4,7 @@ import type {
   Feedback,
 } from '../../types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import copy from 'copy-to-clipboard'
 import {
   memo,
@@ -19,7 +20,6 @@ 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 { toast } from '@/app/components/base/ui/toast'
 import { useChatContext } from '../context'
 
 type OperationProps = {
diff --git a/web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx b/web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx
index 1a8dd55f61..f17f94ff9e 100644
--- a/web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx
@@ -175,7 +175,7 @@ vi.mock('@/app/components/base/features/hooks', () => ({
 // ---------------------------------------------------------------------------
 // Toast context
 // ---------------------------------------------------------------------------
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: (args: unknown) => mockNotify(args),
   },
diff --git a/web/app/components/base/chat/chat/chat-input-area/index.tsx b/web/app/components/base/chat/chat/chat-input-area/index.tsx
index f5444a8d7b..a5d441114b 100644
--- a/web/app/components/base/chat/chat/chat-input-area/index.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/index.tsx
@@ -3,6 +3,7 @@ import type { EnableType, OnSend } from '../../types'
 import type { InputForm } from '../type'
 import type { FileUpload } from '@/app/components/base/features/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { noop } from 'es-toolkit/function'
 import { decode } from 'html-entities'
 import Recorder from 'js-audio-recorder'
@@ -13,7 +14,6 @@ import FeatureBar from '@/app/components/base/features/new-feature-panel/feature
 import { FileListInChatInput } from '@/app/components/base/file-uploader'
 import { useFile } from '@/app/components/base/file-uploader/hooks'
 import { FileContextProvider, useFileStore } from '@/app/components/base/file-uploader/store'
-import { toast } from '@/app/components/base/ui/toast'
 import VoiceInput from '@/app/components/base/voice-input'
 import { TransferMethod } from '@/types/app'
 import { useCheckInputsForms } from '../check-input-forms-hooks'
diff --git a/web/app/components/base/chat/chat/chat-input-area/operation.tsx b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
index c94c47a25b..05e55e038a 100644
--- a/web/app/components/base/chat/chat/chat-input-area/operation.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
@@ -4,6 +4,7 @@ import type {
   EnableType,
 } from '../../types'
 import type { FileUpload } from '@/app/components/base/features/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiMicLine,
@@ -13,7 +14,6 @@ import { noop } from 'es-toolkit/function'
 import { memo } from 'react'
 import ActionButton from '@/app/components/base/action-button'
 import { FileUploaderInChatInput } from '@/app/components/base/file-uploader'
-import { Button } from '@/app/components/base/ui/button'
 
 type OperationProps = {
   readonly?: boolean
diff --git a/web/app/components/base/chat/chat/check-input-forms-hooks.ts b/web/app/components/base/chat/chat/check-input-forms-hooks.ts
index dee6b4ca7f..8414698341 100644
--- a/web/app/components/base/chat/chat/check-input-forms-hooks.ts
+++ b/web/app/components/base/chat/chat/check-input-forms-hooks.ts
@@ -1,7 +1,7 @@
 import type { InputForm } from './type'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { InputVarType } from '@/app/components/workflow/types'
 import { TransferMethod } from '@/types/app'
 
diff --git a/web/app/components/base/chat/chat/hooks.ts b/web/app/components/base/chat/chat/hooks.ts
index d6e5c2f936..677862a795 100644
--- a/web/app/components/base/chat/chat/hooks.ts
+++ b/web/app/components/base/chat/chat/hooks.ts
@@ -12,6 +12,7 @@ import type {
   IOnDataMoreInfo,
   IOtherOptions,
 } from '@/service/base'
+import { toast } from '@langgenius/dify-ui/toast'
 import { uniqBy } from 'es-toolkit/compat'
 import { noop } from 'es-toolkit/function'
 import { produce, setAutoFreeze } from 'immer'
@@ -29,7 +30,6 @@ import {
   getProcessedFiles,
   getProcessedFilesFromResponse,
 } from '@/app/components/base/file-uploader/utils'
-import { toast } from '@/app/components/base/ui/toast'
 import { NodeRunningStatus, WorkflowRunningStatus } from '@/app/components/workflow/types'
 import useTimestamp from '@/hooks/use-timestamp'
 import { useParams, usePathname } from '@/next/navigation'
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index 3500059203..6a14b76bd4 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -13,12 +13,12 @@ import type {
 import type { InputForm } from './type'
 import type { Emoji } from '@/app/components/tools/types'
 import type { AppData } from '@/models/share'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { Button } from '@/app/components/base/ui/button'
 import Answer from './answer'
 import ChatInputArea from './chat-input-area'
 import ChatLogModals from './chat-log-modals'
diff --git a/web/app/components/base/chat/chat/question.tsx b/web/app/components/base/chat/chat/question.tsx
index f585ea0573..5bfd8a3000 100644
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -4,7 +4,9 @@ import type {
 } from 'react'
 import type { Theme } from '../embedded-chatbot/theme/theme-context'
 import type { ChatItem } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import copy from 'copy-to-clipboard'
 import {
   memo,
@@ -18,9 +20,7 @@ import Textarea from 'react-textarea-autosize'
 import { FileList } from '@/app/components/base/file-uploader'
 import { User } from '@/app/components/base/icons/src/public/avatar'
 import { Markdown } from '@/app/components/base/markdown'
-import { Button } from '@/app/components/base/ui/button'
 import ActionButton from '../../action-button'
-import { toast } from '../../ui/toast'
 import { CssTransform } from '../embedded-chatbot/theme/utils'
 import ContentSwitch from './content-switch'
 import { useChatContext } from './context'
diff --git a/web/app/components/base/chat/chat/try-to-ask.tsx b/web/app/components/base/chat/chat/try-to-ask.tsx
index ada816b8fa..a74b49fb51 100644
--- a/web/app/components/base/chat/chat/try-to-ask.tsx
+++ b/web/app/components/base/chat/chat/try-to-ask.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import type { OnSend } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import { Button } from '@/app/components/base/ui/button'
 
 type TryToAskProps = {
   suggestedQuestions: string[]
diff --git a/web/app/components/base/chat/embedded-chatbot/__tests__/hooks.spec.tsx b/web/app/components/base/chat/embedded-chatbot/__tests__/hooks.spec.tsx
index 7ba8df7fa1..b4f3f01070 100644
--- a/web/app/components/base/chat/embedded-chatbot/__tests__/hooks.spec.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/__tests__/hooks.spec.tsx
@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react'
 import type { ChatConfig } from '../../types'
 import type { AppConversationData, AppData, AppMeta, ConversationItem } from '@/models/share'
+import { ToastHost } from '@langgenius/dify-ui/toast'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { act, renderHook, waitFor } from '@testing-library/react'
-import { ToastHost } from '@/app/components/base/ui/toast'
 import { InputVarType } from '@/app/components/workflow/types'
 import {
   AppSourceType,
diff --git a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
index b63784cc34..2f50fe76c6 100644
--- a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
@@ -5,6 +5,7 @@ import type {
   ChatItemInTree,
   OnSend,
 } from '../types'
+import { Avatar } from '@langgenius/dify-ui/avatar'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import AnswerIcon from '@/app/components/base/answer-icon'
@@ -13,7 +14,6 @@ import SuggestedQuestions from '@/app/components/base/chat/chat/answer/suggested
 import InputsForm from '@/app/components/base/chat/embedded-chatbot/inputs-form'
 import LogoAvatar from '@/app/components/base/logo/logo-embedded-chat-avatar'
 import { Markdown } from '@/app/components/base/markdown'
-import { Avatar } from '@/app/components/base/ui/avatar'
 import { InputVarType } from '@/app/components/workflow/types'
 import {
   AppSourceType,
diff --git a/web/app/components/base/chat/embedded-chatbot/hooks.tsx b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
index 67b5332434..4ce6bc6318 100644
--- a/web/app/components/base/chat/embedded-chatbot/hooks.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
@@ -3,12 +3,12 @@ import type { ChatConfig, ChatItem, Feedback } from '../types'
 import type { InputValueTypes } from '@/app/components/share/text-generation/types'
 import type { Locale } from '@/i18n-config'
 import type { AppData, ConversationItem } from '@/models/share'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useLocalStorageState } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'
 import { InputVarType } from '@/app/components/workflow/types'
 import { useWebAppStore } from '@/context/web-app-context'
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx
index f682752645..40a62cf451 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx
@@ -16,7 +16,7 @@ vi.mock('@/next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
 
 }))
 
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
index 77b47bb1c4..7cf9ee2968 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
@@ -1,9 +1,9 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import InputsFormContent from '@/app/components/base/chat/embedded-chatbot/inputs-form/content'
 import Divider from '@/app/components/base/divider'
-import { Button } from '@/app/components/base/ui/button'
 import { AppSourceType } from '@/service/share'
 import { useEmbeddedChatbotContext } from '../context'
 
diff --git a/web/app/components/base/checkbox-list/index.tsx b/web/app/components/base/checkbox-list/index.tsx
index 80ebbc435c..e6b2f5b260 100644
--- a/web/app/components/base/checkbox-list/index.tsx
+++ b/web/app/components/base/checkbox-list/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import Checkbox from '@/app/components/base/checkbox'
 import SearchInput from '@/app/components/base/search-input'
-import { Button } from '@/app/components/base/ui/button'
 import SearchMenu from '@/assets/search-menu.svg'
 
 type CheckboxListOption = {
diff --git a/web/app/components/base/date-and-time-picker/date-picker/footer.tsx b/web/app/components/base/date-and-time-picker/date-picker/footer.tsx
index ee94fdbf20..0e0852a893 100644
--- a/web/app/components/base/date-and-time-picker/date-picker/footer.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/footer.tsx
@@ -1,10 +1,10 @@
 import type { FC } from 'react'
 import type { DatePickerFooterProps } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiTimeLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { ViewType } from '../types'
 
 const Footer: FC<DatePickerFooterProps> = ({
diff --git a/web/app/components/base/date-and-time-picker/time-picker/footer.tsx b/web/app/components/base/date-and-time-picker/time-picker/footer.tsx
index f3c0b7e9ed..49c7090cf1 100644
--- a/web/app/components/base/date-and-time-picker/time-picker/footer.tsx
+++ b/web/app/components/base/date-and-time-picker/time-picker/footer.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
 import type { TimePickerFooterProps } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 const Footer: FC<TimePickerFooterProps> = ({
   handleSelectCurrentTime,
diff --git a/web/app/components/base/date-and-time-picker/year-and-month-picker/footer.tsx b/web/app/components/base/date-and-time-picker/year-and-month-picker/footer.tsx
index 0cbcc3b8fb..85ef88fd74 100644
--- a/web/app/components/base/date-and-time-picker/year-and-month-picker/footer.tsx
+++ b/web/app/components/base/date-and-time-picker/year-and-month-picker/footer.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
 import type { YearAndMonthPickerFooterProps } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 const Footer: FC<YearAndMonthPickerFooterProps> = ({
   handleYearMonthCancel,
diff --git a/web/app/components/base/drawer/index.tsx b/web/app/components/base/drawer/index.tsx
index 2ca2f090ef..88c5874dd5 100644
--- a/web/app/components/base/drawer/index.tsx
+++ b/web/app/components/base/drawer/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import { Dialog, DialogBackdrop, DialogTitle } from '@headlessui/react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 export type IDrawerProps = {
   title?: string
diff --git a/web/app/components/base/emoji-picker/index.tsx b/web/app/components/base/emoji-picker/index.tsx
index 92ee4935be..75112e70eb 100644
--- a/web/app/components/base/emoji-picker/index.tsx
+++ b/web/app/components/base/emoji-picker/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
@@ -7,7 +8,6 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 import EmojiPickerInner from './Inner'
 
 type IEmojiPickerProps = {
diff --git a/web/app/components/base/error-boundary/index.tsx b/web/app/components/base/error-boundary/index.tsx
index 21395a57c9..ba629eb335 100644
--- a/web/app/components/base/error-boundary/index.tsx
+++ b/web/app/components/base/error-boundary/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { ErrorInfo, ReactNode } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiAlertLine, RiBugLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { IS_DEV } from '@/config'
 
 type ErrorBoundaryState = {
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/annotation-ctrl-button.spec.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/annotation-ctrl-button.spec.tsx
index 9f4a04fc6a..7d39cf24e7 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/annotation-ctrl-button.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/annotation-ctrl-button.spec.tsx
@@ -28,7 +28,7 @@ vi.mock('@/service/annotation', () => ({
   addAnnotation: (...args: unknown[]) => mockAddAnnotation(...args),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: { notify: vi.fn() },
   toast: {
     success: vi.fn(),
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/config-param-modal.spec.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/config-param-modal.spec.tsx
index d4f8d7be4d..b07f48d4bb 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/config-param-modal.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/config-param-modal.spec.tsx
@@ -1,5 +1,5 @@
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { toast } from '@/app/components/base/ui/toast'
 import ConfigParamModal from '../config-param-modal'
 
 let mockHooksReturn: {
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx
index a93a180e27..3f3e68b32e 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiEditLine, RiFileEditLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
-import { toast } from '@/app/components/base/ui/toast'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { addAnnotation } from '@/service/annotation'
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
index a89a00c01a..13b4133ab6 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { AnnotationReplyConfig } from '@/models/debug'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
index e5ec955226..80ebaf9614 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
@@ -1,5 +1,6 @@
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import type { AnnotationReplyConfig } from '@/models/debug'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiEqualizer2Line, RiExternalLinkLine } from '@remixicon/react'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -10,7 +11,6 @@ import ConfigParamModal from '@/app/components/base/features/new-feature-panel/a
 import useAnnotationConfig from '@/app/components/base/features/new-feature-panel/annotation-reply/use-annotation-config'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import { MessageFast } from '@/app/components/base/icons/src/vender/features'
-import { Button } from '@/app/components/base/ui/button'
 import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
 import { ANNOTATION_DEFAULT } from '@/config'
 import { usePathname, useRouter } from '@/next/navigation'
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
index f3d86749f4..8a2dc18fc0 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { Slider } from '@langgenius/dify-ui/slider'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Slider } from '@/app/components/base/ui/slider'
 
 type Props = {
   className?: string
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
index c27f6348b2..5a579519f0 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
@@ -1,6 +1,7 @@
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import type { InputVar } from '@/app/components/workflow/types'
 import type { PromptVariable } from '@/models/debug'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiEditLine } from '@remixicon/react'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -10,7 +11,6 @@ import { useFeatures, useFeaturesStore } from '@/app/components/base/features/ho
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import { FeatureEnum } from '@/app/components/base/features/types'
 import { LoveMessage } from '@/app/components/base/icons/src/vender/features'
-import { Button } from '@/app/components/base/ui/button'
 import { useModalContext } from '@/context/modal-context'
 
 type Props = {
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
index 556e5b88c0..2b0e809688 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
@@ -1,6 +1,7 @@
 import type { OpeningStatement } from '@/app/components/base/features/types'
 import type { InputVar } from '@/app/components/workflow/types'
 import type { PromptVariable } from '@/models/debug'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import { noop } from 'es-toolkit/function'
@@ -14,7 +15,6 @@ import { getInputKeys } from '@/app/components/base/block-input'
 import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
 import PromptEditor from '@/app/components/base/prompt-editor'
-import { Button } from '@/app/components/base/ui/button'
 import { checkKeys, getNewVar } from '@/utils/var'
 
 type OpeningSettingModalProps = {
diff --git a/web/app/components/base/features/new-feature-panel/feature-bar.tsx b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
index dac4612677..9b442ca52f 100644
--- a/web/app/components/base/features/new-feature-panel/feature-bar.tsx
+++ b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiApps2AddLine, RiArrowRightLine, RiSparklingFill } from '@remixicon/react'
 import * as React from 'react'
@@ -7,7 +8,6 @@ import { useFeatures } from '@/app/components/base/features/hooks'
 import VoiceSettings from '@/app/components/base/features/new-feature-panel/text-to-speech/voice-settings'
 import { Citations, ContentModeration, FolderUpload, LoveMessage, MessageFast, Microphone01, TextToAudio, VirtualAssistant } from '@/app/components/base/icons/src/vender/features'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   isChatMode?: boolean
diff --git a/web/app/components/base/features/new-feature-panel/feature-card.tsx b/web/app/components/base/features/new-feature-panel/feature-card.tsx
index adc33011d9..58725a31a1 100644
--- a/web/app/components/base/features/new-feature-panel/feature-card.tsx
+++ b/web/app/components/base/features/new-feature-panel/feature-card.tsx
@@ -1,8 +1,8 @@
+import { Switch } from '@langgenius/dify-ui/switch'
 import {
   RiQuestionLine,
 } from '@remixicon/react'
 import * as React from 'react'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 
 type Props = {
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/index.tsx b/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
index 0b15b6ff19..9406c29aaa 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
@@ -1,4 +1,5 @@
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -9,7 +10,6 @@ import FeatureCard from '@/app/components/base/features/new-feature-panel/featur
 import SettingModal from '@/app/components/base/features/new-feature-panel/file-upload/setting-modal'
 import { FeatureEnum } from '@/app/components/base/features/types'
 import { FolderUpload } from '@/app/components/base/icons/src/vender/features'
-import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   disabled: boolean
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
index 23f2e2a25e..393b66ba19 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
@@ -1,12 +1,12 @@
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import type { UploadFileSetting } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
-import { Button } from '@/app/components/base/ui/button'
 import FileUploadSetting from '@/app/components/workflow/nodes/_base/components/file-upload-setting'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 
diff --git a/web/app/components/base/features/new-feature-panel/image-upload/index.tsx b/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
index 4fc4cc070e..374283e91e 100644
--- a/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
@@ -1,4 +1,5 @@
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiEqualizer2Line, RiImage2Fill } from '@remixicon/react'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -9,7 +10,6 @@ import { useFeatures, useFeaturesStore } from '@/app/components/base/features/ho
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import SettingModal from '@/app/components/base/features/new-feature-panel/file-upload/setting-modal'
 import { FeatureEnum } from '@/app/components/base/features/types'
-import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   disabled: boolean
diff --git a/web/app/components/base/features/new-feature-panel/moderation/__tests__/moderation-setting-modal.spec.tsx b/web/app/components/base/features/new-feature-panel/moderation/__tests__/moderation-setting-modal.spec.tsx
index fd6ca654aa..da4c658080 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/__tests__/moderation-setting-modal.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/__tests__/moderation-setting-modal.spec.tsx
@@ -4,7 +4,7 @@ import * as i18n from 'react-i18next'
 import ModerationSettingModal from '../moderation-setting-modal'
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (message: string) => mockNotify({ type: 'error', message }),
   },
diff --git a/web/app/components/base/features/new-feature-panel/moderation/index.tsx b/web/app/components/base/features/new-feature-panel/moderation/index.tsx
index 5e97f6d459..4e5ea9208e 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/index.tsx
@@ -1,4 +1,5 @@
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { produce } from 'immer'
 import { useCallback, useMemo, useState } from 'react'
@@ -7,7 +8,6 @@ import { useFeatures, useFeaturesStore } from '@/app/components/base/features/ho
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import { FeatureEnum } from '@/app/components/base/features/types'
 import { ContentModeration } from '@/app/components/base/icons/src/vender/features'
-import { Button } from '@/app/components/base/ui/button'
 import { useLocale } from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
 import { useCodeBasedExtensions } from '@/service/use-common'
diff --git a/web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx b/web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx
index 39cc8d88db..af4cb8c32c 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import type { ModerationContentConfig } from '@/models/debug'
+import { Switch } from '@langgenius/dify-ui/switch'
 import { useTranslation } from 'react-i18next'
-import Switch from '@/app/components/base/switch'
 
 type ModerationContentProps = {
   title: string
diff --git a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
index 438af2e9a1..0ae2f458e1 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
@@ -1,14 +1,14 @@
 import type { ChangeEvent, FC } from 'react'
 import type { CodeBasedExtensionItem } from '@/models/common'
 import type { ModerationConfig, ModerationContentConfig } from '@/models/debug'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import ApiBasedExtensionSelector from '@/app/components/header/account-setting/api-based-extension-page/selector'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { CustomConfigurationStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
index 2268aa4d1e..28482f0e0c 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
@@ -1,4 +1,5 @@
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -9,7 +10,6 @@ import FeatureCard from '@/app/components/base/features/new-feature-panel/featur
 import VoiceSettings from '@/app/components/base/features/new-feature-panel/text-to-speech/voice-settings'
 import { FeatureEnum } from '@/app/components/base/features/types'
 import { TextToAudio } from '@/app/components/base/icons/src/vender/features'
-import { Button } from '@/app/components/base/ui/button'
 import { languages } from '@/i18n-config/language'
 import { TtsAutoPlay } from '@/types/app'
 
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
index 0b22e7c12f..a6314bf0af 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
@@ -3,6 +3,7 @@ import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import type { Item } from '@/app/components/base/select'
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import { produce } from 'immer'
 import * as React from 'react'
 import { Fragment } from 'react'
@@ -10,7 +11,6 @@ import { useTranslation } from 'react-i18next'
 import { replace } from 'string-ts'
 import AudioBtn from '@/app/components/base/audio-btn'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import { languages } from '@/i18n-config/language'
 import { usePathname } from '@/next/navigation'
diff --git a/web/app/components/base/file-uploader/__tests__/hooks.spec.ts b/web/app/components/base/file-uploader/__tests__/hooks.spec.ts
index e9c3675c2f..72f28603db 100644
--- a/web/app/components/base/file-uploader/__tests__/hooks.spec.ts
+++ b/web/app/components/base/file-uploader/__tests__/hooks.spec.ts
@@ -10,7 +10,7 @@ vi.mock('@/next/navigation', () => ({
   useParams: () => ({ token: undefined }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (message: string) => mockNotify({ type: 'error', message }),
   },
diff --git a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
index 872526f1ae..912c2d3c48 100644
--- a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
+++ b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
@@ -1,4 +1,5 @@
 import type { FileUpload } from '@/app/components/base/features/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiUploadCloud2Line } from '@remixicon/react'
 import {
@@ -11,7 +12,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 import { FILE_URL_REGEX } from '../constants'
 import FileInput from '../file-input'
 import { useFile } from '../hooks'
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.stories.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.stories.tsx
index 502bbaf59d..e7e280d2f5 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.stories.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.stories.tsx
@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import type { FileEntity } from '../types'
 import type { FileUpload } from '@/app/components/base/features/types'
+import { ToastHost } from '@langgenius/dify-ui/toast'
 import { useState } from 'react'
 import { fn } from 'storybook/test'
 import { PreviewMode } from '@/app/components/base/features/types'
-import { ToastHost } from '@/app/components/base/ui/toast'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { TransferMethod } from '@/types/app'
 import FileUploaderInAttachmentWrapper from './index'
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
index ba308642c2..b532bb7773 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
@@ -1,5 +1,6 @@
 import type { FileEntity } from '../types'
 import type { FileUpload } from '@/app/components/base/features/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiLink,
@@ -9,7 +10,6 @@ import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { TransferMethod } from '@/types/app'
 import FileFromLinkOrLocal from '../file-from-link-or-local'
 import FileInput from '../file-input'
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
index 6249b47e6d..be34abce4e 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
@@ -1,4 +1,5 @@
 import type { FileEntity } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiCloseLine,
   RiDownloadLine,
@@ -7,7 +8,6 @@ import { useState } from 'react'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
-import { Button } from '@/app/components/base/ui/button'
 import { downloadUrl } from '@/utils/download'
 import FileImageRender from '../file-image-render'
 import {
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
index a23d616481..3dae5f60f8 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
@@ -1,4 +1,5 @@
 import type { FileEntity } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useState } from 'react'
 import ActionButton from '@/app/components/base/action-button'
@@ -6,7 +7,6 @@ import AudioPreview from '@/app/components/base/file-uploader/audio-preview'
 import PdfPreview from '@/app/components/base/file-uploader/dynamic-pdf-preview'
 import VideoPreview from '@/app/components/base/file-uploader/video-preview'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
-import { Button } from '@/app/components/base/ui/button'
 import { downloadUrl } from '@/utils/download'
 import { formatFileSize } from '@/utils/format'
 import FileTypeIcon from '../file-type-icon'
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.stories.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.stories.tsx
index 7f718ca961..538f397a11 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.stories.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import type { FileEntity } from '../types'
 import type { FileUpload } from '@/app/components/base/features/types'
+import { ToastHost } from '@langgenius/dify-ui/toast'
 import { useState } from 'react'
-import { ToastHost } from '@/app/components/base/ui/toast'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { TransferMethod } from '@/types/app'
 import FileUploaderInChatInput from '.'
diff --git a/web/app/components/base/file-uploader/hooks.ts b/web/app/components/base/file-uploader/hooks.ts
index 2df4b005af..9aa70e4487 100644
--- a/web/app/components/base/file-uploader/hooks.ts
+++ b/web/app/components/base/file-uploader/hooks.ts
@@ -2,6 +2,7 @@ import type { ClipboardEvent } from 'react'
 import type { FileEntity } from './types'
 import type { FileUpload } from '@/app/components/base/features/types'
 import type { FileUploadConfigResponse } from '@/models/common'
+import { toast } from '@langgenius/dify-ui/toast'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
 import {
@@ -17,7 +18,6 @@ import {
   MAX_FILE_UPLOAD_LIMIT,
   VIDEO_SIZE_LIMIT,
 } from '@/app/components/base/file-uploader/constants'
-import { toast } from '@/app/components/base/ui/toast'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { useParams } from '@/next/navigation'
 import { uploadRemoteFileInfo } from '@/service/common'
diff --git a/web/app/components/base/form/components/field/number-input.tsx b/web/app/components/base/form/components/field/number-input.tsx
index 4a1a37ff60..2bc39cdfab 100644
--- a/web/app/components/base/form/components/field/number-input.tsx
+++ b/web/app/components/base/form/components/field/number-input.tsx
@@ -1,9 +1,7 @@
+import type { NumberFieldInputProps, NumberFieldRootProps, NumberFieldSize } from '@langgenius/dify-ui/number-field'
 import type { ReactNode } from 'react'
-import type { NumberFieldInputProps, NumberFieldRootProps, NumberFieldSize } from '../../../ui/number-field'
 import type { LabelProps } from '../label'
 import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useFieldContext } from '../..'
 import {
   NumberField,
   NumberFieldControls,
@@ -12,7 +10,9 @@ import {
   NumberFieldIncrement,
   NumberFieldInput,
   NumberFieldUnit,
-} from '../../../ui/number-field'
+} from '@langgenius/dify-ui/number-field'
+import * as React from 'react'
+import { useFieldContext } from '../..'
 import Label from '../label'
 
 type NumberInputFieldProps = {
diff --git a/web/app/components/base/form/components/form/actions.tsx b/web/app/components/base/form/components/form/actions.tsx
index 23081fdc20..ea8fcbf848 100644
--- a/web/app/components/base/form/components/form/actions.tsx
+++ b/web/app/components/base/form/components/form/actions.tsx
@@ -1,7 +1,7 @@
 import type { FormType } from '../..'
+import { Button } from '@langgenius/dify-ui/button'
 import { useStore } from '@tanstack/react-form'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { useFormContext } from '../..'
 
 export type CustomActionsProps = {
diff --git a/web/app/components/base/form/hooks/__tests__/use-check-validated.spec.ts b/web/app/components/base/form/hooks/__tests__/use-check-validated.spec.ts
index cf36f47de4..0bebab6a5b 100644
--- a/web/app/components/base/form/hooks/__tests__/use-check-validated.spec.ts
+++ b/web/app/components/base/form/hooks/__tests__/use-check-validated.spec.ts
@@ -5,7 +5,7 @@ import { useCheckValidated } from '../use-check-validated'
 
 const mockNotify = vi.fn()
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: (args: unknown) => mockNotify(args),
   },
diff --git a/web/app/components/base/form/hooks/use-check-validated.ts b/web/app/components/base/form/hooks/use-check-validated.ts
index 6530b3f0be..f7d81263ef 100644
--- a/web/app/components/base/form/hooks/use-check-validated.ts
+++ b/web/app/components/base/form/hooks/use-check-validated.ts
@@ -1,7 +1,7 @@
 import type { AnyFormApi } from '@tanstack/react-form'
 import type { FormSchema } from '@/app/components/base/form/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback } from 'react'
-import { toast } from '@/app/components/base/ui/toast'
 
 export const useCheckValidated = (form: AnyFormApi, FormSchemas: FormSchema[]) => {
   const checkValidated = useCallback(() => {
diff --git a/web/app/components/base/form/index.stories.tsx b/web/app/components/base/form/index.stories.tsx
index c6d6638e3c..a8afc4f3f3 100644
--- a/web/app/components/base/form/index.stories.tsx
+++ b/web/app/components/base/form/index.stories.tsx
@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import type { FormStoryRender } from '../../../../.storybook/utils/form-story-wrapper'
 import type { FormSchema } from './types'
+import { Button } from '@langgenius/dify-ui/button'
 import { useStore } from '@tanstack/react-form'
 import { useMemo, useState } from 'react'
 import { PreviewMode } from '@/app/components/base/features/types'
-import { Button } from '@/app/components/base/ui/button'
 import { TransferMethod } from '@/types/app'
 import { FormStoryWrapper } from '../../../../.storybook/utils/form-story-wrapper'
 import BaseForm from './components/base/base-form'
diff --git a/web/app/components/base/image-uploader/__tests__/hooks.spec.ts b/web/app/components/base/image-uploader/__tests__/hooks.spec.ts
index f01f00b779..f0ec9f8f73 100644
--- a/web/app/components/base/image-uploader/__tests__/hooks.spec.ts
+++ b/web/app/components/base/image-uploader/__tests__/hooks.spec.ts
@@ -5,7 +5,7 @@ import { Resolution, TransferMethod } from '@/types/app'
 import { useClipboardUploader, useDraggableUploader, useImageFiles, useLocalFileUploader } from '../hooks'
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (message: string) => mockNotify({ type: 'error', message }),
   },
diff --git a/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx b/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx
index c019897595..b2a2952bf8 100644
--- a/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx
+++ b/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx
@@ -11,7 +11,7 @@ const mocks = vi.hoisted(() => ({
   clipboardWrite: vi.fn<(items: ClipboardItem[]) => Promise<void>>(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: (...args: Parameters<typeof mocks.notify>) => mocks.notify(...args),
   },
diff --git a/web/app/components/base/image-uploader/hooks.ts b/web/app/components/base/image-uploader/hooks.ts
index ec1b1248f1..37cd5b5995 100644
--- a/web/app/components/base/image-uploader/hooks.ts
+++ b/web/app/components/base/image-uploader/hooks.ts
@@ -1,8 +1,8 @@
 import type { ClipboardEvent } from 'react'
 import type { ImageFile, VisionSettings } from '@/types/app'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useParams } from '@/next/navigation'
 import { ALLOW_FILE_EXTENSIONS, TransferMethod } from '@/types/app'
 import { getImageUploadErrorMessage, imageUpload } from './utils'
diff --git a/web/app/components/base/image-uploader/image-link-input.tsx b/web/app/components/base/image-uploader/image-link-input.tsx
index ec041d9506..2ba2bf1bf1 100644
--- a/web/app/components/base/image-uploader/image-link-input.tsx
+++ b/web/app/components/base/image-uploader/image-link-input.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
 import type { ImageFile } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { TransferMethod } from '@/types/app'
 
 type ImageLinkInputProps = {
diff --git a/web/app/components/base/image-uploader/image-preview.tsx b/web/app/components/base/image-uploader/image-preview.tsx
index ec240be9ec..7cc4ec8a14 100644
--- a/web/app/components/base/image-uploader/image-preview.tsx
+++ b/web/app/components/base/image-uploader/image-preview.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { toast } from '@langgenius/dify-ui/toast'
 import { noop } from 'es-toolkit/function'
 import { t } from 'i18next'
 import * as React from 'react'
@@ -6,7 +7,6 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useHotkeys } from 'react-hotkeys-hook'
 import Tooltip from '@/app/components/base/tooltip'
-import { toast } from '@/app/components/base/ui/toast'
 import { downloadUrl } from '@/utils/download'
 
 type ImagePreviewProps = {
diff --git a/web/app/components/base/inline-delete-confirm/index.tsx b/web/app/components/base/inline-delete-confirm/index.tsx
index 0dccdcf0f5..619b2c0462 100644
--- a/web/app/components/base/inline-delete-confirm/index.tsx
+++ b/web/app/components/base/inline-delete-confirm/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 type InlineDeleteConfirmProps = {
   title?: string
diff --git a/web/app/components/base/markdown-blocks/button.tsx b/web/app/components/base/markdown-blocks/button.tsx
index 055835b503..99398fd6de 100644
--- a/web/app/components/base/markdown-blocks/button.tsx
+++ b/web/app/components/base/markdown-blocks/button.tsx
@@ -1,6 +1,6 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useChatContext } from '@/app/components/base/chat/chat/context'
-import { Button } from '@/app/components/base/ui/button'
 import { isValidUrl } from './utils'
 
 const MarkdownButton = ({ node }: any) => {
diff --git a/web/app/components/base/markdown-blocks/form.tsx b/web/app/components/base/markdown-blocks/form.tsx
index b7643c5cd5..7c80590e24 100644
--- a/web/app/components/base/markdown-blocks/form.tsx
+++ b/web/app/components/base/markdown-blocks/form.tsx
@@ -1,5 +1,7 @@
+import type { ButtonProps } from '@langgenius/dify-ui/button'
 import type { Dayjs } from 'dayjs'
-import type { ButtonProps } from '@/app/components/base/ui/button'
+import { Button } from '@langgenius/dify-ui/button'
+import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger, SelectValue } from '@langgenius/dify-ui/select'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useChatContext } from '@/app/components/base/chat/chat/context'
@@ -9,8 +11,6 @@ import TimePicker from '@/app/components/base/date-and-time-picker/time-picker'
 import { formatDateForOutput, toDayjs } from '@/app/components/base/date-and-time-picker/utils/dayjs'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
-import { Button } from '@/app/components/base/ui/button'
-import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger, SelectValue } from '@/app/components/base/ui/select'
 
 enum DATA_FORMAT {
   TEXT = 'text',
diff --git a/web/app/components/base/modal-like-wrap/index.tsx b/web/app/components/base/modal-like-wrap/index.tsx
index 8665e54941..1c049eb5f4 100644
--- a/web/app/components/base/modal-like-wrap/index.tsx
+++ b/web/app/components/base/modal-like-wrap/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   title: string
diff --git a/web/app/components/base/modal/index.tsx b/web/app/components/base/modal/index.tsx
index 9238f4a8ca..8b4b6174a3 100644
--- a/web/app/components/base/modal/index.tsx
+++ b/web/app/components/base/modal/index.tsx
@@ -1,5 +1,5 @@
 /**
- * @deprecated Use `@/app/components/base/ui/dialog` instead.
+ * @deprecated Use `@langgenius/dify-ui/dialog` instead.
  * This component will be removed after migration is complete.
  * See: https://github.com/langgenius/dify/issues/32767
  */
diff --git a/web/app/components/base/modal/modal.tsx b/web/app/components/base/modal/modal.tsx
index 8d046adf71..10164e5f33 100644
--- a/web/app/components/base/modal/modal.tsx
+++ b/web/app/components/base/modal/modal.tsx
@@ -1,9 +1,10 @@
 /**
- * @deprecated Use `@/app/components/base/ui/dialog` instead.
+ * @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 '@/app/components/base/ui/button'
+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'
@@ -12,7 +13,6 @@ import {
   PortalToFollowElem,
   PortalToFollowElemContent,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 
 type ModalProps = {
   onClose?: () => void
diff --git a/web/app/components/base/notion-connector/index.tsx b/web/app/components/base/notion-connector/index.tsx
index 2187b19e8a..8afb1a9f9f 100644
--- a/web/app/components/base/notion-connector/index.tsx
+++ b/web/app/components/base/notion-connector/index.tsx
@@ -1,6 +1,6 @@
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { Notion } from '../icons/src/public/common'
 import { Icon3Dots } from '../icons/src/vender/line/others'
 
diff --git a/web/app/components/base/pagination/index.tsx b/web/app/components/base/pagination/index.tsx
index 815e825c8d..22335bdd11 100644
--- a/web/app/components/base/pagination/index.tsx
+++ b/web/app/components/base/pagination/index.tsx
@@ -1,11 +1,11 @@
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowLeftLine, RiArrowRightLine } from '@remixicon/react'
 import { useDebounceFn } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
 import { Pagination } from './pagination'
 
 export type Props = {
diff --git a/web/app/components/base/param-item/index.tsx b/web/app/components/base/param-item/index.tsx
index f5f571f604..93eb878551 100644
--- a/web/app/components/base/param-item/index.tsx
+++ b/web/app/components/base/param-item/index.tsx
@@ -1,8 +1,5 @@
 'use client'
 import type { FC } from 'react'
-import Switch from '@/app/components/base/switch'
-import Tooltip from '@/app/components/base/tooltip'
-import { Slider } from '@/app/components/base/ui/slider'
 import {
   NumberField,
   NumberFieldControls,
@@ -10,7 +7,10 @@ import {
   NumberFieldGroup,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '../ui/number-field'
+} from '@langgenius/dify-ui/number-field'
+import { Slider } from '@langgenius/dify-ui/slider'
+import { Switch } from '@langgenius/dify-ui/switch'
+import Tooltip from '@/app/components/base/tooltip'
 
 type Props = {
   className?: string
diff --git a/web/app/components/base/portal-to-follow-elem/index.tsx b/web/app/components/base/portal-to-follow-elem/index.tsx
index b3772122f8..48099c7020 100644
--- a/web/app/components/base/portal-to-follow-elem/index.tsx
+++ b/web/app/components/base/portal-to-follow-elem/index.tsx
@@ -5,11 +5,11 @@
  * See: https://github.com/langgenius/dify/issues/32767
  *
  * Migration guide:
- * - Tooltip → `@/app/components/base/ui/tooltip`
- * - Menu/Dropdown → `@/app/components/base/ui/dropdown-menu`
- * - Popover → `@/app/components/base/ui/popover`
- * - Dialog/Modal → `@/app/components/base/ui/dialog`
- * - Select → `@/app/components/base/ui/select`
+ * - 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 {
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
index 93e6610d12..7511406718 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
@@ -1,11 +1,11 @@
 import type { FormInputItem, FormInputItemDefault } from '@/app/components/workflow/nodes/human-input/types'
 import type { ValueSelector } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
 import { InputVarType } from '@/app/components/workflow/types'
 import { getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
 import PrePopulate from './pre-populate'
diff --git a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
index f30970ba6d..ecd5183a14 100644
--- a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
@@ -3,6 +3,7 @@ import type {
 } from './index'
 import type { WorkflowNodesMap } from './node'
 import type { NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { mergeRegister } from '@lexical/utils'
 import {
@@ -17,7 +18,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useReactFlow, useStoreApi } from 'reactflow'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { isRagVariableVar, isSpecialVar, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import VarFullPathPanel from '@/app/components/workflow/nodes/_base/components/variable/var-full-path-panel'
 import {
diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index bd9cc7af04..5033f381c2 100644
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 /**
- * @deprecated Use `@/app/components/base/ui/select` instead.
+ * @deprecated Use `@langgenius/dify-ui/select` instead.
  * This component will be removed after migration is complete.
  * See: https://github.com/langgenius/dify/issues/32767
  */
diff --git a/web/app/components/base/switch/skeleton.tsx b/web/app/components/base/switch/skeleton.tsx
deleted file mode 100644
index f9306445cb..0000000000
--- a/web/app/components/base/switch/skeleton.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { SwitchSize } from './index'
-import { cn } from '@langgenius/dify-ui/cn'
-import { cva } from 'class-variance-authority'
-
-const skeletonVariants = cva(
-  'bg-text-quaternary opacity-20',
-  {
-    variants: {
-      size: {
-        xs: 'h-2.5 w-3.5 rounded-xs',
-        sm: 'h-3 w-5 rounded-[3.5px]',
-        md: 'h-4 w-7 rounded-[5px]',
-        lg: 'h-5 w-9 rounded-md',
-      },
-    },
-    defaultVariants: {
-      size: 'md',
-    },
-  },
-)
-
-type SwitchSkeletonProps = {
-  'size'?: SwitchSize
-  'className'?: string
-  'data-testid'?: string
-}
-
-export function SwitchSkeleton({
-  size = 'md',
-  className,
-  'data-testid': dataTestid,
-}: SwitchSkeletonProps) {
-  return (
-    <div
-      className={cn(skeletonVariants({ size }), className)}
-      data-testid={dataTestid}
-    />
-  )
-}
-
-SwitchSkeleton.displayName = 'SwitchSkeleton'
diff --git a/web/app/components/base/tag-input/__tests__/index.spec.tsx b/web/app/components/base/tag-input/__tests__/index.spec.tsx
index 82ace7f49b..b64f4aaab6 100644
--- a/web/app/components/base/tag-input/__tests__/index.spec.tsx
+++ b/web/app/components/base/tag-input/__tests__/index.spec.tsx
@@ -5,7 +5,7 @@ import TagInput from '../index'
 
 const mockNotify = vi.fn()
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: (args: unknown) => mockNotify(args),
   },
diff --git a/web/app/components/base/tag-input/__tests__/interop.spec.tsx b/web/app/components/base/tag-input/__tests__/interop.spec.tsx
index f31871b33e..94e6d421a9 100644
--- a/web/app/components/base/tag-input/__tests__/interop.spec.tsx
+++ b/web/app/components/base/tag-input/__tests__/interop.spec.tsx
@@ -25,7 +25,7 @@ describe('TagInput autosize interop', () => {
       update: vi.fn(),
       promise: vi.fn(),
     })
-    vi.doMock('@/app/components/base/ui/toast', () => ({
+    vi.doMock('@langgenius/dify-ui/toast', () => ({
       toast,
     }))
     vi.doMock('react-18-input-autosize', () => ({
@@ -52,7 +52,7 @@ describe('TagInput autosize interop', () => {
       update: vi.fn(),
       promise: vi.fn(),
     })
-    vi.doMock('@/app/components/base/ui/toast', () => ({
+    vi.doMock('@langgenius/dify-ui/toast', () => ({
       toast,
     }))
     vi.doMock('react-18-input-autosize', () => ({
diff --git a/web/app/components/base/tag-input/index.tsx b/web/app/components/base/tag-input/index.tsx
index e4e3cc2528..8312a890a5 100644
--- a/web/app/components/base/tag-input/index.tsx
+++ b/web/app/components/base/tag-input/index.tsx
@@ -1,9 +1,9 @@
 import type { ChangeEvent, FC, KeyboardEvent } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useState } from 'react'
 import _AutosizeInput from 'react-18-input-autosize'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 // CJS/ESM interop: Turbopack may resolve the module namespace object instead of the default export
 // eslint-disable-next-line ts/no-explicit-any
 const AutosizeInput = ('default' in (_AutosizeInput as any) ? (_AutosizeInput as any).default : _AutosizeInput) as typeof _AutosizeInput
diff --git a/web/app/components/base/tag-management/__tests__/index.spec.tsx b/web/app/components/base/tag-management/__tests__/index.spec.tsx
index d10af68ef7..04d9bdd11f 100644
--- a/web/app/components/base/tag-management/__tests__/index.spec.tsx
+++ b/web/app/components/base/tag-management/__tests__/index.spec.tsx
@@ -21,7 +21,7 @@ const { mockNotify, mockToast } = vi.hoisted(() => {
   return { mockNotify, mockToast }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
diff --git a/web/app/components/base/tag-management/__tests__/panel.spec.tsx b/web/app/components/base/tag-management/__tests__/panel.spec.tsx
index 4f98549783..a2ddb93745 100644
--- a/web/app/components/base/tag-management/__tests__/panel.spec.tsx
+++ b/web/app/components/base/tag-management/__tests__/panel.spec.tsx
@@ -21,7 +21,7 @@ const { mockNotify, mockToast } = vi.hoisted(() => {
   return { mockNotify, mockToast }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
diff --git a/web/app/components/base/tag-management/__tests__/selector.spec.tsx b/web/app/components/base/tag-management/__tests__/selector.spec.tsx
index b12ed449d0..84fa351cfa 100644
--- a/web/app/components/base/tag-management/__tests__/selector.spec.tsx
+++ b/web/app/components/base/tag-management/__tests__/selector.spec.tsx
@@ -18,7 +18,7 @@ const { mockToast } = vi.hoisted(() => {
   return { mockToast }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
diff --git a/web/app/components/base/tag-management/__tests__/tag-item-editor.spec.tsx b/web/app/components/base/tag-management/__tests__/tag-item-editor.spec.tsx
index efad0a8b51..2f7a65b1b4 100644
--- a/web/app/components/base/tag-management/__tests__/tag-item-editor.spec.tsx
+++ b/web/app/components/base/tag-management/__tests__/tag-item-editor.spec.tsx
@@ -30,7 +30,7 @@ vi.mock('@/service/tag', () => ({
   deleteTag: tagMocks.deleteTag,
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: tagMocks.api,
 }))
 
diff --git a/web/app/components/base/tag-management/filter.tsx b/web/app/components/base/tag-management/filter.tsx
index 30eba33e27..01729c43af 100644
--- a/web/app/components/base/tag-management/filter.tsx
+++ b/web/app/components/base/tag-management/filter.tsx
@@ -1,16 +1,16 @@
 import type { FC } from 'react'
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
 import { useMount } from 'ahooks'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Tag01, Tag03 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
 import Input from '@/app/components/base/input'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/app/components/base/ui/popover'
 import { fetchTagList } from '@/service/tag'
 
 import { useStore as useTagStore } from './store'
diff --git a/web/app/components/base/tag-management/index.stories.tsx b/web/app/components/base/tag-management/index.stories.tsx
index 3206891d5d..6ab2fcb926 100644
--- a/web/app/components/base/tag-management/index.stories.tsx
+++ b/web/app/components/base/tag-management/index.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import type { Tag } from './constant'
+import { ToastHost } from '@langgenius/dify-ui/toast'
 import { useEffect, useRef } from 'react'
-import { ToastHost } from '@/app/components/base/ui/toast'
 import TagManagementModal from '.'
 import { useStore as useTagStore } from './store'
 
diff --git a/web/app/components/base/tag-management/index.tsx b/web/app/components/base/tag-management/index.tsx
index 8e693fb9f1..6a050de834 100644
--- a/web/app/components/base/tag-management/index.tsx
+++ b/web/app/components/base/tag-management/index.tsx
@@ -1,8 +1,8 @@
 'use client'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { toast } from '@/app/components/base/ui/toast'
 import { createTag, fetchTagList } from '@/service/tag'
 import { useStore as useTagStore } from './store'
 import TagItemEditor from './tag-item-editor'
diff --git a/web/app/components/base/tag-management/panel.tsx b/web/app/components/base/tag-management/panel.tsx
index db0aae1b05..3f64355c43 100644
--- a/web/app/components/base/tag-management/panel.tsx
+++ b/web/app/components/base/tag-management/panel.tsx
@@ -1,5 +1,6 @@
 import type { TagSelectorProps } from './selector'
 import type { Tag } from '@/app/components/base/tag-management/constant'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useUnmount } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
@@ -8,7 +9,6 @@ import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
 import Divider from '@/app/components/base/divider'
 import Input from '@/app/components/base/input'
-import { toast } from '@/app/components/base/ui/toast'
 import { bindTag, createTag, unBindTag } from '@/service/tag'
 import { useStore as useTagStore } from './store'
 
diff --git a/web/app/components/base/tag-management/selector.tsx b/web/app/components/base/tag-management/selector.tsx
index a6d4c04413..0eb233ba4b 100644
--- a/web/app/components/base/tag-management/selector.tsx
+++ b/web/app/components/base/tag-management/selector.tsx
@@ -1,13 +1,13 @@
 import type { FC } from 'react'
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useCallback, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/app/components/base/ui/popover'
+} from '@langgenius/dify-ui/popover'
+import { useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { fetchTagList } from '@/service/tag'
 import Panel from './panel'
 import { useStore as useTagStore } from './store'
diff --git a/web/app/components/base/tag-management/tag-item-editor.tsx b/web/app/components/base/tag-management/tag-item-editor.tsx
index 80555221e6..777abec139 100644
--- a/web/app/components/base/tag-management/tag-item-editor.tsx
+++ b/web/app/components/base/tag-management/tag-item-editor.tsx
@@ -1,10 +1,5 @@
 import type { FC } from 'react'
 import type { Tag } from '@/app/components/base/tag-management/constant'
-import { cn } from '@langgenius/dify-ui/cn'
-import { useDebounceFn } from 'ahooks'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Tooltip from '@/app/components/base/tooltip'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -13,8 +8,13 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/alert-dialog'
+import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
+import { useDebounceFn } from 'ahooks'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Tooltip from '@/app/components/base/tooltip'
 import { deleteTag, updateTag } from '@/service/tag'
 import { useStore as useTagStore } from './store'
 
diff --git a/web/app/components/base/tag-management/tag-remove-modal.tsx b/web/app/components/base/tag-management/tag-remove-modal.tsx
index 41ac072850..1088ca2043 100644
--- a/web/app/components/base/tag-management/tag-remove-modal.tsx
+++ b/web/app/components/base/tag-management/tag-remove-modal.tsx
@@ -1,12 +1,12 @@
 'use client'
 
 import type { Tag } from '@/app/components/base/tag-management/constant'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { noop } from 'es-toolkit/function'
 import { useTranslation } from 'react-i18next'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 
 type TagRemoveModalProps = {
   show: boolean
diff --git a/web/app/components/base/text-generation/__tests__/hooks.spec.ts b/web/app/components/base/text-generation/__tests__/hooks.spec.ts
index f2073f3dce..50c68b4eab 100644
--- a/web/app/components/base/text-generation/__tests__/hooks.spec.ts
+++ b/web/app/components/base/text-generation/__tests__/hooks.spec.ts
@@ -5,7 +5,7 @@ import { useTextGeneration } from '../hooks'
 const mockNotify = vi.fn()
 const mockSsePost = vi.fn<(url: string, fetchOptions: { body: Record<string, unknown> }, otherOptions: IOtherOptions) => void>()
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: (args: unknown) => mockNotify(args),
   },
diff --git a/web/app/components/base/text-generation/hooks.ts b/web/app/components/base/text-generation/hooks.ts
index 0329cff110..54dc8d8e96 100644
--- a/web/app/components/base/text-generation/hooks.ts
+++ b/web/app/components/base/text-generation/hooks.ts
@@ -1,6 +1,6 @@
+import { toast } from '@langgenius/dify-ui/toast'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { ssePost } from '@/service/base'
 
 export const useTextGeneration = () => {
diff --git a/web/app/components/base/tooltip/index.tsx b/web/app/components/base/tooltip/index.tsx
index ab5dbf1710..0bf7659635 100644
--- a/web/app/components/base/tooltip/index.tsx
+++ b/web/app/components/base/tooltip/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 /**
- * @deprecated Use `@/app/components/base/ui/tooltip` instead.
+ * @deprecated Use `@langgenius/dify-ui/tooltip` instead.
  * This component will be removed after migration is complete.
  * See: https://github.com/langgenius/dify/issues/32767
  */
diff --git a/web/app/components/base/user-avatar-list/index.tsx b/web/app/components/base/user-avatar-list/index.tsx
index fc2ce60572..c1bb340a41 100644
--- a/web/app/components/base/user-avatar-list/index.tsx
+++ b/web/app/components/base/user-avatar-list/index.tsx
@@ -1,7 +1,7 @@
+import type { AvatarSize } from '@langgenius/dify-ui/avatar'
 import type { FC } from 'react'
-import type { AvatarSize } from '@/app/components/base/ui/avatar'
+import { AvatarFallback, AvatarImage, AvatarRoot } from '@langgenius/dify-ui/avatar'
 import { memo } from 'react'
-import { AvatarFallback, AvatarImage, AvatarRoot } from '@/app/components/base/ui/avatar'
 import { getUserColor } from '@/app/components/workflow/collaboration/utils/user-color'
 import { useAppContext } from '@/context/app-context'
 
diff --git a/web/app/components/billing/apps-full-in-dialog/index.tsx b/web/app/components/billing/apps-full-in-dialog/index.tsx
index e981bf74eb..dc26c8e231 100644
--- a/web/app/components/billing/apps-full-in-dialog/index.tsx
+++ b/web/app/components/billing/apps-full-in-dialog/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import ProgressBar from '@/app/components/billing/progress-bar'
 import { Plan } from '@/app/components/billing/type'
 import { mailToSupport } from '@/app/components/header/utils/util'
diff --git a/web/app/components/billing/plan-upgrade-modal/index.tsx b/web/app/components/billing/plan-upgrade-modal/index.tsx
index f4f35ec1a4..da599dc36c 100644
--- a/web/app/components/billing/plan-upgrade-modal/index.tsx
+++ b/web/app/components/billing/plan-upgrade-modal/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import { useModalContext } from '@/context/modal-context'
 import { SquareChecklist } from '../../base/icons/src/vender/other'
diff --git a/web/app/components/billing/plan/index.tsx b/web/app/components/billing/plan/index.tsx
index ee21268078..49d4ffa779 100644
--- a/web/app/components/billing/plan/index.tsx
+++ b/web/app/components/billing/plan/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiBook2Line,
   RiFileEditLine,
@@ -11,7 +12,6 @@ import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ApiAggregate, TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
-import { Button } from '@/app/components/base/ui/button'
 import UsageInfo from '@/app/components/billing/usage-info'
 import { EDUCATION_VERIFYING_LOCALSTORAGE_ITEM } from '@/app/education-apply/constants'
 import VerifyStateModal from '@/app/education-apply/verify-state-modal'
diff --git a/web/app/components/billing/pricing/__tests__/dialog.spec.tsx b/web/app/components/billing/pricing/__tests__/dialog.spec.tsx
index c832e52fb2..c1ed3898de 100644
--- a/web/app/components/billing/pricing/__tests__/dialog.spec.tsx
+++ b/web/app/components/billing/pricing/__tests__/dialog.spec.tsx
@@ -16,7 +16,7 @@ type DialogProps = {
 
 let latestOnOpenChange: DialogProps['onOpenChange']
 
-vi.mock('@/app/components/base/ui/dialog', () => ({
+vi.mock('@langgenius/dify-ui/dialog', () => ({
   Dialog: ({ children, onOpenChange }: DialogProps) => {
     latestOnOpenChange = onOpenChange
     return <div data-testid="dialog">{children}</div>
diff --git a/web/app/components/billing/pricing/__tests__/header.spec.tsx b/web/app/components/billing/pricing/__tests__/header.spec.tsx
index cb8991ff42..7f156ad7a3 100644
--- a/web/app/components/billing/pricing/__tests__/header.spec.tsx
+++ b/web/app/components/billing/pricing/__tests__/header.spec.tsx
@@ -1,6 +1,6 @@
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
 import Header from '../header'
 
 function renderHeader(onClose: () => void) {
diff --git a/web/app/components/billing/pricing/header.tsx b/web/app/components/billing/pricing/header.tsx
index 8ece685a58..1ebcae622e 100644
--- a/web/app/components/billing/pricing/header.tsx
+++ b/web/app/components/billing/pricing/header.tsx
@@ -1,8 +1,8 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { DialogDescription, DialogTitle } from '@langgenius/dify-ui/dialog'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
-import { DialogDescription, DialogTitle } from '@/app/components/base/ui/dialog'
 import DifyLogo from '../../base/logo/dify-logo'
 import styles from './header.module.css'
 
diff --git a/web/app/components/billing/pricing/index.tsx b/web/app/components/billing/pricing/index.tsx
index 6b943bde7d..cd88be5fb3 100644
--- a/web/app/components/billing/pricing/index.tsx
+++ b/web/app/components/billing/pricing/index.tsx
@@ -1,9 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { Category } from './types'
-import * as React from 'react'
-import { useState } from 'react'
-import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import {
   ScrollAreaContent,
   ScrollAreaCorner,
@@ -11,7 +9,9 @@ import {
   ScrollAreaScrollbar,
   ScrollAreaThumb,
   ScrollAreaViewport,
-} from '@/app/components/base/ui/scroll-area'
+} from '@langgenius/dify-ui/scroll-area'
+import * as React from 'react'
+import { useState } from 'react'
 import { useAppContext } from '@/context/app-context'
 import { useGetPricingPageLanguage } from '@/context/i18n'
 import { useProviderContext } from '@/context/provider-context'
diff --git a/web/app/components/billing/pricing/plan-switcher/plan-range-switcher.tsx b/web/app/components/billing/pricing/plan-switcher/plan-range-switcher.tsx
index 55700385d9..163a315e2f 100644
--- a/web/app/components/billing/pricing/plan-switcher/plan-range-switcher.tsx
+++ b/web/app/components/billing/pricing/plan-switcher/plan-range-switcher.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { Switch } from '@langgenius/dify-ui/switch'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Switch from '../../../base/switch'
 
 export enum PlanRange {
   monthly = 'monthly',
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/__tests__/index.spec.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/__tests__/index.spec.tsx
index a4b8888b27..cb83fdc366 100644
--- a/web/app/components/billing/pricing/plans/cloud-plan-item/__tests__/index.spec.tsx
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/__tests__/index.spec.tsx
@@ -1,7 +1,7 @@
 import type { Mock } from 'vitest'
+import { toast, ToastHost } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import { toast, ToastHost } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { useAsyncWindowOpen } from '@/hooks/use-async-window-open'
 import { fetchSubscriptionUrls } from '@/service/billing'
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx
index 99d956ba90..53d5025f08 100644
--- a/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import type { BasicPlan } from '../../../type'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { useAsyncWindowOpen } from '@/hooks/use-async-window-open'
 import { fetchSubscriptionUrls } from '@/service/billing'
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/__tests__/index.spec.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/__tests__/index.spec.tsx
index 103b188046..1a2a8b10a1 100644
--- a/web/app/components/billing/pricing/plans/self-hosted-plan-item/__tests__/index.spec.tsx
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/__tests__/index.spec.tsx
@@ -1,7 +1,7 @@
 import type { Mock } from 'vitest'
+import { toast, ToastHost } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { toast, ToastHost } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../../../../config'
 import { SelfHostedPlan } from '../../../../type'
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
index fa6e9a45c9..8dee91d4a2 100644
--- a/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Azure, GoogleCloud } from '@/app/components/base/icons/src/public/billing'
-import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../../../config'
 import { SelfHostedPlan } from '../../../type'
diff --git a/web/app/components/billing/upgrade-btn/index.tsx b/web/app/components/billing/upgrade-btn/index.tsx
index 510ab4c18f..5eb1eb1d7f 100644
--- a/web/app/components/billing/upgrade-btn/index.tsx
+++ b/web/app/components/billing/upgrade-btn/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { CSSProperties, FC } from 'react'
 import type { I18nKeysWithPrefix } from '@/types/i18n'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
-import { Button } from '@/app/components/base/ui/button'
 import { useModalContext } from '@/context/modal-context'
 import PremiumBadge from '../../base/premium-badge'
 
diff --git a/web/app/components/custom/custom-page/__tests__/index.spec.tsx b/web/app/components/custom/custom-page/__tests__/index.spec.tsx
index 5514d21b50..d6cc15ed2b 100644
--- a/web/app/components/custom/custom-page/__tests__/index.spec.tsx
+++ b/web/app/components/custom/custom-page/__tests__/index.spec.tsx
@@ -47,7 +47,7 @@ vi.mock('@/context/app-context', async (importOriginal) => {
 vi.mock('@/context/global-public-context', () => ({
   useGlobalPublicStore: vi.fn(),
 }))
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
diff --git a/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx b/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
index c92ef14c9f..1ea03c7bc6 100644
--- a/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
+++ b/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
@@ -1,5 +1,5 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
-import { Button } from '@/app/components/base/ui/button'
 import PoweredByBrand from './powered-by-brand'
 
 type ChatPreviewCardProps = {
diff --git a/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx b/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
index 0b9b61d94c..b4f30827bc 100644
--- a/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
+++ b/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
@@ -1,5 +1,5 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
-import { Button } from '@/app/components/base/ui/button'
 import PoweredByBrand from './powered-by-brand'
 
 type WorkflowPreviewCardProps = {
diff --git a/web/app/components/custom/custom-web-app-brand/hooks/__tests__/use-web-app-brand.spec.tsx b/web/app/components/custom/custom-web-app-brand/hooks/__tests__/use-web-app-brand.spec.tsx
index a2730ffd27..3ca7c34b84 100644
--- a/web/app/components/custom/custom-web-app-brand/hooks/__tests__/use-web-app-brand.spec.tsx
+++ b/web/app/components/custom/custom-web-app-brand/hooks/__tests__/use-web-app-brand.spec.tsx
@@ -33,7 +33,7 @@ const { mockNotify, mockToast } = vi.hoisted(() => {
   return { mockNotify, mockToast }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 vi.mock('@/service/common', () => ({
diff --git a/web/app/components/custom/custom-web-app-brand/hooks/use-web-app-brand.ts b/web/app/components/custom/custom-web-app-brand/hooks/use-web-app-brand.ts
index 44810de1fd..145e7ee806 100644
--- a/web/app/components/custom/custom-web-app-brand/hooks/use-web-app-brand.ts
+++ b/web/app/components/custom/custom-web-app-brand/hooks/use-web-app-brand.ts
@@ -1,8 +1,8 @@
 import type { ChangeEvent } from 'react'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getImageUploadErrorMessage, imageUpload } from '@/app/components/base/image-uploader/utils'
-import { toast } from '@/app/components/base/ui/toast'
 import { Plan } from '@/app/components/billing/type'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
diff --git a/web/app/components/custom/custom-web-app-brand/index.tsx b/web/app/components/custom/custom-web-app-brand/index.tsx
index 5dbb76f8c6..53e6ff36ec 100644
--- a/web/app/components/custom/custom-web-app-brand/index.tsx
+++ b/web/app/components/custom/custom-web-app-brand/index.tsx
@@ -1,8 +1,8 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import Switch from '@/app/components/base/switch'
-import { Button } from '@/app/components/base/ui/button'
 import ChatPreviewCard from './components/chat-preview-card'
 import WorkflowPreviewCard from './components/workflow-preview-card'
 import useWebAppBrand from './hooks/use-web-app-brand'
diff --git a/web/app/components/datasets/common/document-status-with-action/__tests__/auto-disabled-document.spec.tsx b/web/app/components/datasets/common/document-status-with-action/__tests__/auto-disabled-document.spec.tsx
index fcaca86e89..ba058860d3 100644
--- a/web/app/components/datasets/common/document-status-with-action/__tests__/auto-disabled-document.spec.tsx
+++ b/web/app/components/datasets/common/document-status-with-action/__tests__/auto-disabled-document.spec.tsx
@@ -1,6 +1,6 @@
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { toast } from '@/app/components/base/ui/toast'
 
 import { useAutoDisabledDocuments } from '@/service/knowledge/use-document'
 import AutoDisabledDocument from '../auto-disabled-document'
@@ -30,7 +30,7 @@ vi.mock('@/service/knowledge/use-document', () => ({
   useInvalidDisabledDocument: vi.fn(() => mockInvalidDisabledDocument),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: mockToastSuccess,
   },
diff --git a/web/app/components/datasets/common/document-status-with-action/auto-disabled-document.tsx b/web/app/components/datasets/common/document-status-with-action/auto-disabled-document.tsx
index c6c7e03bd1..c150ac823f 100644
--- a/web/app/components/datasets/common/document-status-with-action/auto-disabled-document.tsx
+++ b/web/app/components/datasets/common/document-status-with-action/auto-disabled-document.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useAutoDisabledDocuments, useDocumentEnable, useInvalidDisabledDocument } from '@/service/knowledge/use-document'
 import StatusWithAction from './status-with-action'
 
diff --git a/web/app/components/datasets/common/image-previewer/index.tsx b/web/app/components/datasets/common/image-previewer/index.tsx
index 2cc51a3be5..42b4ce33a9 100644
--- a/web/app/components/datasets/common/image-previewer/index.tsx
+++ b/web/app/components/datasets/common/image-previewer/index.tsx
@@ -1,9 +1,9 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { RiArrowLeftLine, RiArrowRightLine, RiCloseLine, RiRefreshLine } from '@remixicon/react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useHotkeys } from 'react-hotkeys-hook'
 import Loading from '@/app/components/base/loading'
-import { Button } from '@/app/components/base/ui/button'
 import { formatFileSize } from '@/utils/format'
 
 type CachedImage = {
diff --git a/web/app/components/datasets/common/image-uploader/hooks/__tests__/use-upload.spec.tsx b/web/app/components/datasets/common/image-uploader/hooks/__tests__/use-upload.spec.tsx
index 47a29fcfa1..53354deede 100644
--- a/web/app/components/datasets/common/image-uploader/hooks/__tests__/use-upload.spec.tsx
+++ b/web/app/components/datasets/common/image-uploader/hooks/__tests__/use-upload.spec.tsx
@@ -1,9 +1,9 @@
 import type { PropsWithChildren } from 'react'
 import type { FileEntity } from '../../types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { act, fireEvent, render, renderHook, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { toast } from '@/app/components/base/ui/toast'
 import { FileContextProvider } from '../../store'
 import { useUpload } from '../use-upload'
 
@@ -21,7 +21,7 @@ vi.mock('@/service/use-common', () => ({
   })),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: mockToastError,
   },
diff --git a/web/app/components/datasets/common/image-uploader/hooks/use-upload.ts b/web/app/components/datasets/common/image-uploader/hooks/use-upload.ts
index 2c8bc611dc..d07c0952fb 100644
--- a/web/app/components/datasets/common/image-uploader/hooks/use-upload.ts
+++ b/web/app/components/datasets/common/image-uploader/hooks/use-upload.ts
@@ -1,10 +1,10 @@
 import type { FileEntity, FileUploadConfig } from '../types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { produce } from 'immer'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { v4 as uuid4 } from 'uuid'
 import { fileUpload, getFileUploadErrorMessage } from '@/app/components/base/file-uploader/utils'
-import { toast } from '@/app/components/base/ui/toast'
 import { useFileUploadConfig } from '@/service/use-common'
 import { ACCEPT_TYPES } from '../constants'
 import { useFileStore } from '../store'
diff --git a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-item.tsx b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-item.tsx
index e02c29399e..af405b6301 100644
--- a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-item.tsx
+++ b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-item.tsx
@@ -1,4 +1,5 @@
 import type { FileEntity } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiCloseLine,
 } from '@remixicon/react'
@@ -9,7 +10,6 @@ import {
 import FileImageRender from '@/app/components/base/file-uploader/file-image-render'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
-import { Button } from '@/app/components/base/ui/button'
 import { fileIsUploaded } from '../utils'
 
 type ImageItemProps = {
diff --git a/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-item.tsx b/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-item.tsx
index 9e5c044e77..49c95852be 100644
--- a/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-item.tsx
+++ b/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-item.tsx
@@ -1,4 +1,5 @@
 import type { FileEntity } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiCloseLine,
 } from '@remixicon/react'
@@ -9,7 +10,6 @@ import {
 import FileImageRender from '@/app/components/base/file-uploader/file-image-render'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
-import { Button } from '@/app/components/base/ui/button'
 import { fileIsUploaded } from '../utils'
 
 type ImageItemProps = {
diff --git a/web/app/components/datasets/common/retrieval-param-config/__tests__/index.spec.tsx b/web/app/components/datasets/common/retrieval-param-config/__tests__/index.spec.tsx
index 6566aa5951..1b208c549d 100644
--- a/web/app/components/datasets/common/retrieval-param-config/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/common/retrieval-param-config/__tests__/index.spec.tsx
@@ -5,7 +5,7 @@ import { RETRIEVE_METHOD } from '@/types/app'
 import RetrievalParamConfig from '../index'
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (message: string) => mockNotify(message),
   },
@@ -122,8 +122,8 @@ vi.mock('@/app/components/base/radio-card', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/switch', () => ({
-  default: ({ checked, onCheckedChange }: { checked: boolean, onCheckedChange?: (v: boolean) => void }) => (
+vi.mock('@langgenius/dify-ui/switch', () => ({
+  Switch: ({ checked, onCheckedChange }: { checked: boolean, onCheckedChange?: (v: boolean) => void }) => (
     <button
       data-testid="rerank-switch"
       data-checked={checked}
diff --git a/web/app/components/datasets/common/retrieval-param-config/index.tsx b/web/app/components/datasets/common/retrieval-param-config/index.tsx
index 9f227baa22..8514e1fae2 100644
--- a/web/app/components/datasets/common/retrieval-param-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-param-config/index.tsx
@@ -3,6 +3,8 @@ import type { FC } from 'react'
 import type { RetrievalConfig } from '@/types/app'
 import { cn } from '@langgenius/dify-ui/cn'
 
+import { Switch } from '@langgenius/dify-ui/switch'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -11,9 +13,7 @@ import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/aler
 import ScoreThresholdItem from '@/app/components/base/param-item/score-threshold-item'
 import TopKItem from '@/app/components/base/param-item/top-k-item'
 import RadioCard from '@/app/components/base/radio-card'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
-import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useCurrentProviderAndModel, useModelListAndDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/index.spec.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/index.spec.tsx
index 7719c5b744..b5c73f3422 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/index.spec.tsx
@@ -52,7 +52,7 @@ const toastMocks = vi.hoisted(() => {
   }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: toastMocks.api,
 }))
 
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/uploader.spec.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/uploader.spec.tsx
index f553f491e5..f4263ab439 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/uploader.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/uploader.spec.tsx
@@ -16,7 +16,7 @@ const { mockToast } = vi.hoisted(() => {
   return { mockToast }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx
index 59ba840a07..d0c97e185c 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx
@@ -1,6 +1,6 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 
 type DSLConfirmModalProps = {
   versions?: {
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/__tests__/use-dsl-import.spec.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/__tests__/use-dsl-import.spec.tsx
index 2a0f7f2cf0..b95fa4d5db 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/__tests__/use-dsl-import.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/__tests__/use-dsl-import.spec.tsx
@@ -49,7 +49,7 @@ const toastMocks = vi.hoisted(() => {
   }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: toastMocks.api,
 }))
 
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts
index 992d0526be..e085ffe1bc 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts
@@ -1,8 +1,8 @@
 'use client'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useDebounceFn } from 'ahooks'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { DSLImportMode, DSLImportStatus } from '@/models/app'
 import { useRouter } from '@/next/navigation'
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
index ab311bd699..4f5b5c23fd 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
@@ -1,10 +1,10 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
 import { useKeyPress } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 import DSLConfirmModal from './dsl-confirm-modal'
 import Header from './header'
 import { CreateFromDSLModalTab, useDSLImport } from './hooks/use-dsl-import'
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
index 69b8d07ce8..f0499c6965 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiDeleteBinLine, RiNodeTree, RiUploadCloud2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import { toast } from '@/app/components/base/ui/toast'
 import { formatFileSize } from '@/utils/format'
 
 type Props = {
diff --git a/web/app/components/datasets/create-from-pipeline/header.tsx b/web/app/components/datasets/create-from-pipeline/header.tsx
index bc34c79d38..7b680a1e94 100644
--- a/web/app/components/datasets/create-from-pipeline/header.tsx
+++ b/web/app/components/datasets/create-from-pipeline/header.tsx
@@ -1,7 +1,7 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { RiArrowLeftLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import Link from '@/next/link'
 
 const Header = () => {
diff --git a/web/app/components/datasets/create-from-pipeline/list/__tests__/create-card.spec.tsx b/web/app/components/datasets/create-from-pipeline/list/__tests__/create-card.spec.tsx
index 773e7e7f74..57f6b00819 100644
--- a/web/app/components/datasets/create-from-pipeline/list/__tests__/create-card.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/__tests__/create-card.spec.tsx
@@ -18,8 +18,8 @@ const { mockToastSuccess, mockToastError } = vi.hoisted(() => ({
   mockToastError: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
+vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
   return {
     ...actual,
     toast: {
diff --git a/web/app/components/datasets/create-from-pipeline/list/create-card.tsx b/web/app/components/datasets/create-from-pipeline/list/create-card.tsx
index 3d75a31a3b..25f538c1c2 100644
--- a/web/app/components/datasets/create-from-pipeline/list/create-card.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/create-card.tsx
@@ -1,9 +1,9 @@
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiAddCircleLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import { toast } from '@/app/components/base/ui/toast'
 import { useRouter } from '@/next/navigation'
 import { useCreatePipelineDataset } from '@/service/knowledge/use-create-dataset'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/edit-pipeline-info.spec.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/edit-pipeline-info.spec.tsx
index d7f990aa82..f0867545cc 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/edit-pipeline-info.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/edit-pipeline-info.spec.tsx
@@ -18,8 +18,8 @@ const { mockToastError } = vi.hoisted(() => ({
   mockToastError: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
+vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
   return {
     ...actual,
     toast: {
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx
index 43c2023437..bcf2c068ef 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx
@@ -19,8 +19,8 @@ const { mockToastSuccess, mockToastError } = vi.hoisted(() => ({
   mockToastError: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
+vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
   return {
     ...actual,
     toast: {
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/actions.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/actions.tsx
index af366b0188..34b0673c59 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/actions.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/actions.tsx
@@ -1,12 +1,12 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 import Operations from './operations'
 
 type ActionsProps = {
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx
index aa3b4b7b5b..22866b0b9e 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx
@@ -1,4 +1,5 @@
 import type { AppIconType } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiAddLine, RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useMemo } from 'react'
@@ -6,7 +7,6 @@ import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import Loading from '@/app/components/base/loading'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import WorkflowPreview from '@/app/components/workflow/workflow-preview'
 import { usePipelineTemplateById } from '@/service/use-pipeline'
 import ChunkStructureCard from './chunk-structure-card'
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx
index 73f7123146..2cf2782185 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx
@@ -1,5 +1,7 @@
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import type { PipelineTemplate } from '@/models/pipeline'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useRef, useState } from 'react'
@@ -8,8 +10,6 @@ import AppIcon from '@/app/components/base/app-icon'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { useInvalidCustomizedTemplateList, useUpdateTemplateInfo } from '@/service/use-pipeline'
 
 type EditPipelineInfoProps = {
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
index 5fa3511e7c..03bda31f1f 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
@@ -1,9 +1,4 @@
 import type { PipelineTemplate } from '@/models/pipeline'
-import * as React from 'react'
-import { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { trackEvent } from '@/app/components/base/amplitude'
-import Modal from '@/app/components/base/modal'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -12,8 +7,13 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/alert-dialog'
+import { toast } from '@langgenius/dify-ui/toast'
+import * as React from 'react'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { trackEvent } from '@/app/components/base/amplitude'
+import Modal from '@/app/components/base/modal'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { useRouter } from '@/next/navigation'
 import { useCreatePipelineDatasetFromCustomized } from '@/service/knowledge/use-create-dataset'
diff --git a/web/app/components/datasets/create/embedding-process/index.tsx b/web/app/components/datasets/create/embedding-process/index.tsx
index 93840efc9e..bb577a8dd2 100644
--- a/web/app/components/datasets/create/embedding-process/index.tsx
+++ b/web/app/components/datasets/create/embedding-process/index.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import type { FullDocumentDetail } from '@/models/datasets'
 import type { RETRIEVE_METHOD } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiArrowRightLine,
   RiLoader2Fill,
@@ -9,7 +10,6 @@ import {
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import { Button } from '@/app/components/base/ui/button'
 import { Plan } from '@/app/components/billing/type'
 import { useProviderContext } from '@/context/provider-context'
 import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
diff --git a/web/app/components/datasets/create/empty-dataset-creation-modal/__tests__/index.spec.tsx b/web/app/components/datasets/create/empty-dataset-creation-modal/__tests__/index.spec.tsx
index 8b8e0a6769..a9b91fb1bc 100644
--- a/web/app/components/datasets/create/empty-dataset-creation-modal/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/empty-dataset-creation-modal/__tests__/index.spec.tsx
@@ -18,7 +18,7 @@ const { mockNotify, mockToast } = vi.hoisted(() => {
   return { mockNotify, mockToast }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
diff --git a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
index 581082ca75..fdb032b1ef 100644
--- a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
+++ b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
@@ -1,13 +1,13 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { useRouter } from '@/next/navigation'
 import { createEmptyDataset } from '@/service/datasets'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
diff --git a/web/app/components/datasets/create/file-uploader/hooks/__tests__/use-file-upload.spec.tsx b/web/app/components/datasets/create/file-uploader/hooks/__tests__/use-file-upload.spec.tsx
index bde599320c..74cd91c6d0 100644
--- a/web/app/components/datasets/create/file-uploader/hooks/__tests__/use-file-upload.spec.tsx
+++ b/web/app/components/datasets/create/file-uploader/hooks/__tests__/use-file-upload.spec.tsx
@@ -10,7 +10,7 @@ import { useFileUpload } from '../use-file-upload'
 // Mock notify function
 const mockNotify = vi.fn()
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (message: string) => mockNotify({ type: 'error', message }),
   },
diff --git a/web/app/components/datasets/create/file-uploader/hooks/use-file-upload.ts b/web/app/components/datasets/create/file-uploader/hooks/use-file-upload.ts
index 05827d0a9e..8345d11d29 100644
--- a/web/app/components/datasets/create/file-uploader/hooks/use-file-upload.ts
+++ b/web/app/components/datasets/create/file-uploader/hooks/use-file-upload.ts
@@ -1,10 +1,10 @@
 'use client'
 import type { RefObject } from 'react'
 import type { CustomFile as File, FileItem } from '@/models/datasets'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getFileUploadErrorMessage } from '@/app/components/base/file-uploader/utils'
-import { toast } from '@/app/components/base/ui/toast'
 import { IS_CE_EDITION } from '@/config'
 import { useLocale } from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n-config/language'
diff --git a/web/app/components/datasets/create/step-one/components/next-step-button.tsx b/web/app/components/datasets/create/step-one/components/next-step-button.tsx
index 9a343ae745..10da1b47f7 100644
--- a/web/app/components/datasets/create/step-one/components/next-step-button.tsx
+++ b/web/app/components/datasets/create/step-one/components/next-step-button.tsx
@@ -1,8 +1,8 @@
 'use client'
 
+import { Button } from '@langgenius/dify-ui/button'
 import { RiArrowRightLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 type NextStepButtonProps = {
   disabled: boolean
diff --git a/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx b/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx
index c3e506fc02..e2be96da86 100644
--- a/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx
+++ b/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx
@@ -2,6 +2,7 @@
 
 import type { FC } from 'react'
 import type { PreProcessingRule, SummaryIndexSetting as SummaryIndexSettingType } from '@/models/datasets'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiAlertFill,
   RiSearchEyeLine,
@@ -10,7 +11,6 @@ import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
 import Divider from '@/app/components/base/divider'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import SummaryIndexSetting from '@/app/components/datasets/settings/summary-index-setting'
 import { IS_CE_EDITION } from '@/config'
 import { ChunkingMode } from '@/models/datasets'
diff --git a/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx b/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx
index 156cb922b3..1639df2320 100644
--- a/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx
+++ b/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx
@@ -3,6 +3,7 @@
 import type { FC } from 'react'
 import type { DefaultModel, Model } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { RetrievalConfig } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
@@ -10,7 +11,6 @@ import CustomDialog from '@/app/components/base/dialog'
 import Divider from '@/app/components/base/divider'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
 import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
diff --git a/web/app/components/datasets/create/step-two/components/inputs.tsx b/web/app/components/datasets/create/step-two/components/inputs.tsx
index 4733852d19..12af1de1aa 100644
--- a/web/app/components/datasets/create/step-two/components/inputs.tsx
+++ b/web/app/components/datasets/create/step-two/components/inputs.tsx
@@ -1,10 +1,6 @@
+import type { NumberFieldInputProps, NumberFieldRootProps, NumberFieldSize } from '@langgenius/dify-ui/number-field'
 import type { FC, PropsWithChildren, ReactNode } from 'react'
 import type { InputProps } from '@/app/components/base/input'
-import type { NumberFieldInputProps, NumberFieldRootProps, NumberFieldSize } from '@/app/components/base/ui/number-field'
-import { useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Input from '@/app/components/base/input'
-import Tooltip from '@/app/components/base/tooltip'
 import {
   NumberField,
   NumberFieldControls,
@@ -13,7 +9,11 @@ import {
   NumberFieldIncrement,
   NumberFieldInput,
   NumberFieldUnit,
-} from '@/app/components/base/ui/number-field'
+} from '@langgenius/dify-ui/number-field'
+import { useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '@/app/components/base/input'
+import Tooltip from '@/app/components/base/tooltip'
 import { env } from '@/env'
 
 const TextLabel: FC<PropsWithChildren> = (props) => {
diff --git a/web/app/components/datasets/create/step-two/components/parent-child-options.tsx b/web/app/components/datasets/create/step-two/components/parent-child-options.tsx
index e00a9b2880..d3f0509e93 100644
--- a/web/app/components/datasets/create/step-two/components/parent-child-options.tsx
+++ b/web/app/components/datasets/create/step-two/components/parent-child-options.tsx
@@ -3,13 +3,13 @@
 import type { FC } from 'react'
 import type { ParentChildConfig } from '../hooks'
 import type { ParentMode, PreProcessingRule, SummaryIndexSetting as SummaryIndexSettingType } from '@/models/datasets'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiSearchEyeLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
 import Divider from '@/app/components/base/divider'
 import { ParentChildChunk } from '@/app/components/base/icons/src/vender/knowledge'
 import RadioCard from '@/app/components/base/radio-card'
-import { Button } from '@/app/components/base/ui/button'
 import SummaryIndexSetting from '@/app/components/datasets/settings/summary-index-setting'
 import { IS_CE_EDITION } from '@/config'
 import { ChunkingMode } from '@/models/datasets'
diff --git a/web/app/components/datasets/create/step-two/components/step-two-footer.tsx b/web/app/components/datasets/create/step-two/components/step-two-footer.tsx
index 37f15ecd9f..768ed906ae 100644
--- a/web/app/components/datasets/create/step-two/components/step-two-footer.tsx
+++ b/web/app/components/datasets/create/step-two/components/step-two-footer.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiArrowLeftLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 type StepTwoFooterProps = {
   isSetting?: boolean
diff --git a/web/app/components/datasets/create/step-two/hooks/__tests__/use-document-creation.spec.ts b/web/app/components/datasets/create/step-two/hooks/__tests__/use-document-creation.spec.ts
index 7d8cde264b..52099668ec 100644
--- a/web/app/components/datasets/create/step-two/hooks/__tests__/use-document-creation.spec.ts
+++ b/web/app/components/datasets/create/step-two/hooks/__tests__/use-document-creation.spec.ts
@@ -14,7 +14,7 @@ const mocks = vi.hoisted(() => ({
   invalidDatasetList: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: { notify: mocks.toastNotify },
   toast: {
     success: (message: string) => mocks.toastNotify({ type: 'success', message }),
diff --git a/web/app/components/datasets/create/step-two/hooks/use-document-creation.ts b/web/app/components/datasets/create/step-two/hooks/use-document-creation.ts
index 1c80a188e5..27d96e6609 100644
--- a/web/app/components/datasets/create/step-two/hooks/use-document-creation.ts
+++ b/web/app/components/datasets/create/step-two/hooks/use-document-creation.ts
@@ -2,10 +2,10 @@ import type { DefaultModel, Model } from '@/app/components/header/account-settin
 import type { NotionPage } from '@/models/common'
 import type { ChunkingMode, CrawlOptions, CrawlResultItem, CreateDocumentReq, createDocumentResponse, CustomFile, FullDocumentDetail, ProcessRule, SummaryIndexSetting as SummaryIndexSettingType } from '@/models/datasets'
 import type { RetrievalConfig, RETRIEVE_METHOD } from '@/types/app'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import { toast } from '@/app/components/base/ui/toast'
 import { isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import { DataSourceProvider } from '@/models/common'
 import { DataSourceType } from '@/models/datasets'
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index 16e14e35f6..3d87de985f 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -3,10 +3,10 @@
 import type { FC } from 'react'
 import type { StepTwoProps } from './types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import { toast } from '@/app/components/base/ui/toast'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useLocale } from '@/context/i18n'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
diff --git a/web/app/components/datasets/create/step-two/language-select/__tests__/index.spec.tsx b/web/app/components/datasets/create/step-two/language-select/__tests__/index.spec.tsx
index 9c34552988..f75d45c41c 100644
--- a/web/app/components/datasets/create/step-two/language-select/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/step-two/language-select/__tests__/index.spec.tsx
@@ -108,7 +108,7 @@ describe('LanguageSelect', () => {
 
     it('should ignore null values emitted by the select control', async () => {
       vi.resetModules()
-      vi.doMock('@/app/components/base/ui/select', () => ({
+      vi.doMock('@langgenius/dify-ui/select', () => ({
         Select: ({ onValueChange, children }: { onValueChange?: (value: string | null) => void, children: React.ReactNode }) => {
           React.useEffect(() => {
             onValueChange?.(null)
@@ -131,7 +131,7 @@ describe('LanguageSelect', () => {
         expect(onSelect).not.toHaveBeenCalled()
       })
 
-      vi.doUnmock('@/app/components/base/ui/select')
+      vi.doUnmock('@langgenius/dify-ui/select')
     })
   })
 
diff --git a/web/app/components/datasets/create/step-two/language-select/index.tsx b/web/app/components/datasets/create/step-two/language-select/index.tsx
index 4f13ff2752..fdef23ff27 100644
--- a/web/app/components/datasets/create/step-two/language-select/index.tsx
+++ b/web/app/components/datasets/create/step-two/language-select/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger } from '@langgenius/dify-ui/select'
 import * as React from 'react'
-import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger } from '@/app/components/base/ui/select'
 import { languages } from '@/i18n-config/language'
 
 export type ILanguageSelectProps = {
diff --git a/web/app/components/datasets/create/stop-embedding-modal/index.tsx b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
index ac9be31199..93df58d276 100644
--- a/web/app/components/datasets/create/stop-embedding-modal/index.tsx
+++ b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
@@ -1,9 +1,9 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 import s from './index.module.css'
 
 type IProps = {
diff --git a/web/app/components/datasets/create/website/base/crawled-result-item.tsx b/web/app/components/datasets/create/website/base/crawled-result-item.tsx
index 273fe72abe..967e981069 100644
--- a/web/app/components/datasets/create/website/base/crawled-result-item.tsx
+++ b/web/app/components/datasets/create/website/base/crawled-result-item.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
-import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   payload: CrawlResultItemType
diff --git a/web/app/components/datasets/create/website/base/header.tsx b/web/app/components/datasets/create/website/base/header.tsx
index b72d117968..e24a428aa1 100644
--- a/web/app/components/datasets/create/website/base/header.tsx
+++ b/web/app/components/datasets/create/website/base/header.tsx
@@ -1,8 +1,8 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
 import Divider from '@/app/components/base/divider'
-import { Button } from '@/app/components/base/ui/button'
 
 type HeaderProps = {
   isInPipeline?: boolean
diff --git a/web/app/components/datasets/create/website/base/url-input.tsx b/web/app/components/datasets/create/website/base/url-input.tsx
index 21f7d2ca67..6f49235e8b 100644
--- a/web/app/components/datasets/create/website/base/url-input.tsx
+++ b/web/app/components/datasets/create/website/base/url-input.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 import Input from './input'
 
diff --git a/web/app/components/datasets/create/website/firecrawl/index.tsx b/web/app/components/datasets/create/website/firecrawl/index.tsx
index d7d9ad45b9..33aa43b402 100644
--- a/web/app/components/datasets/create/website/firecrawl/index.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContextSelector } from '@/context/modal-context'
 import { checkFirecrawlTaskStatus, createFirecrawlTask } from '@/service/datasets'
diff --git a/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx b/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
index a5045d601f..6b78833ccf 100644
--- a/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 import Input from '../../base/input'
 
diff --git a/web/app/components/datasets/create/website/jina-reader/index.tsx b/web/app/components/datasets/create/website/jina-reader/index.tsx
index 16ab2b414a..0beee86103 100644
--- a/web/app/components/datasets/create/website/jina-reader/index.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContext } from '@/context/modal-context'
 import { checkJinaReaderTaskStatus, createJinaReaderTask } from '@/service/datasets'
diff --git a/web/app/components/datasets/create/website/no-data.tsx b/web/app/components/datasets/create/website/no-data.tsx
index 9bf2c91ec7..0659d10333 100644
--- a/web/app/components/datasets/create/website/no-data.tsx
+++ b/web/app/components/datasets/create/website/no-data.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Icon3Dots } from '@/app/components/base/icons/src/vender/line/others'
-import { Button } from '@/app/components/base/ui/button'
 import { ENABLE_WEBSITE_FIRECRAWL, ENABLE_WEBSITE_JINAREADER, ENABLE_WEBSITE_WATERCRAWL } from '@/config'
 import { DataSourceProvider } from '@/models/common'
 import s from './index.module.css'
diff --git a/web/app/components/datasets/create/website/watercrawl/index.tsx b/web/app/components/datasets/create/website/watercrawl/index.tsx
index 8d371b0740..d8e3c6c067 100644
--- a/web/app/components/datasets/create/website/watercrawl/index.tsx
+++ b/web/app/components/datasets/create/website/watercrawl/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContext } from '@/context/modal-context'
 import { checkWatercrawlTaskStatus, createWatercrawlTask } from '@/service/datasets'
diff --git a/web/app/components/datasets/documents/components/__tests__/operations.spec.tsx b/web/app/components/datasets/documents/components/__tests__/operations.spec.tsx
index c89059d185..637e334166 100644
--- a/web/app/components/datasets/documents/components/__tests__/operations.spec.tsx
+++ b/web/app/components/datasets/documents/components/__tests__/operations.spec.tsx
@@ -23,7 +23,7 @@ const { mockToast } = vi.hoisted(() => {
   return { mockToast }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
diff --git a/web/app/components/datasets/documents/components/__tests__/rename-modal.spec.tsx b/web/app/components/datasets/documents/components/__tests__/rename-modal.spec.tsx
index ad40e52752..34351dc71d 100644
--- a/web/app/components/datasets/documents/components/__tests__/rename-modal.spec.tsx
+++ b/web/app/components/datasets/documents/components/__tests__/rename-modal.spec.tsx
@@ -15,7 +15,7 @@ vi.mock('@/service/datasets', () => ({
   renameDocumentName: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: mockToastSuccess,
     error: mockToastError,
diff --git a/web/app/components/datasets/documents/components/document-list/hooks/__tests__/use-document-actions.spec.ts b/web/app/components/datasets/documents/components/document-list/hooks/__tests__/use-document-actions.spec.ts
index 449478eb7b..9eebae4f81 100644
--- a/web/app/components/datasets/documents/components/document-list/hooks/__tests__/use-document-actions.spec.ts
+++ b/web/app/components/datasets/documents/components/document-list/hooks/__tests__/use-document-actions.spec.ts
@@ -27,7 +27,7 @@ vi.mock('@/service/knowledge/use-document', () => ({
   useDocumentDownloadZip: () => ({ mutateAsync: mockDownloadZip, isPending: mockIsDownloadingZip }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: mockToastSuccess,
     error: mockToastError,
diff --git a/web/app/components/datasets/documents/components/document-list/hooks/use-document-actions.ts b/web/app/components/datasets/documents/components/document-list/hooks/use-document-actions.ts
index 8b6c40e2be..a46c4fcfcc 100644
--- a/web/app/components/datasets/documents/components/document-list/hooks/use-document-actions.ts
+++ b/web/app/components/datasets/documents/components/document-list/hooks/use-document-actions.ts
@@ -1,7 +1,7 @@
 import type { CommonResponse } from '@/models/common'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { DocumentActionType } from '@/models/datasets'
 import {
   useDocumentArchive,
diff --git a/web/app/components/datasets/documents/components/documents-header.tsx b/web/app/components/datasets/documents/components/documents-header.tsx
index 4e098f5eda..bd74ad0487 100644
--- a/web/app/components/datasets/documents/components/documents-header.tsx
+++ b/web/app/components/datasets/documents/components/documents-header.tsx
@@ -4,13 +4,13 @@ import type { Item } from '@/app/components/base/select'
 import type { BuiltInMetadataItem, MetadataItemWithValueLength } from '@/app/components/datasets/metadata/types'
 import type { SortType } from '@/service/datasets'
 import { PlusIcon } from '@heroicons/react/24/solid'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiDraftLine, RiExternalLinkLine } from '@remixicon/react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Chip from '@/app/components/base/chip'
 import Input from '@/app/components/base/input'
 import Sort from '@/app/components/base/sort'
-import { Button } from '@/app/components/base/ui/button'
 import AutoDisabledDocument from '@/app/components/datasets/common/document-status-with-action/auto-disabled-document'
 import IndexFailed from '@/app/components/datasets/common/document-status-with-action/index-failed'
 import StatusWithAction from '@/app/components/datasets/common/document-status-with-action/status-with-action'
diff --git a/web/app/components/datasets/documents/components/empty-element.tsx b/web/app/components/datasets/documents/components/empty-element.tsx
index 6eacf89264..506b8ab6db 100644
--- a/web/app/components/datasets/documents/components/empty-element.tsx
+++ b/web/app/components/datasets/documents/components/empty-element.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import { PlusIcon } from '@heroicons/react/24/solid'
+import { Button } from '@langgenius/dify-ui/button'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import s from '../style.module.css'
 import { FolderPlusIcon, NotionIcon, ThreeDotsIcon } from './icons'
 
diff --git a/web/app/components/datasets/documents/components/operations.tsx b/web/app/components/datasets/documents/components/operations.tsx
index e7bbb03c94..8692da927d 100644
--- a/web/app/components/datasets/documents/components/operations.tsx
+++ b/web/app/components/datasets/documents/components/operations.tsx
@@ -1,15 +1,6 @@
 import type { OperationName } from '../types'
 import type { CommonResponse } from '@/models/common'
 import type { DocumentDownloadResponse } from '@/service/datasets'
-import { cn } from '@langgenius/dify-ui/cn'
-import { useBoolean, useDebounceFn } from 'ahooks'
-import { noop } from 'es-toolkit/function'
-import * as React from 'react'
-import { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Divider from '@/app/components/base/divider'
-import Switch from '@/app/components/base/switch'
-import Tooltip from '@/app/components/base/tooltip'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -18,13 +9,22 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
+} from '@langgenius/dify-ui/alert-dialog'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/dropdown-menu'
+import { Switch } from '@langgenius/dify-ui/switch'
+import { toast } from '@langgenius/dify-ui/toast'
+import { useBoolean, useDebounceFn } from 'ahooks'
+import { noop } from 'es-toolkit/function'
+import * as React from 'react'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Divider from '@/app/components/base/divider'
+import Tooltip from '@/app/components/base/tooltip'
 import { IS_CE_EDITION } from '@/config'
 import { DataSourceType, DocumentActionType } from '@/models/datasets'
 import { useRouter } from '@/next/navigation'
diff --git a/web/app/components/datasets/documents/components/rename-modal.tsx b/web/app/components/datasets/documents/components/rename-modal.tsx
index c6f393f1ce..fc4626676b 100644
--- a/web/app/components/datasets/documents/components/rename-modal.tsx
+++ b/web/app/components/datasets/documents/components/rename-modal.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useBoolean } from 'ahooks'
 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'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { renameDocumentName } from '@/service/datasets'
 
 type Props = {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx
index 64c5faac33..caffed6500 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx
@@ -1,9 +1,9 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { RiArrowRightLine } from '@remixicon/react'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
-import { Button } from '@/app/components/base/ui/button'
 import Link from '@/next/link'
 import { useParams } from '@/next/navigation'
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/__tests__/header.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/__tests__/header.spec.tsx
index b736935cc8..a6abad358e 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/__tests__/header.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/__tests__/header.spec.tsx
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import Header from '../header'
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({ children }: { children: React.ReactNode }) => <button>{children}</button>,
 }))
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx
index 034556d96f..a285946272 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx
@@ -1,10 +1,10 @@
 import type { CredentialSelectorProps } from './credential-selector'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import CredentialSelector from './credential-selector'
 
 type HeaderProps = {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/hooks/__tests__/use-local-file-upload.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/hooks/__tests__/use-local-file-upload.spec.tsx
index 80a8fc854d..dc20688e9e 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/hooks/__tests__/use-local-file-upload.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/hooks/__tests__/use-local-file-upload.spec.tsx
@@ -18,7 +18,7 @@ const { mockNotify, mockToast } = vi.hoisted(() => {
   return { mockNotify, mockToast }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/__tests__/index.spec.tsx
index 6be0e28d31..c193638a6a 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/__tests__/index.spec.tsx
@@ -37,8 +37,8 @@ const { mockToastError } = vi.hoisted(() => ({
   mockToastError: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
+vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
   return {
     ...actual,
     toast: {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx
index 5321986cd7..22bc8a65e0 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx
@@ -1,11 +1,11 @@
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 import type { DataSourceNotionPageMap, DataSourceNotionWorkspace } from '@/models/common'
 import type { DataSourceNodeCompletedResponse, DataSourceNodeErrorResponse } from '@/types/pipeline'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useEffect, useMemo } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import Loading from '@/app/components/base/loading'
 import SearchInput from '@/app/components/base/notion-page-selector/search-input'
-import { toast } from '@/app/components/base/ui/toast'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useDocLink } from '@/context/i18n'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/index.spec.tsx
index 6eed119ede..c8fdf49fd1 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/index.spec.tsx
@@ -49,8 +49,8 @@ const { mockToastError } = vi.hoisted(() => ({
   mockToastError: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
+vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
   return {
     ...actual,
     toast: {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx
index 5b1b0a6b1a..6a7190161d 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx
@@ -1,7 +1,7 @@
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { useTranslation } from 'react-i18next'
 import { Icon3Dots } from '@/app/components/base/icons/src/vender/line/others'
-import { Button } from '@/app/components/base/ui/button'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { useToolIcon } from '@/app/components/workflow/hooks'
 import { BlockEnum } from '@/app/components/workflow/types'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx
index c6a90824ab..43b5fcc71a 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx
@@ -1,11 +1,11 @@
 import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useCallback, useState } from 'react'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import * as React from 'react'
+import { useCallback, useState } from 'react'
 import Menu from './menu'
 
 type DropdownProps = {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx
index ca110d3694..1691bf90b2 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx
@@ -1,7 +1,7 @@
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/knowledge'
-import { Button } from '@/app/components/base/ui/button'
 
 type EmptySearchResultProps = {
   onResetKeywords: () => void
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx
index 5c12aaa68c..bc51751aef 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx
@@ -1,7 +1,7 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
 import Divider from '@/app/components/base/divider'
-import { Button } from '@/app/components/base/ui/button'
 
 type HeaderProps = {
   onClickConfiguration?: () => void
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx
index 2113e8841c..76614e3865 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx
@@ -1,10 +1,10 @@
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 import type { OnlineDriveFile } from '@/models/pipeline'
 import type { DataSourceNodeCompletedResponse, DataSourceNodeErrorResponse } from '@/types/pipeline'
+import { toast } from '@langgenius/dify-ui/toast'
 import { produce } from 'immer'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
-import { toast } from '@/app/components/base/ui/toast'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useDocLink } from '@/context/i18n'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/__tests__/crawled-result-item.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/__tests__/crawled-result-item.spec.tsx
index 62dba84e30..cded02b431 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/__tests__/crawled-result-item.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/__tests__/crawled-result-item.spec.tsx
@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import CrawledResultItem from '../crawled-result-item'
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({ children, onClick }: { children: React.ReactNode, onClick: () => void }) => (
     <button data-testid="preview-button" onClick={onClick}>{children}</button>
   ),
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx
index 664a251e25..19019b4dd7 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
 import Radio from '@/app/components/base/radio/ui'
-import { Button } from '@/app/components/base/ui/button'
 
 type CrawledResultItemProps = {
   payload: CrawlResultItemType
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/__tests__/index.spec.tsx
index cea569fa5f..2ab8ad6d4b 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/__tests__/index.spec.tsx
@@ -10,8 +10,8 @@ const { mockToastError } = vi.hoisted(() => ({
   mockToastError: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
+vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
   return {
     ...actual,
     toast: {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx
index c8a06ea807..46c6c6f462 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx
@@ -1,5 +1,7 @@
 import type { RAGPipelineVariables } from '@/models/pipeline'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiPlayLargeLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useEffect, useMemo } from 'react'
@@ -8,8 +10,6 @@ import { useAppForm } from '@/app/components/base/form'
 import BaseField from '@/app/components/base/form/form-scenarios/base/field'
 import { generateZodSchema } from '@/app/components/base/form/form-scenarios/base/utils'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { useConfigurations, useInitialData } from '@/app/components/rag-pipeline/hooks/use-input-fields'
 import { CrawlStep } from '@/models/datasets'
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx b/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx
index 925da57197..ab432d6962 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx
@@ -1,8 +1,8 @@
 import type { Step } from './step-indicator'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiArrowLeftLine } from '@remixicon/react'
 import * as React from 'react'
 import Effect from '@/app/components/base/effect'
-import { Button } from '@/app/components/base/ui/button'
 import Link from '@/next/link'
 import { useParams } from '@/next/navigation'
 import StepIndicator from './step-indicator'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/__tests__/online-document-preview.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/__tests__/online-document-preview.spec.tsx
index 1e094fedb0..96033a6f60 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/preview/__tests__/online-document-preview.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/preview/__tests__/online-document-preview.spec.tsx
@@ -9,8 +9,8 @@ const { mockToastError } = vi.hoisted(() => ({
   mockToastError: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
+vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
   return {
     ...actual,
     toast: {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx
index 2d729ee079..9b56c6c8a3 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx
@@ -1,13 +1,13 @@
 import type { NotionPage } from '@/models/common'
 import type { CrawlResultItem, CustomFile, DocumentItem, FileIndexingEstimateResponse } from '@/models/datasets'
 import type { OnlineDriveFile } from '@/models/pipeline'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiSearchEyeLine } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import { SkeletonContainer, SkeletonPoint, SkeletonRectangle, SkeletonRow } from '@/app/components/base/skeleton'
-import { Button } from '@/app/components/base/ui/button'
 import SummaryLabel from '@/app/components/datasets/documents/detail/completed/common/summary-label'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { ChunkingMode } from '@/models/datasets'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/online-document-preview.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/online-document-preview.tsx
index 3e9b409a70..793ba1f22b 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/preview/online-document-preview.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/preview/online-document-preview.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { NotionPage } from '@/models/common'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Notion } from '@/app/components/base/icons/src/public/common'
 import { Markdown } from '@/app/components/base/markdown'
-import { toast } from '@/app/components/base/ui/toast'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { usePreviewOnlineDocument } from '@/service/use-pipeline'
 import { formatNumberAbbreviated } from '@/utils/format'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/components.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/components.spec.tsx
index ff5f8afa66..16b6ef1373 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/components.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/components.spec.tsx
@@ -11,8 +11,8 @@ const { mockToastError } = vi.hoisted(() => ({
   mockToastError: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
+vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
   return {
     ...actual,
     toast: {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/form.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/form.spec.tsx
index 09f28fc5da..dc54ba2757 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/form.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/form.spec.tsx
@@ -8,8 +8,8 @@ const { mockToastError } = vi.hoisted(() => ({
   mockToastError: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
+vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
   return {
     ...actual,
     toast: {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/header.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/header.spec.tsx
index 7e9eabaeda..431fa76f2c 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/header.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/header.spec.tsx
@@ -2,7 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import Header from '../header'
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({ children, onClick, disabled, variant }: { children: React.ReactNode, onClick: () => void, disabled?: boolean, variant: string }) => (
     <button data-testid={`btn-${variant}`} onClick={onClick} disabled={disabled}>
       {children}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/process-documents/actions.tsx b/web/app/components/datasets/documents/create-from-pipeline/process-documents/actions.tsx
index 7526826cfc..9d5a18b58d 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/process-documents/actions.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/process-documents/actions.tsx
@@ -1,7 +1,7 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { RiArrowLeftLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 type ActionsProps = {
   onBack: () => void
diff --git a/web/app/components/datasets/documents/create-from-pipeline/process-documents/form.tsx b/web/app/components/datasets/documents/create-from-pipeline/process-documents/form.tsx
index 7fde02adcd..80cd737e7e 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/process-documents/form.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/process-documents/form.tsx
@@ -1,9 +1,9 @@
 import type { ZodSchema } from 'zod'
 import type { BaseConfiguration } from '@/app/components/base/form/form-scenarios/base/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useImperativeHandle } from 'react'
 import { useAppForm } from '@/app/components/base/form'
 import BaseField from '@/app/components/base/form/form-scenarios/base/field'
-import { toast } from '@/app/components/base/ui/toast'
 import Header from './header'
 
 type OptionsProps = {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/process-documents/header.tsx b/web/app/components/datasets/documents/create-from-pipeline/process-documents/header.tsx
index 04d4304d21..a4ae99e450 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/process-documents/header.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/process-documents/header.tsx
@@ -1,7 +1,7 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { RiSearchEyeLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 type HeaderProps = {
   onReset: () => void
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
index 09d6eb0960..797f7b296a 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
@@ -2,6 +2,7 @@ import type { IndexingType } from '@/app/components/datasets/create/step-two'
 import type { IndexingStatusResponse } from '@/models/datasets'
 import type { InitialDocumentDetail } from '@/models/pipeline'
 import type { RETRIEVE_METHOD } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAedFill,
@@ -17,7 +18,6 @@ import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import NotionIcon from '@/app/components/base/notion-icon'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import PriorityLabel from '@/app/components/billing/priority-label'
 import { Plan } from '@/app/components/billing/type'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
diff --git a/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx b/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx
index 91e9bccc66..dc0dd438ce 100644
--- a/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx
@@ -74,7 +74,7 @@ vi.mock('@/service/use-base', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: { notify: mocks.toastNotify },
 }))
 
diff --git a/web/app/components/datasets/documents/detail/__tests__/new-segment.spec.tsx b/web/app/components/datasets/documents/detail/__tests__/new-segment.spec.tsx
index a46b659f11..f6ebf0d29d 100644
--- a/web/app/components/datasets/documents/detail/__tests__/new-segment.spec.tsx
+++ b/web/app/components/datasets/documents/detail/__tests__/new-segment.spec.tsx
@@ -1,6 +1,6 @@
+import { toast, ToastHost } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { toast, ToastHost } from '@/app/components/base/ui/toast'
 import { ChunkingMode } from '@/models/datasets'
 import { IndexingType } from '../../../create/step-two'
 
diff --git a/web/app/components/datasets/documents/detail/batch-modal/__tests__/csv-uploader.spec.tsx b/web/app/components/datasets/documents/detail/batch-modal/__tests__/csv-uploader.spec.tsx
index 6e3ba6ab90..0cd2a31491 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/__tests__/csv-uploader.spec.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/__tests__/csv-uploader.spec.tsx
@@ -39,7 +39,7 @@ const toastMocks = vi.hoisted(() => {
   }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: toastMocks.api,
 }))
 
diff --git a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
index 1d26877b77..0e86c057cc 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
@@ -1,7 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import type { FileItem } from '@/models/datasets'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiDeleteBinLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -9,8 +11,6 @@ import { useTranslation } from 'react-i18next'
 import { getFileUploadErrorMessage } from '@/app/components/base/file-uploader/utils'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
 import SimplePieChart from '@/app/components/base/simple-pie-chart'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import useTheme from '@/hooks/use-theme'
 import { upload } from '@/service/base'
 import { useFileUploadConfig } from '@/service/use-common'
diff --git a/web/app/components/datasets/documents/detail/batch-modal/index.tsx b/web/app/components/datasets/documents/detail/batch-modal/index.tsx
index fe3c399355..c0d9a58e98 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/index.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/index.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { FC } from 'react'
 import type { ChunkingMode, FileItem } from '@/models/datasets'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 import CSVDownloader from './csv-downloader'
 import CSVUploader from './csv-uploader'
 
diff --git a/web/app/components/datasets/documents/detail/completed/__tests__/index.spec.tsx b/web/app/components/datasets/documents/detail/completed/__tests__/index.spec.tsx
index b7344d7a0f..f50b405c6f 100644
--- a/web/app/components/datasets/documents/detail/completed/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/detail/completed/__tests__/index.spec.tsx
@@ -73,7 +73,7 @@ vi.mock('../../context', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
diff --git a/web/app/components/datasets/documents/detail/completed/__tests__/new-child-segment.spec.tsx b/web/app/components/datasets/documents/detail/completed/__tests__/new-child-segment.spec.tsx
index ff9fb4c524..d993ff849e 100644
--- a/web/app/components/datasets/documents/detail/completed/__tests__/new-child-segment.spec.tsx
+++ b/web/app/components/datasets/documents/detail/completed/__tests__/new-child-segment.spec.tsx
@@ -1,6 +1,6 @@
+import { toast, ToastHost } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { toast, ToastHost } from '@/app/components/base/ui/toast'
 
 import NewChildSegmentModal from '../new-child-segment'
 
diff --git a/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx b/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx
index 9bd2913cda..3b2e63977d 100644
--- a/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { useKeyPress } from 'ahooks'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import { getKeyboardKeyCodeBySystem } from '@/app/components/workflow/utils'
 import { ChunkingMode } from '@/models/datasets'
diff --git a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
index 5912907765..2b04d21d6d 100644
--- a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
@@ -1,11 +1,4 @@
 import type { FC } from 'react'
-import { cn } from '@langgenius/dify-ui/cn'
-import { RiArchive2Line, RiCheckboxCircleLine, RiCloseCircleLine, RiDeleteBinLine, RiDownload2Line, RiDraftLine, RiRefreshLine } from '@remixicon/react'
-import { useBoolean } from 'ahooks'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-import Divider from '@/app/components/base/divider'
-import { SearchLinesSparkle } from '@/app/components/base/icons/src/vender/knowledge'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -14,8 +7,15 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
+import { RiArchive2Line, RiCheckboxCircleLine, RiCloseCircleLine, RiDeleteBinLine, RiDownload2Line, RiDraftLine, RiRefreshLine } from '@remixicon/react'
+import { useBoolean } from 'ahooks'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import Divider from '@/app/components/base/divider'
+import { SearchLinesSparkle } from '@/app/components/base/icons/src/vender/knowledge'
 import { IS_CE_EDITION } from '@/config'
 
 const i18nPrefix = 'batchAction'
diff --git a/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx b/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
index 33d9f550a8..9b2a2e36ee 100644
--- a/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiLoader2Line } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
 import { noop } from 'es-toolkit/function'
@@ -6,7 +7,6 @@ import * as React from 'react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 
 type IDefaultContentProps = {
diff --git a/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-child-segment-data.spec.ts b/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-child-segment-data.spec.ts
index 7817a3b2aa..fb19d49bc2 100644
--- a/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-child-segment-data.spec.ts
+++ b/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-child-segment-data.spec.ts
@@ -59,7 +59,7 @@ vi.mock('../../../context', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: (message: string) => mockNotify({ type: 'success', message }),
     error: (message: string) => mockNotify({ type: 'error', message }),
diff --git a/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-segment-list-data.spec.ts b/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-segment-list-data.spec.ts
index ec5ad265c1..5b8f8d7e53 100644
--- a/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-segment-list-data.spec.ts
+++ b/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-segment-list-data.spec.ts
@@ -92,7 +92,7 @@ vi.mock('../../../context', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: (message: string) => mockNotify({ type: 'success', message }),
     error: (message: string) => mockNotify({ type: 'error', message }),
diff --git a/web/app/components/datasets/documents/detail/completed/hooks/use-child-segment-data.ts b/web/app/components/datasets/documents/detail/completed/hooks/use-child-segment-data.ts
index fab8b16019..4e3c09d73d 100644
--- a/web/app/components/datasets/documents/detail/completed/hooks/use-child-segment-data.ts
+++ b/web/app/components/datasets/documents/detail/completed/hooks/use-child-segment-data.ts
@@ -1,8 +1,8 @@
 import type { ChildChunkDetail, ChildSegmentsResponse, SegmentDetailModel, SegmentUpdater } from '@/models/datasets'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useQueryClient } from '@tanstack/react-query'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useChildSegmentList, useChildSegmentListKey, useDeleteChildSegment, useUpdateChildSegment } from '@/service/knowledge/use-segment'
 import { useInvalid } from '@/service/use-base'
diff --git a/web/app/components/datasets/documents/detail/completed/hooks/use-segment-list-data.ts b/web/app/components/datasets/documents/detail/completed/hooks/use-segment-list-data.ts
index 3a3c486070..1c55d12d15 100644
--- a/web/app/components/datasets/documents/detail/completed/hooks/use-segment-list-data.ts
+++ b/web/app/components/datasets/documents/detail/completed/hooks/use-segment-list-data.ts
@@ -1,9 +1,9 @@
 import type { FileEntity } from '@/app/components/datasets/common/image-uploader/types'
 import type { SegmentDetailModel, SegmentsResponse, SegmentUpdater } from '@/models/datasets'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useQueryClient } from '@tanstack/react-query'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { ChunkingMode } from '@/models/datasets'
 import { usePathname } from '@/next/navigation'
diff --git a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
index 68efea843b..386757a5b2 100644
--- a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
+++ b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
@@ -1,11 +1,11 @@
 import type { FC } from 'react'
 import type { ChildChunkDetail, SegmentUpdater } from '@/models/datasets'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine, RiExpandDiagonalLine } from '@remixicon/react'
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import { toast } from '@/app/components/base/ui/toast'
 import { ChunkingMode } from '@/models/datasets'
 import { useParams } from '@/next/navigation'
 import { useAddChildSegment } from '@/service/knowledge/use-segment'
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
index c39c8ba10f..1111bb6411 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
@@ -1,14 +1,5 @@
 import type { FC } from 'react'
 import type { ChildChunkDetail, SegmentDetailModel } from '@/models/datasets'
-import { cn } from '@langgenius/dify-ui/cn'
-import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
-import * as React from 'react'
-import { useCallback, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Badge from '@/app/components/base/badge'
-import Divider from '@/app/components/base/divider'
-import Switch from '@/app/components/base/switch'
-import Tooltip from '@/app/components/base/tooltip'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -16,7 +7,16 @@ import {
   AlertDialogConfirmButton,
   AlertDialogContent,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
+} from '@langgenius/dify-ui/alert-dialog'
+import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
+import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
+import * as React from 'react'
+import { useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Badge from '@/app/components/base/badge'
+import Divider from '@/app/components/base/divider'
+import Tooltip from '@/app/components/base/tooltip'
 import ImageList from '@/app/components/datasets/common/image-list'
 import { ChunkingMode } from '@/models/datasets'
 import { formatNumber } from '@/utils/format'
diff --git a/web/app/components/datasets/documents/detail/embedding/__tests__/index.spec.tsx b/web/app/components/datasets/documents/detail/embedding/__tests__/index.spec.tsx
index 1a07847a13..56894cbf45 100644
--- a/web/app/components/datasets/documents/detail/embedding/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/__tests__/index.spec.tsx
@@ -28,7 +28,7 @@ const { mockToast } = vi.hoisted(() => {
 
 vi.mock('@/service/datasets')
 vi.mock('@/service/knowledge/use-dataset')
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
diff --git a/web/app/components/datasets/documents/detail/embedding/index.tsx b/web/app/components/datasets/documents/detail/embedding/index.tsx
index c917ee9906..01548ecdd6 100644
--- a/web/app/components/datasets/documents/detail/embedding/index.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/index.tsx
@@ -1,10 +1,10 @@
 import type { FC } from 'react'
 import type { IndexingType } from '../../../create/step-two'
 import type { RETRIEVE_METHOD } from '@/types/app'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useProcessRule } from '@/service/knowledge/use-dataset'
 import { useDocumentContext } from '../context'
 import { ProgressBar, RuleDetail, SegmentProgress, StatusHeader } from './components'
diff --git a/web/app/components/datasets/documents/detail/index.tsx b/web/app/components/datasets/documents/detail/index.tsx
index be72975099..8a684a4e44 100644
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -2,13 +2,13 @@
 import type { FC } from 'react'
 import type { DataSourceInfo, DocumentDisplayStatus, FileItem, FullDocumentDetail, LegacyDataSourceInfo } from '@/models/datasets'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import FloatRightContainer from '@/app/components/base/float-right-container'
 import Loading from '@/app/components/base/loading'
-import { toast } from '@/app/components/base/ui/toast'
 import Metadata from '@/app/components/datasets/metadata/metadata-document'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
diff --git a/web/app/components/datasets/documents/detail/metadata/__tests__/index.spec.tsx b/web/app/components/datasets/documents/detail/metadata/__tests__/index.spec.tsx
index 5b268e554c..7f405ea07f 100644
--- a/web/app/components/datasets/documents/detail/metadata/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/__tests__/index.spec.tsx
@@ -34,7 +34,7 @@ vi.mock('use-context-selector', async (importOriginal) => {
   }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: toastMocks.api,
 }))
 
diff --git a/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx b/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx
index 8e3857c492..c6044b261a 100644
--- a/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import type { DocType } from '@/models/datasets'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import Radio from '@/app/components/base/radio'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import { useMetadataMap } from '@/hooks/use-metadata'
 import { CUSTOMIZABLE_DOC_TYPES } from '@/models/datasets'
 import s from '../style.module.css'
diff --git a/web/app/components/datasets/documents/detail/metadata/hooks/__tests__/use-metadata-state.spec.ts b/web/app/components/datasets/documents/detail/metadata/hooks/__tests__/use-metadata-state.spec.ts
index 3c66d472dc..2d5afcc3a9 100644
--- a/web/app/components/datasets/documents/detail/metadata/hooks/__tests__/use-metadata-state.spec.ts
+++ b/web/app/components/datasets/documents/detail/metadata/hooks/__tests__/use-metadata-state.spec.ts
@@ -20,7 +20,7 @@ const { mockNotify, mockModifyDocMetadata, mockToast } = vi.hoisted(() => {
   return { mockNotify, mockModifyDocMetadata: vi.fn(), mockToast }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
diff --git a/web/app/components/datasets/documents/detail/metadata/hooks/use-metadata-state.ts b/web/app/components/datasets/documents/detail/metadata/hooks/use-metadata-state.ts
index 04d920b459..7bfa64ac8e 100644
--- a/web/app/components/datasets/documents/detail/metadata/hooks/use-metadata-state.ts
+++ b/web/app/components/datasets/documents/detail/metadata/hooks/use-metadata-state.ts
@@ -1,9 +1,9 @@
 'use client'
 import type { CommonResponse } from '@/models/common'
 import type { DocType, FullDocumentDetail } from '@/models/datasets'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { modifyDocMetadata } from '@/service/datasets'
 import { asyncRunSafe } from '@/utils'
 import { useDocumentContext } from '../../context'
diff --git a/web/app/components/datasets/documents/detail/metadata/index.tsx b/web/app/components/datasets/documents/detail/metadata/index.tsx
index 0d06b43118..762f1ff3e4 100644
--- a/web/app/components/datasets/documents/detail/metadata/index.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/index.tsx
@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import type { FullDocumentDetail } from '@/models/datasets'
 import { PencilIcon } from '@heroicons/react/24/outline'
+import { Button } from '@langgenius/dify-ui/button'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import Loading from '@/app/components/base/loading'
-import { Button } from '@/app/components/base/ui/button'
 import { useMetadataMap } from '@/hooks/use-metadata'
 import DocTypeSelector, { DocumentTypeDisplay } from './components/doc-type-selector'
 import MetadataFieldList from './components/metadata-field-list'
diff --git a/web/app/components/datasets/documents/detail/new-segment.tsx b/web/app/components/datasets/documents/detail/new-segment.tsx
index 35f3eacfc8..0426bb9584 100644
--- a/web/app/components/datasets/documents/detail/new-segment.tsx
+++ b/web/app/components/datasets/documents/detail/new-segment.tsx
@@ -2,11 +2,11 @@ import type { FC } from 'react'
 import type { FileEntity } from '@/app/components/datasets/common/image-uploader/types'
 import type { SegmentUpdater } from '@/models/datasets'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine, RiExpandDiagonalLine } from '@remixicon/react'
 import { memo, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import { toast } from '@/app/components/base/ui/toast'
 import ImageUploaderInChunk from '@/app/components/datasets/common/image-uploader/image-uploader-in-chunk'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { ChunkingMode } from '@/models/datasets'
diff --git a/web/app/components/datasets/documents/detail/segment-add/index.tsx b/web/app/components/datasets/documents/detail/segment-add/index.tsx
index db810b1d6b..de9735f62f 100644
--- a/web/app/components/datasets/documents/detail/segment-add/index.tsx
+++ b/web/app/components/datasets/documents/detail/segment-add/index.tsx
@@ -1,16 +1,16 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useBoolean } from 'ahooks'
-import * as React from 'react'
-import { useCallback, useMemo, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import { useBoolean } from 'ahooks'
+import * as React from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import PlanUpgradeModal from '@/app/components/billing/plan-upgrade-modal'
 import { Plan } from '@/app/components/billing/type'
 import { useProviderContext } from '@/context/provider-context'
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
index 28e8d4bb30..a2f2b7f269 100644
--- a/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
@@ -1,9 +1,9 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { RiArrowLeftLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Effect from '@/app/components/base/effect'
-import { Button } from '@/app/components/base/ui/button'
 import { useRouter } from '@/next/navigation'
 
 type LeftHeaderProps = {
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/actions.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/actions.tsx
index a3ba424309..bb63720b08 100644
--- a/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/actions.tsx
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/actions.tsx
@@ -1,6 +1,6 @@
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 type ActionsProps = {
   runDisabled?: boolean
diff --git a/web/app/components/datasets/documents/status-item/__tests__/index.spec.tsx b/web/app/components/datasets/documents/status-item/__tests__/index.spec.tsx
index a99aeb269b..b69835d7f2 100644
--- a/web/app/components/datasets/documents/status-item/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/status-item/__tests__/index.spec.tsx
@@ -27,7 +27,7 @@ vi.mock('use-context-selector', () => ({
   useContextSelector: (context: unknown, selector: (state: unknown) => unknown) => selector({}),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: toastMocks.api,
 }))
 
diff --git a/web/app/components/datasets/documents/status-item/index.tsx b/web/app/components/datasets/documents/status-item/index.tsx
index 362db58a90..9970c6bca8 100644
--- a/web/app/components/datasets/documents/status-item/index.tsx
+++ b/web/app/components/datasets/documents/status-item/index.tsx
@@ -3,13 +3,13 @@ import type { ColorMap, IndicatorProps } from '@/app/components/header/indicator
 import type { CommonResponse } from '@/models/common'
 import type { DocumentDisplayStatus } from '@/models/datasets'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useDebounceFn } from 'ahooks'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
-import { toast } from '@/app/components/base/ui/toast'
 import Indicator from '@/app/components/header/indicator'
 import { useDocumentDelete, useDocumentDisable, useDocumentEnable } from '@/service/knowledge/use-document'
 import { asyncRunSafe } from '@/utils'
diff --git a/web/app/components/datasets/external-api/external-api-modal/__tests__/index.spec.tsx b/web/app/components/datasets/external-api/external-api-modal/__tests__/index.spec.tsx
index e24712887a..18b38c807c 100644
--- a/web/app/components/datasets/external-api/external-api-modal/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/external-api/external-api-modal/__tests__/index.spec.tsx
@@ -12,7 +12,7 @@ vi.mock('@/service/datasets', () => ({
 }))
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: (args: unknown) => mockNotify(args),
   },
diff --git a/web/app/components/datasets/external-api/external-api-modal/index.tsx b/web/app/components/datasets/external-api/external-api-modal/index.tsx
index 0cd6593232..cb2176b2a1 100644
--- a/web/app/components/datasets/external-api/external-api-modal/index.tsx
+++ b/web/app/components/datasets/external-api/external-api-modal/index.tsx
@@ -1,11 +1,5 @@
 import type { FC } from 'react'
 import type { CreateExternalAPIReq, FormSchema } from '../declarations'
-import { RiBook2Line, RiCloseLine, RiInformation2Line, RiLock2Fill } from '@remixicon/react'
-import { memo, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import ActionButton from '@/app/components/base/action-button'
-import { PortalToFollowElem, PortalToFollowElemContent } from '@/app/components/base/portal-to-follow-elem'
-import Tooltip from '@/app/components/base/tooltip'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -14,9 +8,15 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
+import { RiBook2Line, RiCloseLine, RiInformation2Line, RiLock2Fill } from '@remixicon/react'
+import { memo, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import ActionButton from '@/app/components/base/action-button'
+import { PortalToFollowElem, PortalToFollowElemContent } from '@/app/components/base/portal-to-follow-elem'
+import Tooltip from '@/app/components/base/tooltip'
 import { createExternalAPI } from '@/service/datasets'
 import Form from './Form'
 
diff --git a/web/app/components/datasets/external-api/external-api-panel/index.tsx b/web/app/components/datasets/external-api/external-api-panel/index.tsx
index 93ccdd3c4e..cee1dcc83d 100644
--- a/web/app/components/datasets/external-api/external-api-panel/index.tsx
+++ b/web/app/components/datasets/external-api/external-api-panel/index.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
@@ -8,7 +9,6 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Loading from '@/app/components/base/loading'
-import { Button } from '@/app/components/base/ui/button'
 import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
 import { useDocLink } from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
diff --git a/web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx b/web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx
index 23993db7dd..ee21fe9884 100644
--- a/web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx
+++ b/web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx
@@ -1,5 +1,14 @@
 import type { CreateExternalAPIReq } from '../declarations'
 import type { ExternalAPIItem } from '@/models/datasets'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
 import {
   RiDeleteBinLine,
   RiEditLine,
@@ -9,15 +18,6 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
 import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
 import { useModalContext } from '@/context/modal-context'
 import { checkUsageExternalAPI, deleteExternalAPI, fetchExternalAPI, updateExternalAPI } from '@/service/datasets'
diff --git a/web/app/components/datasets/external-knowledge-base/connector/__tests__/index.spec.tsx b/web/app/components/datasets/external-knowledge-base/connector/__tests__/index.spec.tsx
index 0949648fa0..7da605725c 100644
--- a/web/app/components/datasets/external-knowledge-base/connector/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/external-knowledge-base/connector/__tests__/index.spec.tsx
@@ -23,8 +23,8 @@ vi.mock('@/context/i18n', () => ({
 
 const mockToastSuccess = vi.hoisted(() => vi.fn())
 const mockToastError = vi.hoisted(() => vi.fn())
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
+vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
   return {
     ...actual,
     toast: {
diff --git a/web/app/components/datasets/external-knowledge-base/connector/index.tsx b/web/app/components/datasets/external-knowledge-base/connector/index.tsx
index 85fc254cfc..180bd507e7 100644
--- a/web/app/components/datasets/external-knowledge-base/connector/index.tsx
+++ b/web/app/components/datasets/external-knowledge-base/connector/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 
 import type { CreateKnowledgeBaseReq } from '@/app/components/datasets/external-knowledge-base/create/declarations'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import { toast } from '@/app/components/base/ui/toast'
 import ExternalKnowledgeBaseCreate from '@/app/components/datasets/external-knowledge-base/create'
 import { useRouter } from '@/next/navigation'
 import { createExternalKnowledgeBase } from '@/service/datasets'
diff --git a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
index fea71a7e78..a4e846abbf 100644
--- a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
@@ -1,11 +1,11 @@
 'use client'
 
+import { Button } from '@langgenius/dify-ui/button'
 import { RiAddLine } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
 import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
 import { useModalContext } from '@/context/modal-context'
 import { useRouter } from '@/next/navigation'
diff --git a/web/app/components/datasets/external-knowledge-base/create/index.tsx b/web/app/components/datasets/external-knowledge-base/create/index.tsx
index 9024d8e162..ea7a02a859 100644
--- a/web/app/components/datasets/external-knowledge-base/create/index.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 
 import type { CreateKnowledgeBaseReq } from './declarations'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiArrowLeftLine, RiArrowRightLine } from '@remixicon/react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 import { useRouter } from '@/next/navigation'
 import ExternalApiSelection from './ExternalApiSelection'
diff --git a/web/app/components/datasets/extra-info/api-access/card.tsx b/web/app/components/datasets/extra-info/api-access/card.tsx
index 0229922848..268f35fda3 100644
--- a/web/app/components/datasets/extra-info/api-access/card.tsx
+++ b/web/app/components/datasets/extra-info/api-access/card.tsx
@@ -1,9 +1,9 @@
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import { RiArrowRightUpLine, RiBookOpenLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Switch from '@/app/components/base/switch'
 import Indicator from '@/app/components/header/indicator'
 import { useSelector as useAppContextSelector } from '@/context/app-context'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
diff --git a/web/app/components/datasets/extra-info/api-access/index.tsx b/web/app/components/datasets/extra-info/api-access/index.tsx
index ece4c0835c..9983030cf2 100644
--- a/web/app/components/datasets/extra-info/api-access/index.tsx
+++ b/web/app/components/datasets/extra-info/api-access/index.tsx
@@ -1,9 +1,9 @@
 import { cn } from '@langgenius/dify-ui/cn'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ApiAggregate } from '@/app/components/base/icons/src/vender/knowledge'
-import { Popover, PopoverContent, PopoverTrigger } from '@/app/components/base/ui/popover'
 import Indicator from '@/app/components/header/indicator'
 import Card from './card'
 
diff --git a/web/app/components/datasets/extra-info/service-api/card.tsx b/web/app/components/datasets/extra-info/service-api/card.tsx
index 36808a781b..6f024c3f5d 100644
--- a/web/app/components/datasets/extra-info/service-api/card.tsx
+++ b/web/app/components/datasets/extra-info/service-api/card.tsx
@@ -1,10 +1,10 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { RiBookOpenLine, RiKey2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import { ApiAggregate } from '@/app/components/base/icons/src/vender/knowledge'
-import { Button } from '@/app/components/base/ui/button'
 import SecretKeyModal from '@/app/components/develop/secret-key/secret-key-modal'
 import Indicator from '@/app/components/header/indicator'
 import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
diff --git a/web/app/components/datasets/extra-info/service-api/index.tsx b/web/app/components/datasets/extra-info/service-api/index.tsx
index c4494f4ed7..c3fe05248d 100644
--- a/web/app/components/datasets/extra-info/service-api/index.tsx
+++ b/web/app/components/datasets/extra-info/service-api/index.tsx
@@ -1,8 +1,8 @@
 import { cn } from '@langgenius/dify-ui/cn'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Popover, PopoverContent, PopoverTrigger } from '@/app/components/base/ui/popover'
 import Indicator from '@/app/components/header/indicator'
 import Card from './card'
 
diff --git a/web/app/components/datasets/hit-testing/__tests__/modify-external-retrieval-modal.spec.tsx b/web/app/components/datasets/hit-testing/__tests__/modify-external-retrieval-modal.spec.tsx
index 77e02f8582..7a9ca20e40 100644
--- a/web/app/components/datasets/hit-testing/__tests__/modify-external-retrieval-modal.spec.tsx
+++ b/web/app/components/datasets/hit-testing/__tests__/modify-external-retrieval-modal.spec.tsx
@@ -8,7 +8,7 @@ vi.mock('@/app/components/base/action-button', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({ children, onClick, variant }: { children: React.ReactNode, onClick: () => void, variant?: string }) => (
     <button data-testid={variant === 'primary' ? 'save-button' : 'cancel-button'} onClick={onClick}>
       {children}
diff --git a/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx b/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx
index 9e9adf74ad..aa64962aa6 100644
--- a/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx
+++ b/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx
@@ -17,11 +17,11 @@ const { mockToast } = vi.hoisted(() => {
   return { mockToast }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({ children, onClick, variant }: { children: React.ReactNode, onClick: () => void, variant?: string }) => (
     <button data-testid={variant === 'primary' ? 'save-button' : 'cancel-button'} onClick={onClick}>
       {children}
diff --git a/web/app/components/datasets/hit-testing/components/query-input/index.tsx b/web/app/components/datasets/hit-testing/components/query-input/index.tsx
index cd0cfe984e..99796015c6 100644
--- a/web/app/components/datasets/hit-testing/components/query-input/index.tsx
+++ b/web/app/components/datasets/hit-testing/components/query-input/index.tsx
@@ -10,6 +10,7 @@ import type {
   Query,
 } from '@/models/datasets'
 import type { RetrievalConfig } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiEqualizer2Line,
@@ -19,7 +20,6 @@ import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { v4 as uuid4 } from 'uuid'
-import { Button } from '@/app/components/base/ui/button'
 import ImageUploaderInRetrievalTesting from '@/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing'
 import { getIcon } from '@/app/components/datasets/common/retrieval-method-info'
 import ModifyExternalRetrievalModal from '@/app/components/datasets/hit-testing/modify-external-retrieval-modal'
diff --git a/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx b/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx
index 097155f68f..35fdc3ccf7 100644
--- a/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx
+++ b/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx
@@ -1,10 +1,10 @@
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiCloseLine,
 } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import { Button } from '@/app/components/base/ui/button'
 import RetrievalSettings from '../external-knowledge-base/create/RetrievalSettings'
 
 type ModifyExternalRetrievalModalProps = {
diff --git a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
index b85a040073..98bcab2755 100644
--- a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
+++ b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
@@ -2,12 +2,12 @@
 import type { FC } from 'react'
 import type { IndexingType } from '../create/step-two'
 import type { RetrievalConfig } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
 import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
diff --git a/web/app/components/datasets/list/dataset-card/__tests__/operations.spec.tsx b/web/app/components/datasets/list/dataset-card/__tests__/operations.spec.tsx
index a6765c0ebe..41c0b2749b 100644
--- a/web/app/components/datasets/list/dataset-card/__tests__/operations.spec.tsx
+++ b/web/app/components/datasets/list/dataset-card/__tests__/operations.spec.tsx
@@ -1,6 +1,6 @@
+import { DropdownMenu } from '@langgenius/dify-ui/dropdown-menu'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
-import { DropdownMenu } from '@/app/components/base/ui/dropdown-menu'
 import Operations from '../operations'
 
 function renderInMenu(ui: React.ReactElement) {
diff --git a/web/app/components/datasets/list/dataset-card/components/dataset-card-modals.tsx b/web/app/components/datasets/list/dataset-card/components/dataset-card-modals.tsx
index 79b0d73799..47a195943b 100644
--- a/web/app/components/datasets/list/dataset-card/components/dataset-card-modals.tsx
+++ b/web/app/components/datasets/list/dataset-card/components/dataset-card-modals.tsx
@@ -1,6 +1,4 @@
 import type { DataSet } from '@/models/datasets'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -9,7 +7,9 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
+} from '@langgenius/dify-ui/alert-dialog'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 import RenameDatasetModal from '../../../rename-modal'
 
 type ModalState = {
diff --git a/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx b/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx
index 22ba673717..a7918ef033 100644
--- a/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx
+++ b/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx
@@ -1,11 +1,11 @@
 import type { DataSet } from '@/models/datasets'
 import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import * as React from 'react'
 import Operations from '../operations'
 
 type OperationsDropdownProps = {
diff --git a/web/app/components/datasets/list/dataset-card/hooks/__tests__/use-dataset-card-state.spec.ts b/web/app/components/datasets/list/dataset-card/hooks/__tests__/use-dataset-card-state.spec.ts
index 935f1329d1..7d07bcf9d0 100644
--- a/web/app/components/datasets/list/dataset-card/hooks/__tests__/use-dataset-card-state.spec.ts
+++ b/web/app/components/datasets/list/dataset-card/hooks/__tests__/use-dataset-card-state.spec.ts
@@ -10,7 +10,7 @@ const { mockToastSuccess, mockToastError } = vi.hoisted(() => ({
   mockToastError: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: mockToastSuccess,
     error: mockToastError,
@@ -305,7 +305,7 @@ describe('useDatasetCardState', () => {
 
   describe('Error Handling', () => {
     it('should show error toast when export pipeline fails', async () => {
-      const { toast } = await import('@/app/components/base/ui/toast')
+      const { toast } = await import('@langgenius/dify-ui/toast')
       mockExportPipeline.mockRejectedValue(new Error('Export failed'))
 
       const dataset = createMockDataset({ pipeline_id: 'pipeline-1' })
@@ -321,7 +321,7 @@ describe('useDatasetCardState', () => {
     })
 
     it('should handle Response error in detectIsUsedByApp', async () => {
-      const { toast } = await import('@/app/components/base/ui/toast')
+      const { toast } = await import('@langgenius/dify-ui/toast')
       const mockResponse = new Response(JSON.stringify({ message: 'API Error' }), {
         status: 400,
       })
@@ -340,7 +340,7 @@ describe('useDatasetCardState', () => {
     })
 
     it('should handle generic Error in detectIsUsedByApp', async () => {
-      const { toast } = await import('@/app/components/base/ui/toast')
+      const { toast } = await import('@langgenius/dify-ui/toast')
       mockCheckUsage.mockRejectedValue(new Error('Network error'))
 
       const dataset = createMockDataset()
@@ -356,7 +356,7 @@ describe('useDatasetCardState', () => {
     })
 
     it('should handle error without message in detectIsUsedByApp', async () => {
-      const { toast } = await import('@/app/components/base/ui/toast')
+      const { toast } = await import('@langgenius/dify-ui/toast')
       mockCheckUsage.mockRejectedValue({})
 
       const dataset = createMockDataset()
diff --git a/web/app/components/datasets/list/dataset-card/hooks/use-dataset-card-state.ts b/web/app/components/datasets/list/dataset-card/hooks/use-dataset-card-state.ts
index 850eee4364..6cffbb6828 100644
--- a/web/app/components/datasets/list/dataset-card/hooks/use-dataset-card-state.ts
+++ b/web/app/components/datasets/list/dataset-card/hooks/use-dataset-card-state.ts
@@ -1,8 +1,8 @@
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import type { DataSet } from '@/models/datasets'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useCheckDatasetUsage, useDeleteDataset } from '@/service/use-dataset-card'
 import { useExportPipelineDSL } from '@/service/use-pipeline'
 import { downloadBlob } from '@/utils/download'
diff --git a/web/app/components/datasets/list/dataset-card/operations.tsx b/web/app/components/datasets/list/dataset-card/operations.tsx
index 9d11657219..1349ae05e7 100644
--- a/web/app/components/datasets/list/dataset-card/operations.tsx
+++ b/web/app/components/datasets/list/dataset-card/operations.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   DropdownMenuItem,
   DropdownMenuSeparator,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 
 type OperationsProps = {
   showDelete: boolean
diff --git a/web/app/components/datasets/list/index.tsx b/web/app/components/datasets/list/index.tsx
index ffc9950f46..34be78ab3f 100644
--- a/web/app/components/datasets/list/index.tsx
+++ b/web/app/components/datasets/list/index.tsx
@@ -1,16 +1,16 @@
 'use client'
 
+import { Button } from '@langgenius/dify-ui/button'
 import { useBoolean, useDebounceFn } from 'ahooks'
 // Libraries
 import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 
+import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import TagManagementModal from '@/app/components/base/tag-management'
 import TagFilter from '@/app/components/base/tag-management/filter'
 // Hooks
 import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
-import { Button } from '@/app/components/base/ui/button'
 import CheckboxWithLabel from '@/app/components/datasets/create/website/base/checkbox-with-label'
 import { useAppContext, useSelector as useAppContextSelector } from '@/context/app-context'
 import { useExternalApiPanel } from '@/context/external-api-panel-context'
diff --git a/web/app/components/datasets/metadata/add-metadata-button.tsx b/web/app/components/datasets/metadata/add-metadata-button.tsx
index 8bf1c92023..a8070dcaa1 100644
--- a/web/app/components/datasets/metadata/add-metadata-button.tsx
+++ b/web/app/components/datasets/metadata/add-metadata-button.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   className?: string
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/modal.spec.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/modal.spec.tsx
index 40c925222c..060befe7d3 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/modal.spec.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/modal.spec.tsx
@@ -30,7 +30,7 @@ vi.mock('../../hooks/use-check-metadata-name', () => ({
 
 // Mock Toast to verify notifications
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: (args: unknown) => mockToastNotify(args),
   },
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx
index f11dba7533..3ac9baa006 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx
@@ -1,8 +1,6 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import Input from '@/app/components/base/input'
 import {
   NumberField,
   NumberFieldControls,
@@ -10,7 +8,9 @@ import {
   NumberFieldGroup,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '@/app/components/base/ui/number-field'
+} from '@langgenius/dify-ui/number-field'
+import * as React from 'react'
+import Input from '@/app/components/base/input'
 import Datepicker from '../base/date-picker'
 import { DataType } from '../types'
 
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
index 974ce977e7..8253f7faf6 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
@@ -1,14 +1,14 @@
 'use client'
 import type { FC } from 'react'
 import type { BuiltInMetadataItem, MetadataItemInBatchEdit, MetadataItemWithEdit } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiQuestionLine } from '@remixicon/react'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { useCreateMetaData } from '@/service/knowledge/use-metadata'
 import Checkbox from '../../../base/checkbox'
 import Modal from '../../../base/modal'
diff --git a/web/app/components/datasets/metadata/hooks/__tests__/use-batch-edit-document-metadata.spec.ts b/web/app/components/datasets/metadata/hooks/__tests__/use-batch-edit-document-metadata.spec.ts
index a4650bac43..84af233494 100644
--- a/web/app/components/datasets/metadata/hooks/__tests__/use-batch-edit-document-metadata.spec.ts
+++ b/web/app/components/datasets/metadata/hooks/__tests__/use-batch-edit-document-metadata.spec.ts
@@ -34,7 +34,7 @@ vi.mock('@/service/knowledge/use-metadata', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/datasets/metadata/hooks/__tests__/use-edit-dataset-metadata.spec.ts b/web/app/components/datasets/metadata/hooks/__tests__/use-edit-dataset-metadata.spec.ts
index 2fc6f3d084..6fa6f6f441 100644
--- a/web/app/components/datasets/metadata/hooks/__tests__/use-edit-dataset-metadata.spec.ts
+++ b/web/app/components/datasets/metadata/hooks/__tests__/use-edit-dataset-metadata.spec.ts
@@ -40,7 +40,7 @@ vi.mock('@/service/knowledge/use-metadata', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: vi.fn(),
   },
diff --git a/web/app/components/datasets/metadata/hooks/__tests__/use-metadata-document.spec.ts b/web/app/components/datasets/metadata/hooks/__tests__/use-metadata-document.spec.ts
index 9d8b73aaaa..a13378ea80 100644
--- a/web/app/components/datasets/metadata/hooks/__tests__/use-metadata-document.spec.ts
+++ b/web/app/components/datasets/metadata/hooks/__tests__/use-metadata-document.spec.ts
@@ -81,7 +81,7 @@ vi.mock('@/hooks/use-metadata', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: vi.fn(),
   },
diff --git a/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.ts b/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.ts
index 16252909a2..df78b09fca 100644
--- a/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.ts
+++ b/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.ts
@@ -1,9 +1,9 @@
 import type { MetadataBatchEditToServer, MetadataItemInBatchEdit, MetadataItemWithEdit, MetadataItemWithValue } from '../types'
 import type { SimpleDocumentDetail } from '@/models/datasets'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useBoolean } from 'ahooks'
 import { t } from 'i18next'
 import { useMemo } from 'react'
-import { toast } from '@/app/components/base/ui/toast'
 import { useBatchUpdateDocMetadata } from '@/service/knowledge/use-metadata'
 import { UpdateType } from '../types'
 
diff --git a/web/app/components/datasets/metadata/hooks/use-edit-dataset-metadata.ts b/web/app/components/datasets/metadata/hooks/use-edit-dataset-metadata.ts
index 8f7ce0ab25..01ad98ef26 100644
--- a/web/app/components/datasets/metadata/hooks/use-edit-dataset-metadata.ts
+++ b/web/app/components/datasets/metadata/hooks/use-edit-dataset-metadata.ts
@@ -1,9 +1,9 @@
 import type { BuiltInMetadataItem, MetadataItemWithValueLength } from '../types'
 import type { DataSet } from '@/models/datasets'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useBoolean } from 'ahooks'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useBuiltInMetaDataFields, useCreateMetaData, useDatasetMetaData, useDeleteMetaData, useRenameMeta, useUpdateBuiltInStatus } from '@/service/knowledge/use-metadata'
 import { isShowManageMetadataLocalStorageKey } from '../types'
 import useCheckMetadataName from './use-check-metadata-name'
diff --git a/web/app/components/datasets/metadata/hooks/use-metadata-document.ts b/web/app/components/datasets/metadata/hooks/use-metadata-document.ts
index d70870690a..aa6162fb0d 100644
--- a/web/app/components/datasets/metadata/hooks/use-metadata-document.ts
+++ b/web/app/components/datasets/metadata/hooks/use-metadata-document.ts
@@ -1,9 +1,9 @@
 import type { BuiltInMetadataItem, MetadataItemWithValue } from '../types'
 import type { FullDocumentDetail } from '@/models/datasets'
+import { toast } from '@langgenius/dify-ui/toast'
 import { get } from 'es-toolkit/compat'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useDatasetDetailContext } from '@/context/dataset-detail'
 import { useLanguages, useMetadataMap } from '@/hooks/use-metadata'
 import { useBatchUpdateDocMetadata, useCreateMetaData, useDatasetMetaData, useDocumentMetaData } from '@/service/knowledge/use-metadata'
diff --git a/web/app/components/datasets/metadata/metadata-dataset/__tests__/create-metadata-modal.spec.tsx b/web/app/components/datasets/metadata/metadata-dataset/__tests__/create-metadata-modal.spec.tsx
index 1449ef8f60..7d09f4749a 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/__tests__/create-metadata-modal.spec.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/__tests__/create-metadata-modal.spec.tsx
@@ -26,7 +26,7 @@ type CreateContentProps = {
   hasBack?: boolean
 }
 
-vi.mock('../../../../base/ui/popover', async () => {
+vi.mock('@langgenius/dify-ui/popover', async () => {
   const React = await import('react')
   const PopoverContext = React.createContext<{ open: boolean, onOpenChange?: (open: boolean) => void } | null>(null)
 
diff --git a/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx b/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx
index 95e9c130ed..55e5f9de65 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx
@@ -23,7 +23,7 @@ vi.mock('../../hooks/use-check-metadata-name', () => ({
 }))
 
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: (args: unknown) => mockToastNotify(args),
   },
diff --git a/web/app/components/datasets/metadata/metadata-dataset/__tests__/select-metadata-modal.spec.tsx b/web/app/components/datasets/metadata/metadata-dataset/__tests__/select-metadata-modal.spec.tsx
index 2a31169b15..0ac3743a86 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/__tests__/select-metadata-modal.spec.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/__tests__/select-metadata-modal.spec.tsx
@@ -50,7 +50,7 @@ vi.mock('@/service/knowledge/use-metadata', () => ({
   }),
 }))
 
-vi.mock('../../../../base/ui/popover', async () => {
+vi.mock('@langgenius/dify-ui/popover', async () => {
   const React = await import('react')
   const PopoverContext = React.createContext<{ open: boolean, onOpenChange?: (open: boolean) => void } | null>(null)
 
diff --git a/web/app/components/datasets/metadata/metadata-dataset/create-metadata-modal.tsx b/web/app/components/datasets/metadata/metadata-dataset/create-metadata-modal.tsx
index 1e2e8fd9e8..687266eed9 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/create-metadata-modal.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/create-metadata-modal.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import type { Props as CreateContentProps } from './create-content'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import * as React from 'react'
-import { Popover, PopoverContent, PopoverTrigger } from '../../../base/ui/popover'
 import CreateContent from './create-content'
 
 type Props = {
diff --git a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
index 421babfb91..03c9883fbf 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
@@ -1,17 +1,6 @@
 'use client'
 import type { FC } from 'react'
 import type { BuiltInMetadataItem, MetadataItemWithValueLength } from '../types'
-import { cn } from '@langgenius/dify-ui/cn'
-import { RiAddLine, RiDeleteBinLine, RiEditLine } from '@remixicon/react'
-import { useBoolean, useHover } from 'ahooks'
-import * as React from 'react'
-import { useCallback, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Drawer from '@/app/components/base/drawer'
-import Input from '@/app/components/base/input'
-import Modal from '@/app/components/base/modal'
-import Switch from '@/app/components/base/switch'
-import Tooltip from '@/app/components/base/tooltip'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -20,9 +9,20 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
+import { toast } from '@langgenius/dify-ui/toast'
+import { RiAddLine, RiDeleteBinLine, RiEditLine } from '@remixicon/react'
+import { useBoolean, useHover } from 'ahooks'
+import * as React from 'react'
+import { useCallback, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Drawer from '@/app/components/base/drawer'
+import Input from '@/app/components/base/input'
+import Modal from '@/app/components/base/modal'
+import Tooltip from '@/app/components/base/tooltip'
 import CreateModal from '@/app/components/datasets/metadata/metadata-dataset/create-metadata-modal'
 import { getIcon } from '../utils/get-icon'
 import Field from './field'
diff --git a/web/app/components/datasets/metadata/metadata-dataset/select-metadata-modal.tsx b/web/app/components/datasets/metadata/metadata-dataset/select-metadata-modal.tsx
index f33a85642e..e0ed692677 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/select-metadata-modal.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/select-metadata-modal.tsx
@@ -1,11 +1,11 @@
 'use client'
+import type { Placement } from '@langgenius/dify-ui/popover'
 import type { FC } from 'react'
 import type { MetadataItem } from '../types'
 import type { Props as CreateContentProps } from './create-content'
-import type { Placement } from '@/app/components/base/ui/placement'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
-import { Popover, PopoverContent, PopoverTrigger } from '@/app/components/base/ui/popover'
 import { useDatasetMetaData } from '@/service/knowledge/use-metadata'
 import CreateContent from './create-content'
 import SelectMetadata from './select-metadata'
diff --git a/web/app/components/datasets/metadata/metadata-document/index.tsx b/web/app/components/datasets/metadata/metadata-document/index.tsx
index 6fb069dd02..18ee6e04ea 100644
--- a/web/app/components/datasets/metadata/metadata-document/index.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { FullDocumentDetail } from '@/models/datasets'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiEditLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import { Button } from '@/app/components/base/ui/button'
 import useMetadataDocument from '../hooks/use-metadata-document'
 import InfoGroup from './info-group'
 import NoData from './no-data'
diff --git a/web/app/components/datasets/metadata/metadata-document/no-data.tsx b/web/app/components/datasets/metadata/metadata-document/no-data.tsx
index e444827f1d..ee04c80be2 100644
--- a/web/app/components/datasets/metadata/metadata-document/no-data.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/no-data.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiArrowRightLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   onStart: () => void
diff --git a/web/app/components/datasets/rename-modal/__tests__/index.spec.tsx b/web/app/components/datasets/rename-modal/__tests__/index.spec.tsx
index 600e6c3434..4f8a421a52 100644
--- a/web/app/components/datasets/rename-modal/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/rename-modal/__tests__/index.spec.tsx
@@ -17,7 +17,7 @@ const { mockToast } = vi.hoisted(() => {
   return { mockToast }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
diff --git a/web/app/components/datasets/rename-modal/index.tsx b/web/app/components/datasets/rename-modal/index.tsx
index acfca2bbbc..a62c1c93be 100644
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@@ -2,7 +2,9 @@
 import type { MouseEventHandler } from 'react'
 import type { AppIconSelection } from '../../base/app-icon-picker'
 import type { DataSet } from '@/models/datasets'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useCallback, useRef, useState } from 'react'
@@ -10,8 +12,6 @@ import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { updateDatasetSetting } from '@/service/datasets'
 import AppIcon from '../../base/app-icon'
 import AppIconPicker from '../../base/app-icon-picker'
diff --git a/web/app/components/datasets/settings/form/__tests__/index.spec.tsx b/web/app/components/datasets/settings/form/__tests__/index.spec.tsx
index a3a22e000b..94eda16b2e 100644
--- a/web/app/components/datasets/settings/form/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/settings/form/__tests__/index.spec.tsx
@@ -193,7 +193,7 @@ vi.mock('@/app/components/datasets/common/check-rerank-model', () => ({
   isReRankModelSelected: () => true,
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: mockToastError,
     success: vi.fn(),
@@ -396,7 +396,7 @@ describe('Form', () => {
     })
 
     it('should show error when trying to save with empty name', async () => {
-      const { toast } = await import('@/app/components/base/ui/toast')
+      const { toast } = await import('@langgenius/dify-ui/toast')
       render(<Form />)
 
       // Clear the name
diff --git a/web/app/components/datasets/settings/form/hooks/__tests__/use-form-state.spec.ts b/web/app/components/datasets/settings/form/hooks/__tests__/use-form-state.spec.ts
index ece275c433..62d41a4ce0 100644
--- a/web/app/components/datasets/settings/form/hooks/__tests__/use-form-state.spec.ts
+++ b/web/app/components/datasets/settings/form/hooks/__tests__/use-form-state.spec.ts
@@ -127,7 +127,7 @@ vi.mock('@/app/components/datasets/common/check-rerank-model', () => ({
   isReRankModelSelected: () => true,
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: mockToastSuccess,
     error: mockToastError,
@@ -429,7 +429,7 @@ describe('useFormState', () => {
 
   describe('handleSave', () => {
     it('should show error toast when name is empty', async () => {
-      const { toast } = await import('@/app/components/base/ui/toast')
+      const { toast } = await import('@langgenius/dify-ui/toast')
       const { result } = renderHook(() => useFormState())
 
       act(() => {
@@ -444,7 +444,7 @@ describe('useFormState', () => {
     })
 
     it('should show error toast when name is whitespace only', async () => {
-      const { toast } = await import('@/app/components/base/ui/toast')
+      const { toast } = await import('@langgenius/dify-ui/toast')
       const { result } = renderHook(() => useFormState())
 
       act(() => {
@@ -477,7 +477,7 @@ describe('useFormState', () => {
     })
 
     it('should show success toast on successful save', async () => {
-      const { toast } = await import('@/app/components/base/ui/toast')
+      const { toast } = await import('@langgenius/dify-ui/toast')
       const { result } = renderHook(() => useFormState())
 
       await act(async () => {
@@ -550,7 +550,7 @@ describe('useFormState', () => {
 
     it('should show error toast on save failure', async () => {
       const { updateDatasetSetting } = await import('@/service/datasets')
-      const { toast } = await import('@/app/components/base/ui/toast')
+      const { toast } = await import('@langgenius/dify-ui/toast')
       vi.mocked(updateDatasetSetting).mockRejectedValueOnce(new Error('Network error'))
 
       const { result } = renderHook(() => useFormState())
diff --git a/web/app/components/datasets/settings/form/hooks/use-form-state.ts b/web/app/components/datasets/settings/form/hooks/use-form-state.ts
index d00534f7f4..ff61c1e815 100644
--- a/web/app/components/datasets/settings/form/hooks/use-form-state.ts
+++ b/web/app/components/datasets/settings/form/hooks/use-form-state.ts
@@ -4,9 +4,9 @@ import type { DefaultModel } from '@/app/components/header/account-setting/model
 import type { Member } from '@/models/common'
 import type { IconInfo, SummaryIndexSetting as SummaryIndexSettingType } from '@/models/datasets'
 import type { RetrievalConfig } from '@/types/app'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
diff --git a/web/app/components/datasets/settings/form/index.tsx b/web/app/components/datasets/settings/form/index.tsx
index 99ebf84307..f103d9d951 100644
--- a/web/app/components/datasets/settings/form/index.tsx
+++ b/web/app/components/datasets/settings/form/index.tsx
@@ -1,7 +1,7 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import { Button } from '@/app/components/base/ui/button'
 import BasicInfoSection from './components/basic-info-section'
 import ExternalKnowledgeSection from './components/external-knowledge-section'
 import IndexingSection from './components/indexing-section'
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 03992fb027..1f467e1798 100644
--- a/web/app/components/datasets/settings/index-method/keyword-number.tsx
+++ b/web/app/components/datasets/settings/index-method/keyword-number.tsx
@@ -1,7 +1,3 @@
-import * as React from 'react'
-import { useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import Tooltip from '@/app/components/base/tooltip'
 import {
   NumberField,
   NumberFieldControls,
@@ -9,8 +5,12 @@ import {
   NumberFieldGroup,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '@/app/components/base/ui/number-field'
-import { Slider } from '@/app/components/base/ui/slider'
+} from '@langgenius/dify-ui/number-field'
+import { Slider } from '@langgenius/dify-ui/slider'
+import * as React from 'react'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import Tooltip from '@/app/components/base/tooltip'
 
 const MIN_KEYWORD_NUMBER = 0
 const MAX_KEYWORD_NUMBER = 50
diff --git a/web/app/components/datasets/settings/permission-selector/index.tsx b/web/app/components/datasets/settings/permission-selector/index.tsx
index 8c31799add..a9b0c348d8 100644
--- a/web/app/components/datasets/settings/permission-selector/index.tsx
+++ b/web/app/components/datasets/settings/permission-selector/index.tsx
@@ -1,4 +1,5 @@
 import type { Member } from '@/models/common'
+import { Avatar } from '@langgenius/dify-ui/avatar'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiGroup2Line, RiLock2Line } from '@remixicon/react'
 import { useDebounceFn } from 'ahooks'
@@ -11,7 +12,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Avatar } from '@/app/components/base/ui/avatar'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { DatasetPermission } from '@/models/datasets'
 import MemberItem from './member-item'
diff --git a/web/app/components/datasets/settings/summary-index-setting.tsx b/web/app/components/datasets/settings/summary-index-setting.tsx
index 0a25f820c5..3bd47bf4b9 100644
--- a/web/app/components/datasets/settings/summary-index-setting.tsx
+++ b/web/app/components/datasets/settings/summary-index-setting.tsx
@@ -1,13 +1,13 @@
 import type { ChangeEvent } from 'react'
 import type { DefaultModel } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { SummaryIndexSetting as SummaryIndexSettingType } from '@/models/datasets'
+import { Switch } from '@langgenius/dify-ui/switch'
 import {
   memo,
   useCallback,
   useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Switch from '@/app/components/base/switch'
 import Textarea from '@/app/components/base/textarea'
 import Tooltip from '@/app/components/base/tooltip'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
diff --git a/web/app/components/develop/secret-key/secret-key-button.tsx b/web/app/components/develop/secret-key/secret-key-button.tsx
index 575ad93e88..ca5eb18403 100644
--- a/web/app/components/develop/secret-key/secret-key-button.tsx
+++ b/web/app/components/develop/secret-key/secret-key-button.tsx
@@ -1,8 +1,8 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiKey2Line } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import SecretKeyModal from '@/app/components/develop/secret-key/secret-key-modal'
 
 type ISecretKeyButtonProps = {
diff --git a/web/app/components/develop/secret-key/secret-key-generate.tsx b/web/app/components/develop/secret-key/secret-key-generate.tsx
index 85bcd0db1c..1fb6e65714 100644
--- a/web/app/components/develop/secret-key/secret-key-generate.tsx
+++ b/web/app/components/develop/secret-key/secret-key-generate.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { CreateApiKeyResponse } from '@/models/app'
 import { XMarkIcon } from '@heroicons/react/20/solid'
+import { Button } from '@langgenius/dify-ui/button'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 import InputCopy from './input-copy'
 import s from './style.module.css'
 
diff --git a/web/app/components/develop/secret-key/secret-key-modal.tsx b/web/app/components/develop/secret-key/secret-key-modal.tsx
index 58895b26d6..e8d9204318 100644
--- a/web/app/components/develop/secret-key/secret-key-modal.tsx
+++ b/web/app/components/develop/secret-key/secret-key-modal.tsx
@@ -1,6 +1,16 @@
 'use client'
 import type { CreateApiKeyResponse } from '@/models/app'
 import { PlusIcon, XMarkIcon } from '@heroicons/react/20/solid'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiDeleteBinLine } from '@remixicon/react'
 import {
   useState,
@@ -10,16 +20,6 @@ import ActionButton from '@/app/components/base/action-button'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
 import { useAppContext } from '@/context/app-context'
 import useTimestamp from '@/hooks/use-timestamp'
 import {
diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
index 00e21de7d6..869e2a6a18 100644
--- a/web/app/components/explore/app-card/index.tsx
+++ b/web/app/components/explore/app-card/index.tsx
@@ -2,12 +2,12 @@
 import type { App } from '@/models/explore'
 import type { TryAppSelection } from '@/types/try-app'
 import { PlusIcon } from '@heroicons/react/20/solid'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiInformation2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
 import AppIcon from '@/app/components/base/app-icon'
-import { Button } from '@/app/components/base/ui/button'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { AppModeEnum } from '@/types/app'
 import { AppTypeIcon } from '../../app/type-selector'
diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index b0e20c531a..d57283b999 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -3,6 +3,7 @@
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { App } from '@/models/explore'
 import type { TryAppSelection } from '@/types/try-app'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useDebounceFn } from 'ahooks'
 import { useQueryState } from 'nuqs'
@@ -12,7 +13,6 @@ import { useTranslation } from 'react-i18next'
 import DSLConfirmModal from '@/app/components/app/create-from-dsl-modal/dsl-confirm-modal'
 import Input from '@/app/components/base/input'
 import Loading from '@/app/components/base/loading'
-import { Button } from '@/app/components/base/ui/button'
 import AppCard from '@/app/components/explore/app-card'
 import Banner from '@/app/components/explore/banner/banner'
 import Category from '@/app/components/explore/category'
diff --git a/web/app/components/explore/create-app-modal/index.tsx b/web/app/components/explore/create-app-modal/index.tsx
index ebfb562b0c..ebe5a79a16 100644
--- a/web/app/components/explore/create-app-modal/index.tsx
+++ b/web/app/components/explore/create-app-modal/index.tsx
@@ -1,5 +1,8 @@
 'use client'
 import type { AppIconType } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
+import { Switch } from '@langgenius/dify-ui/switch'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import { noop } from 'es-toolkit/function'
@@ -9,10 +12,7 @@ import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import Switch from '@/app/components/base/switch'
 import Textarea from '@/app/components/base/textarea'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { useProviderContext } from '@/context/provider-context'
 import { AppModeEnum } from '@/types/app'
diff --git a/web/app/components/explore/item-operation/__tests__/index.spec.tsx b/web/app/components/explore/item-operation/__tests__/index.spec.tsx
index d54c644ab0..268fe8ebea 100644
--- a/web/app/components/explore/item-operation/__tests__/index.spec.tsx
+++ b/web/app/components/explore/item-operation/__tests__/index.spec.tsx
@@ -2,7 +2,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import ItemOperation from '../index'
 
-vi.mock('@/app/components/base/ui/dropdown-menu', () => {
+vi.mock('@langgenius/dify-ui/dropdown-menu', () => {
   const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
 
   const useDropdownMenuContext = () => {
diff --git a/web/app/components/explore/item-operation/index.tsx b/web/app/components/explore/item-operation/index.tsx
index 72bd00fa6e..0d9d57841e 100644
--- a/web/app/components/explore/item-operation/index.tsx
+++ b/web/app/components/explore/item-operation/index.tsx
@@ -1,6 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import {
   RiDeleteBinLine,
   RiEditLine,
@@ -9,12 +15,6 @@ import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
 import { Pin02 } from '../../base/icons/src/vender/line/general'
 import s from './style.module.css'
 
diff --git a/web/app/components/explore/sidebar/__tests__/index.spec.tsx b/web/app/components/explore/sidebar/__tests__/index.spec.tsx
index 0ce98f45db..cce42d6322 100644
--- a/web/app/components/explore/sidebar/__tests__/index.spec.tsx
+++ b/web/app/components/explore/sidebar/__tests__/index.spec.tsx
@@ -47,8 +47,8 @@ vi.mock('@/service/use-explore', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
+vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
   return {
     ...actual,
     toast: {
diff --git a/web/app/components/explore/sidebar/index.tsx b/web/app/components/explore/sidebar/index.tsx
index 85602a6bcc..c6128cb560 100644
--- a/web/app/components/explore/sidebar/index.tsx
+++ b/web/app/components/explore/sidebar/index.tsx
@@ -1,10 +1,4 @@
 'use client'
-import { cn } from '@langgenius/dify-ui/cn'
-import { useBoolean } from 'ahooks'
-import * as React from 'react'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Divider from '@/app/components/base/divider'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -13,9 +7,15 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { ScrollArea } from '@/app/components/base/ui/scroll-area'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/alert-dialog'
+import { cn } from '@langgenius/dify-ui/cn'
+import { ScrollArea } from '@langgenius/dify-ui/scroll-area'
+import { toast } from '@langgenius/dify-ui/toast'
+import { useBoolean } from 'ahooks'
+import * as React from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Divider from '@/app/components/base/divider'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import Link from '@/next/link'
 import { useSelectedLayoutSegments } from '@/next/navigation'
diff --git a/web/app/components/explore/try-app/app-info/index.tsx b/web/app/components/explore/try-app/app-info/index.tsx
index 441fabca82..a2c8c26e9f 100644
--- a/web/app/components/explore/try-app/app-info/index.tsx
+++ b/web/app/components/explore/try-app/app-info/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { TryAppInfo } from '@/service/try-app'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
 import AppIcon from '@/app/components/base/app-icon'
-import { Button } from '@/app/components/base/ui/button'
 import useGetRequirements from './use-get-requirements'
 
 type Props = {
diff --git a/web/app/components/explore/try-app/index.tsx b/web/app/components/explore/try-app/index.tsx
index 644047d06f..209bde9cb6 100644
--- a/web/app/components/explore/try-app/index.tsx
+++ b/web/app/components/explore/try-app/index.tsx
@@ -2,12 +2,12 @@
 'use client'
 import type { FC } from 'react'
 import type { App as AppType } from '@/models/explore'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useState } from 'react'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal/index'
-import { Button } from '@/app/components/base/ui/button'
 import { IS_CLOUD_EDITION } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useGetTryAppInfo } from '@/service/use-try-app'
diff --git a/web/app/components/goto-anything/index.tsx b/web/app/components/goto-anything/index.tsx
index f3bf40f62a..13f43ba75a 100644
--- a/web/app/components/goto-anything/index.tsx
+++ b/web/app/components/goto-anything/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import type { FC, KeyboardEvent } from 'react'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { Command } from 'cmdk'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
 import InstallFromMarketplace from '../plugins/install-plugin/install-from-marketplace'
 import { SlashCommandProvider } from './actions/commands'
 import { slashCommandRegistry } from './actions/commands/registry'
diff --git a/web/app/components/header/account-about/index.tsx b/web/app/components/header/account-about/index.tsx
index cdab2815dc..9375497566 100644
--- a/web/app/components/header/account-about/index.tsx
+++ b/web/app/components/header/account-about/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { LangGeniusVersionResponse } from '@/models/common'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiCloseLine } from '@remixicon/react'
 import dayjs from 'dayjs'
 import { useTranslation } from 'react-i18next'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 import { IS_CE_EDITION } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
diff --git a/web/app/components/header/account-dropdown/__tests__/compliance.spec.tsx b/web/app/components/header/account-dropdown/__tests__/compliance.spec.tsx
index 15439b157f..b4a700e22d 100644
--- a/web/app/components/header/account-dropdown/__tests__/compliance.spec.tsx
+++ b/web/app/components/header/account-dropdown/__tests__/compliance.spec.tsx
@@ -1,8 +1,8 @@
 import type { ModalContextState } from '@/context/modal-context'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@langgenius/dify-ui/dropdown-menu'
+import { toast } from '@langgenius/dify-ui/toast'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/app/components/base/ui/dropdown-menu'
-import { toast } from '@/app/components/base/ui/toast'
 import { Plan } from '@/app/components/billing/type'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContext } from '@/context/modal-context'
diff --git a/web/app/components/header/account-dropdown/__tests__/support.spec.tsx b/web/app/components/header/account-dropdown/__tests__/support.spec.tsx
index a826038ad0..38be78abf5 100644
--- a/web/app/components/header/account-dropdown/__tests__/support.spec.tsx
+++ b/web/app/components/header/account-dropdown/__tests__/support.spec.tsx
@@ -1,7 +1,7 @@
 import type { AppContextValue } from '@/context/app-context'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@langgenius/dify-ui/dropdown-menu'
 
-import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/app/components/base/ui/dropdown-menu'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { Plan } from '@/app/components/billing/type'
 import { useAppContext } from '@/context/app-context'
 import { baseProviderContextValue, useProviderContext } from '@/context/provider-context'
diff --git a/web/app/components/header/account-dropdown/compliance.tsx b/web/app/components/header/account-dropdown/compliance.tsx
index 2f79c631fb..4f5b79fc66 100644
--- a/web/app/components/header/account-dropdown/compliance.tsx
+++ b/web/app/components/header/account-dropdown/compliance.tsx
@@ -1,11 +1,11 @@
 import type { ReactNode } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
+import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from '@langgenius/dify-ui/dropdown-menu'
+import { toast } from '@langgenius/dify-ui/toast'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { useMutation } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
-import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from '@/app/components/base/ui/dropdown-menu'
-import { toast } from '@/app/components/base/ui/toast'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { Plan } from '@/app/components/billing/type'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContext } from '@/context/modal-context'
diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx
index 8552852b81..27a601a4ab 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -1,14 +1,14 @@
 'use client'
 
 import type { MouseEventHandler, ReactNode } from 'react'
+import { Avatar } from '@langgenius/dify-ui/avatar'
 import { cn } from '@langgenius/dify-ui/cn'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@langgenius/dify-ui/dropdown-menu'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { resetUser } from '@/app/components/base/amplitude/utils'
 import PremiumBadge from '@/app/components/base/premium-badge'
 import ThemeSwitcher from '@/app/components/base/theme-switcher'
-import { Avatar } from '@/app/components/base/ui/avatar'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/app/components/base/ui/dropdown-menu'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { IS_CLOUD_EDITION } from '@/config'
 import { useAppContext } from '@/context/app-context'
diff --git a/web/app/components/header/account-dropdown/support.tsx b/web/app/components/header/account-dropdown/support.tsx
index 97d87ac7e1..9a7023c415 100644
--- a/web/app/components/header/account-dropdown/support.tsx
+++ b/web/app/components/header/account-dropdown/support.tsx
@@ -1,5 +1,5 @@
+import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from '@langgenius/dify-ui/dropdown-menu'
 import { useTranslation } from 'react-i18next'
-import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from '@/app/components/base/ui/dropdown-menu'
 import { toggleZendeskWindow } from '@/app/components/base/zendesk/utils'
 import { Plan } from '@/app/components/billing/type'
 import { SUPPORT_EMAIL_ADDRESS, ZENDESK_WIDGET_KEY } from '@/config'
diff --git a/web/app/components/header/account-dropdown/workplace-selector/__tests__/index.spec.tsx b/web/app/components/header/account-dropdown/workplace-selector/__tests__/index.spec.tsx
index 7e4a969089..28b07d114b 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/__tests__/index.spec.tsx
@@ -33,7 +33,7 @@ vi.mock('@/service/common', () => ({
   switchWorkspace: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: (args: unknown) => toastMocks.mockNotify(args),
   },
@@ -45,8 +45,8 @@ vi.mock('@/app/components/base/ui/toast', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/ui/select', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/select')>()
+vi.mock('@langgenius/dify-ui/select', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/select')>()
 
   return {
     ...actual,
diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
index bb96137fb3..ae6f6729fd 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -1,5 +1,4 @@
 import type { Plan } from '@/app/components/billing/type'
-import { useTranslation } from 'react-i18next'
 import {
   Select,
   SelectContent,
@@ -8,8 +7,9 @@ import {
   SelectItemText,
   SelectLabel,
   SelectTrigger,
-} from '@/app/components/base/ui/select'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/select'
+import { toast } from '@langgenius/dify-ui/toast'
+import { useTranslation } from 'react-i18next'
 import PlanBadge from '@/app/components/header/plan-badge'
 import { useWorkspacesContext } from '@/context/workspace-context'
 import { switchWorkspace } from '@/service/common'
diff --git a/web/app/components/header/account-setting/__tests__/menu-dialog.dialog.spec.tsx b/web/app/components/header/account-setting/__tests__/menu-dialog.dialog.spec.tsx
index db8aec4ec1..3ed0b70968 100644
--- a/web/app/components/header/account-setting/__tests__/menu-dialog.dialog.spec.tsx
+++ b/web/app/components/header/account-setting/__tests__/menu-dialog.dialog.spec.tsx
@@ -10,7 +10,7 @@ type DialogProps = {
 
 let latestOnOpenChange: DialogProps['onOpenChange']
 
-vi.mock('@/app/components/base/ui/dialog', () => ({
+vi.mock('@langgenius/dify-ui/dialog', () => ({
   Dialog: ({ children, onOpenChange }: DialogProps) => {
     latestOnOpenChange = onOpenChange
     return <div data-testid="dialog">{children}</div>
diff --git a/web/app/components/header/account-setting/api-based-extension-page/__tests__/modal.spec.tsx b/web/app/components/header/account-setting/api-based-extension-page/__tests__/modal.spec.tsx
index 8bfc1b13df..e006a6be03 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/__tests__/modal.spec.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/__tests__/modal.spec.tsx
@@ -28,7 +28,7 @@ vi.mock('@/service/common', () => ({
   updateApiBasedExtension: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
diff --git a/web/app/components/header/account-setting/api-based-extension-page/index.tsx b/web/app/components/header/account-setting/api-based-extension-page/index.tsx
index b5d07dcfe1..bc26f63838 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/index.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/index.tsx
@@ -1,8 +1,8 @@
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiAddLine,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { useModalContext } from '@/context/modal-context'
 import { useApiBasedExtensions } from '@/service/use-common'
 import Empty from './empty'
diff --git a/web/app/components/header/account-setting/api-based-extension-page/item.tsx b/web/app/components/header/account-setting/api-based-extension-page/item.tsx
index 5ef349f5e0..cfda9a672f 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/item.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/item.tsx
@@ -1,11 +1,5 @@
 import type { FC } from 'react'
 import type { ApiBasedExtension } from '@/models/common'
-import {
-  RiDeleteBinLine,
-  RiEditLine,
-} from '@remixicon/react'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -13,8 +7,14 @@ import {
   AlertDialogConfirmButton,
   AlertDialogContent,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
+import {
+  RiDeleteBinLine,
+  RiEditLine,
+} from '@remixicon/react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useModalContext } from '@/context/modal-context'
 import { deleteApiBasedExtension } from '@/service/common'
 
diff --git a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
index bffd6da230..b7d2e09734 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
@@ -1,12 +1,12 @@
 import type { FC } from 'react'
 import type { ApiBasedExtension } from '@/models/common'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { useDocLink } from '@/context/i18n'
 import { addApiBasedExtension, updateApiBasedExtension } from '@/service/common'
 
diff --git a/web/app/components/header/account-setting/data-source-page-new/card.tsx b/web/app/components/header/account-setting/data-source-page-new/card.tsx
index 9e8a54eeb2..3d875ab8fa 100644
--- a/web/app/components/header/account-setting/data-source-page-new/card.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/card.tsx
@@ -2,12 +2,6 @@ import type {
   DataSourceAuth,
   DataSourceCredential,
 } from './types'
-import {
-  memo,
-  useCallback,
-  useRef,
-} from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -15,7 +9,13 @@ import {
   AlertDialogConfirmButton,
   AlertDialogContent,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
+} from '@langgenius/dify-ui/alert-dialog'
+import {
+  memo,
+  useCallback,
+  useRef,
+} from 'react'
+import { useTranslation } from 'react-i18next'
 import {
   ApiKeyModal,
   usePluginAuthAction,
diff --git a/web/app/components/header/account-setting/data-source-page-new/configure.tsx b/web/app/components/header/account-setting/data-source-page-new/configure.tsx
index 1cf2c9d382..712fb91415 100644
--- a/web/app/components/header/account-setting/data-source-page-new/configure.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/configure.tsx
@@ -4,6 +4,7 @@ import type {
   AddOAuthButtonProps,
   PluginPayload,
 } from '@/app/components/plugins/plugin-auth/types'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiAddLine,
 } from '@remixicon/react'
@@ -19,7 +20,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 import {
   AddApiKeyButton,
   AddOAuthButton,
diff --git a/web/app/components/header/account-setting/data-source-page-new/item.tsx b/web/app/components/header/account-setting/data-source-page-new/item.tsx
index 658d685ab2..b00db1687f 100644
--- a/web/app/components/header/account-setting/data-source-page-new/item.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/item.tsx
@@ -1,13 +1,13 @@
 import type {
   DataSourceCredential,
 } from './types'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   memo,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import Operator from './operator'
 
diff --git a/web/app/components/header/account-setting/data-source-page-new/operator.tsx b/web/app/components/header/account-setting/data-source-page-new/operator.tsx
index 437fa80139..bcd3acb6b2 100644
--- a/web/app/components/header/account-setting/data-source-page-new/operator.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/operator.tsx
@@ -1,6 +1,13 @@
 import type {
   DataSourceCredential,
 } from './types'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import {
   memo,
   useCallback,
@@ -8,13 +15,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
 import { CredentialTypeEnum } from '@/app/components/plugins/plugin-auth/types'
 
 type OperatorProps = {
diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index 3ec6dea315..f356bd71b2 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { AccountSettingTab } from '@/app/components/header/account-setting/constants'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { ScrollArea } from '@langgenius/dify-ui/scroll-area'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import SearchInput from '@/app/components/base/search-input'
-import { Button } from '@/app/components/base/ui/button'
-import { ScrollArea } from '@/app/components/base/ui/scroll-area'
 import BillingPage from '@/app/components/billing/billing-page'
 import CustomPage from '@/app/components/custom/custom-page'
 import {
diff --git a/web/app/components/header/account-setting/language-page/__tests__/index.spec.tsx b/web/app/components/header/account-setting/language-page/__tests__/index.spec.tsx
index 1139e953a8..c026b42f22 100644
--- a/web/app/components/header/account-setting/language-page/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/language-page/__tests__/index.spec.tsx
@@ -1,6 +1,6 @@
 import type { UserProfileResponse } from '@/models/common'
+import { ToastHost } from '@langgenius/dify-ui/toast'
 import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
-import { ToastHost } from '@/app/components/base/ui/toast'
 import { languages } from '@/i18n-config/language'
 import { updateUserProfile } from '@/service/common'
 import { timezones } from '@/utils/timezone'
diff --git a/web/app/components/header/account-setting/language-page/index.tsx b/web/app/components/header/account-setting/language-page/index.tsx
index e538337d62..effd468895 100644
--- a/web/app/components/header/account-setting/language-page/index.tsx
+++ b/web/app/components/header/account-setting/language-page/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { Item } from '@/app/components/base/select'
 import type { Locale } from '@/i18n-config'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { SimpleSelect } from '@/app/components/base/select'
-import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { useLocale } from '@/context/i18n'
 import { setLocaleOnClient } from '@/i18n-config'
diff --git a/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/dialog.spec.tsx b/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/dialog.spec.tsx
index 1f3f4efff7..e134f8f93c 100644
--- a/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/dialog.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/dialog.spec.tsx
@@ -11,7 +11,7 @@ type DialogProps = {
 
 let latestOnOpenChange: DialogProps['onOpenChange']
 
-vi.mock('@/app/components/base/ui/dialog', () => ({
+vi.mock('@langgenius/dify-ui/dialog', () => ({
   Dialog: ({ children, onOpenChange }: DialogProps) => {
     latestOnOpenChange = onOpenChange
     return <div data-testid="dialog">{children}</div>
diff --git a/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/index.spec.tsx b/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/index.spec.tsx
index d794a75ada..e2248a44c3 100644
--- a/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/index.spec.tsx
@@ -13,7 +13,7 @@ const toastMocks = vi.hoisted(() => ({
 
 vi.mock('@/context/app-context')
 vi.mock('@/service/common')
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: (args: unknown) => toastMocks.mockNotify(args),
   },
diff --git a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
index b4dbe243cf..0f6a6fb8d6 100644
--- a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
@@ -1,11 +1,11 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useId, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@/app/components/base/ui/dialog'
-import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { updateWorkspaceInfo } from '@/service/common'
 
diff --git a/web/app/components/header/account-setting/members-page/index.tsx b/web/app/components/header/account-setting/members-page/index.tsx
index 0a3ed87e8f..f671eed94a 100644
--- a/web/app/components/header/account-setting/members-page/index.tsx
+++ b/web/app/components/header/account-setting/members-page/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { InvitationResult } from '@/models/common'
+import { Avatar } from '@langgenius/dify-ui/avatar'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Avatar } from '@/app/components/base/ui/avatar'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { NUM_INFINITE } from '@/app/components/billing/config'
 import { Plan } from '@/app/components/billing/type'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
diff --git a/web/app/components/header/account-setting/members-page/invite-button.tsx b/web/app/components/header/account-setting/members-page/invite-button.tsx
index c4e73b8feb..c703924112 100644
--- a/web/app/components/header/account-setting/members-page/invite-button.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-button.tsx
@@ -1,7 +1,7 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { RiUserAddLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
-import { Button } from '@/app/components/base/ui/button'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useWorkspacePermissions } from '@/service/use-workspace'
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/__tests__/index.spec.tsx b/web/app/components/header/account-setting/members-page/invite-modal/__tests__/index.spec.tsx
index 7de1fbeccb..9ed99614e4 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/__tests__/index.spec.tsx
@@ -1,8 +1,8 @@
 import type { InvitationResponse } from '@/models/common'
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { vi } from 'vitest'
-import { toast } from '@/app/components/base/ui/toast'
 import { useProviderContextSelector } from '@/context/provider-context'
 import { inviteMember } from '@/service/common'
 import InviteModal from '../index'
@@ -18,7 +18,7 @@ vi.mock('@/context/provider-context', () => ({
   })),
 }))
 vi.mock('@/service/common')
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: mockToastError,
   },
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
index e90455f2d4..426d0491a2 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
@@ -1,14 +1,14 @@
 'use client'
 import type { RoleKey } from './role-selector'
 import type { InvitationResult } from '@/models/common'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useBoolean } from 'ahooks'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ReactMultiEmail } from 'react-multi-email'
-import { Button } from '@/app/components/base/ui/button'
-import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@/app/components/base/ui/dialog'
-import { toast } from '@/app/components/base/ui/toast'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
 import { useProviderContextSelector } from '@/context/provider-context'
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx b/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
index 68cec4fe71..9c44e8b93d 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
@@ -1,11 +1,11 @@
 import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/app/components/base/ui/popover'
+} from '@langgenius/dify-ui/popover'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 import { useProviderContext } from '@/context/provider-context'
 
 const roleI18nKeyMap = {
diff --git a/web/app/components/header/account-setting/members-page/invited-modal/index.tsx b/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
index d7d48759c0..52cc69f726 100644
--- a/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
@@ -1,9 +1,9 @@
 import type { InvitationResult } from '@/models/common'
+import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
-import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@/app/components/base/ui/dialog'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { IS_CE_EDITION } from '@/config'
 import InvitationLink from './invitation-link'
 
diff --git a/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx b/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx
index 4297099382..778d9fc8c9 100644
--- a/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx
+++ b/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { SuccessInvitationResult } from '.'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import copy from 'copy-to-clipboard'
 import { t } from 'i18next'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import s from './index.module.css'
 
 type IInvitationLinkProps = {
diff --git a/web/app/components/header/account-setting/members-page/operation/index.tsx b/web/app/components/header/account-setting/members-page/operation/index.tsx
index dab0c84e5b..b67fb26bcd 100644
--- a/web/app/components/header/account-setting/members-page/operation/index.tsx
+++ b/web/app/components/header/account-setting/members-page/operation/index.tsx
@@ -1,16 +1,16 @@
 'use client'
 import type { Member } from '@/models/common'
 import { cn } from '@langgenius/dify-ui/cn'
-import { memo, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/dropdown-menu'
+import { toast } from '@langgenius/dify-ui/toast'
+import { memo, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useProviderContext } from '@/context/provider-context'
 import { deleteMemberOrCancelInvitation, updateMemberRole } from '@/service/common'
 
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/__tests__/index.spec.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/__tests__/index.spec.tsx
index 07a728d609..9e05a93c7a 100644
--- a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/__tests__/index.spec.tsx
@@ -15,7 +15,7 @@ const toastMocks = vi.hoisted(() => ({
 vi.mock('@/context/app-context')
 vi.mock('@/service/common')
 vi.mock('@/service/use-common')
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: (args: unknown) => toastMocks.mockNotify(args),
   },
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
index 8554db341f..85a3ac3b22 100644
--- a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
@@ -1,11 +1,11 @@
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { ownershipTransfer, sendOwnerEmail, verifyOwnerEmail } from '@/service/common'
 import MemberSelector from './member-selector'
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx
index 713104fcc3..5875b4fb6a 100644
--- a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
+import { Avatar } from '@langgenius/dify-ui/avatar'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
-import { Avatar } from '@/app/components/base/ui/avatar'
 import { useMembers } from '@/service/use-common'
 
 type Props = {
diff --git a/web/app/components/header/account-setting/menu-dialog.tsx b/web/app/components/header/account-setting/menu-dialog.tsx
index f1a0307b0d..9bd2df5fa4 100644
--- a/web/app/components/header/account-setting/menu-dialog.tsx
+++ b/web/app/components/header/account-setting/menu-dialog.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { useCallback } from 'react'
-import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
 
 type DialogProps = {
   className?: string
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
index 50ea37e45e..a1e181e97e 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
@@ -3,6 +3,9 @@ import type {
   CustomConfigurationModelFixedFields,
   ModelProvider,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import {
+  Button,
+} from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddCircleFill,
@@ -20,9 +23,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Tooltip from '@/app/components/base/tooltip'
-import {
-  Button,
-} from '@/app/components/base/ui/button'
 import { ModelModalModeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import ModelIcon from '../model-icon'
 import { useAuth } from './hooks/use-auth'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx
index 94b3ab2bc8..714c492137 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx
@@ -1,5 +1,6 @@
 import type { Credential } from '../../declarations'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import {
   memo,
   useMemo,
@@ -7,7 +8,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import Indicator from '@/app/components/header/indicator'
 
 type CredentialItemProps = {
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
index 9c0d6577ef..ca0e0d9c73 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
@@ -9,6 +9,15 @@ import type {
 import type {
   PortalToFollowElemOptions,
 } from '@/app/components/base/portal-to-follow-elem'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
@@ -25,15 +34,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
 import { useAuth } from '../hooks'
 import AuthorizedItem from './authorized-item'
 
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx
index 42f4b68026..b570a5335e 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiEqualizer2Line,
@@ -5,7 +6,6 @@ import {
 } from '@remixicon/react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 
 type ConfigModelProps = {
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx
index e64c5aedc0..4a268168ba 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx
@@ -2,6 +2,9 @@ import type {
   CustomConfigurationModelFixedFields,
   ModelProvider,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import {
+  Button,
+} from '@langgenius/dify-ui/button'
 import {
   RiEqualizer2Line,
 } from '@remixicon/react'
@@ -11,9 +14,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
-import {
-  Button,
-} from '@/app/components/base/ui/button'
 import { ConfigurationMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import Authorized from './authorized'
 import { useCredentialStatus } from './hooks'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/__tests__/use-auth.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/__tests__/use-auth.spec.tsx
index be9fb2c486..bb682cf8a4 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/__tests__/use-auth.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/__tests__/use-auth.spec.tsx
@@ -21,8 +21,8 @@ const mockAddModelCredential = vi.fn()
 const mockEditProviderCredential = vi.fn()
 const mockEditModelCredential = vi.fn()
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
+vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
   return {
     ...actual,
     default: {
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.ts b/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.ts
index 72587e3da6..1cdb28523e 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.ts
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.ts
@@ -1,7 +1,7 @@
 import type { ConfigurationMethodEnum, Credential, CustomConfigurationModelFixedFields, CustomModel, ModelModalModeEnum, ModelProvider } from '../../declarations'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useModelModalHandler, useRefreshModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { useDeleteModel } from '@/service/use-models'
 import { useAuthService } from './use-auth-service'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx
index 6737a6ffff..0979d4a4b7 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx
@@ -2,15 +2,15 @@ import type {
   CustomConfigurationModelFixedFields,
   ModelProvider,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import {
+  Button,
+} from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  Button,
-} from '@/app/components/base/ui/button'
 import {
   ConfigurationMethodEnum,
   ModelModalModeEnum,
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
index af374b8588..58ffc180dd 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
@@ -4,6 +4,7 @@ import type {
   CustomModel,
   ModelProvider,
 } from '../declarations'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import {
@@ -13,7 +14,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import { ConfigurationMethodEnum, ModelModalModeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import Indicator from '@/app/components/header/indicator'
 import Authorized from './authorized'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/__tests__/dialog.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/__tests__/dialog.spec.tsx
index 21f8d554c4..e2c934bb7c 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/__tests__/dialog.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/__tests__/dialog.spec.tsx
@@ -31,7 +31,7 @@ vi.mock('../../model-auth', () => ({
   CredentialSelector: ({ credentials }: { credentials: Credential[] }) => <div>{`credentials:${credentials.length}`}</div>,
 }))
 
-vi.mock('@/app/components/base/ui/dialog', () => ({
+vi.mock('@langgenius/dify-ui/dialog', () => ({
   Dialog: ({ children, onOpenChange }: DialogProps) => {
     latestDialogOnOpenChange = onOpenChange
     return <div>{children}</div>
@@ -40,7 +40,7 @@ vi.mock('@/app/components/base/ui/dialog', () => ({
   DialogCloseButton: () => <button type="button">close</button>,
 }))
 
-vi.mock('@/app/components/base/ui/alert-dialog', () => ({
+vi.mock('@langgenius/dify-ui/alert-dialog', () => ({
   AlertDialog: ({ children, onOpenChange }: AlertDialogProps) => {
     latestAlertDialogOnOpenChange = onOpenChange
     return <div>{children}</div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
index 995da8bb98..a8f004f3a2 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
@@ -9,6 +9,20 @@ import type {
   FormRefObject,
   FormSchema,
 } from '@/app/components/base/form/types'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
+import {
+  Dialog,
+  DialogCloseButton,
+  DialogContent,
+} from '@langgenius/dify-ui/dialog'
 import {
   memo,
   useCallback,
@@ -22,20 +36,6 @@ import AuthForm from '@/app/components/base/form/form-scenarios/auth'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
 import Loading from '@/app/components/base/loading'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
-import {
-  Dialog,
-  DialogCloseButton,
-  DialogContent,
-} from '@/app/components/base/ui/dialog'
 import {
   useAuth,
   useCredentialData,
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/parameter-item.select.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/parameter-item.select.spec.tsx
index ae4a68bad7..c221071b82 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/parameter-item.select.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/parameter-item.select.spec.tsx
@@ -6,8 +6,8 @@ vi.mock('../../hooks', () => ({
   useLanguage: () => 'en_US',
 }))
 
-vi.mock('@/app/components/base/ui/select', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/select')>()
+vi.mock('@langgenius/dify-ui/select', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/select')>()
 
   return {
     ...actual,
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/parameter-item.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/parameter-item.spec.tsx
index 2e928c36cc..a57884df1d 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/parameter-item.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/parameter-item.spec.tsx
@@ -11,7 +11,7 @@ vi.mock('../../hooks', () => ({
   useLanguage: () => 'en_US',
 }))
 
-vi.mock('@/app/components/base/ui/slider', () => ({
+vi.mock('@langgenius/dify-ui/slider', () => ({
   Slider: ({ onValueChange }: { onValueChange: (v: number) => void }) => (
     <button onClick={() => onValueChange(2)} data-testid="slider-btn">Slide 2</button>
   ),
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx
index 7545cf6a22..598db04ee9 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx
@@ -1,5 +1,5 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { ConfigurationMethodEnum } from '../declarations'
 
 type ConfigurationButtonProps = {
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
index 38b343bc19..6f37775052 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
@@ -14,16 +14,16 @@ import type {
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useMemo, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
-import Loading from '@/app/components/base/loading'
 import {
   Popover,
   PopoverClose,
   PopoverContent,
   PopoverTrigger,
-} from '@/app/components/base/ui/popover'
+} from '@langgenius/dify-ui/popover'
+import { useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
+import Loading from '@/app/components/base/loading'
 import { PROVIDER_WITH_PRESET_TONE, STOP_PARAMETER_RULE, TONE_LIST } from '@/config'
 import { useModelParameterRules } from '@/service/use-common'
 import {
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
index 4cda97031f..f7e1962fd7 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
@@ -4,15 +4,15 @@ import type {
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger, SelectValue } from '@langgenius/dify-ui/select'
+import { Slider } from '@langgenius/dify-ui/slider'
+import { Switch } from '@langgenius/dify-ui/switch'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import Radio from '@/app/components/base/radio'
-import Switch from '@/app/components/base/switch'
 import TagInput from '@/app/components/base/tag-input'
-import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger, SelectValue } from '@/app/components/base/ui/select'
-import { Slider } from '@/app/components/base/ui/slider'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { useLanguage } from '../hooks'
 import { isNullOrUndefined } from '../utils'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
index c2138c1c6f..cb537ab18f 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
@@ -1,15 +1,15 @@
 import type { ReactNode } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Brush01 } from '@/app/components/base/icons/src/vender/solid/editor'
-import { Scales02 } from '@/app/components/base/icons/src/vender/solid/FinanceAndECommerce'
-import { Target04 } from '@/app/components/base/icons/src/vender/solid/general'
-import { Button } from '@/app/components/base/ui/button'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import { useTranslation } from 'react-i18next'
+import { Brush01 } from '@/app/components/base/icons/src/vender/solid/editor'
+import { Scales02 } from '@/app/components/base/icons/src/vender/solid/FinanceAndECommerce'
+import { Target04 } from '@/app/components/base/icons/src/vender/solid/general'
 import { TONE_LIST } from '@/config'
 
 const toneI18nKeyMap = {
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
index 06823d1a74..d9cb29abbf 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
@@ -5,8 +5,8 @@ import type {
   ModelProvider,
 } from '../declarations'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { useTranslation } from 'react-i18next'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { useProviderContext } from '@/context/provider-context'
 import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/popover.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/popover.spec.tsx
index e92bab1db5..d7501672f4 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/popover.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/popover.spec.tsx
@@ -16,7 +16,7 @@ vi.mock('../../hooks', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/popover', () => ({
+vi.mock('@langgenius/dify-ui/popover', () => ({
   Popover: ({ children, onOpenChange }: PopoverProps) => {
     latestOnOpenChange = onOpenChange
     return <div>{children}</div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/popup-item.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/popup-item.spec.tsx
index 6728791120..341a9c6abc 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/popup-item.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/popup-item.spec.tsx
@@ -44,7 +44,7 @@ vi.mock('@/app/components/base/tooltip', () => ({
   default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }))
 
-vi.mock('@/app/components/base/ui/popover', () => ({
+vi.mock('@langgenius/dify-ui/popover', () => ({
   Popover: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   PopoverTrigger: ({ render }: { render: React.ReactNode }) => <>{render}</>,
   PopoverContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx
index 44392a70a5..9241c592f5 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx
@@ -5,12 +5,12 @@ import type {
   ModelFeatureEnum,
   ModelItem,
 } from '../declarations'
-import { useState } from 'react'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/app/components/base/ui/popover'
+} from '@langgenius/dify-ui/popover'
+import { useState } from 'react'
 import { useCurrentProviderAndModel } from '../hooks'
 import ModelSelectorTrigger from './model-selector-trigger'
 import Popup from './popup'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/model-selector-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/model-selector-trigger.tsx
index d43324ca12..6b9bcae8dc 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/model-selector-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/model-selector-trigger.tsx
@@ -5,8 +5,8 @@ import type {
   ModelItem,
 } from '../declarations'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { useTranslation } from 'react-i18next'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { useProviderContext } from '@/context/provider-context'
 import {
   DERIVED_MODEL_STATUS_BADGE_I18N,
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
index e38cc07ca2..ed16cd7904 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
@@ -5,15 +5,15 @@ import type {
   ModelItem,
 } from '../declarations'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { CreditsCoin } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/app/components/base/ui/popover'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
+} from '@langgenius/dify-ui/popover'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { CreditsCoin } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import {
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
index b40bc53a65..017194aaf5 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
@@ -5,11 +5,11 @@ import type {
   ModelItem,
 } from '../declarations'
 import type { ModelProviderQuotaGetPaid } from '@/types/model-provider'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useTheme } from 'next-themes'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status'
 import useRefreshPluginList from '@/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list'
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/credential-panel.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/credential-panel.spec.tsx
index 4f51de9b41..f07f9652f8 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/credential-panel.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/credential-panel.spec.tsx
@@ -32,7 +32,7 @@ vi.mock('@/context/global-public-context', () => ({
   useSystemFeaturesQuery: () => ({ data: { trial_models: ['langgenius/openai/openai'] } }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: { notify: mockToastNotify },
   toast: {
     success: (message: string) => mockToastNotify({ type: 'success', message }),
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-modal.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-modal.spec.tsx
index eedc04115c..c4794c9775 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-modal.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-modal.spec.tsx
@@ -52,8 +52,8 @@ let mockCredentialData: CredentialData | undefined = {
   current_credential_name: 'Default',
 }
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
+vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
   return {
     ...actual,
     default: {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/use-change-provider-priority.spec.ts b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/use-change-provider-priority.spec.ts
index 57c5121014..7f6e7d393a 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/use-change-provider-priority.spec.ts
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/use-change-provider-priority.spec.ts
@@ -16,7 +16,7 @@ const mockMutationOptions = vi.fn((options: Record<string, unknown>) => ({
   ...options,
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: (...args: unknown[]) => mockNotify(...args),
   },
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/dialog.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/dialog.spec.tsx
index b4ec0e09d2..85ae2d7e52 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/dialog.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/dialog.spec.tsx
@@ -34,7 +34,7 @@ vi.mock('../use-activate-credential', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/alert-dialog', () => ({
+vi.mock('@langgenius/dify-ui/alert-dialog', () => ({
   AlertDialog: ({ children, onOpenChange }: AlertDialogProps) => {
     latestOnOpenChange = onOpenChange
     return <div>{children}</div>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/use-activate-credential.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/use-activate-credential.spec.tsx
index 12acf479c0..aec9c9f691 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/use-activate-credential.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/use-activate-credential.spec.tsx
@@ -1,6 +1,6 @@
 import type { Credential, ModelProvider } from '../../../declarations'
+import { toast } from '@langgenius/dify-ui/toast'
 import { act, renderHook } from '@testing-library/react'
-import { toast } from '@/app/components/base/ui/toast'
 import { useActivateCredential } from '../use-activate-credential'
 
 const mockMutate = vi.fn()
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.tsx
index e6f5e51d61..41645677b6 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.tsx
@@ -1,7 +1,7 @@
 import type { Credential, CustomModel, ModelProvider } from '../../declarations'
+import { Button } from '@langgenius/dify-ui/button'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import CredentialItem from '../../model-auth/authorized/credential-item'
 
 type ApiKeySectionProps = {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/dropdown-content.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/dropdown-content.tsx
index 415539383b..0e0f3a67b1 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/dropdown-content.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/dropdown-content.tsx
@@ -1,7 +1,5 @@
 import type { Credential, ModelProvider, PreferredProviderTypeEnum } from '../../declarations'
 import type { CredentialPanelState } from '../use-credential-panel-state'
-import { memo, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -10,7 +8,9 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
+} from '@langgenius/dify-ui/alert-dialog'
+import { memo, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 import { ConfigurationMethodEnum } from '../../declarations'
 import { useAuth } from '../../model-auth/hooks'
 import ApiKeySection from './api-key-section'
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx
index fc710ef73f..67f73f6941 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx
@@ -1,13 +1,13 @@
 import type { ModelProvider, PreferredProviderTypeEnum } from '../../declarations'
 import type { CardVariant, CredentialPanelState } from '../use-credential-panel-state'
-import { memo, useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/app/components/base/ui/popover'
+} from '@langgenius/dify-ui/popover'
+import { memo, useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import DropdownContent from './dropdown-content'
 
 type ModelAuthDropdownProps = {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx
index 638f9d605b..4ec7ce3cef 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx
@@ -1,7 +1,7 @@
 import type { UsagePriority } from '../use-credential-panel-state'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { useTranslation } from 'react-i18next'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { PreferredProviderTypeEnum } from '../../declarations'
 
 type UsagePrioritySectionProps = {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/use-activate-credential.ts b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/use-activate-credential.ts
index 6f99c32296..db9f735e3a 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/use-activate-credential.ts
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/use-activate-credential.ts
@@ -1,7 +1,7 @@
 import type { Credential, ModelProvider } from '../../declarations'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useActiveProviderCredential } from '@/service/use-models'
 import { useUpdateModelList, useUpdateModelProviders } from '../../hooks'
 
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
index d8f0b5928c..305ef71c50 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
@@ -1,12 +1,12 @@
 import type { ModelItem, ModelProvider } from '../declarations'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import { useQueryClient } from '@tanstack/react-query'
 import { useDebounceFn } from 'ahooks'
 import { memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import { Balance } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import { Plan } from '@/app/components/billing/type'
 import { useAppContext } from '@/context/app-context'
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
index ea4edace30..9b7b858c13 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
@@ -9,11 +9,11 @@ import type {
   ModelProvider,
 } from '../declarations'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge/index'
 import GridMask from '@/app/components/base/grid-mask'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import s from '@/app/components/custom/style.module.css'
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
index 652630be67..34b9d1578f 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
@@ -1,9 +1,4 @@
 import type { Credential, CustomConfigurationModelFixedFields, ModelItem, ModelLoadBalancingConfig, ModelLoadBalancingConfigEntry, ModelProvider } from '../declarations'
-import { cn } from '@langgenius/dify-ui/cn'
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Loading from '@/app/components/base/loading'
-import Modal from '@/app/components/base/modal'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -11,9 +6,14 @@ import {
   AlertDialogConfirmButton,
   AlertDialogContent,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Loading from '@/app/components/base/loading'
+import Modal from '@/app/components/base/modal'
 import { SwitchCredentialInLoadBalancing } from '@/app/components/header/account-setting/model-provider-page/model-auth'
 import { useGetModelCredential, useUpdateModelLoadBalancingConfig } from '@/service/use-models'
 import { ConfigurationMethodEnum, FormTypeEnum } from '../declarations'
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
index e71a219dcd..a74c400035 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCheckLine,
@@ -7,7 +8,6 @@ import {
 } from '@remixicon/react'
 import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { PreferredProviderTypeEnum } from '../declarations'
 
 type SelectorProps = {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
index 2269354825..861c4afa7a 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
@@ -1,11 +1,11 @@
 import type { FC } from 'react'
 import type { PluginDetail } from '@/app/components/plugins/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import { Button } from '@/app/components/base/ui/button'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { HeaderModals } from '@/app/components/plugins/plugin-detail-panel/detail-header/components'
 import { useDetailHeaderState, usePluginOperations } from '@/app/components/plugins/plugin-detail-panel/detail-header/hooks'
 import OperationDropdown from '@/app/components/plugins/plugin-detail-panel/operation-dropdown'
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
index 03d7c28a88..5d31db11f9 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
@@ -3,12 +3,12 @@ import type { ModelProvider } from '../declarations'
 import type { Plugin } from '@/app/components/plugins/types'
 import type { ModelProviderQuotaGetPaid } from '@/types/model-provider'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import { useSystemFeaturesQuery } from '@/context/global-public-context'
 import useTimestamp from '@/hooks/use-timestamp'
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/use-change-provider-priority.ts b/web/app/components/header/account-setting/model-provider-page/provider-added-card/use-change-provider-priority.ts
index 2a9e7e62ac..c339af4b2e 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/use-change-provider-priority.ts
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/use-change-provider-priority.ts
@@ -1,7 +1,7 @@
 import type { ModelProvider, PreferredProviderTypeEnum } from '../declarations'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { consoleQuery } from '@/service/client'
 import { ConfigurationMethodEnum } from '../declarations'
 import { useUpdateModelList, useUpdateModelProviders } from '../hooks'
diff --git a/web/app/components/header/account-setting/model-provider-page/system-model-selector/__tests__/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/system-model-selector/__tests__/index.spec.tsx
index c1b27a2c04..8129ed721c 100644
--- a/web/app/components/header/account-setting/model-provider-page/system-model-selector/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/__tests__/index.spec.tsx
@@ -43,8 +43,8 @@ vi.mock('@/context/provider-context', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
+vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
   return {
     ...actual,
     toast: {
diff --git a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
index 8b86923391..41bb3c3ab8 100644
--- a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
@@ -3,21 +3,21 @@ import type {
   DefaultModel,
   DefaultModelResponse,
 } from '../declarations'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   Dialog,
   DialogCloseButton,
   DialogContent,
   DialogTitle,
-} from '@/app/components/base/ui/dialog'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/dialog'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from '@/app/components/base/ui/tooltip'
+} from '@langgenius/dify-ui/tooltip'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import { updateDefaultModel } from '@/service/common'
diff --git a/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.tsx b/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.tsx
index 7308691b54..31c4ce2c3a 100644
--- a/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.tsx
+++ b/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.tsx
@@ -1,7 +1,7 @@
 import type { Form, ValidateValue } from '../key-validator/declarations'
 import type { PluginProvider } from '@/models/common'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import SerpapiLogo from '../../assets/serpapi.png'
 import KeyValidator from '../key-validator'
diff --git a/web/app/components/header/account-setting/plugin-page/__tests__/SerpapiPlugin.spec.tsx b/web/app/components/header/account-setting/plugin-page/__tests__/SerpapiPlugin.spec.tsx
index 85d205713b..2055c0725d 100644
--- a/web/app/components/header/account-setting/plugin-page/__tests__/SerpapiPlugin.spec.tsx
+++ b/web/app/components/header/account-setting/plugin-page/__tests__/SerpapiPlugin.spec.tsx
@@ -32,7 +32,7 @@ const { mockToast } = vi.hoisted(() => {
   return { mockToast }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
diff --git a/web/app/components/header/account-setting/plugin-page/__tests__/index.spec.tsx b/web/app/components/header/account-setting/plugin-page/__tests__/index.spec.tsx
index ff58fdd182..ca0c41a83b 100644
--- a/web/app/components/header/account-setting/plugin-page/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/plugin-page/__tests__/index.spec.tsx
@@ -14,8 +14,8 @@ vi.mock('@/context/app-context', () => ({
   useAppContext: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
+vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
   return {
     ...actual,
 
diff --git a/web/app/components/plugins/install-plugin/__tests__/hooks.spec.ts b/web/app/components/plugins/install-plugin/__tests__/hooks.spec.ts
index b4171de7f0..385b9e01e1 100644
--- a/web/app/components/plugins/install-plugin/__tests__/hooks.spec.ts
+++ b/web/app/components/plugins/install-plugin/__tests__/hooks.spec.ts
@@ -2,7 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { checkForUpdates, fetchReleases, handleUpload } from '../hooks'
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign((...args: unknown[]) => mockNotify(...args), {
     success: (...args: unknown[]) => mockNotify(...args),
     error: (...args: unknown[]) => mockNotify(...args),
diff --git a/web/app/components/plugins/install-plugin/base/installed.tsx b/web/app/components/plugins/install-plugin/base/installed.tsx
index 088d587378..7b76767e77 100644
--- a/web/app/components/plugins/install-plugin/base/installed.tsx
+++ b/web/app/components/plugins/install-plugin/base/installed.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import type { Plugin, PluginDeclaration, PluginManifestInMarket } from '../../types'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
-import { Button } from '@/app/components/base/ui/button'
 import Card from '../../card'
 import { pluginManifestInMarketToPluginProps, pluginManifestToCardPluginProps } from '../utils'
 
diff --git a/web/app/components/plugins/install-plugin/hooks.ts b/web/app/components/plugins/install-plugin/hooks.ts
index 4759953e30..e7086a7fba 100644
--- a/web/app/components/plugins/install-plugin/hooks.ts
+++ b/web/app/components/plugins/install-plugin/hooks.ts
@@ -1,5 +1,5 @@
 import type { GitHubRepoReleaseResponse } from '../types'
-import { toast } from '@/app/components/base/ui/toast'
+import { toast } from '@langgenius/dify-ui/toast'
 import { uploadGitHub } from '@/service/plugins'
 import { compareVersion, getLatestVersion } from '@/utils/semver'
 
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
index df94331d58..a94cd8588d 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
@@ -2,12 +2,12 @@
 import type { FC } from 'react'
 import type { Dependency, InstallStatus, InstallStatusResponse, Plugin, VersionInfo } from '../../../types'
 import type { ExposeRefs } from './install-multi'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
-import { Button } from '@/app/components/base/ui/button'
 import { useCanInstallPluginFromMarketplace } from '@/app/components/plugins/plugin-page/use-reference-setting'
 import { useMittContextSelector } from '@/context/mitt-context'
 import { useInstallOrUpdate, usePluginTaskList } from '@/service/use-plugins'
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
index 1c64e73d62..3fbf0c13ec 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import type { InstallStatus, Plugin } from '../../../types'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
-import { Button } from '@/app/components/base/ui/button'
 import Card from '@/app/components/plugins/card'
 import { MARKETPLACE_API_PREFIX } from '@/config'
 import useGetIcon from '../../base/use-get-icon'
diff --git a/web/app/components/plugins/install-plugin/install-from-github/__tests__/index.spec.tsx b/web/app/components/plugins/install-plugin/install-from-github/__tests__/index.spec.tsx
index 2f35f484f0..e923de5e38 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/__tests__/index.spec.tsx
@@ -57,7 +57,7 @@ const createUpdatePayload = (overrides: Partial<UpdateFromGitHubPayload> = {}):
 
 // Mock external dependencies
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign((props: { type: string, message: string }) => mockNotify(props), {
     success: (message: string) => mockNotify({ type: 'success', message }),
     error: (message: string) => mockNotify({ type: 'error', message }),
diff --git a/web/app/components/plugins/install-plugin/install-from-github/index.tsx b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
index f1e4d1b9bf..4ac0a3aa7f 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
@@ -4,11 +4,11 @@ import type { PluginDeclaration, UpdateFromGitHubPayload } from '../../types'
 import type { Item } from '@/app/components/base/select'
 import type { InstallState } from '@/app/components/plugins/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { toast } from '@/app/components/base/ui/toast'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import { InstallStepFromGitHub } from '../../types'
 import Installed from '../base/installed'
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
index c044445f19..ff7630e3a2 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
@@ -1,11 +1,11 @@
 'use client'
 
 import type { Plugin, PluginDeclaration, UpdateFromGitHubPayload } from '../../../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
 import { updateFromGitHub } from '@/service/plugins'
 import { useInstallPackageFromGitHub, usePluginTaskList } from '@/service/use-plugins'
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
index a8236b4b93..18c33def82 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
@@ -2,10 +2,10 @@
 
 import type { PluginDeclaration, UpdateFromGitHubPayload } from '../../../types'
 import type { Item } from '@/app/components/base/select'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { PortalSelect } from '@/app/components/base/select'
-import { Button } from '@/app/components/base/ui/button'
 import { handleUpload } from '../../hooks'
 
 const i18nPrefix = 'installFromGitHub'
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
index 2a7012d40c..f1b149a8bf 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
@@ -1,8 +1,8 @@
 'use client'
 
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 type SetURLProps = {
   repoUrl: string
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
index 9ef52d7a5d..7c0a90f179 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import type { PluginDeclaration } from '../../../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
 import { useAppContext } from '@/context/app-context'
 import { uninstallPlugin } from '@/service/plugins'
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
index f9f9969817..e7c3b4cd0f 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import type { Dependency, PluginDeclaration } from '../../../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { uploadFile } from '@/service/plugins'
 import Card from '../../../card'
 
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
index ac8b458406..91397f3189 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import type { Plugin, PluginManifestInMarket } from '../../../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
 import { useAppContext } from '@/context/app-context'
 import { useInstallPackageFromMarketPlace, usePluginDeclarationFromMarketPlace, usePluginTaskList, useUpdatePackageFromMarketPlace } from '@/service/use-plugins'
diff --git a/web/app/components/plugins/marketplace/list/card-wrapper.tsx b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
index 6cab636392..9dc5bc3d78 100644
--- a/web/app/components/plugins/marketplace/list/card-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { Plugin } from '@/app/components/plugins/types'
 import { useLocale, useTranslation } from '#i18n'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useTheme } from 'next-themes'
 import * as React from 'react'
 import { useMemo } from 'react'
-import { Button } from '@/app/components/base/ui/button'
 import Card from '@/app/components/plugins/card'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import { useTags } from '@/app/components/plugins/hooks'
diff --git a/web/app/components/plugins/marketplace/sort-dropdown/__tests__/index.spec.tsx b/web/app/components/plugins/marketplace/sort-dropdown/__tests__/index.spec.tsx
index 990bb321de..5bf5b6bb99 100644
--- a/web/app/components/plugins/marketplace/sort-dropdown/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/marketplace/sort-dropdown/__tests__/index.spec.tsx
@@ -31,7 +31,7 @@ vi.mock('../../atoms', () => ({
   useMarketplaceSort: () => [mockSort, mockHandleSortChange],
 }))
 
-vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+vi.mock('@langgenius/dify-ui/dropdown-menu', async () => {
   const React = await import('react')
   const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
 
diff --git a/web/app/components/plugins/marketplace/sort-dropdown/index.tsx b/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
index a47143de02..b8f5467fa1 100644
--- a/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
+++ b/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 import { useTranslation } from '#i18n'
-import { useState } from 'react'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import { useState } from 'react'
 import { useMarketplaceSort } from '../atoms'
 
 const SortDropdown = () => {
diff --git a/web/app/components/plugins/plugin-auth/authorize/__tests__/api-key-modal.spec.tsx b/web/app/components/plugins/plugin-auth/authorize/__tests__/api-key-modal.spec.tsx
index a4ddec8f51..2bfa94d2ed 100644
--- a/web/app/components/plugins/plugin-auth/authorize/__tests__/api-key-modal.spec.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/__tests__/api-key-modal.spec.tsx
@@ -15,7 +15,7 @@ const mockToast = {
   promise: vi.fn(),
 }
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 const mockAddPluginCredential = vi.fn().mockResolvedValue({})
diff --git a/web/app/components/plugins/plugin-auth/authorize/__tests__/authorize-components.spec.tsx b/web/app/components/plugins/plugin-auth/authorize/__tests__/authorize-components.spec.tsx
index c495d5501a..cba5c60654 100644
--- a/web/app/components/plugins/plugin-auth/authorize/__tests__/authorize-components.spec.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/__tests__/authorize-components.spec.tsx
@@ -104,7 +104,7 @@ const mockToast = {
   promise: vi.fn(),
 }
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 // Factory function for creating test PluginPayload
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 5f9b6f5695..2c86820202 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
@@ -14,7 +14,7 @@ const mockToast = {
   promise: vi.fn(),
 }
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 const mockSetPluginOAuthCustomClient = vi.fn().mockResolvedValue({})
diff --git a/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx b/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx
index 2db1751bdc..648a87dabc 100644
--- a/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx
@@ -1,11 +1,11 @@
+import type { ButtonProps } from '@langgenius/dify-ui/button'
 import type { PluginPayload } from '../types'
 import type { FormSchema } from '@/app/components/base/form/types'
-import type { ButtonProps } from '@/app/components/base/ui/button'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   memo,
   useState,
 } from 'react'
-import { Button } from '@/app/components/base/ui/button'
 import ApiKeyModal from './api-key-modal'
 
 export type AddApiKeyButtonProps = {
diff --git a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
index 31e87564e7..44b48db7a2 100644
--- a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
@@ -1,6 +1,7 @@
+import type { ButtonProps } from '@langgenius/dify-ui/button'
 import type { PluginPayload } from '../types'
 import type { FormSchema } from '@/app/components/base/form/types'
-import type { ButtonProps } from '@/app/components/base/ui/button'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiClipboardLine,
@@ -17,7 +18,6 @@ import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
 import { FormTypeEnum } from '@/app/components/base/form/types'
-import { Button } from '@/app/components/base/ui/button'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { openOAuthPopup } from '@/hooks/use-oauth'
 import {
diff --git a/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx b/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
index 5d8eafbe67..db513ecb6f 100644
--- a/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
@@ -3,6 +3,7 @@ import type {
   FormRefObject,
   FormSchema,
 } from '@/app/components/base/form/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   memo,
   useCallback,
@@ -16,7 +17,6 @@ import AuthForm from '@/app/components/base/form/form-scenarios/auth'
 import { FormTypeEnum } from '@/app/components/base/form/types'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal/modal'
-import { toast } from '@/app/components/base/ui/toast'
 import { ReadmeEntrance } from '../../readme-panel/entrance'
 import { ReadmeShowType } from '../../readme-panel/store'
 import {
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 625fcaa980..f52b76866a 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
@@ -3,6 +3,8 @@ import type {
   FormRefObject,
   FormSchema,
 } from '@/app/components/base/form/types'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   useForm,
   useStore,
@@ -16,8 +18,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import AuthForm from '@/app/components/base/form/form-scenarios/auth'
 import Modal from '@/app/components/base/modal/modal'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { ReadmeEntrance } from '../../readme-panel/entrance'
 import { ReadmeShowType } from '../../readme-panel/store'
 import {
diff --git a/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx b/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
index 548b1fb175..13044d7bbc 100644
--- a/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
@@ -1,10 +1,10 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiEqualizer2Line } from '@remixicon/react'
 import {
   memo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 
 type AuthorizedInDataSourceNodeProps = {
diff --git a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
index 048bbf3e8f..e4f55e82e3 100644
--- a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
@@ -2,6 +2,7 @@ import type {
   Credential,
   PluginPayload,
 } from './types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import {
@@ -10,7 +11,6 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import {
   Authorized,
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 a127067526..01e195b21b 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
@@ -57,7 +57,7 @@ const toastMocks = vi.hoisted(() => ({
   promise: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(toastMocks.call, {
     success: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'success', message, ...options })),
     error: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'error', message, ...options })),
diff --git a/web/app/components/plugins/plugin-auth/authorized/index.tsx b/web/app/components/plugins/plugin-auth/authorized/index.tsx
index 4729909a1f..fed2873b98 100644
--- a/web/app/components/plugins/plugin-auth/authorized/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/index.tsx
@@ -2,7 +2,17 @@ import type { Credential, PluginPayload } from '../types'
 import type {
   PortalToFollowElemOptions,
 } from '@/app/components/base/portal-to-follow-elem'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiArrowDownSLine,
 } from '@remixicon/react'
@@ -18,16 +28,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import Indicator from '@/app/components/header/indicator'
 import Authorize from '../authorize'
 import ApiKeyModal from '../authorize/api-key-modal'
diff --git a/web/app/components/plugins/plugin-auth/authorized/item.tsx b/web/app/components/plugins/plugin-auth/authorized/item.tsx
index 82e3fc4563..9193238a55 100644
--- a/web/app/components/plugins/plugin-auth/authorized/item.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/item.tsx
@@ -1,4 +1,5 @@
 import type { Credential } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCheckLine,
@@ -16,7 +17,6 @@ import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
 import Input from '@/app/components/base/input'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { CredentialTypeEnum } from '../types'
 
diff --git a/web/app/components/plugins/plugin-auth/hooks/__tests__/use-plugin-auth-action.spec.ts b/web/app/components/plugins/plugin-auth/hooks/__tests__/use-plugin-auth-action.spec.ts
index ddf8f83019..06af4a88ee 100644
--- a/web/app/components/plugins/plugin-auth/hooks/__tests__/use-plugin-auth-action.spec.ts
+++ b/web/app/components/plugins/plugin-auth/hooks/__tests__/use-plugin-auth-action.spec.ts
@@ -16,7 +16,7 @@ const toastMocks = vi.hoisted(() => ({
   promise: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(toastMocks.call, {
     success: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'success', message, ...options })),
     error: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'error', message, ...options })),
diff --git a/web/app/components/plugins/plugin-auth/hooks/use-plugin-auth-action.ts b/web/app/components/plugins/plugin-auth/hooks/use-plugin-auth-action.ts
index b4714ff96c..7c63753ee8 100644
--- a/web/app/components/plugins/plugin-auth/hooks/use-plugin-auth-action.ts
+++ b/web/app/components/plugins/plugin-auth/hooks/use-plugin-auth-action.ts
@@ -1,11 +1,11 @@
 import type { PluginPayload } from '../types'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   useCallback,
   useRef,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import {
   useDeletePluginCredentialHook,
   useSetPluginDefaultCredentialHook,
diff --git a/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx b/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
index f54093f0f9..fd698f811c 100644
--- a/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
@@ -2,6 +2,7 @@ import type {
   Credential,
   PluginPayload,
 } from './types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import {
@@ -10,7 +11,6 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import Authorize from './authorize'
 import Authorized from './authorized'
diff --git a/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx b/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx
index e3df399a1c..5cdc893ddd 100644
--- a/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx
@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiAddLine } from '@remixicon/react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 type PluginAuthInDataSourceNodeProps = {
   children?: ReactNode
diff --git a/web/app/components/plugins/plugin-detail-panel/__tests__/detail-header.spec.tsx b/web/app/components/plugins/plugin-detail-panel/__tests__/detail-header.spec.tsx
index 0eacbf3bd3..63cf25d039 100644
--- a/web/app/components/plugins/plugin-detail-panel/__tests__/detail-header.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/__tests__/detail-header.spec.tsx
@@ -17,7 +17,7 @@ const { mockToast } = vi.hoisted(() => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
diff --git a/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-card.spec.tsx b/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-card.spec.tsx
index 15c231cb17..1dab8bdf84 100644
--- a/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-card.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-card.spec.tsx
@@ -10,7 +10,7 @@ const mockDeleteEndpoint = vi.fn()
 const mockUpdateEndpoint = vi.fn()
 const mockToastNotify = vi.fn()
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(
     (message: string, options?: { type?: string }) => mockToastNotify({ type: options?.type, message }),
     {
diff --git a/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-modal.spec.tsx b/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-modal.spec.tsx
index 0be17f07d4..7ccd5065e5 100644
--- a/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-modal.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-modal.spec.tsx
@@ -6,7 +6,7 @@ import EndpointModal from '../endpoint-modal'
 
 const mockToastNotify = vi.fn()
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(
     (message: string, options?: { type?: string }) => mockToastNotify({ type: options?.type, message }),
     {
diff --git a/web/app/components/plugins/plugin-detail-panel/__tests__/operation-dropdown.spec.tsx b/web/app/components/plugins/plugin-detail-panel/__tests__/operation-dropdown.spec.tsx
index fa3d6f2266..db6ff57957 100644
--- a/web/app/components/plugins/plugin-detail-panel/__tests__/operation-dropdown.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/__tests__/operation-dropdown.spec.tsx
@@ -14,7 +14,7 @@ vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: (string | undefined | false | null)[]) => args.filter(Boolean).join(' '),
 }))
 
-vi.mock('@/app/components/base/ui/dropdown-menu', () => ({
+vi.mock('@langgenius/dify-ui/dropdown-menu', () => ({
   DropdownMenu: ({ children, open }: { children: ReactNode, open: boolean }) => (
     <div data-testid="dropdown-menu" data-open={open}>{children}</div>
   ),
diff --git a/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx b/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx
index cafdb7b4b9..5bba7b823b 100644
--- a/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx
@@ -1,5 +1,5 @@
 // import { useAppContext } from '@/context/app-context'
-// import { Button } from '@/app/components/base/ui/button'
+// import { Button } from '@langgenius/dify-ui/button'
 // import Indicator from '@/app/components/header/indicator'
 // import ToolItem from '@/app/components/tools/provider/tool-item'
 // import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header/__tests__/index.spec.tsx
index 84a61cd643..24838fea59 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header/__tests__/index.spec.tsx
@@ -45,7 +45,7 @@ vi.mock('@/app/components/base/action-button', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
     <button onClick={onClick}>{children}</button>
   ),
@@ -57,7 +57,7 @@ vi.mock('@/app/components/base/badge', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/ui/tooltip', () => ({
+vi.mock('@langgenius/dify-ui/tooltip', () => ({
   Tooltip: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   TooltipTrigger: ({ render }: { render: React.ReactNode }) => <>{render}</>,
   TooltipContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header/components/header-modals.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header/components/header-modals.tsx
index 3bf24a19b7..c2f6bb8210 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header/components/header-modals.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header/components/header-modals.tsx
@@ -3,7 +3,6 @@
 import type { FC } from 'react'
 import type { PluginDetail } from '../../../types'
 import type { ModalStates, VersionTarget } from '../hooks'
-import { useTranslation } from 'react-i18next'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -12,7 +11,8 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
+} from '@langgenius/dify-ui/alert-dialog'
+import { useTranslation } from 'react-i18next'
 import PluginInfo from '@/app/components/plugins/plugin-page/plugin-info'
 import UpdateFromMarketplace from '@/app/components/plugins/update-plugin/from-market-place'
 import { useGetLanguage } from '@/context/i18n'
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header/hooks/__tests__/use-plugin-operations.spec.ts b/web/app/components/plugins/plugin-detail-panel/detail-header/hooks/__tests__/use-plugin-operations.spec.ts
index b8873f1087..855530bf18 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header/hooks/__tests__/use-plugin-operations.spec.ts
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header/hooks/__tests__/use-plugin-operations.spec.ts
@@ -33,7 +33,7 @@ const {
   }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(
     (message: string, options?: { type?: string }) => mockToastNotify({ type: options?.type, message }),
     {
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header/hooks/use-plugin-operations.ts b/web/app/components/plugins/plugin-detail-panel/detail-header/hooks/use-plugin-operations.ts
index 765c0e8a4e..62c762a35d 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header/hooks/use-plugin-operations.ts
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header/hooks/use-plugin-operations.ts
@@ -2,10 +2,10 @@
 
 import type { PluginDetail } from '../../../types'
 import type { ModalStates, VersionTarget } from './use-detail-header-state'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import { toast } from '@/app/components/base/ui/toast'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { uninstallPlugin } from '@/service/plugins'
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
index 5a89afa2c9..1ed91a93f5 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
@@ -1,13 +1,13 @@
 'use client'
 
 import type { PluginDetail } from '../../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
-import { Button } from '@/app/components/base/ui/button'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { AuthCategory, PluginAuth } from '@/app/components/plugins/plugin-auth'
 import OperationDropdown from '@/app/components/plugins/plugin-detail-panel/operation-dropdown'
 import PluginVersionPicker from '@/app/components/plugins/update-plugin/plugin-version-picker'
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
index a8729763ec..e1adc6282d 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
@@ -1,4 +1,14 @@
 import type { EndpointListItem, PluginDetail } from '../types'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
+import { Switch } from '@langgenius/dify-ui/switch'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiClipboardLine, RiDeleteBinLine, RiEditLine, RiLoginCircleLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import copy from 'copy-to-clipboard'
@@ -7,17 +17,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import { CopyCheck } from '@/app/components/base/icons/src/vender/line/files'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { toast } from '@/app/components/base/ui/toast'
 import Indicator from '@/app/components/header/indicator'
 import { addDefaultValue, toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
 import {
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
index c3c09db786..2d11305f6e 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
@@ -1,5 +1,6 @@
 import type { PluginDetail } from '@/app/components/plugins/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiAddLine,
   RiApps2AddLine,
@@ -11,7 +12,6 @@ import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
-import { toast } from '@/app/components/base/ui/toast'
 import { toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
 import { useDocLink } from '@/context/i18n'
 import {
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
index 4c694d4293..0fe0fff6df 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@@ -2,14 +2,14 @@
 import type { FC } from 'react'
 import type { FormSchema } from '../../base/form/types'
 import type { PluginDetail } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiArrowRightUpLine, RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Drawer from '@/app/components/base/drawer'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { ReadmeEntrance } from '../readme-panel/entrance'
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/index.spec.tsx
index 107d42ada2..00ed9eb4f1 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/index.spec.tsx
@@ -9,7 +9,7 @@ import ModelParameterModal from '../index'
 // ==================== Mock Setup ====================
 
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(
     (message: string, options?: { type?: string }) => mockToastNotify({ type: options?.type, message }),
     {
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/tts-params-panel.spec.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/tts-params-panel.spec.tsx
index e423359872..1d000f7c35 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/tts-params-panel.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/tts-params-panel.spec.tsx
@@ -26,8 +26,8 @@ const MockSelectContext = React.createContext<{
   onValueChange: () => {},
 })
 
-vi.mock('@/app/components/base/ui/select', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/select')>()
+vi.mock('@langgenius/dify-ui/select', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/select')>()
 
   return {
     ...actual,
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
index 5f5c0494a9..d0dcab18ea 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
@@ -9,14 +9,14 @@ import type {
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { TriggerProps } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/app/components/base/ui/popover'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/popover'
+import { toast } from '@langgenius/dify-ui/toast'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { ModelStatusEnum, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import {
   useModelList,
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx
index 1ab7ea2f11..7edf2f5d18 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx
@@ -1,7 +1,7 @@
+import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger, SelectValue } from '@langgenius/dify-ui/select'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger, SelectValue } from '@/app/components/base/ui/select'
 import { languages } from '@/i18n-config/language'
 
 type Props = {
diff --git a/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx b/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
index 4b36e4612c..c7a1529a3e 100644
--- a/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
@@ -1,16 +1,16 @@
 'use client'
+import type { Placement } from '@langgenius/dify-ui/dropdown-menu'
 import type { FC } from 'react'
-import type { Placement } from '@/app/components/base/ui/placement'
 import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { PluginSource } from '../types'
 
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/delete-confirm.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/delete-confirm.spec.tsx
index f083c24f42..c2cc608b45 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/delete-confirm.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/delete-confirm.spec.tsx
@@ -15,8 +15,8 @@ vi.mock('@/service/use-triggers', () => ({
   useDeleteTriggerSubscription: () => ({ mutate: mockDelete, isPending: false }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
+vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
   return {
     ...actual,
     toast: {
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/log-viewer.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/log-viewer.spec.tsx
index 351c1f9d2d..3594c10ce2 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/log-viewer.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/log-viewer.spec.tsx
@@ -6,7 +6,7 @@ import LogViewer from '../log-viewer'
 const mockToastNotify = vi.fn()
 const mockWriteText = vi.fn()
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(
     (message: string, options?: { type?: string }) => mockToastNotify({ type: options?.type, message }),
     {
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-entry.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-entry.spec.tsx
index 3c4ff83fc8..37d828591f 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-entry.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-entry.spec.tsx
@@ -26,7 +26,7 @@ vi.mock('@/service/use-triggers', () => ({
   useDeleteTriggerSubscription: () => ({ mutate: vi.fn(), isPending: false }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(vi.fn(), {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-view.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-view.spec.tsx
index 44cec53e28..2256e90e9d 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-view.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-view.spec.tsx
@@ -25,7 +25,7 @@ vi.mock('@/service/use-triggers', () => ({
   useDeleteTriggerSubscription: () => ({ mutate: mockDelete, isPending: false }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(vi.fn(), {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/subscription-card.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/subscription-card.spec.tsx
index 19edb65dfb..9a89aab7cf 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/subscription-card.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/subscription-card.spec.tsx
@@ -29,7 +29,7 @@ vi.mock('@/service/use-triggers', () => ({
   useDeleteTriggerSubscription: () => ({ mutate: vi.fn(), isPending: false }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(vi.fn(), {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx
index 72532ea38d..459b657f3f 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx
@@ -122,7 +122,7 @@ vi.mock('@/utils/urlValidation', () => ({
 }))
 
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign((params: unknown) => mockToastNotify(params), {
     success: (message: unknown) => mockToastNotify({ type: 'success', message }),
     error: (message: unknown) => mockToastNotify({ type: 'error', message }),
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 0714fbf554..e1615e7b0a 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
@@ -1,8 +1,8 @@
 import type { SimpleDetail } from '../../../store'
 import type { TriggerOAuthConfig, TriggerProviderApiEntity, TriggerSubscription, TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { toast } from '@/app/components/base/ui/toast'
 import { SupportedCreationMethods } from '@/app/components/plugins/types'
 import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
 import { CreateButtonType, CreateSubscriptionButton, DEFAULT_METHOD } from '../index'
@@ -34,7 +34,7 @@ vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(vi.fn(), {
     success: vi.fn(),
     error: 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 5c4407b3c5..46b9499027 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
@@ -86,7 +86,7 @@ vi.mock('@/hooks/use-oauth', () => ({
 }))
 
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(
     (message: string, options?: { type?: string }) => mockToastNotify({ type: options?.type, message }),
     {
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/__tests__/use-common-modal-state.helpers.spec.ts b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/__tests__/use-common-modal-state.helpers.spec.ts
index 61482e2912..87db85b56e 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/__tests__/use-common-modal-state.helpers.spec.ts
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/__tests__/use-common-modal-state.helpers.spec.ts
@@ -27,7 +27,7 @@ const {
   mockIsPrivateOrLocalAddress: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: mockToastError,
   },
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/__tests__/use-common-modal-state.spec.ts b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/__tests__/use-common-modal-state.spec.ts
index 399d3ba60c..26e4a69baa 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/__tests__/use-common-modal-state.spec.ts
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/__tests__/use-common-modal-state.spec.ts
@@ -87,7 +87,7 @@ vi.mock('@/service/use-triggers', () => ({
 }))
 
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: (message: string) => mockToastNotify({ type: 'success', message }),
     error: (message: string) => mockToastNotify({ type: 'error', message }),
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 cebfc947e7..82eddf501d 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
@@ -77,7 +77,7 @@ vi.mock('@/hooks/use-oauth', () => ({
 }))
 
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(
     (message: string, options?: { type?: string }) => mockToastNotify({ type: options?.type, message }),
     {
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-common-modal-state.helpers.ts b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-common-modal-state.helpers.ts
index 8df864c4fa..2754bbf39d 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-common-modal-state.helpers.ts
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-common-modal-state.helpers.ts
@@ -3,8 +3,8 @@ import type { Dispatch, SetStateAction } from 'react'
 import type { FormRefObject } from '@/app/components/base/form/types'
 import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
 import type { BuildTriggerSubscriptionPayload } from '@/service/use-triggers'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useEffect, useRef } from 'react'
-import { toast } from '@/app/components/base/ui/toast'
 import { SupportedCreationMethods } from '@/app/components/plugins/types'
 import { isPrivateOrLocalAddress } from '@/utils/urlValidation'
 
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-common-modal-state.ts b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-common-modal-state.ts
index 29613c6f4f..0f40da2d58 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-common-modal-state.ts
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-common-modal-state.ts
@@ -3,10 +3,10 @@ import type { SimpleDetail } from '../../../store'
 import type { SchemaItem } from '../components/modal-steps'
 import type { FormRefObject } from '@/app/components/base/form/types'
 import type { TriggerLogEntity, TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { debounce } from 'es-toolkit/compat'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { SupportedCreationMethods } from '@/app/components/plugins/types'
 import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
 import {
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 e5a5ded9df..25058e529c 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
@@ -2,9 +2,9 @@
 import type { FormRefObject } from '@/app/components/base/form/types'
 import type { TriggerOAuthClientParams, TriggerOAuthConfig, TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
 import type { ConfigureTriggerOAuthPayload } from '@/service/use-triggers'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { openOAuthPopup } from '@/hooks/use-oauth'
 import {
   useConfigureTriggerOAuth,
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 4861f30934..b007c89cb9 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
@@ -1,6 +1,8 @@
 import type { Option } from '@/app/components/base/select/custom'
 import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiAddLine, RiEqualizer2Line } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useCallback, useMemo, useState } from 'react'
@@ -9,8 +11,6 @@ import { ActionButton, ActionButtonState } from '@/app/components/base/action-bu
 import Badge from '@/app/components/base/badge'
 import CustomSelect from '@/app/components/base/select/custom'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { openOAuthPopup } from '@/hooks/use-oauth'
 import { useInitiateTriggerOAuth, useTriggerOAuthConfig, useTriggerProviderInfo } from '@/service/use-triggers'
 import { SupportedCreationMethods } 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 c4ae63ab66..450324ae40 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,5 +1,7 @@
 'use client'
 import type { TriggerOAuthConfig, TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiClipboardLine,
   RiInformation2Fill,
@@ -7,8 +9,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import { BaseForm } from '@/app/components/base/form/components/base'
 import Modal from '@/app/components/base/modal/modal'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import { usePluginStore } from '../../store'
 import { ClientTypeEnum, useOAuthClientState } from './hooks/use-oauth-client-state'
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/delete-confirm.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/delete-confirm.tsx
index a360a477e3..3599dc6260 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/delete-confirm.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/delete-confirm.tsx
@@ -1,6 +1,3 @@
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Input from '@/app/components/base/input'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -9,8 +6,11 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/alert-dialog'
+import { toast } from '@langgenius/dify-ui/toast'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '@/app/components/base/input'
 import { useDeleteTriggerSubscription } from '@/service/use-triggers'
 import { useSubscriptionList } from './use-subscription-list'
 
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/apikey-edit-modal.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/apikey-edit-modal.spec.tsx
index b33f0af8e9..6e192e025c 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/apikey-edit-modal.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/apikey-edit-modal.spec.tsx
@@ -47,7 +47,7 @@ vi.mock('@/service/use-triggers', () => ({
   useTriggerPluginDynamicOptions: () => ({ data: [], isLoading: false }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign((args: { type: string, message: string }) => mockToast(args), {
     success: (message: string) => mockToast({ type: 'success', message }),
     error: (message: string) => mockToast({ type: 'error', message }),
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 126d8e366d..6cf58b8972 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
@@ -13,7 +13,7 @@ import { OAuthEditModal } from '../oauth-edit-modal'
 // ==================== Mock Setup ====================
 
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign((message: string, options?: { type?: string }) => mockToastNotify({ type: options?.type, message }), {
     success: (message: string) => mockToastNotify({ type: 'success', message }),
     error: (message: string) => mockToastNotify({ type: 'error', message }),
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/manual-edit-modal.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/manual-edit-modal.spec.tsx
index 4fa236783b..e5fa43268a 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/manual-edit-modal.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/manual-edit-modal.spec.tsx
@@ -30,7 +30,7 @@ vi.mock('@/service/use-triggers', () => ({
   useTriggerPluginDynamicOptions: () => ({ data: [], isLoading: false }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign((args: { type: string, message: string }) => mockToast(args), {
     success: (message: string) => mockToast({ type: 'success', message }),
     error: (message: string) => mockToast({ type: 'error', message }),
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/oauth-edit-modal.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/oauth-edit-modal.spec.tsx
index 1927ae5a43..c860cd2818 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/oauth-edit-modal.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/oauth-edit-modal.spec.tsx
@@ -30,7 +30,7 @@ vi.mock('@/service/use-triggers', () => ({
   useTriggerPluginDynamicOptions: () => ({ data: [], isLoading: false }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign((args: { type: string, message: string }) => mockToast(args), {
     success: (message: string) => mockToast({ type: 'success', message }),
     error: (message: string) => mockToast({ type: 'error', message }),
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 eea9cb7ff0..f191ad41a8 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,7 @@
 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 { toast } from '@langgenius/dify-ui/toast'
 import { isEqual } from 'es-toolkit/predicate'
 import { useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -9,7 +10,6 @@ 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 { toast } from '@/app/components/base/ui/toast'
 import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
 import { useUpdateTriggerSubscription, useVerifyTriggerSubscription } from '@/service/use-triggers'
 import { parsePluginErrorMessage } from '@/utils/error-parser'
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 333a800ffd..3b3fa1082f 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,13 @@
 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 { 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 { toast } from '@/app/components/base/ui/toast'
 import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
 import { useUpdateTriggerSubscription } from '@/service/use-triggers'
 import { ReadmeShowType } from '../../../readme-panel/store'
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 3937d82a0e..355a132bd2 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,13 @@
 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 { 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 { toast } from '@/app/components/base/ui/toast'
 import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
 import { useUpdateTriggerSubscription } from '@/service/use-triggers'
 import { ReadmeShowType } from '../../../readme-panel/store'
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx
index 1960103822..b0b3efe853 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { TriggerLogEntity } from '@/app/components/workflow/block-selector/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiArrowDownSLine,
   RiArrowRightSLine,
@@ -12,7 +13,6 @@ import dayjs from 'dayjs'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 
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 537e99d733..168e4f1eba 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
@@ -298,7 +298,7 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/model-modal
 
 // Mock Toast - need to track notify calls for assertions
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign((message: string, options?: { type?: string }) => mockToastNotify({ type: options?.type, message }), {
     success: (message: string) => mockToastNotify({ type: 'success', message }),
     error: (message: string) => mockToastNotify({ type: 'error', message }),
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/reasoning-config-form.spec.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/reasoning-config-form.spec.tsx
index b4bfd22405..beab35595c 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/reasoning-config-form.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/reasoning-config-form.spec.tsx
@@ -30,8 +30,8 @@ vi.mock('@/app/components/base/select', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/switch', () => ({
-  default: ({ checked, onCheckedChange }: { checked: boolean, onCheckedChange: (checked: boolean) => void }) => (
+vi.mock('@langgenius/dify-ui/switch', () => ({
+  Switch: ({ checked, onCheckedChange }: { checked: boolean, onCheckedChange: (checked: boolean) => void }) => (
     <button data-testid="auto-switch" onClick={() => onCheckedChange(!checked)}>
       {checked ? 'on' : 'off'}
     </button>
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/tool-credentials-form.spec.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/tool-credentials-form.spec.tsx
index bd2bc0dd5c..2d50a2d2bf 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/tool-credentials-form.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/tool-credentials-form.spec.tsx
@@ -10,7 +10,7 @@ vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(vi.fn(), {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx
index 4e6be7d81c..1c731d5eca 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx
@@ -7,6 +7,7 @@ import type {
   ValueSelector,
 } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import {
   RiArrowRightUpLine,
   RiBracesLine,
@@ -16,7 +17,6 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import { SimpleSelect } from '@/app/components/base/select'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
index 90893c88ec..64068166d0 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
@@ -2,7 +2,9 @@
 import type { FC } from 'react'
 import type { Collection } from '@/app/components/tools/types'
 import type { ToolCredentialFormSchema } from '@/app/components/tools/utils/to-form-schema'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiArrowRightUpLine,
 } from '@remixicon/react'
@@ -10,8 +12,6 @@ import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { addDefaultValue, toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
index 3ba30790af..889243d507 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
@@ -1,5 +1,7 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import {
   RiDeleteBinLine,
   RiEqualizer2Line,
@@ -11,10 +13,8 @@ import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import AppIcon from '@/app/components/base/app-icon'
 import { Group } from '@/app/components/base/icons/src/vender/other'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import { ToolTipContent } from '@/app/components/base/tooltip/content'
-import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
 import { useMCPToolAvailability } from '@/app/components/workflow/nodes/_base/components/mcp-tool-availability'
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 0b0d9c7fc8..b0ecc839b3 100644
--- a/web/app/components/plugins/plugin-item/__tests__/action.spec.tsx
+++ b/web/app/components/plugins/plugin-item/__tests__/action.spec.tsx
@@ -26,7 +26,7 @@ const {
   mockToastNotify: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(
     (message: string, options?: { type?: string }) => mockToastNotify({ type: options?.type, message }),
     {
diff --git a/web/app/components/plugins/plugin-item/action.tsx b/web/app/components/plugins/plugin-item/action.tsx
index ed401b534f..fe0ba932fc 100644
--- a/web/app/components/plugins/plugin-item/action.tsx
+++ b/web/app/components/plugins/plugin-item/action.tsx
@@ -2,11 +2,6 @@
 import type { FC } from 'react'
 import type { MetaData } from '../types'
 import type { PluginCategoryEnum } from '@/app/components/plugins/types'
-import { RiDeleteBinLine, RiInformation2Line, RiLoopLeftLine } from '@remixicon/react'
-import { useBoolean } from 'ahooks'
-import * as React from 'react'
-import { useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -14,8 +9,13 @@ import {
   AlertDialogConfirmButton,
   AlertDialogContent,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/alert-dialog'
+import { toast } from '@langgenius/dify-ui/toast'
+import { RiDeleteBinLine, RiInformation2Line, RiLoopLeftLine } from '@remixicon/react'
+import { useBoolean } from 'ahooks'
+import * as React from 'react'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useModalContext } from '@/context/modal-context'
 import { uninstallPlugin } from '@/service/plugins'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
diff --git a/web/app/components/plugins/plugin-mutation-model/index.tsx b/web/app/components/plugins/plugin-mutation-model/index.tsx
index 4e8478f8ad..96a60fd938 100644
--- a/web/app/components/plugins/plugin-mutation-model/index.tsx
+++ b/web/app/components/plugins/plugin-mutation-model/index.tsx
@@ -1,10 +1,10 @@
 import type { UseMutationResult } from '@tanstack/react-query'
 import type { FC, ReactNode } from 'react'
 import type { Plugin } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { memo } from 'react'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 import Card from '@/app/components/plugins/card'
 
 type Props = {
diff --git a/web/app/components/plugins/plugin-page/__tests__/debug-info.spec.tsx b/web/app/components/plugins/plugin-page/__tests__/debug-info.spec.tsx
index 2af44ecf97..65a36f4009 100644
--- a/web/app/components/plugins/plugin-page/__tests__/debug-info.spec.tsx
+++ b/web/app/components/plugins/plugin-page/__tests__/debug-info.spec.tsx
@@ -15,7 +15,7 @@ vi.mock('@/service/use-plugins', () => ({
   useDebugKey: () => mockDebugKey,
 }))
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({ children }: { children: React.ReactNode }) => <button data-testid="debug-button">{children}</button>,
 }))
 
diff --git a/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx b/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
index 1f249b16c6..2dd884e18b 100644
--- a/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
+++ b/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
@@ -35,13 +35,13 @@ vi.mock('@/app/components/base/icons/src/vender/solid/mediaAndDevices', () => ({
   MagicBox: () => <span data-testid="magic-box-icon">magic</span>,
 }))
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({ children, onClick, className, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
     <button type="button" data-testid="button-content" className={className} onClick={onClick} {...props}>{children}</button>
   ),
 }))
 
-vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+vi.mock('@langgenius/dify-ui/dropdown-menu', async () => {
   const React = await import('react')
   const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
 
diff --git a/web/app/components/plugins/plugin-page/__tests__/use-reference-setting.spec.ts b/web/app/components/plugins/plugin-page/__tests__/use-reference-setting.spec.ts
index c3c415bb4b..efb31b5afb 100644
--- a/web/app/components/plugins/plugin-page/__tests__/use-reference-setting.spec.ts
+++ b/web/app/components/plugins/plugin-page/__tests__/use-reference-setting.spec.ts
@@ -1,7 +1,7 @@
+// Import mocks for assertions
+import { toast } from '@langgenius/dify-ui/toast'
 import { renderHook, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-// Import mocks for assertions
-import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
diff --git a/web/app/components/plugins/plugin-page/debug-info.tsx b/web/app/components/plugins/plugin-page/debug-info.tsx
index 4b3590f15c..4e02fdc2be 100644
--- a/web/app/components/plugins/plugin-page/debug-info.tsx
+++ b/web/app/components/plugins/plugin-page/debug-info.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiArrowRightUpLine,
   RiBugLine,
@@ -7,7 +8,6 @@ import {
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 import { useDebugKey } from '@/service/use-plugins'
 import KeyValueItem from '../base/key-value-item'
diff --git a/web/app/components/plugins/plugin-page/empty/index.tsx b/web/app/components/plugins/plugin-page/empty/index.tsx
index 5141519e35..e90918b4ab 100644
--- a/web/app/components/plugins/plugin-page/empty/index.tsx
+++ b/web/app/components/plugins/plugin-page/empty/index.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
@@ -7,7 +8,6 @@ import { Group } from '@/app/components/base/icons/src/vender/other'
 import { FileZip } from '@/app/components/base/icons/src/vender/solid/files'
 import { Github } from '@/app/components/base/icons/src/vender/solid/general'
 import { MagicBox } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
-import { Button } from '@/app/components/base/ui/button'
 import InstallFromGitHub from '@/app/components/plugins/install-plugin/install-from-github'
 import InstallFromLocalPackage from '@/app/components/plugins/install-plugin/install-from-local-package'
 import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index 05a6dd26e3..f80d37189a 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -2,6 +2,7 @@
 
 import type { Dependency, PluginDeclaration, PluginManifestInMarket } from '../types'
 import type { PluginPageTab } from './context'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiBookOpenLine,
@@ -14,7 +15,6 @@ import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import TabSlider from '@/app/components/base/tab-slider'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import ReferenceSettingModal from '@/app/components/plugins/reference-setting-modal'
 import { MARKETPLACE_API_PREFIX, SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
diff --git a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
index 9b98d16410..dee3dc17bb 100644
--- a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
+++ b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
@@ -1,6 +1,13 @@
 'use client'
 
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import { RiAddLine, RiArrowDownSLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useEffect, useRef, useState } from 'react'
@@ -8,13 +15,6 @@ import { useTranslation } from 'react-i18next'
 import { FileZip } from '@/app/components/base/icons/src/vender/solid/files'
 import { Github } from '@/app/components/base/icons/src/vender/solid/general'
 import { MagicBox } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
-import { Button } from '@/app/components/base/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
 import InstallFromGitHub from '@/app/components/plugins/install-plugin/install-from-github'
 import InstallFromLocalPackage from '@/app/components/plugins/install-plugin/install-from-local-package'
 import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx
index 0129c65ee2..ab17dd202b 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import type { Plugin, PluginStatus } from '@/app/components/plugins/types'
 import type { Locale } from '@/i18n-config'
+import { Button } from '@langgenius/dify-ui/button'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import { PluginSource } from '@/app/components/plugins/types'
 import { fetchPluginInfoFromMarketPlace } from '@/service/plugins'
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx
index e0dcc5b6f8..24fcf85cde 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import type { PluginStatus } from '@/app/components/plugins/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { useGetLanguage } from '@/context/i18n'
 import ErrorPluginItem from './error-plugin-item'
 import PluginSection from './plugin-section'
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
index 9a39b43bf6..7603cae33d 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
@@ -1,14 +1,14 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import {
   useCallback,
   useMemo,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import PluginTaskList from './components/plugin-task-list'
 import TaskStatusIndicator from './components/task-status-indicator'
diff --git a/web/app/components/plugins/plugin-page/plugins-panel.tsx b/web/app/components/plugins/plugin-page/plugins-panel.tsx
index 142c9329cc..a824d55dda 100644
--- a/web/app/components/plugins/plugin-page/plugins-panel.tsx
+++ b/web/app/components/plugins/plugin-page/plugins-panel.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { PluginDetail } from '../types'
 import type { FilterState } from './filter-management'
+import { Button } from '@langgenius/dify-ui/button'
 import { useDebounceFn } from 'ahooks'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
-import { Button } from '@/app/components/base/ui/button'
 import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
 import { useGetLanguage } from '@/context/i18n'
 import { renderI18nObject } from '@/i18n-config'
diff --git a/web/app/components/plugins/plugin-page/use-reference-setting.ts b/web/app/components/plugins/plugin-page/use-reference-setting.ts
index 0a0e925207..b688bdc11e 100644
--- a/web/app/components/plugins/plugin-page/use-reference-setting.ts
+++ b/web/app/components/plugins/plugin-page/use-reference-setting.ts
@@ -1,6 +1,6 @@
+import { toast } from '@langgenius/dify-ui/toast'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useInvalidateReferenceSettings, useMutationReferenceSettings, useReferenceSettings } from '@/service/use-plugins'
diff --git a/web/app/components/plugins/provider-card.tsx b/web/app/components/plugins/provider-card.tsx
index 7f07699771..06b611b355 100644
--- a/web/app/components/plugins/provider-card.tsx
+++ b/web/app/components/plugins/provider-card.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { Plugin } from './types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
@@ -8,7 +9,6 @@ import { useTheme } from 'next-themes'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import { getPluginLinkInMarketplace } from '@/app/components/plugins/marketplace/utils'
 import { useLocale } from '@/context/i18n'
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/plugins-picker.spec.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/plugins-picker.spec.tsx
index 299eecce54..99d7a5fdc5 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/plugins-picker.spec.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/plugins-picker.spec.tsx
@@ -5,7 +5,7 @@ import { AUTO_UPDATE_MODE } from '../types'
 
 const mockToolPicker = vi.fn()
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({
     children,
   }: {
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/strategy-picker.spec.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/strategy-picker.spec.tsx
index e1e72fbde2..5be10ff146 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/strategy-picker.spec.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/strategy-picker.spec.tsx
@@ -5,7 +5,7 @@ import { AUTO_UPDATE_STRATEGY } from '../types'
 
 let portalOpen = false
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({
     children,
   }: {
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
index c0dbbea5c6..1bb4caeb3f 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiAddLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import NoPluginSelected from './no-plugin-selected'
 import PluginsSelected from './plugins-selected'
 import ToolPicker from './tool-picker'
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx
index 0f85b95e3c..22bfa6a30b 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiArrowDownSLine,
   RiCheckLine,
@@ -9,7 +10,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 import { AUTO_UPDATE_STRATEGY } from './types'
 
 const i18nPrefix = 'autoUpdate.strategy'
diff --git a/web/app/components/plugins/reference-setting-modal/index.tsx b/web/app/components/plugins/reference-setting-modal/index.tsx
index bbf19d8c0a..061777e38b 100644
--- a/web/app/components/plugins/reference-setting-modal/index.tsx
+++ b/web/app/components/plugins/reference-setting-modal/index.tsx
@@ -2,11 +2,11 @@
 import type { FC } from 'react'
 import type { AutoUpdateConfig } from './auto-update-setting/types'
 import type { Permissions, ReferenceSetting } from '@/app/components/plugins/types'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 import { PermissionType } from '@/app/components/plugins/types'
 import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import { useGlobalPublicStore } from '@/context/global-public-context'
diff --git a/web/app/components/plugins/update-plugin/__tests__/from-market-place.spec.tsx b/web/app/components/plugins/update-plugin/__tests__/from-market-place.spec.tsx
index 9d9ad77106..3cc3ef78d1 100644
--- a/web/app/components/plugins/update-plugin/__tests__/from-market-place.spec.tsx
+++ b/web/app/components/plugins/update-plugin/__tests__/from-market-place.spec.tsx
@@ -22,7 +22,7 @@ const {
   mockToastError: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/dialog', () => ({
+vi.mock('@langgenius/dify-ui/dialog', () => ({
   Dialog: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   DialogContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   DialogTitle: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
@@ -37,7 +37,7 @@ vi.mock('@/app/components/base/badge/index', () => ({
   default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }))
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({
     children,
     onClick,
@@ -49,7 +49,7 @@ vi.mock('@/app/components/base/ui/button', () => ({
   }) => <button disabled={disabled} onClick={onClick}>{children}</button>,
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: mockToastError,
   },
diff --git a/web/app/components/plugins/update-plugin/__tests__/index.spec.tsx b/web/app/components/plugins/update-plugin/__tests__/index.spec.tsx
index cdd7462342..d0492696ca 100644
--- a/web/app/components/plugins/update-plugin/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/update-plugin/__tests__/index.spec.tsx
@@ -4,11 +4,11 @@ import type {
   UpdateFromMarketPlacePayload,
   UpdatePluginModalType,
 } from '../../types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { toast } from '@/app/components/base/ui/toast'
 import { PluginCategoryEnum, PluginSource, TaskStatus } from '../../types'
 import DowngradeWarningModal from '../downgrade-warning'
 import FromGitHub from '../from-github'
diff --git a/web/app/components/plugins/update-plugin/downgrade-warning.tsx b/web/app/components/plugins/update-plugin/downgrade-warning.tsx
index da53ebfb12..801c8ede51 100644
--- a/web/app/components/plugins/update-plugin/downgrade-warning.tsx
+++ b/web/app/components/plugins/update-plugin/downgrade-warning.tsx
@@ -1,5 +1,5 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 const i18nPrefix = 'autoUpdate.pluginDowngradeWarning'
 
diff --git a/web/app/components/plugins/update-plugin/from-market-place.tsx b/web/app/components/plugins/update-plugin/from-market-place.tsx
index bde5051808..52484e65aa 100644
--- a/web/app/components/plugins/update-plugin/from-market-place.tsx
+++ b/web/app/components/plugins/update-plugin/from-market-place.tsx
@@ -1,19 +1,19 @@
 'use client'
 import type { FC } from 'react'
 import type { UpdateFromMarketPlacePayload } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Badge, { BadgeState } from '@/app/components/base/badge/index'
-import { Button } from '@/app/components/base/ui/button'
 import {
   Dialog,
   DialogCloseButton,
   DialogContent,
   DialogTitle,
-} from '@/app/components/base/ui/dialog'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/dialog'
+import { toast } from '@langgenius/dify-ui/toast'
+import * as React from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
 import Card from '@/app/components/plugins/card'
 import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status'
 import { pluginManifestToCardPluginProps } from '@/app/components/plugins/install-plugin/utils'
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 d590f0c9eb..a76fd085ba 100644
--- a/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
+++ b/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
@@ -1,16 +1,16 @@
 'use client'
+import type { Placement } from '@langgenius/dify-ui/popover'
 import type { FC } from 'react'
-import type { Placement } from '@/app/components/base/ui/placement'
 import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import Badge from '@/app/components/base/badge'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/app/components/base/ui/popover'
+} from '@langgenius/dify-ui/popover'
+import * as React from 'react'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import Badge from '@/app/components/base/badge'
 import useTimestamp from '@/hooks/use-timestamp'
 import { useVersionListOfPlugin } from '@/service/use-plugins'
 import { isEarlierThanVersion } from '@/utils/semver'
diff --git a/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx
index 967e697813..cb11e5baf4 100644
--- a/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx
@@ -37,11 +37,11 @@ const { mockToast } = vi.hoisted(() => {
   return { mockToast }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: mockToast,
 }))
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({ children, onClick, ...props }: Record<string, unknown>) => (
     <button onClick={onClick as () => void} {...props}>{children as string}</button>
   ),
diff --git a/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx
index f9eb858b30..7a99b7ab90 100644
--- a/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx
@@ -22,7 +22,7 @@ vi.mock('@/app/components/base/modal', () => ({
     isShow ? <div data-testid="modal">{children}</div> : null,
 }))
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({ children, onClick, disabled, ...props }: Record<string, unknown>) => (
     <button onClick={onClick as () => void} disabled={disabled as boolean} {...props}>
       {children as string}
diff --git a/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx
index 0fe856b8d9..d31a06f421 100644
--- a/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx
@@ -26,7 +26,7 @@ const toastMocks = vi.hoisted(() => {
   }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(toastMocks.api, {
     success: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'success', message, ...options })),
     error: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'error', message, ...options })),
@@ -100,7 +100,7 @@ vi.mock('@/app/components/app/create-from-dsl-modal/uploader', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({ children, onClick, disabled, className, variant, loading }: {
     children: React.ReactNode
     onClick?: () => void
diff --git a/web/app/components/rag-pipeline/components/conversion.tsx b/web/app/components/rag-pipeline/components/conversion.tsx
index 27f25f6e2f..d90c0c65d6 100644
--- a/web/app/components/rag-pipeline/components/conversion.tsx
+++ b/web/app/components/rag-pipeline/components/conversion.tsx
@@ -1,6 +1,3 @@
-import * as React from 'react'
-import { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -9,9 +6,12 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
+import * as React from 'react'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useParams } from '@/next/navigation'
 import { datasetDetailQueryKeyPrefix } from '@/service/knowledge/use-dataset'
 import { useInvalid } from '@/service/use-base'
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/__tests__/index.spec.tsx
index 7aa5ccbf90..3c029f4376 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/__tests__/index.spec.tsx
@@ -1,8 +1,8 @@
 import type { FormData, InputFieldFormProps } from '../types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, renderHook, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import { toast } from '@/app/components/base/ui/toast'
 import { PipelineInputVarType } from '@/models/pipeline'
 import { useConfigurations, useHiddenConfigurations, useHiddenFieldNames } from '../hooks'
 import InputFieldForm from '../index'
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx
index 3854b6561a..19e5d28e63 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx
@@ -1,12 +1,12 @@
 import type { FormData, InputFieldFormProps } from './types'
 import type { MoreInfo } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import { useFileSizeLimit } from '@/app/components/base/file-uploader/hooks'
 import { useAppForm } from '@/app/components/base/form'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { ChangeType } from '@/app/components/workflow/types'
 import { useFileUploadConfig } from '@/service/use-common'
 import HiddenFields from './hidden-fields'
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/hooks.spec.ts b/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/hooks.spec.ts
index 376751e58f..6dfc3422f3 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/hooks.spec.ts
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/hooks.spec.ts
@@ -23,7 +23,7 @@ vi.mock('../../../../../hooks/use-pipeline', () => ({
 }))
 
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: (...args: unknown[]) => mockToastNotify(...args),
   },
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/index.spec.tsx
index b2dbc35601..84c700e273 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/index.spec.tsx
@@ -1,8 +1,8 @@
 import type { SortableItem } from '../types'
 import type { InputVar } from '@/models/pipeline'
+import { toast } from '@langgenius/dify-ui/toast'
 import { act, fireEvent, render, renderHook, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import { toast } from '@/app/components/base/ui/toast'
 import { PipelineInputVarType } from '@/models/pipeline'
 import FieldItem from '../field-item'
 import FieldListContainer from '../field-list-container'
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/hooks.ts b/web/app/components/rag-pipeline/components/panel/input-field/field-list/hooks.ts
index 1301074d51..a9eb23c069 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/hooks.ts
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/hooks.ts
@@ -1,11 +1,11 @@
 import type { SortableItem } from './types'
 import type { MoreInfo, ValueSelector } from '@/app/components/workflow/types'
 import type { InputVar } from '@/models/pipeline'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useBoolean } from 'ahooks'
 import { produce } from 'immer'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 import { ChangeType } from '@/app/components/workflow/types'
 import { usePipeline } from '../../../../hooks/use-pipeline'
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 2be8051003..12eed4ece4 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
@@ -1,6 +1,7 @@
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 import type { Node } from '@/app/components/workflow/types'
 import type { InputVar, RAGPipelineVariables } from '@/models/pipeline'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine, RiEyeLine } from '@remixicon/react'
 import {
@@ -13,7 +14,6 @@ import { useTranslation } from 'react-i18next'
 import { useNodes } from 'reactflow'
 import Divider from '@/app/components/base/divider'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 import { useNodesSyncDraft } from '@/app/components/workflow/hooks'
 import { useStore } from '@/app/components/workflow/store'
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/actions/index.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/actions/index.tsx
index 17218f732b..14587424f1 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/actions/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/actions/index.tsx
@@ -1,6 +1,6 @@
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 type ActionsProps = {
   disabled?: boolean
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/__tests__/index.spec.tsx
index 66d6f84fe7..3eae324ef4 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/__tests__/index.spec.tsx
@@ -56,7 +56,7 @@ vi.mock('@/app/components/base/form/form-scenarios/base/utils', () => ({
 
 const mockToastNotify = vi.fn()
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (message: string) => mockToastNotify({ type: 'error', message }),
   },
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/__tests__/options.spec.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/__tests__/options.spec.tsx
index fcfa305bb3..5ec38ba6e5 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/__tests__/options.spec.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/__tests__/options.spec.tsx
@@ -20,7 +20,7 @@ const {
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: mockToastError,
   },
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/actions.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/actions.tsx
index 40cdb7aa5c..062b7a3944 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/actions.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/actions.tsx
@@ -1,7 +1,7 @@
 import type { CustomActionsProps } from '@/app/components/base/form/components/form/actions'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { useStore } from '@/app/components/workflow/store'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/options.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/options.tsx
index 7e6baa42b1..6a77c9b355 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/options.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/options.tsx
@@ -1,9 +1,9 @@
 import type { ZodSchema } from 'zod'
 import type { CustomActionsProps } from '@/app/components/base/form/components/form/actions'
 import type { BaseConfiguration } from '@/app/components/base/form/form-scenarios/base/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useAppForm } from '@/app/components/base/form'
 import BaseField from '@/app/components/base/form/form-scenarios/base/field'
-import { toast } from '@/app/components/base/ui/toast'
 
 type OptionsProps = {
   initialData: Record<string, any>
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/result/result-preview/index.tsx b/web/app/components/rag-pipeline/components/panel/test-run/result/result-preview/index.tsx
index b5688befbb..5e29c4795c 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/result/result-preview/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/result/result-preview/index.tsx
@@ -1,8 +1,8 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { RAG_PIPELINE_PREVIEW_CHUNK_NUM } from '@/config'
 import { ChunkCardList } from '../../../../chunk-card-list'
 import { formatPreviewChunks } from './utils'
diff --git a/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx b/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
index 67f6223a21..faa71f0f4e 100644
--- a/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
+++ b/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import type { IconInfo } from '@/models/datasets'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useCallback, useState } from 'react'
@@ -10,7 +11,6 @@ import AppIconPicker from '@/app/components/base/app-icon-picker'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
-import { Button } from '@/app/components/base/ui/button'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 
 type PublishAsKnowledgePipelineModalProps = {
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/index.spec.tsx
index b9c0de5f50..dda765b48f 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/index.spec.tsx
@@ -161,7 +161,7 @@ const toastMocks = vi.hoisted(() => ({
   promise: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(toastMocks.call, {
     success: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'success', message, ...options })),
     error: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'error', message, ...options })),
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx
index 55674b0242..57f4b55cfc 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx
@@ -1,7 +1,7 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { InputField } from '@/app/components/base/icons/src/vender/pipeline'
-import { Button } from '@/app/components/base/ui/button'
 import { useStore } from '@/app/components/workflow/store'
 
 const InputFieldButton = () => {
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
index 64a12edfec..abb334b393 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
@@ -79,7 +79,7 @@ const toastMocks = vi.hoisted(() => ({
   promise: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(toastMocks.call, {
     success: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'success', message, ...options })),
     error: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'error', message, ...options })),
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
index 77d264ec7a..103ee53210 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
@@ -12,7 +12,7 @@ const toastMocks = vi.hoisted(() => ({
   promise: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(toastMocks.call, {
     success: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'success', message, ...options })),
     error: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'error', message, ...options })),
@@ -74,7 +74,7 @@ vi.mock('@/app/components/workflow/store', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({ children, onClick, disabled, variant, className }: Record<string, unknown>) => (
     <button
       onClick={onClick as () => void}
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx
index 8f7e3c98e5..3ea9aa0c1f 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { RiArrowDownSLine } from '@remixicon/react'
 import {
   memo,
@@ -10,7 +11,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 import { useNodesSyncDraft } from '@/app/components/workflow/hooks'
 import Popup from './popup'
 
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
index d34971ddcc..9cb026dffe 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
@@ -1,14 +1,5 @@
 import type { IconInfo } from '@/models/datasets'
 import type { PublishWorkflowParams } from '@/types/workflow'
-import { cn } from '@langgenius/dify-ui/cn'
-import { RiArrowRightUpLine, RiHammerLine, RiPlayCircleLine, RiTerminalBoxLine } from '@remixicon/react'
-import { useBoolean, useKeyPress } from 'ahooks'
-import { memo, useCallback, useState } from 'react'
-import { Trans, useTranslation } from 'react-i18next'
-import { trackEvent } from '@/app/components/base/amplitude'
-import Divider from '@/app/components/base/divider'
-import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
-import PremiumBadge from '@/app/components/base/premium-badge'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -17,9 +8,18 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
+import { RiArrowRightUpLine, RiHammerLine, RiPlayCircleLine, RiTerminalBoxLine } from '@remixicon/react'
+import { useBoolean, useKeyPress } from 'ahooks'
+import { memo, useCallback, useState } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { trackEvent } from '@/app/components/base/amplitude'
+import Divider from '@/app/components/base/divider'
+import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
+import PremiumBadge from '@/app/components/base/premium-badge'
 import { useChecklistBeforePublish } from '@/app/components/workflow/hooks'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
diff --git a/web/app/components/rag-pipeline/components/update-dsl-modal.tsx b/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
index cc5d8cd7dd..742c29a6da 100644
--- a/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
+++ b/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiAlertFill,
   RiCloseLine,
@@ -9,7 +10,6 @@ import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Uploader from '@/app/components/app/create-from-dsl-modal/uploader'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 import { useUpdateDSLModal } from '../hooks/use-update-dsl-modal'
 import VersionMismatchModal from './version-mismatch-modal'
 
diff --git a/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx b/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
index 5277a11ca7..dc50e972e9 100644
--- a/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
+++ b/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
@@ -1,7 +1,7 @@
 import type { MouseEventHandler } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 
 type VersionMismatchModalProps = {
   isShow: boolean
diff --git a/web/app/components/rag-pipeline/hooks/__tests__/index.spec.ts b/web/app/components/rag-pipeline/hooks/__tests__/index.spec.ts
index a83c44faf4..d8fa830927 100644
--- a/web/app/components/rag-pipeline/hooks/__tests__/index.spec.ts
+++ b/web/app/components/rag-pipeline/hooks/__tests__/index.spec.ts
@@ -33,7 +33,7 @@ vi.mock('@/app/components/workflow/store', () => ({
   useWorkflowStore: () => mockUseWorkflowStore(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: toastMocks.error,
   },
diff --git a/web/app/components/rag-pipeline/hooks/__tests__/use-DSL.spec.ts b/web/app/components/rag-pipeline/hooks/__tests__/use-DSL.spec.ts
index 27290322be..2d5804fcee 100644
--- a/web/app/components/rag-pipeline/hooks/__tests__/use-DSL.spec.ts
+++ b/web/app/components/rag-pipeline/hooks/__tests__/use-DSL.spec.ts
@@ -9,7 +9,7 @@ const toastMocks = vi.hoisted(() => ({
   promise: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(toastMocks.call, {
     success: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'success', message, ...options })),
     error: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'error', message, ...options })),
diff --git a/web/app/components/rag-pipeline/hooks/__tests__/use-update-dsl-modal.spec.ts b/web/app/components/rag-pipeline/hooks/__tests__/use-update-dsl-modal.spec.ts
index 1b7f9a7636..2449bcc605 100644
--- a/web/app/components/rag-pipeline/hooks/__tests__/use-update-dsl-modal.spec.ts
+++ b/web/app/components/rag-pipeline/hooks/__tests__/use-update-dsl-modal.spec.ts
@@ -24,7 +24,7 @@ const toastMocks = vi.hoisted(() => {
   }
 })
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(toastMocks.api, {
     success: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'success', message, ...options })),
     error: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'error', message, ...options })),
diff --git a/web/app/components/rag-pipeline/hooks/use-DSL.ts b/web/app/components/rag-pipeline/hooks/use-DSL.ts
index 77d5698492..12bcbe041b 100644
--- a/web/app/components/rag-pipeline/hooks/use-DSL.ts
+++ b/web/app/components/rag-pipeline/hooks/use-DSL.ts
@@ -1,6 +1,6 @@
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { DSL_EXPORT_CHECK } from '@/app/components/workflow/constants'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
diff --git a/web/app/components/rag-pipeline/hooks/use-update-dsl-modal.ts b/web/app/components/rag-pipeline/hooks/use-update-dsl-modal.ts
index f8fd39b5d8..7271279996 100644
--- a/web/app/components/rag-pipeline/hooks/use-update-dsl-modal.ts
+++ b/web/app/components/rag-pipeline/hooks/use-update-dsl-modal.ts
@@ -1,7 +1,7 @@
 import type { MouseEventHandler } from 'react'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { WORKFLOW_DATA_UPDATE } from '@/app/components/workflow/constants'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { useWorkflowStore } from '@/app/components/workflow/store'
diff --git a/web/app/components/share/text-generation/hooks/__tests__/use-text-generation-app-state.spec.ts b/web/app/components/share/text-generation/hooks/__tests__/use-text-generation-app-state.spec.ts
index 41b1c379b9..34636472a7 100644
--- a/web/app/components/share/text-generation/hooks/__tests__/use-text-generation-app-state.spec.ts
+++ b/web/app/components/share/text-generation/hooks/__tests__/use-text-generation-app-state.spec.ts
@@ -20,7 +20,7 @@ const {
   useDocumentTitleMock: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: notifyMock,
   },
diff --git a/web/app/components/share/text-generation/hooks/use-text-generation-app-state.ts b/web/app/components/share/text-generation/hooks/use-text-generation-app-state.ts
index a4edf40521..8cca8d1d78 100644
--- a/web/app/components/share/text-generation/hooks/use-text-generation-app-state.ts
+++ b/web/app/components/share/text-generation/hooks/use-text-generation-app-state.ts
@@ -2,9 +2,9 @@ import type { TextGenerationCustomConfig } from '../types'
 import type { MoreLikeThisConfig, PromptConfig, SavedMessage, TextToSpeechConfig } from '@/models/debug'
 import type { SiteInfo } from '@/models/share'
 import type { VisionSettings } from '@/types/app'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useWebAppStore } from '@/context/web-app-context'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
diff --git a/web/app/components/share/text-generation/index.tsx b/web/app/components/share/text-generation/index.tsx
index afdd5b0c81..77bf35f96e 100644
--- a/web/app/components/share/text-generation/index.tsx
+++ b/web/app/components/share/text-generation/index.tsx
@@ -4,11 +4,11 @@ import type { InputValueTypes, TextGenerationRunControl } from './types'
 import type { InstalledApp } from '@/models/explore'
 import type { VisionFile } from '@/types/app'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useBoolean } from 'ahooks'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
-import { toast } from '@/app/components/base/ui/toast'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useSearchParams } from '@/next/navigation'
 import { useTextGenerationAppState } from './hooks/use-text-generation-app-state'
diff --git a/web/app/components/share/text-generation/menu-dropdown.tsx b/web/app/components/share/text-generation/menu-dropdown.tsx
index d50a0d77de..e82681946b 100644
--- a/web/app/components/share/text-generation/menu-dropdown.tsx
+++ b/web/app/components/share/text-generation/menu-dropdown.tsx
@@ -1,13 +1,8 @@
 'use client'
+import type { Placement } from '@langgenius/dify-ui/dropdown-menu'
 import type { FC } from 'react'
-import type { Placement } from '@/app/components/base/ui/placement'
 import type { SiteInfo } from '@/models/share'
 import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useCallback, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import ActionButton from '@/app/components/base/action-button'
-import ThemeSwitcher from '@/app/components/base/theme-switcher'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -15,7 +10,12 @@ import {
   DropdownMenuLinkItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import * as React from 'react'
+import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import ActionButton from '@/app/components/base/action-button'
+import ThemeSwitcher from '@/app/components/base/theme-switcher'
 import { useWebAppStore } from '@/context/web-app-context'
 import { AccessMode } from '@/models/access-control'
 import { usePathname, useRouter } from '@/next/navigation'
diff --git a/web/app/components/share/text-generation/result/__tests__/index.spec.tsx b/web/app/components/share/text-generation/result/__tests__/index.spec.tsx
index 251032d541..ec9d8873f6 100644
--- a/web/app/components/share/text-generation/result/__tests__/index.spec.tsx
+++ b/web/app/components/share/text-generation/result/__tests__/index.spec.tsx
@@ -25,7 +25,7 @@ vi.mock('i18next', () => ({
   t: (key: string) => key,
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: {
     notify: notifyMock,
   },
diff --git a/web/app/components/share/text-generation/result/index.tsx b/web/app/components/share/text-generation/result/index.tsx
index cb2d783451..8247fcd0f5 100644
--- a/web/app/components/share/text-generation/result/index.tsx
+++ b/web/app/components/share/text-generation/result/index.tsx
@@ -4,13 +4,13 @@ import type { PromptConfig } from '@/models/debug'
 import type { SiteInfo } from '@/models/share'
 import type { AppSourceType } from '@/service/share'
 import type { VisionFile, VisionSettings } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { t } from 'i18next'
 import { useCallback } from 'react'
 import * as React from 'react'
 import TextGenerationRes from '@/app/components/app/text-generate/item'
 import Loading from '@/app/components/base/loading'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import NoData from '@/app/components/share/text-generation/no-data'
 import { useResultRunState } from './hooks/use-result-run-state'
 import { useResultSender } from './hooks/use-result-sender'
diff --git a/web/app/components/share/text-generation/run-batch/index.tsx b/web/app/components/share/text-generation/run-batch/index.tsx
index 153cb181f1..1264e2eb64 100644
--- a/web/app/components/share/text-generation/run-batch/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiLoader2Line,
@@ -7,7 +8,6 @@ import {
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import CSVDownload from './csv-download'
 import CSVReader from './csv-reader'
diff --git a/web/app/components/share/text-generation/run-batch/res-download/index.tsx b/web/app/components/share/text-generation/run-batch/res-download/index.tsx
index 7bb3336f13..a1cd4fe9d3 100644
--- a/web/app/components/share/text-generation/run-batch/res-download/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/res-download/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiDownloadLine } from '@remixicon/react'
 import * as React from 'react'
@@ -8,7 +9,6 @@ import {
   useCSVDownloader,
 } from 'react-papaparse'
 import ActionButton from '@/app/components/base/action-button'
-import { Button } from '@/app/components/base/ui/button'
 
 type IResDownloadProps = {
   isMobile: boolean
diff --git a/web/app/components/share/text-generation/run-once/index.tsx b/web/app/components/share/text-generation/run-once/index.tsx
index 4e66614825..d8a92dedfd 100644
--- a/web/app/components/share/text-generation/run-once/index.tsx
+++ b/web/app/components/share/text-generation/run-once/index.tsx
@@ -4,6 +4,7 @@ import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import type { PromptConfig } from '@/models/debug'
 import type { SiteInfo } from '@/models/share'
 import type { VisionFile, VisionSettings } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiLoader2Line,
@@ -18,7 +19,6 @@ import TextGenerationImageUploader from '@/app/components/base/image-uploader/te
 import Input from '@/app/components/base/input'
 import Select from '@/app/components/base/select'
 import Textarea from '@/app/components/base/textarea'
-import { Button } from '@/app/components/base/ui/button'
 import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
diff --git a/web/app/components/tools/edit-custom-collection-modal/__tests__/get-schema.spec.tsx b/web/app/components/tools/edit-custom-collection-modal/__tests__/get-schema.spec.tsx
index 998bca155d..aee315bcf6 100644
--- a/web/app/components/tools/edit-custom-collection-modal/__tests__/get-schema.spec.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/__tests__/get-schema.spec.tsx
@@ -7,7 +7,7 @@ vi.mock('@/service/tools', () => ({
   importSchemaFromURL: vi.fn(),
 }))
 const mockToastError = vi.hoisted(() => vi.fn())
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: mockToastError,
   },
diff --git a/web/app/components/tools/edit-custom-collection-modal/__tests__/index.spec.tsx b/web/app/components/tools/edit-custom-collection-modal/__tests__/index.spec.tsx
index 1ab1bc428c..58ebab69b3 100644
--- a/web/app/components/tools/edit-custom-collection-modal/__tests__/index.spec.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/__tests__/index.spec.tsx
@@ -1,8 +1,8 @@
 import type { ModalContextState } from '@/context/modal-context'
 import type { ProviderContextState } from '@/context/provider-context'
+import { toast } from '@langgenius/dify-ui/toast'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { toast } from '@/app/components/base/ui/toast'
 import { Plan } from '@/app/components/billing/type'
 import { AuthHeaderPrefix, AuthType } from '@/app/components/tools/types'
 import { parseParamsSchema } from '@/service/tools'
diff --git a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
index 533466387c..bee775e80b 100644
--- a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { Credential } from '@/app/components/tools/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,7 +9,6 @@ import Drawer from '@/app/components/base/drawer-plus'
 import Input from '@/app/components/base/input'
 import Radio from '@/app/components/base/radio/ui'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import { AuthHeaderPrefix, AuthType } from '@/app/components/tools/types'
 
 type Props = {
diff --git a/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
index 3711a5d095..2bb5059870 100644
--- a/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
@@ -1,5 +1,7 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiAddLine,
   RiArrowDownSLine,
@@ -9,8 +11,6 @@ import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { importSchemaFromURL } from '@/service/tools'
 import examples from './examples'
 
diff --git a/web/app/components/tools/edit-custom-collection-modal/index.tsx b/web/app/components/tools/edit-custom-collection-modal/index.tsx
index 189e93f73b..03899941ba 100644
--- a/web/app/components/tools/edit-custom-collection-modal/index.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@@ -1,7 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import type { Credential, CustomCollectionBackend, CustomParamSchema, Emoji } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiSettings2Line } from '@remixicon/react'
 import { useDebounce, useGetState } from 'ahooks'
 import { produce } from 'immer'
@@ -13,8 +15,6 @@ import Drawer from '@/app/components/base/drawer-plus'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import LabelSelector from '@/app/components/tools/labels/selector'
 import { parseParamsSchema } from '@/service/tools'
 import { LinkExternal02 } from '../../base/icons/src/vender/line/general'
diff --git a/web/app/components/tools/edit-custom-collection-modal/test-api.tsx b/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
index 177cd2a8ee..0eecb8ca6b 100644
--- a/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { FC } from 'react'
 import type { Credential, CustomCollectionBackend, CustomParamSchema } from '@/app/components/tools/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiSettings2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Drawer from '@/app/components/base/drawer-plus'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
 import { AuthType } from '@/app/components/tools/types'
 import { useLocale } from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
diff --git a/web/app/components/tools/labels/filter.tsx b/web/app/components/tools/labels/filter.tsx
index 6405673eec..00fa47ace4 100644
--- a/web/app/components/tools/labels/filter.tsx
+++ b/web/app/components/tools/labels/filter.tsx
@@ -1,6 +1,11 @@
 import type { FC } from 'react'
 import type { Label } from '@/app/components/tools/labels/constant'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,11 +13,6 @@ import { Tag01, Tag03 } from '@/app/components/base/icons/src/vender/line/financ
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
 import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import Input from '@/app/components/base/input'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/app/components/base/ui/popover'
 import { useTags } from '@/app/components/plugins/hooks'
 
 type LabelFilterProps = {
diff --git a/web/app/components/tools/mcp/__tests__/modal.spec.tsx b/web/app/components/tools/mcp/__tests__/modal.spec.tsx
index 5b561e7f30..a57f88ecad 100644
--- a/web/app/components/tools/mcp/__tests__/modal.spec.tsx
+++ b/web/app/components/tools/mcp/__tests__/modal.spec.tsx
@@ -49,7 +49,7 @@ vi.mock('@/service/use-plugins', () => ({
 }))
 
 const mockToastError = vi.hoisted(() => vi.fn())
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: mockToastError,
   },
diff --git a/web/app/components/tools/mcp/detail/__tests__/operation-dropdown.spec.tsx b/web/app/components/tools/mcp/detail/__tests__/operation-dropdown.spec.tsx
index 962f39c326..7205c6f427 100644
--- a/web/app/components/tools/mcp/detail/__tests__/operation-dropdown.spec.tsx
+++ b/web/app/components/tools/mcp/detail/__tests__/operation-dropdown.spec.tsx
@@ -2,7 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import OperationDropdown from '../operation-dropdown'
 
-vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+vi.mock('@langgenius/dify-ui/dropdown-menu', async () => {
   const React = await import('react')
   const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
 
diff --git a/web/app/components/tools/mcp/detail/content.tsx b/web/app/components/tools/mcp/detail/content.tsx
index d9ea302cbb..48ea75723c 100644
--- a/web/app/components/tools/mcp/detail/content.tsx
+++ b/web/app/components/tools/mcp/detail/content.tsx
@@ -1,6 +1,16 @@
 'use client'
 import type { FC } from 'react'
 import type { ToolWithProvider } from '../../../workflow/types'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCloseLine,
@@ -14,16 +24,6 @@ import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import Icon from '@/app/components/plugins/card/base/card-icon'
 import { useAppContext } from '@/context/app-context'
diff --git a/web/app/components/tools/mcp/detail/operation-dropdown.tsx b/web/app/components/tools/mcp/detail/operation-dropdown.tsx
index 9a7ee67051..c52e3f4190 100644
--- a/web/app/components/tools/mcp/detail/operation-dropdown.tsx
+++ b/web/app/components/tools/mcp/detail/operation-dropdown.tsx
@@ -1,6 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import {
   RiDeleteBinLine,
   RiEditLine,
@@ -10,12 +16,6 @@ import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
 
 type Props = {
   inCard?: boolean
diff --git a/web/app/components/tools/mcp/headers-input.tsx b/web/app/components/tools/mcp/headers-input.tsx
index 05cc464bfb..2726377ae9 100644
--- a/web/app/components/tools/mcp/headers-input.tsx
+++ b/web/app/components/tools/mcp/headers-input.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddLine, RiDeleteBinLine } from '@remixicon/react'
 import * as React from 'react'
@@ -6,7 +7,6 @@ import { useTranslation } from 'react-i18next'
 import { v4 as uuid } from 'uuid'
 import ActionButton from '@/app/components/base/action-button'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
 
 export type HeaderItem = {
   id: string
diff --git a/web/app/components/tools/mcp/hooks/use-mcp-modal-form.ts b/web/app/components/tools/mcp/hooks/use-mcp-modal-form.ts
index 6d88d52c4c..a1e156fef4 100644
--- a/web/app/components/tools/mcp/hooks/use-mcp-modal-form.ts
+++ b/web/app/components/tools/mcp/hooks/use-mcp-modal-form.ts
@@ -2,10 +2,10 @@
 import type { HeaderItem } from '../headers-input'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { getDomain } from 'tldts'
 import { v4 as uuid } from 'uuid'
-import { toast } from '@/app/components/base/ui/toast'
 import { MCPAuthMethod } from '@/app/components/tools/types'
 import { uploadRemoteFileInfo } from '@/service/common'
 
diff --git a/web/app/components/tools/mcp/mcp-server-modal.tsx b/web/app/components/tools/mcp/mcp-server-modal.tsx
index e9eb1d8043..ab4a5c36f4 100644
--- a/web/app/components/tools/mcp/mcp-server-modal.tsx
+++ b/web/app/components/tools/mcp/mcp-server-modal.tsx
@@ -2,6 +2,7 @@
 import type {
   MCPServerDetail,
 } from '@/app/components/tools/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
@@ -9,7 +10,6 @@ import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
-import { Button } from '@/app/components/base/ui/button'
 import MCPServerParamItem from '@/app/components/tools/mcp/mcp-server-param-item'
 import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
 import {
diff --git a/web/app/components/tools/mcp/mcp-service-card.tsx b/web/app/components/tools/mcp/mcp-service-card.tsx
index 33036969d8..67beb9b3ee 100644
--- a/web/app/components/tools/mcp/mcp-service-card.tsx
+++ b/web/app/components/tools/mcp/mcp-service-card.tsx
@@ -4,15 +4,6 @@ import type { FC, ReactNode } from 'react'
 import type { CollaborationUpdate } from '@/app/components/workflow/collaboration/types/collaboration'
 import type { AppDetailResponse } from '@/models/app'
 import type { AppSSO } from '@/types/app'
-import { cn } from '@langgenius/dify-ui/cn'
-import { RiEditLine, RiLoopLeftLine } from '@remixicon/react'
-import { useEffect, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import CopyFeedback from '@/app/components/base/copy-feedback'
-import Divider from '@/app/components/base/divider'
-import { Mcp } from '@/app/components/base/icons/src/vender/other'
-import Switch from '@/app/components/base/switch'
-import Tooltip from '@/app/components/base/tooltip'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -21,8 +12,17 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
+import { RiEditLine, RiLoopLeftLine } from '@remixicon/react'
+import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import CopyFeedback from '@/app/components/base/copy-feedback'
+import Divider from '@/app/components/base/divider'
+import { Mcp } from '@/app/components/base/icons/src/vender/other'
+import Tooltip from '@/app/components/base/tooltip'
 import Indicator from '@/app/components/header/indicator'
 import MCPServerModal from '@/app/components/tools/mcp/mcp-server-modal'
 import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
diff --git a/web/app/components/tools/mcp/modal.tsx b/web/app/components/tools/mcp/modal.tsx
index 8d8d8755d3..165535127d 100644
--- a/web/app/components/tools/mcp/modal.tsx
+++ b/web/app/components/tools/mcp/modal.tsx
@@ -3,7 +3,9 @@ import type { FC } from 'react'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import type { AppIconType } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine, RiEditLine } from '@remixicon/react'
 import { useHover } from 'ahooks'
 import { noop } from 'es-toolkit/function'
@@ -14,8 +16,6 @@ import { Mcp } from '@/app/components/base/icons/src/vender/other'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import TabSlider from '@/app/components/base/tab-slider'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { MCPAuthMethod } from '@/app/components/tools/types'
 import { shouldUseMcpIconForAppIcon } from '@/utils/mcp'
 import { isValidServerID, isValidUrl, useMCPModalForm } from './hooks/use-mcp-modal-form'
diff --git a/web/app/components/tools/mcp/provider-card.tsx b/web/app/components/tools/mcp/provider-card.tsx
index ea0a7f8172..9d68e6f02b 100644
--- a/web/app/components/tools/mcp/provider-card.tsx
+++ b/web/app/components/tools/mcp/provider-card.tsx
@@ -1,10 +1,5 @@
 'use client'
 import type { ToolWithProvider } from '../../workflow/types'
-import { cn } from '@langgenius/dify-ui/cn'
-import { RiHammerFill } from '@remixicon/react'
-import { useBoolean } from 'ahooks'
-import { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -12,7 +7,12 @@ import {
   AlertDialogConfirmButton,
   AlertDialogContent,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
+} from '@langgenius/dify-ui/alert-dialog'
+import { cn } from '@langgenius/dify-ui/cn'
+import { RiHammerFill } from '@remixicon/react'
+import { useBoolean } from 'ahooks'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import Indicator from '@/app/components/header/indicator'
 import Icon from '@/app/components/plugins/card/base/card-icon'
 import { useAppContext } from '@/context/app-context'
diff --git a/web/app/components/tools/mcp/sections/authentication-section.tsx b/web/app/components/tools/mcp/sections/authentication-section.tsx
index 157ed66b79..167ab44683 100644
--- a/web/app/components/tools/mcp/sections/authentication-section.tsx
+++ b/web/app/components/tools/mcp/sections/authentication-section.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import { useTranslation } from 'react-i18next'
 import AlertTriangle from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback/AlertTriangle'
 import Input from '@/app/components/base/input'
-import Switch from '@/app/components/base/switch'
 import { API_PREFIX } from '@/config'
 
 type AuthenticationSectionProps = {
diff --git a/web/app/components/tools/provider/__tests__/custom-create-card.spec.tsx b/web/app/components/tools/provider/__tests__/custom-create-card.spec.tsx
index 90ab7861b6..1c2573918f 100644
--- a/web/app/components/tools/provider/__tests__/custom-create-card.spec.tsx
+++ b/web/app/components/tools/provider/__tests__/custom-create-card.spec.tsx
@@ -72,7 +72,7 @@ vi.mock('@/app/components/tools/edit-custom-collection-modal', () => ({
 
 // Mock toast
 const mockToastSuccess = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: (title: string) => mockToastSuccess(title),
   },
diff --git a/web/app/components/tools/provider/__tests__/detail.spec.tsx b/web/app/components/tools/provider/__tests__/detail.spec.tsx
index 870e8adab1..d510eb2a34 100644
--- a/web/app/components/tools/provider/__tests__/detail.spec.tsx
+++ b/web/app/components/tools/provider/__tests__/detail.spec.tsx
@@ -81,7 +81,7 @@ vi.mock('@/app/components/base/drawer', () => ({
 
 const mockToastSuccess = vi.hoisted(() => vi.fn())
 const mockToastError = vi.hoisted(() => vi.fn())
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: mockToastSuccess,
     error: mockToastError,
diff --git a/web/app/components/tools/provider/custom-create-card.tsx b/web/app/components/tools/provider/custom-create-card.tsx
index f2154de18c..2d9d58209a 100644
--- a/web/app/components/tools/provider/custom-create-card.tsx
+++ b/web/app/components/tools/provider/custom-create-card.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { CustomCollectionBackend } from '../types'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiAddCircleFill,
 } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal'
 import { useAppContext } from '@/context/app-context'
 import { createCustomCollection } from '@/service/tools'
diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx
index 7480d11485..eee3f423bb 100644
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@@ -1,7 +1,18 @@
 'use client'
 import type { Collection, CustomCollectionBackend, Tool, WorkflowToolProviderRequest, WorkflowToolProviderResponse } from '../types'
 import type { WorkflowToolModalPayload } from '@/app/components/tools/workflow-tool'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiCloseLine,
 } from '@remixicon/react'
@@ -12,17 +23,6 @@ import ActionButton from '@/app/components/base/action-button'
 import Drawer from '@/app/components/base/drawer'
 import { LinkExternal02, Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import Loading from '@/app/components/base/loading'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { ConfigurationMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import Indicator from '@/app/components/header/indicator'
 import Icon from '@/app/components/plugins/card/base/card-icon'
diff --git a/web/app/components/tools/setting/build-in/__tests__/config-credentials.spec.tsx b/web/app/components/tools/setting/build-in/__tests__/config-credentials.spec.tsx
index edce5c0bbb..996a4077af 100644
--- a/web/app/components/tools/setting/build-in/__tests__/config-credentials.spec.tsx
+++ b/web/app/components/tools/setting/build-in/__tests__/config-credentials.spec.tsx
@@ -33,7 +33,7 @@ vi.mock('@/app/components/base/drawer-plus', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   default: { notify: vi.fn() },
 }))
 
diff --git a/web/app/components/tools/setting/build-in/config-credentials.tsx b/web/app/components/tools/setting/build-in/config-credentials.tsx
index 258de72492..d6c62f5d88 100644
--- a/web/app/components/tools/setting/build-in/config-credentials.tsx
+++ b/web/app/components/tools/setting/build-in/config-credentials.tsx
@@ -1,7 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import type { Collection } from '../../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
@@ -9,8 +11,6 @@ import { useTranslation } from 'react-i18next'
 import Drawer from '@/app/components/base/drawer-plus'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
 import Loading from '@/app/components/base/loading'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { fetchBuiltInToolCredential, fetchBuiltInToolCredentialSchema } from '@/service/tools'
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 8240def485..646a095622 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
@@ -49,7 +49,7 @@ vi.mock('@/service/use-tools', () => ({
 
 // Mock Toast - need to verify notification calls
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: (message: string) => mockToastNotify({ type: 'success', message }),
     error: (message: string) => mockToastNotify({ type: 'error', message }),
diff --git a/web/app/components/tools/workflow-tool/__tests__/index.spec.tsx b/web/app/components/tools/workflow-tool/__tests__/index.spec.tsx
index f3f229abea..2ec289fcf6 100644
--- a/web/app/components/tools/workflow-tool/__tests__/index.spec.tsx
+++ b/web/app/components/tools/workflow-tool/__tests__/index.spec.tsx
@@ -71,7 +71,7 @@ vi.mock('../confirm-modal', () => ({
 }))
 
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: (message: string) => mockToastNotify({ type: 'success', message }),
     error: (message: string) => mockToastNotify({ type: 'error', message }),
diff --git a/web/app/components/tools/workflow-tool/configure-button.tsx b/web/app/components/tools/workflow-tool/configure-button.tsx
index f1a48cc75b..1e7053f744 100644
--- a/web/app/components/tools/workflow-tool/configure-button.tsx
+++ b/web/app/components/tools/workflow-tool/configure-button.tsx
@@ -2,11 +2,11 @@
 import type { Emoji } from '@/app/components/tools/types'
 import type { InputVar, Variable } from '@/app/components/workflow/types'
 import type { PublishWorkflowParams } from '@/types/workflow'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightUpLine, RiHammerLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
-import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import WorkflowToolModal from '@/app/components/tools/workflow-tool'
 import Divider from '../../base/divider'
diff --git a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
index 6eeaa86dff..ba45387731 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useTranslation } from 'react-i18next'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 
 type ConfirmModalProps = {
   show: boolean
diff --git a/web/app/components/tools/workflow-tool/hooks/__tests__/use-configure-button.spec.ts b/web/app/components/tools/workflow-tool/hooks/__tests__/use-configure-button.spec.ts
index 6f9017bbea..efbf16d590 100644
--- a/web/app/components/tools/workflow-tool/hooks/__tests__/use-configure-button.spec.ts
+++ b/web/app/components/tools/workflow-tool/hooks/__tests__/use-configure-button.spec.ts
@@ -33,7 +33,7 @@ vi.mock('@/service/use-tools', () => ({
 }))
 
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: (message: string) => mockToastNotify({ type: 'success', message }),
     error: (message: string) => mockToastNotify({ type: 'error', message }),
diff --git a/web/app/components/tools/workflow-tool/hooks/use-configure-button.ts b/web/app/components/tools/workflow-tool/hooks/use-configure-button.ts
index 142b0c2397..9f0a43635c 100644
--- a/web/app/components/tools/workflow-tool/hooks/use-configure-button.ts
+++ b/web/app/components/tools/workflow-tool/hooks/use-configure-button.ts
@@ -1,9 +1,9 @@
 import type { Emoji, WorkflowToolProviderOutputParameter, WorkflowToolProviderParameter, WorkflowToolProviderRequest, WorkflowToolProviderResponse } from '@/app/components/tools/types'
 import type { InputVar, Variable } from '@/app/components/workflow/types'
 import type { PublishWorkflowParams } from '@/types/workflow'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { useRouter } from '@/next/navigation'
 import { createWorkflowToolProvider, saveWorkflowToolProvider } from '@/service/tools'
diff --git a/web/app/components/tools/workflow-tool/index.tsx b/web/app/components/tools/workflow-tool/index.tsx
index fd18bf5fa7..353e85beba 100644
--- a/web/app/components/tools/workflow-tool/index.tsx
+++ b/web/app/components/tools/workflow-tool/index.tsx
@@ -1,7 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import type { Emoji, WorkflowToolProviderOutputParameter, WorkflowToolProviderOutputSchema, WorkflowToolProviderParameter, WorkflowToolProviderRequest } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiErrorWarningLine } from '@remixicon/react'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -13,8 +15,6 @@ import EmojiPicker from '@/app/components/base/emoji-picker'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import LabelSelector from '@/app/components/tools/labels/selector'
 import ConfirmModal from '@/app/components/tools/workflow-tool/confirm-modal'
 import MethodSelector from '@/app/components/tools/workflow-tool/method-selector'
diff --git a/web/app/components/workflow-app/components/workflow-header/__tests__/features-trigger.spec.tsx b/web/app/components/workflow-app/components/workflow-header/__tests__/features-trigger.spec.tsx
index 49e7bb26d7..41e47967b2 100644
--- a/web/app/components/workflow-app/components/workflow-header/__tests__/features-trigger.spec.tsx
+++ b/web/app/components/workflow-app/components/workflow-header/__tests__/features-trigger.spec.tsx
@@ -26,7 +26,7 @@ const toastMocks = vi.hoisted(() => ({
   promise: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(toastMocks.call, {
     success: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'success', message, ...options })),
     error: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'error', message, ...options })),
diff --git a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
index 94e487ba57..d1aafa5c43 100644
--- a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
+++ b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
@@ -6,7 +6,9 @@ import type {
   Node,
 } from '@/app/components/workflow/types'
 import type { PublishWorkflowParams } from '@/types/workflow'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiApps2AddLine } from '@remixicon/react'
 import {
   memo,
@@ -18,8 +20,6 @@ import { useEdges } from 'reactflow'
 import AppPublisher from '@/app/components/app/app-publisher'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useFeatures } from '@/app/components/base/features/hooks'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { Plan } from '@/app/components/billing/type'
 import {
   useChecklist,
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 36a8e6f7fc..cbb875a758 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,8 +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 { useTranslation } from 'react-i18next'
-import { Dialog, DialogCloseButton, DialogContent, DialogDescription, DialogPortal, DialogTitle } from '@/app/components/base/ui/dialog'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import { BlockEnum } from '@/app/components/workflow/types'
 import StartNodeSelectionPanel from './start-node-selection-panel'
diff --git a/web/app/components/workflow-app/hooks/__tests__/use-DSL.spec.ts b/web/app/components/workflow-app/hooks/__tests__/use-DSL.spec.ts
index e6eb41c141..b417704f35 100644
--- a/web/app/components/workflow-app/hooks/__tests__/use-DSL.spec.ts
+++ b/web/app/components/workflow-app/hooks/__tests__/use-DSL.spec.ts
@@ -9,7 +9,7 @@ const toastMocks = vi.hoisted(() => ({
   promise: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(toastMocks.call, {
     success: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'success', message, ...options })),
     error: vi.fn((message: string, options?: Record<string, unknown>) => toastMocks.call({ type: 'error', message, ...options })),
diff --git a/web/app/components/workflow-app/hooks/__tests__/use-workflow-run-utils.spec.ts b/web/app/components/workflow-app/hooks/__tests__/use-workflow-run-utils.spec.ts
index a83d2f55ee..40b3672186 100644
--- a/web/app/components/workflow-app/hooks/__tests__/use-workflow-run-utils.spec.ts
+++ b/web/app/components/workflow-app/hooks/__tests__/use-workflow-run-utils.spec.ts
@@ -35,7 +35,7 @@ vi.mock('@/service/base', () => ({
   handleStream: mockHandleStream,
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: mockToastError,
   },
diff --git a/web/app/components/workflow-app/hooks/use-DSL.ts b/web/app/components/workflow-app/hooks/use-DSL.ts
index 6b3dd9ddac..2fb2df8a3b 100644
--- a/web/app/components/workflow-app/hooks/use-DSL.ts
+++ b/web/app/components/workflow-app/hooks/use-DSL.ts
@@ -1,10 +1,10 @@
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   useCallback,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { toast } from '@/app/components/base/ui/toast'
 import {
   DSL_EXPORT_CHECK,
 } from '@/app/components/workflow/constants'
diff --git a/web/app/components/workflow-app/hooks/use-workflow-run-utils.ts b/web/app/components/workflow-app/hooks/use-workflow-run-utils.ts
index 62b09cfe74..fd5669f80a 100644
--- a/web/app/components/workflow-app/hooks/use-workflow-run-utils.ts
+++ b/web/app/components/workflow-app/hooks/use-workflow-run-utils.ts
@@ -2,8 +2,8 @@ import type { Features as FeaturesData } from '@/app/components/base/features/ty
 import type { TriggerNodeType } from '@/app/components/workflow/types'
 import type { IOtherOptions } from '@/service/base'
 import type { VersionHistory } from '@/types/workflow'
+import { toast } from '@langgenius/dify-ui/toast'
 import { noop } from 'es-toolkit/function'
-import { toast } from '@/app/components/base/ui/toast'
 import { TriggerType } from '@/app/components/workflow/header/test-run-menu'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import { handleStream, post } from '@/service/base'
diff --git a/web/app/components/workflow/__tests__/update-dsl-modal.spec.tsx b/web/app/components/workflow/__tests__/update-dsl-modal.spec.tsx
index b435091647..241cd7d762 100644
--- a/web/app/components/workflow/__tests__/update-dsl-modal.spec.tsx
+++ b/web/app/components/workflow/__tests__/update-dsl-modal.spec.tsx
@@ -1,7 +1,7 @@
 import type { EventEmitter } from 'ahooks/lib/useEventEmitter'
 import type { EventEmitterValue } from '@/context/event-emitter'
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { toast } from '@/app/components/base/ui/toast'
 import { EventEmitterContext } from '@/context/event-emitter'
 import { DSLImportStatus } from '@/models/app'
 import UpdateDSLModal from '../update-dsl-modal'
@@ -19,7 +19,7 @@ vi.stubGlobal('FileReader', MockFileReader as unknown as typeof FileReader)
 const mockEmit = vi.fn()
 const mockEmitWorkflowUpdate = vi.hoisted(() => vi.fn())
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: vi.fn(),
     info: vi.fn(),
diff --git a/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx b/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx
index 586a3c930e..47545baca8 100644
--- a/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx
+++ b/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx
@@ -164,7 +164,7 @@ vi.mock('@/service/workflow', () => ({
   fetchAllInspectVars: vi.fn().mockResolvedValue([]),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     info: toastInfoMock,
   },
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 737481601c..1a2f7a4c93 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
@@ -114,7 +114,7 @@ vi.mock('@/service/use-tools', () => ({
   useInvalidateAllMCPTools: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: (message: string) => mockNotify({ type: 'success', message }),
     error: (message: string) => mockNotify({ type: 'error', message }),
diff --git a/web/app/components/workflow/block-selector/all-start-blocks.tsx b/web/app/components/workflow/block-selector/all-start-blocks.tsx
index 12f37122d9..72a98bed00 100644
--- a/web/app/components/workflow/block-selector/all-start-blocks.tsx
+++ b/web/app/components/workflow/block-selector/all-start-blocks.tsx
@@ -5,6 +5,7 @@ import type {
 import type { BlockEnum, OnSelectBlock } from '../types'
 import type { ListRef } from './market-place-plugin/list'
 import type { TriggerDefaultValue, TriggerWithProvider } from './types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import {
@@ -17,7 +18,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
-import { Button } from '@/app/components/base/ui/button'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import Link from '@/next/link'
 import { useFeaturedTriggersRecommendations } from '@/service/use-plugins'
diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx
index 303e98071f..2483b92f90 100644
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -11,13 +11,13 @@ import type {
 import type { ToolDefaultValue, ToolValue } from './types'
 import type { ListProps, ListRef } from '@/app/components/workflow/block-selector/market-place-plugin/list'
 import type { OnSelectBlock } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
-import { Button } from '@/app/components/base/ui/button'
 import PluginList from '@/app/components/workflow/block-selector/market-place-plugin/list'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useGetLanguage } from '@/context/i18n'
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
index a058e8c051..34bdf54715 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
@@ -1,19 +1,19 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useQueryClient } from '@tanstack/react-query'
-import { useTheme } from 'next-themes'
-import * as React from 'react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import ActionButton from '@/app/components/base/action-button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLinkItem,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import { useQueryClient } from '@tanstack/react-query'
+import { useTheme } from 'next-themes'
+import * as React from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import ActionButton from '@/app/components/base/action-button'
 import { useDownloadPlugin } from '@/service/use-plugins'
 import { downloadBlob } from '@/utils/download'
 import { getMarketplaceUrl } from '@/utils/var'
diff --git a/web/app/components/workflow/block-selector/tool-picker.tsx b/web/app/components/workflow/block-selector/tool-picker.tsx
index a509dd9723..7ba93798e2 100644
--- a/web/app/components/workflow/block-selector/tool-picker.tsx
+++ b/web/app/components/workflow/block-selector/tool-picker.tsx
@@ -8,6 +8,7 @@ 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 { toast } from '@langgenius/dify-ui/toast'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
@@ -17,7 +18,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { toast } from '@/app/components/base/ui/toast'
 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'
diff --git a/web/app/components/workflow/comment/comment-input.spec.tsx b/web/app/components/workflow/comment/comment-input.spec.tsx
index 41e583aeed..8796b4ec36 100644
--- a/web/app/components/workflow/comment/comment-input.spec.tsx
+++ b/web/app/components/workflow/comment/comment-input.spec.tsx
@@ -35,7 +35,7 @@ vi.mock('@/context/app-context', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/avatar', () => ({
+vi.mock('@langgenius/dify-ui/avatar', () => ({
   Avatar: ({ name }: { name: string }) => <div data-testid="avatar">{name}</div>,
   default: ({ name }: { name: string }) => <div data-testid="avatar">{name}</div>,
 }))
diff --git a/web/app/components/workflow/comment/comment-input.tsx b/web/app/components/workflow/comment/comment-input.tsx
index 51cef610c4..e6cbc95a82 100644
--- a/web/app/components/workflow/comment/comment-input.tsx
+++ b/web/app/components/workflow/comment/comment-input.tsx
@@ -1,8 +1,8 @@
 import type { FC, PointerEvent as ReactPointerEvent } from 'react'
+import { Avatar } from '@langgenius/dify-ui/avatar'
 import { cn } from '@langgenius/dify-ui/cn'
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Avatar } from '@/app/components/base/ui/avatar'
 import { useAppContext } from '@/context/app-context'
 import { MentionInput } from './mention-input'
 
diff --git a/web/app/components/workflow/comment/mention-input.spec.tsx b/web/app/components/workflow/comment/mention-input.spec.tsx
index 5ff211d1f2..49fc7b6e87 100644
--- a/web/app/components/workflow/comment/mention-input.spec.tsx
+++ b/web/app/components/workflow/comment/mention-input.spec.tsx
@@ -41,7 +41,7 @@ vi.mock('../store', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/avatar', () => ({
+vi.mock('@langgenius/dify-ui/avatar', () => ({
   Avatar: ({ name }: { name: string }) => <div data-testid="mention-avatar">{name}</div>,
 }))
 
diff --git a/web/app/components/workflow/comment/mention-input.tsx b/web/app/components/workflow/comment/mention-input.tsx
index 287a1c2e55..b6a7caa055 100644
--- a/web/app/components/workflow/comment/mention-input.tsx
+++ b/web/app/components/workflow/comment/mention-input.tsx
@@ -2,6 +2,8 @@
 
 import type { ReactNode } from 'react'
 import type { UserProfile } from '@/service/workflow-comment'
+import { Avatar } from '@langgenius/dify-ui/avatar'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowUpLine, RiAtLine, RiLoader2Line } from '@remixicon/react'
 import {
@@ -19,8 +21,6 @@ import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import Textarea from 'react-textarea-autosize'
 import EnterKey from '@/app/components/base/icons/src/public/common/EnterKey'
-import { Avatar } from '@/app/components/base/ui/avatar'
-import { Button } from '@/app/components/base/ui/button'
 import { useParams } from '@/next/navigation'
 import { fetchMentionableUsers } from '@/service/workflow-comment'
 import { useStore, useWorkflowStore } from '../store'
diff --git a/web/app/components/workflow/comment/thread.spec.tsx b/web/app/components/workflow/comment/thread.spec.tsx
index 40e522d4b7..58bb99cff0 100644
--- a/web/app/components/workflow/comment/thread.spec.tsx
+++ b/web/app/components/workflow/comment/thread.spec.tsx
@@ -68,14 +68,14 @@ vi.mock('@/app/components/base/inline-delete-confirm', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/ui/avatar', () => ({
+vi.mock('@langgenius/dify-ui/avatar', () => ({
   Avatar: ({ name }: { name: string }) => <div data-testid="avatar">{name}</div>,
   AvatarRoot: ({ children }: { children: React.ReactNode }) => <div data-testid="avatar-root">{children}</div>,
   AvatarImage: ({ alt }: { alt: string }) => <div data-testid="avatar-image">{alt}</div>,
   AvatarFallback: ({ children }: { children: React.ReactNode }) => <div data-testid="avatar-fallback">{children}</div>,
 }))
 
-vi.mock('@/app/components/base/ui/dropdown-menu', () => ({
+vi.mock('@langgenius/dify-ui/dropdown-menu', () => ({
   DropdownMenu: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   DropdownMenuTrigger: ({ children, ...props }: React.ComponentProps<'button'>) => (
     <button type="button" {...props}>{children}</button>
@@ -83,7 +83,7 @@ vi.mock('@/app/components/base/ui/dropdown-menu', () => ({
   DropdownMenuContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }))
 
-vi.mock('@/app/components/base/ui/tooltip', () => ({
+vi.mock('@langgenius/dify-ui/tooltip', () => ({
   Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
   TooltipTrigger: ({
     children,
diff --git a/web/app/components/workflow/comment/thread.tsx b/web/app/components/workflow/comment/thread.tsx
index d0ab65db15..34e0092372 100644
--- a/web/app/components/workflow/comment/thread.tsx
+++ b/web/app/components/workflow/comment/thread.tsx
@@ -2,20 +2,20 @@
 
 import type { FC, ReactNode } from 'react'
 import type { WorkflowCommentDetail, WorkflowCommentDetailReply } from '@/service/workflow-comment'
+import { Avatar, AvatarFallback, AvatarImage, AvatarRoot } from '@langgenius/dify-ui/avatar'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { RiArrowDownSLine, RiArrowUpSLine, RiCheckboxCircleFill, RiCheckboxCircleLine, RiCloseLine, RiDeleteBinLine, RiMoreFill } from '@remixicon/react'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useReactFlow, useViewport } from 'reactflow'
 import Divider from '@/app/components/base/divider'
 import InlineDeleteConfirm from '@/app/components/base/inline-delete-confirm'
-import { Avatar, AvatarFallback, AvatarImage, AvatarRoot } from '@/app/components/base/ui/avatar'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { getUserColor } from '@/app/components/workflow/collaboration/utils/user-color'
 import { useAppContext } from '@/context/app-context'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
diff --git a/web/app/components/workflow/dsl-export-confirm-modal.tsx b/web/app/components/workflow/dsl-export-confirm-modal.tsx
index b256f8bd9f..6f60e19854 100644
--- a/web/app/components/workflow/dsl-export-confirm-modal.tsx
+++ b/web/app/components/workflow/dsl-export-confirm-modal.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine, RiLock2Line } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
@@ -9,7 +10,6 @@ import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 
 export type DSLExportConfirmModalProps = {
   envList: EnvironmentVariable[]
diff --git a/web/app/components/workflow/edge-contextmenu.tsx b/web/app/components/workflow/edge-contextmenu.tsx
index 61b208fcbd..2b7f13190a 100644
--- a/web/app/components/workflow/edge-contextmenu.tsx
+++ b/web/app/components/workflow/edge-contextmenu.tsx
@@ -1,14 +1,14 @@
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+} from '@langgenius/dify-ui/context-menu'
 import {
   memo,
   useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useEdges } from 'reactflow'
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-} from '@/app/components/base/ui/context-menu'
 import { useEdgesInteractions, usePanelInteractions } from './hooks'
 import ShortcutsName from './shortcuts-name'
 import { useStore } from './store'
diff --git a/web/app/components/workflow/header/__tests__/header-layouts.spec.tsx b/web/app/components/workflow/header/__tests__/header-layouts.spec.tsx
index f04a160967..1ddf013f8d 100644
--- a/web/app/components/workflow/header/__tests__/header-layouts.spec.tsx
+++ b/web/app/components/workflow/header/__tests__/header-layouts.spec.tsx
@@ -60,7 +60,7 @@ vi.mock('@/service/use-workflow', () => ({
   useInvalidAllLastRun: () => mockInvalidAllLastRun,
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: (message: string) => mockNotify({ type: 'success', message }),
     error: (message: string) => mockNotify({ type: 'error', message }),
diff --git a/web/app/components/workflow/header/__tests__/run-mode.spec.tsx b/web/app/components/workflow/header/__tests__/run-mode.spec.tsx
index 7bc5ef1b0c..02b645e079 100644
--- a/web/app/components/workflow/header/__tests__/run-mode.spec.tsx
+++ b/web/app/components/workflow/header/__tests__/run-mode.spec.tsx
@@ -46,7 +46,7 @@ vi.mock('../../hooks/use-dynamic-test-run-options', () => ({
   useDynamicTestRunOptions: () => mockDynamicOptions,
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: (message: string) => mockNotify({ type: 'success', message }),
     error: (message: string) => mockNotify({ type: 'error', message }),
diff --git a/web/app/components/workflow/header/__tests__/test-run-menu-helpers.spec.tsx b/web/app/components/workflow/header/__tests__/test-run-menu-helpers.spec.tsx
index 7df9cd091f..09452055db 100644
--- a/web/app/components/workflow/header/__tests__/test-run-menu-helpers.spec.tsx
+++ b/web/app/components/workflow/header/__tests__/test-run-menu-helpers.spec.tsx
@@ -10,7 +10,7 @@ import {
   useShortcutMenu,
 } from '../test-run-menu-helpers'
 
-vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+vi.mock('@langgenius/dify-ui/dropdown-menu', async () => {
   const React = await import('react')
   const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
 
diff --git a/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx b/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx
index 1d462bfc9c..8e93612dc0 100644
--- a/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx
+++ b/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx
@@ -5,7 +5,7 @@ import { act } from 'react'
 import * as React from 'react'
 import TestRunMenu, { TriggerType } from '../test-run-menu'
 
-vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+vi.mock('@langgenius/dify-ui/dropdown-menu', async () => {
   const React = await import('react')
   const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
 
diff --git a/web/app/components/workflow/header/chat-variable-button.tsx b/web/app/components/workflow/header/chat-variable-button.tsx
index 63ac90aad6..efac64bd1b 100644
--- a/web/app/components/workflow/header/chat-variable-button.tsx
+++ b/web/app/components/workflow/header/chat-variable-button.tsx
@@ -1,7 +1,7 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
 import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
-import { Button } from '@/app/components/base/ui/button'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
 
diff --git a/web/app/components/workflow/header/checklist/__tests__/index.spec.tsx b/web/app/components/workflow/header/checklist/__tests__/index.spec.tsx
index 2c83747dc0..25150e2d04 100644
--- a/web/app/components/workflow/header/checklist/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/header/checklist/__tests__/index.spec.tsx
@@ -47,7 +47,7 @@ vi.mock('../../../hooks', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/popover', () => ({
+vi.mock('@langgenius/dify-ui/popover', () => ({
   Popover: ({ children, onOpenChange }: PopoverProps) => {
     latestOnOpenChange = onOpenChange
     return <div data-testid="popover">{children}</div>
diff --git a/web/app/components/workflow/header/checklist/__tests__/plugin-group.spec.tsx b/web/app/components/workflow/header/checklist/__tests__/plugin-group.spec.tsx
index 275c8727d1..78341c2174 100644
--- a/web/app/components/workflow/header/checklist/__tests__/plugin-group.spec.tsx
+++ b/web/app/components/workflow/header/checklist/__tests__/plugin-group.spec.tsx
@@ -1,7 +1,7 @@
 import type { ChecklistItem } from '../../../hooks/use-checklist'
+import { Popover, PopoverContent } from '@langgenius/dify-ui/popover'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it } from 'vitest'
-import { Popover, PopoverContent } from '@/app/components/base/ui/popover'
 import { useStore as usePluginDependencyStore } from '../../../plugin-dependency/store'
 import { BlockEnum } from '../../../types'
 import { ChecklistPluginGroup } from '../plugin-group'
diff --git a/web/app/components/workflow/header/checklist/index.tsx b/web/app/components/workflow/header/checklist/index.tsx
index 83384c5583..9a54175c8c 100644
--- a/web/app/components/workflow/header/checklist/index.tsx
+++ b/web/app/components/workflow/header/checklist/index.tsx
@@ -3,6 +3,12 @@ import type {
   CommonEdgeType,
 } from '../../types'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
 import {
   memo,
   useMemo,
@@ -12,12 +18,6 @@ import { useTranslation } from 'react-i18next'
 import {
   useEdges,
 } from 'reactflow'
-import {
-  Popover,
-  PopoverClose,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/app/components/base/ui/popover'
 import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
 import {
   useChecklist,
diff --git a/web/app/components/workflow/header/checklist/plugin-group.tsx b/web/app/components/workflow/header/checklist/plugin-group.tsx
index f74b314a10..91bc385595 100644
--- a/web/app/components/workflow/header/checklist/plugin-group.tsx
+++ b/web/app/components/workflow/header/checklist/plugin-group.tsx
@@ -1,10 +1,10 @@
 import type { ChecklistItem } from '../../hooks/use-checklist'
 import type { BlockEnum } from '../../types'
 import type { Dependency } from '@/app/components/plugins/types'
+import { Button } from '@langgenius/dify-ui/button'
+import { PopoverClose } from '@langgenius/dify-ui/popover'
 import { memo, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
-import { PopoverClose } from '@/app/components/base/ui/popover'
 import BlockIcon from '../../block-icon'
 import { useStore as usePluginDependencyStore } from '../../plugin-dependency/store'
 import { ItemIndicator } from './item-indicator'
diff --git a/web/app/components/workflow/header/env-button.tsx b/web/app/components/workflow/header/env-button.tsx
index 98ab6ba537..eec4af84c8 100644
--- a/web/app/components/workflow/header/env-button.tsx
+++ b/web/app/components/workflow/header/env-button.tsx
@@ -1,7 +1,7 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
-import { Button } from '@/app/components/base/ui/button'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
diff --git a/web/app/components/workflow/header/global-variable-button.tsx b/web/app/components/workflow/header/global-variable-button.tsx
index 63a4a427b6..f42677a3df 100644
--- a/web/app/components/workflow/header/global-variable-button.tsx
+++ b/web/app/components/workflow/header/global-variable-button.tsx
@@ -1,7 +1,7 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
 import { GlobalVariable } from '@/app/components/base/icons/src/vender/line/others'
-import { Button } from '@/app/components/base/ui/button'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
diff --git a/web/app/components/workflow/header/header-in-restoring.tsx b/web/app/components/workflow/header/header-in-restoring.tsx
index e6ad4123ed..f07d28ff13 100644
--- a/web/app/components/workflow/header/header-in-restoring.tsx
+++ b/web/app/components/workflow/header/header-in-restoring.tsx
@@ -1,12 +1,12 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiHistoryLine } from '@remixicon/react'
 import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { useSelector as useAppContextSelector } from '@/context/app-context'
 import useTheme from '@/hooks/use-theme'
 import { useInvalidAllLastRun } from '@/service/use-workflow'
diff --git a/web/app/components/workflow/header/header-in-view-history.tsx b/web/app/components/workflow/header/header-in-view-history.tsx
index cd39ce605a..88077002c7 100644
--- a/web/app/components/workflow/header/header-in-view-history.tsx
+++ b/web/app/components/workflow/header/header-in-view-history.tsx
@@ -1,10 +1,10 @@
 import type { ViewHistoryProps } from './view-history'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
-import { Button } from '@/app/components/base/ui/button'
 import Divider from '../../base/divider'
 import {
   useWorkflowRun,
diff --git a/web/app/components/workflow/header/online-users.tsx b/web/app/components/workflow/header/online-users.tsx
index cce2af0cdc..0f057f0787 100644
--- a/web/app/components/workflow/header/online-users.tsx
+++ b/web/app/components/workflow/header/online-users.tsx
@@ -1,17 +1,17 @@
 'use client'
 import type { OnlineUser } from '../collaboration/types/collaboration'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import { AvatarFallback, AvatarImage, AvatarRoot } from '@langgenius/dify-ui/avatar'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useReactFlow } from 'reactflow'
-import { AvatarFallback, AvatarImage, AvatarRoot } from '@/app/components/base/ui/avatar'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/app/components/base/ui/popover'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
+} from '@langgenius/dify-ui/popover'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useReactFlow } from 'reactflow'
 import { useAppContext } from '@/context/app-context'
 import { getAvatar } from '@/service/common'
 import { useCollaboration } from '../collaboration/hooks/use-collaboration'
diff --git a/web/app/components/workflow/header/run-mode.tsx b/web/app/components/workflow/header/run-mode.tsx
index d98b4d6b18..923f6f0330 100644
--- a/web/app/components/workflow/header/run-mode.tsx
+++ b/web/app/components/workflow/header/run-mode.tsx
@@ -1,12 +1,12 @@
 import type { TestRunMenuRef, TriggerOption } from './test-run-menu'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiLoader2Line, RiPlayLargeLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
 import { StopCircle } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
-import { toast } from '@/app/components/base/ui/toast'
 import { useWorkflowRun, useWorkflowRunValidation, useWorkflowStartRun } from '@/app/components/workflow/hooks'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import { useStore } from '@/app/components/workflow/store'
diff --git a/web/app/components/workflow/header/test-run-menu-helpers.tsx b/web/app/components/workflow/header/test-run-menu-helpers.tsx
index 4a25cd87a6..9f14190c54 100644
--- a/web/app/components/workflow/header/test-run-menu-helpers.tsx
+++ b/web/app/components/workflow/header/test-run-menu-helpers.tsx
@@ -1,12 +1,12 @@
 /* eslint-disable react-refresh/only-export-components */
 import type { MouseEvent, MouseEventHandler, ReactElement } from 'react'
 import type { TriggerOption } from './test-run-menu'
+import { DropdownMenuItem } from '@langgenius/dify-ui/dropdown-menu'
 import {
   cloneElement,
   isValidElement,
   useEffect,
 } from 'react'
-import { DropdownMenuItem } from '@/app/components/base/ui/dropdown-menu'
 import ShortcutsName from '../shortcuts-name'
 
 export type ShortcutMapping = {
diff --git a/web/app/components/workflow/header/test-run-menu.tsx b/web/app/components/workflow/header/test-run-menu.tsx
index 6540875e6b..ceaf38592f 100644
--- a/web/app/components/workflow/header/test-run-menu.tsx
+++ b/web/app/components/workflow/header/test-run-menu.tsx
@@ -1,7 +1,7 @@
 import type { ShortcutMapping } from './test-run-menu-helpers'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@langgenius/dify-ui/dropdown-menu'
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/app/components/base/ui/dropdown-menu'
 import { OptionRow, SingleOptionTrigger, useShortcutMenu } from './test-run-menu-helpers'
 
 export enum TriggerType {
diff --git a/web/app/components/workflow/header/version-history-button.tsx b/web/app/components/workflow/header/version-history-button.tsx
index ef79c4e411..69dc2b4c4c 100644
--- a/web/app/components/workflow/header/version-history-button.tsx
+++ b/web/app/components/workflow/header/version-history-button.tsx
@@ -1,11 +1,11 @@
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiHistoryLine } from '@remixicon/react'
 import { useKeyPress } from 'ahooks'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import useTheme from '@/hooks/use-theme'
 import Tooltip from '../../base/tooltip'
 import ShortcutsName from '../shortcuts-name'
diff --git a/web/app/components/workflow/hooks/__tests__/use-checklist.spec.ts b/web/app/components/workflow/hooks/__tests__/use-checklist.spec.ts
index 891007ff0e..f6d2774611 100644
--- a/web/app/components/workflow/hooks/__tests__/use-checklist.spec.ts
+++ b/web/app/components/workflow/hooks/__tests__/use-checklist.spec.ts
@@ -89,7 +89,7 @@ vi.mock('../index', () => ({
   useNodesMetaData: () => ({ nodes: [], nodesMap: mockNodesMap }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/workflow/hooks/__tests__/use-leader-restore.spec.ts b/web/app/components/workflow/hooks/__tests__/use-leader-restore.spec.ts
index 5837f1484d..a050994f4c 100644
--- a/web/app/components/workflow/hooks/__tests__/use-leader-restore.spec.ts
+++ b/web/app/components/workflow/hooks/__tests__/use-leader-restore.spec.ts
@@ -66,7 +66,7 @@ vi.mock('@/app/components/base/features/hooks', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     info: (...args: unknown[]) => mockToastInfo(...args),
   },
diff --git a/web/app/components/workflow/hooks/use-checklist.ts b/web/app/components/workflow/hooks/use-checklist.ts
index abafcfd8eb..ae9cc0a4a2 100644
--- a/web/app/components/workflow/hooks/use-checklist.ts
+++ b/web/app/components/workflow/hooks/use-checklist.ts
@@ -16,6 +16,7 @@ import type { ModelItem } from '@/app/components/header/account-setting/model-pr
 import type { Emoji } from '@/app/components/tools/types'
 import type { DataSet } from '@/models/datasets'
 import type { I18nKeysWithPrefix } from '@/types/i18n'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useQueries, useQueryClient } from '@tanstack/react-query'
 import isDeepEqual from 'fast-deep-equal'
 import {
@@ -27,7 +28,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useEdges, useStoreApi } from 'reactflow'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
diff --git a/web/app/components/workflow/hooks/use-leader-restore.ts b/web/app/components/workflow/hooks/use-leader-restore.ts
index 048bb932e0..da0036a4ea 100644
--- a/web/app/components/workflow/hooks/use-leader-restore.ts
+++ b/web/app/components/workflow/hooks/use-leader-restore.ts
@@ -1,11 +1,11 @@
 import type { RestoreCompleteData, RestoreIntentData, RestoreRequestData } from '../collaboration/types/collaboration'
 import type { SyncCallback } from './use-nodes-sync-draft'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useReactFlow } from 'reactflow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
-import { toast } from '@/app/components/base/ui/toast'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { collaborationManager } from '../collaboration/core/collaboration-manager'
 import { useWorkflowStore } from '../store'
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 12122c5b72..c535196691 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -14,7 +14,17 @@ import type {
   Node,
 } from './types'
 import type { VarInInspect } from '@/types/workflow'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   useEventListener,
 } from 'ahooks'
@@ -41,16 +51,6 @@ import ReactFlow, {
   useReactFlow,
   useStoreApi,
 } from 'reactflow'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
-import { toast } from '@/app/components/base/ui/toast'
 import { IS_DEV } from '@/config'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import {
diff --git a/web/app/components/workflow/nodes/_base/components/__tests__/file-support.spec.tsx b/web/app/components/workflow/nodes/_base/components/__tests__/file-support.spec.tsx
index b58b045f92..1a3e004c7e 100644
--- a/web/app/components/workflow/nodes/_base/components/__tests__/file-support.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/__tests__/file-support.spec.tsx
@@ -19,7 +19,7 @@ vi.mock('@/app/components/base/file-uploader/hooks', () => ({
   useFileSizeLimit: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/workflow/nodes/_base/components/add-button.tsx b/web/app/components/workflow/nodes/_base/components/add-button.tsx
index cd32ee0dc6..d64ab5d098 100644
--- a/web/app/components/workflow/nodes/_base/components/add-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/add-button.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
 } from '@remixicon/react'
 import * as React from 'react'
-import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   className?: string
diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
index d13488a0b9..d20acd7f19 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
@@ -4,11 +4,6 @@ import type { NodeOutPutVar } from '../../../types'
 import type { ToolVarInputs } from '../../tool/types'
 import type { CredentialFormSchema, CredentialFormSchemaNumberInput, CredentialFormSchemaTextInput } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { PluginMeta } from '@/app/components/plugins/types'
-import { noop } from 'es-toolkit/function'
-import { memo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Agent } from '@/app/components/base/icons/src/vender/workflow'
-import ListEmpty from '@/app/components/base/list-empty'
 import {
   NumberField,
   NumberFieldControls,
@@ -16,8 +11,13 @@ import {
   NumberFieldGroup,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '@/app/components/base/ui/number-field'
-import { Slider } from '@/app/components/base/ui/slider'
+} from '@langgenius/dify-ui/number-field'
+import { Slider } from '@langgenius/dify-ui/slider'
+import { noop } from 'es-toolkit/function'
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Agent } from '@/app/components/base/icons/src/vender/workflow'
+import ListEmpty from '@/app/components/base/list-empty'
 import { FormTypeEnum, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/__tests__/index.spec.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/__tests__/index.spec.tsx
index a8837f6392..39b9fd8888 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/__tests__/index.spec.tsx
@@ -1,11 +1,11 @@
 import type { Props as FormProps } from '../form'
 import type { BeforeRunFormProps } from '../index'
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { toast } from '@/app/components/base/ui/toast'
 import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
 import BeforeRunForm from '../index'
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: vi.fn(),
   },
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
index f42046a2ad..f15c60e117 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
@@ -5,12 +5,12 @@ import type { Emoji } from '@/app/components/tools/types'
 import type { SpecialResultPanelProps } from '@/app/components/workflow/run/special-result-panel'
 import type { NodeRunningStatus } from '@/app/components/workflow/types'
 import type { HumanInputFormData } from '@/types/workflow'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import SingleRunForm from '@/app/components/workflow/nodes/human-input/components/single-run-form'
 import { BlockEnum } from '@/app/components/workflow/types'
diff --git a/web/app/components/workflow/nodes/_base/components/config-vision.tsx b/web/app/components/workflow/nodes/_base/components/config-vision.tsx
index 109650cf51..d21e53368d 100644
--- a/web/app/components/workflow/nodes/_base/components/config-vision.tsx
+++ b/web/app/components/workflow/nodes/_base/components/config-vision.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import type { ValueSelector, Var, VisionSetting } from '@/app/components/workflow/types'
+import { Switch } from '@langgenius/dify-ui/switch'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import ResolutionPicker from '@/app/components/workflow/nodes/llm/components/resolution-picker'
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 92ca3ed335..07b6519e41 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,3 +1,4 @@
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiArrowDownSLine,
   RiCheckLine,
@@ -9,7 +10,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 import { ErrorHandleTypeEnum } from './types'
 
 type ErrorHandleTypeSelectorProps = {
diff --git a/web/app/components/workflow/nodes/_base/components/input-number-with-slider.tsx b/web/app/components/workflow/nodes/_base/components/input-number-with-slider.tsx
index 4e253060d6..08afb50b80 100644
--- a/web/app/components/workflow/nodes/_base/components/input-number-with-slider.tsx
+++ b/web/app/components/workflow/nodes/_base/components/input-number-with-slider.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { Slider } from '@langgenius/dify-ui/slider'
 import * as React from 'react'
 import { useCallback } from 'react'
-import { Slider } from '@/app/components/base/ui/slider'
 
 export type InputNumberWithSliderProps = {
   value: number
diff --git a/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx b/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
index f6e5434a2d..dd2611b395 100644
--- a/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
@@ -1,9 +1,9 @@
 import type { ComponentProps, MouseEventHandler } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiInstallLine, RiLoader2Line } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status'
 import { TaskStatus } from '@/app/components/plugins/types'
 import { useCheckInstalled, useInstallPackageFromMarketPlace } from '@/service/use-plugins'
diff --git a/web/app/components/workflow/nodes/_base/components/layout/__tests__/field-title.spec.tsx b/web/app/components/workflow/nodes/_base/components/layout/__tests__/field-title.spec.tsx
index abd630cccb..c11b5ecfc8 100644
--- a/web/app/components/workflow/nodes/_base/components/layout/__tests__/field-title.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/layout/__tests__/field-title.spec.tsx
@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { FieldTitle } from '../field-title'
 
-vi.mock('@/app/components/base/ui/tooltip', () => ({
+vi.mock('@langgenius/dify-ui/tooltip', () => ({
   Tooltip: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   TooltipTrigger: ({ render }: { render: React.ReactNode }) => <>{render}</>,
   TooltipContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
diff --git a/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx b/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
index 5a478c25d3..205e75bf67 100644
--- a/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
+++ b/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import {
   memo,
   useState,
 } from 'react'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 
 export type FieldTitleProps = {
   title?: string
diff --git a/web/app/components/workflow/nodes/_base/components/memory-config.tsx b/web/app/components/workflow/nodes/_base/components/memory-config.tsx
index 15254ad4f4..ed193490a5 100644
--- a/web/app/components/workflow/nodes/_base/components/memory-config.tsx
+++ b/web/app/components/workflow/nodes/_base/components/memory-config.tsx
@@ -2,13 +2,13 @@
 import type { FC } from 'react'
 import type { Memory } from '../../../types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Slider } from '@langgenius/dify-ui/slider'
+import { Switch } from '@langgenius/dify-ui/switch'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import Switch from '@/app/components/base/switch'
-import { Slider } from '@/app/components/base/ui/slider'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import { MemoryRole } from '../../../types'
 
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/__tests__/operator.spec.tsx b/web/app/components/workflow/nodes/_base/components/next-step/__tests__/operator.spec.tsx
index 9afa29642d..62cf571ae0 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/__tests__/operator.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/__tests__/operator.spec.tsx
@@ -18,7 +18,7 @@ vi.mock('react-i18next', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+vi.mock('@langgenius/dify-ui/dropdown-menu', async () => {
   const React = await import('react')
   const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
 
@@ -49,7 +49,7 @@ vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
   }
 })
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({ children, className }: { children: ReactNode, className?: string }) => (
     <button type="button" className={className}>
       {children}
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
index eca48d85fd..aabb3e6ce1 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
@@ -1,6 +1,7 @@
 import type {
   CommonNodeType,
 } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
@@ -8,7 +9,6 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import {
   useNodesInteractions,
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx b/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
index c0a4f0b537..2dd45bbe3c 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
@@ -2,17 +2,17 @@ import type {
   CommonNodeType,
   OnSelectBlock,
 } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import { intersection } from 'es-toolkit/array'
 import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import {
   useAvailableBlocks,
diff --git a/web/app/components/workflow/nodes/_base/components/node-control.tsx b/web/app/components/workflow/nodes/_base/components/node-control.tsx
index 547d0b1daa..4f2980186d 100644
--- a/web/app/components/workflow/nodes/_base/components/node-control.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-control.tsx
@@ -1,5 +1,10 @@
 import type { FC } from 'react'
 import type { Node } from '../../../types'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@langgenius/dify-ui/tooltip'
 import {
   memo,
   useCallback,
@@ -9,11 +14,6 @@ import { useTranslation } from 'react-i18next'
 import {
   Stop,
 } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/app/components/base/ui/tooltip'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import {
   useNodesInteractions,
diff --git a/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx b/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
index 7b3469aaba..32b91ca1ee 100644
--- a/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
@@ -1,17 +1,17 @@
 import type { OffsetOptions } from '@floating-ui/react'
 import type { Node } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import {
   memo,
   useCallback,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
 import PanelOperatorPopup from './panel-operator-popup'
 
 type PanelOperatorProps = {
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index bf153b273e..eab359b00b 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -7,6 +7,7 @@ import type {
   Variable,
 } from '../../../../types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import {
   RiDeleteBinLine,
 } from '@remixicon/react'
@@ -14,8 +15,8 @@ import { useBoolean } from 'ahooks'
 import copy from 'copy-to-clipboard'
 import * as React from 'react'
 import { useCallback, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
 
+import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import {
   Copy,
@@ -25,7 +26,6 @@ import { Variable02 } from '@/app/components/base/icons/src/vender/solid/develop
 import { Jinja } from '@/app/components/base/icons/src/vender/workflow'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { PROMPT_EDITOR_INSERT_QUICKLY } from '@/app/components/base/prompt-editor/plugins/update-block'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import { useWorkflowVariableType } from '@/app/components/workflow/hooks'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars'
diff --git a/web/app/components/workflow/nodes/_base/components/remove-effect-var-confirm.tsx b/web/app/components/workflow/nodes/_base/components/remove-effect-var-confirm.tsx
index a3c4e5b0ad..6ae65da1ae 100644
--- a/web/app/components/workflow/nodes/_base/components/remove-effect-var-confirm.tsx
+++ b/web/app/components/workflow/nodes/_base/components/remove-effect-var-confirm.tsx
@@ -1,7 +1,5 @@
 'use client'
 import type { FC } from 'react'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -10,7 +8,9 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
+} from '@langgenius/dify-ui/alert-dialog'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 
 type Props = {
   isShow: boolean
diff --git a/web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx b/web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx
index c80c69a757..7a32d05ae1 100644
--- a/web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx
+++ b/web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx
@@ -1,10 +1,10 @@
 import type {
   Node,
 } from '@/app/components/workflow/types'
+import { Slider } from '@langgenius/dify-ui/slider'
+import { Switch } from '@langgenius/dify-ui/switch'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import Switch from '@/app/components/base/switch'
-import { Slider } from '@/app/components/base/ui/slider'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import { useRetryConfig } from './hooks'
 import s from './style.module.css'
diff --git a/web/app/components/workflow/nodes/_base/components/variable/__tests__/output-var-list.spec.tsx b/web/app/components/workflow/nodes/_base/components/variable/__tests__/output-var-list.spec.tsx
index e83fee6c55..97b6e52ddc 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/__tests__/output-var-list.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/__tests__/output-var-list.spec.tsx
@@ -16,7 +16,7 @@ vi.mock('../var-type-picker', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: { error: vi.fn() },
 }))
 
diff --git a/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
index a80d0b1ee2..a4bbe9a6eb 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
@@ -2,13 +2,13 @@
 import type { FC } from 'react'
 import type { OutputVar } from '../../../code/types'
 import type { VarType } from '@/app/components/workflow/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useDebounceFn } from 'ahooks'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { toast } from '@/app/components/base/ui/toast'
 import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
 import RemoveButton from '../remove-button'
 import VarTypePicker from './var-type-picker'
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
index b8ec03eb93..3b1aafcdf4 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { ValueSelector, Var, Variable } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiDraggable } from '@remixicon/react'
 import { useDebounceFn } from 'ahooks'
 import { produce } from 'immer'
@@ -11,7 +12,6 @@ import { useTranslation } from 'react-i18next'
 import { ReactSortable } from 'react-sortablejs'
 import { v4 as uuid4 } from 'uuid'
 import Input from '@/app/components/base/input'
-import { toast } from '@/app/components/base/ui/toast'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
 import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
 import RemoveButton from '../remove-button'
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
index e29c582838..8c46118615 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
@@ -7,11 +7,11 @@ import type { Tool } from '@/app/components/tools/types'
 import type { TriggerWithProvider } from '@/app/components/workflow/block-selector/types'
 import type { Node, ToolWithProvider, ValueSelector, Var } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { RiArrowDownSLine, RiCloseLine, RiErrorWarningFill, RiLoader4Line, RiMoreLine } from '@remixicon/react'
 import Badge from '@/app/components/base/badge'
 import { Line3 } from '@/app/components/base/icons/src/public/common'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import TypeSelector from '@/app/components/workflow/nodes/_base/components/selector'
 import { VariableIconWithColor } from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
index 6ee0d63830..3690cbf508 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
@@ -1,9 +1,9 @@
 import type { VariablePayload } from '../types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { capitalize } from 'es-toolkit/string'
 import { memo } from 'react'
 import { Warning } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { isConversationVar, isENV, isGlobalVar, isRagVariableVar } from '../../utils'
 import { useVarColor } from '../hooks'
 import VariableIcon from './variable-icon'
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx
index 6237cb6f0f..fd67856369 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiPlayLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { ClockPlay } from '@/app/components/base/icons/src/vender/line/time'
-import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   canSingleRun: boolean
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/use-last-run.ts b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/use-last-run.ts
index b1efe258df..0a7263fafd 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/use-last-run.ts
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/use-last-run.ts
@@ -2,8 +2,8 @@ import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/c
 import type { Params as OneStepRunParams } from '@/app/components/workflow/nodes/_base/hooks/use-one-step-run'
 // import
 import type { CommonNodeType, ValueSelector } from '@/app/components/workflow/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useEffect, useState } from 'react'
-import { toast } from '@/app/components/base/ui/toast'
 import {
   useNodesSyncDraft,
 } from '@/app/components/workflow/hooks'
diff --git a/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts b/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
index a05c765a8e..a455ea480a 100644
--- a/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
+++ b/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
@@ -1,10 +1,11 @@
 import type { CommonNodeType, InputVar, TriggerNodeType, ValueSelector, Var, Variable } from '@/app/components/workflow/types'
 import type { FlowType } from '@/types/common'
 import type { NodeRunResult, NodeTracing } from '@/types/workflow'
+import { toast } from '@langgenius/dify-ui/toast'
 import { unionBy } from 'es-toolkit/compat'
 import { noop } from 'es-toolkit/function'
-import { produce } from 'immer'
 
+import { produce } from 'immer'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -12,7 +13,6 @@ import {
 } from 'reactflow'
 import { trackEvent } from '@/app/components/base/amplitude'
 import { getInputVars as doGetInputVars } from '@/app/components/base/prompt-editor/constants'
-import { toast } from '@/app/components/base/ui/toast'
 import {
   useIsChatMode,
   useNodeDataUpdate,
diff --git a/web/app/components/workflow/nodes/_base/node-sections.tsx b/web/app/components/workflow/nodes/_base/node-sections.tsx
index 891f17eb50..a365362123 100644
--- a/web/app/components/workflow/nodes/_base/node-sections.tsx
+++ b/web/app/components/workflow/nodes/_base/node-sections.tsx
@@ -2,7 +2,7 @@ import type { TFunction } from 'i18next'
 import type { ReactElement } from 'react'
 import type { IterationNodeType } from '@/app/components/workflow/nodes/iteration/types'
 import type { NodeProps } from '@/app/components/workflow/types'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { BlockEnum, NodeRunningStatus } from '@/app/components/workflow/types'
 
 type HeaderMetaProps = {
diff --git a/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx b/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx
index e29b1e42a3..937c7aed9c 100644
--- a/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx
@@ -4,7 +4,7 @@ import { VarType } from '@/app/components/workflow/types'
 import { WriteMode } from '../../types'
 import OperationSelector from '../operation-selector'
 
-vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+vi.mock('@langgenius/dify-ui/dropdown-menu', async () => {
   const React = await import('react')
   const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
 
diff --git a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
index a22b8f5f3f..69fb618d16 100644
--- a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
@@ -3,8 +3,6 @@ import type { WriteMode } from '../types'
 import type { Item } from '../utils'
 import type { VarType } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -13,7 +11,9 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { getOperationItems, isOperationItem } from '../utils'
 
 type OperationSelectorProps = {
diff --git a/web/app/components/workflow/nodes/code/panel.tsx b/web/app/components/workflow/nodes/code/panel.tsx
index 9358507173..b531dcf49c 100644
--- a/web/app/components/workflow/nodes/code/panel.tsx
+++ b/web/app/components/workflow/nodes/code/panel.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import type { CodeNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import TypeSelector from '@/app/components/workflow/nodes/_base/components/selector'
diff --git a/web/app/components/workflow/nodes/data-source-empty/index.tsx b/web/app/components/workflow/nodes/data-source-empty/index.tsx
index a3248b3545..d3f9d21225 100644
--- a/web/app/components/workflow/nodes/data-source-empty/index.tsx
+++ b/web/app/components/workflow/nodes/data-source-empty/index.tsx
@@ -1,4 +1,5 @@
 import type { NodeProps } from 'reactflow'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddLine } from '@remixicon/react'
 import {
@@ -6,7 +7,6 @@ import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import { useReplaceDataSourceNode } from './hooks'
 
diff --git a/web/app/components/workflow/nodes/data-source/before-run-form.tsx b/web/app/components/workflow/nodes/data-source/before-run-form.tsx
index 677418048f..fd6d805d0e 100644
--- a/web/app/components/workflow/nodes/data-source/before-run-form.tsx
+++ b/web/app/components/workflow/nodes/data-source/before-run-form.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import type { CustomRunFormProps } from './types'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import LocalFile from '@/app/components/datasets/documents/create-from-pipeline/data-source/local-file'
 import OnlineDocuments from '@/app/components/datasets/documents/create-from-pipeline/data-source/online-documents'
 import OnlineDrive from '@/app/components/datasets/documents/create-from-pipeline/data-source/online-drive'
diff --git a/web/app/components/workflow/nodes/http/components/__tests__/curl-panel.spec.tsx b/web/app/components/workflow/nodes/http/components/__tests__/curl-panel.spec.tsx
index f42e98f605..141f8fd5f9 100644
--- a/web/app/components/workflow/nodes/http/components/__tests__/curl-panel.spec.tsx
+++ b/web/app/components/workflow/nodes/http/components/__tests__/curl-panel.spec.tsx
@@ -1,6 +1,6 @@
+import { toast } from '@langgenius/dify-ui/toast'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { toast } from '@/app/components/base/ui/toast'
 import { BodyPayloadValueType, BodyType } from '../../types'
 import CurlPanel from '../curl-panel'
 import * as curlParser from '../curl-parser'
@@ -19,7 +19,7 @@ vi.mock('@/app/components/workflow/hooks', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: mockToastError,
   },
diff --git a/web/app/components/workflow/nodes/http/components/authorization/index.tsx b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
index f44cbe6025..b72e52911d 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { Authorization as AuthorizationPayloadType } from '../../types'
 import type { Var } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -9,7 +10,6 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import BaseInput from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
 import { VarType } from '@/app/components/workflow/types'
diff --git a/web/app/components/workflow/nodes/http/components/curl-panel.tsx b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
index ef1b28095c..8ba5fb36a9 100644
--- a/web/app/components/workflow/nodes/http/components/curl-panel.tsx
+++ b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { FC } from 'react'
 import type { HttpNodeType } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { useNodesInteractions } from '@/app/components/workflow/hooks'
 import { parseCurl } from './curl-parser'
 
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
index 36e0fccbff..b349e8d8b2 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
@@ -3,10 +3,6 @@ import type { FC } from 'react'
 import type { KeyValue } from '../../../types'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
-import { produce } from 'immer'
-import * as React from 'react'
-import { useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   Select,
   SelectContent,
@@ -15,7 +11,11 @@ import {
   SelectItemText,
   SelectTrigger,
   SelectValue,
-} from '@/app/components/base/ui/select'
+} from '@langgenius/dify-ui/select'
+import { produce } from 'immer'
+import * as React from 'react'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 import { VarType } from '@/app/components/workflow/types'
 import VarReferencePicker from '../../../../_base/components/variable/var-reference-picker'
 import InputItem from './input-item'
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index 7eb8ef897e..e1d7b57bf3 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -2,11 +2,11 @@ import type { FC } from 'react'
 import type { HttpNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FileArrow01 } from '@/app/components/base/icons/src/vender/line/files'
 import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
-import Switch from '@/app/components/base/switch'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
diff --git a/web/app/components/workflow/nodes/human-input/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/human-input/__tests__/panel.spec.tsx
index 937a2da61a..143b05afae 100644
--- a/web/app/components/workflow/nodes/human-input/__tests__/panel.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/__tests__/panel.spec.tsx
@@ -2,10 +2,10 @@ import type { ReactNode } from 'react'
 import type useConfig from '../hooks/use-config'
 import type { HumanInputNodeType } from '../types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import copy from 'copy-to-clipboard'
-import { toast } from '@/app/components/base/ui/toast'
 import { BlockEnum, InputVarType, VarType } from '@/app/components/workflow/types'
 import Panel from '../panel'
 import { DeliveryMethodType, UserActionButtonType } from '../types'
@@ -24,7 +24,7 @@ vi.mock('copy-to-clipboard', () => ({
   default: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
   },
diff --git a/web/app/components/workflow/nodes/human-input/components/__tests__/button-style-dropdown.spec.tsx b/web/app/components/workflow/nodes/human-input/components/__tests__/button-style-dropdown.spec.tsx
index 544524110a..056ebf4795 100644
--- a/web/app/components/workflow/nodes/human-input/components/__tests__/button-style-dropdown.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/__tests__/button-style-dropdown.spec.tsx
@@ -10,7 +10,7 @@ vi.mock('react-i18next', () => ({
   useTranslation: () => mockUseTranslation(),
 }))
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: (props: {
     variant?: string
     children?: React.ReactNode
diff --git a/web/app/components/workflow/nodes/human-input/components/__tests__/form-content-preview.spec.tsx b/web/app/components/workflow/nodes/human-input/components/__tests__/form-content-preview.spec.tsx
index 4e637724fd..89b2689761 100644
--- a/web/app/components/workflow/nodes/human-input/components/__tests__/form-content-preview.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/__tests__/form-content-preview.spec.tsx
@@ -35,7 +35,7 @@ vi.mock('@/app/components/base/badge', () => ({
   default: ({ children }: { children?: ReactNode }) => <div data-testid="badge">{children}</div>,
 }))
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: ({ children, variant }: { children?: ReactNode, variant?: string }) => (
     <button type="button" data-testid={`action-${variant}`}>{children}</button>
   ),
diff --git a/web/app/components/workflow/nodes/human-input/components/__tests__/user-action.spec.tsx b/web/app/components/workflow/nodes/human-input/components/__tests__/user-action.spec.tsx
index 13f8463676..a47a012f49 100644
--- a/web/app/components/workflow/nodes/human-input/components/__tests__/user-action.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/__tests__/user-action.spec.tsx
@@ -27,7 +27,7 @@ vi.mock('@/app/components/base/input', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/ui/button', () => ({
+vi.mock('@langgenius/dify-ui/button', () => ({
   Button: (props: {
     children?: ReactNode
     onClick?: () => void
@@ -38,7 +38,7 @@ vi.mock('@/app/components/base/ui/button', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   __esModule: true,
   toast: {
     success: (message: string) => mockNotify({ type: 'success', message }),
diff --git a/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx b/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
index 363e0070c0..44ddbbfa34 100644
--- a/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiFontSize,
@@ -11,7 +12,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 import { UserActionButtonType } from '../types'
 
 const i18nPrefix = 'nodes.humanInput'
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/__tests__/email-configure-modal.spec.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/__tests__/email-configure-modal.spec.tsx
index cec9ffe69a..c5b5c680dc 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/__tests__/email-configure-modal.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/__tests__/email-configure-modal.spec.tsx
@@ -5,7 +5,7 @@ import EmailConfigureModal from '../email-configure-modal'
 const mockToastError = vi.hoisted(() => vi.fn())
 const mockUseAppContextSelector = vi.hoisted(() => vi.fn())
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (message: string) => mockToastError(message),
   },
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
index 1d77248037..de38564d95 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
@@ -3,6 +3,9 @@ import type {
   Node,
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
+import { Switch } from '@langgenius/dify-ui/switch'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiBugLine, RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/compat'
 import { memo, useCallback, useState } from 'react'
@@ -10,9 +13,6 @@ import { Trans, useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import Switch from '@/app/components/base/switch'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import MailBodyInput from './mail-body-input'
 import Recipient from './recipient'
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
index eae2e293e1..9cd63e96dd 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
@@ -4,7 +4,9 @@ import type {
   Node,
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import {
   RiDeleteBinLine,
   RiEqualizer2Line,
@@ -16,9 +18,7 @@ import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge/index'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { DeliveryMethodType } from '../../types'
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/__tests__/index.spec.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/__tests__/index.spec.tsx
index 7fe768781b..cd95a8e9e3 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/__tests__/index.spec.tsx
@@ -17,9 +17,8 @@ vi.mock('@/service/use-common', () => ({
   useMembers: () => mockUseMembers(),
 }))
 
-vi.mock('@/app/components/base/switch', () => ({
-  __esModule: true,
-  default: (props: {
+vi.mock('@langgenius/dify-ui/switch', () => ({
+  Switch: (props: {
     checked: boolean
     onCheckedChange: (value: boolean) => void
   }) => (
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx
index 8d370266b0..604736b2a9 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx
@@ -1,10 +1,10 @@
 import type { Recipient as RecipientItem } from '../../../types'
 import type { Member } from '@/models/common'
+import { Avatar } from '@langgenius/dify-ui/avatar'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseCircleFill, RiErrorWarningFill } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Avatar } from '@/app/components/base/ui/avatar'
 
 type Props = {
   email: string
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx
index 36483d33d6..42bd6df171 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx
@@ -1,10 +1,10 @@
 import type { RecipientData, Recipient as RecipientItem } from '../../../types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import { RiGroupLine } from '@remixicon/react'
 import { produce } from 'immer'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Switch from '@/app/components/base/switch'
 import { useAppContext } from '@/context/app-context'
 import { useMembers } from '@/service/use-common'
 import EmailInput from './email-input'
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx
index c80c22639e..0e262e839e 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx
@@ -2,11 +2,11 @@
 import type { FC } from 'react'
 import type { Recipient } from '@/app/components/workflow/nodes/human-input/types'
 import type { Member } from '@/models/common'
+import { Avatar } from '@langgenius/dify-ui/avatar'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Avatar } from '@/app/components/base/ui/avatar'
 
 const i18nPrefix = 'nodes.humanInput'
 
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx
index 827e02c8bb..c2df6afb15 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { Recipient } from '@/app/components/workflow/nodes/human-input/types'
 import type { Member } from '@/models/common'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiContactsBookLine,
@@ -9,7 +10,6 @@ import {
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 import MemberList from './member-list'
 
 const i18nPrefix = 'nodes.humanInput'
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
index cef6d1380d..9ad52fa13e 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
@@ -4,6 +4,7 @@ import type {
   NodeOutPutVar,
   ValueSelector,
 } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightSFill, RiCloseLine } from '@remixicon/react'
 import { noop, unionBy } from 'es-toolkit/compat'
@@ -13,7 +14,6 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
 import { getInputVars as doGetInputVars } from '@/app/components/base/prompt-editor/constants'
-import { Button } from '@/app/components/base/ui/button'
 import FormItem from '@/app/components/workflow/nodes/_base/components/before-run-form/form-item'
 import {
   getNodeInfoById,
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
index c7b46732d0..060ec2428c 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiMailSendFill,
@@ -7,7 +8,6 @@ import { useTranslation } from 'react-i18next'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import Modal from '@/app/components/base/modal'
 import PremiumBadge from '@/app/components/base/premium-badge'
-import { Button } from '@/app/components/base/ui/button'
 import { useModalContextSelector } from '@/context/modal-context'
 
 type UpgradeModalProps = {
diff --git a/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx b/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
index 1364941edf..73e8850789 100644
--- a/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
@@ -1,14 +1,14 @@
 'use client'
+import type { ButtonProps } from '@langgenius/dify-ui/button'
 import type { FC } from 'react'
 import type { FormInputItem, UserAction } from '../types'
-import type { ButtonProps } from '@/app/components/base/ui/button'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
 import { getButtonStyle } from '@/app/components/base/chat/chat/answer/human-input-content/utils'
 import { Markdown } from '@/app/components/base/markdown'
-import { Button } from '@/app/components/base/ui/button'
 import { useStore } from '@/app/components/workflow/store'
 import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
 import { Note, rehypeNotes, rehypeVariable, Variable } from './variable-in-markdown'
diff --git a/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx b/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
index dc735830c6..6226b6c06f 100644
--- a/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
@@ -1,15 +1,15 @@
 'use client'
-import type { ButtonProps } from '@/app/components/base/ui/button'
+import type { ButtonProps } from '@langgenius/dify-ui/button'
 import type { UserAction } from '@/app/components/workflow/nodes/human-input/types'
 import type { HumanInputFormData } from '@/types/workflow'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiArrowLeftLine } from '@remixicon/react'
-import * as React from 'react'
 
+import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ContentItem from '@/app/components/base/chat/chat/answer/human-input-content/content-item'
 import { getButtonStyle, initializeInputs, splitByOutputVar } from '@/app/components/base/chat/chat/answer/human-input-content/utils'
-import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   nodeName: string
diff --git a/web/app/components/workflow/nodes/human-input/components/user-action.tsx b/web/app/components/workflow/nodes/human-input/components/user-action.tsx
index 6ef5609a64..a83ea4f8f2 100644
--- a/web/app/components/workflow/nodes/human-input/components/user-action.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/user-action.tsx
@@ -1,13 +1,13 @@
 import type { FC } from 'react'
 import type { UserAction } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiDeleteBinLine,
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import ButtonStyleDropdown from './button-style-dropdown'
 
 const i18nPrefix = 'nodes.humanInput'
diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx
index 846b135fcf..b7b65e7de8 100644
--- a/web/app/components/workflow/nodes/human-input/panel.tsx
+++ b/web/app/components/workflow/nodes/human-input/panel.tsx
@@ -1,7 +1,9 @@
 import type { FC } from 'react'
 import type { HumanInputNodeType } from './types'
 import type { NodePanelProps, Var } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiAddLine,
   RiClipboardLine,
@@ -17,8 +19,6 @@ import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Divider from '@/app/components/base/divider'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-add.tsx b/web/app/components/workflow/nodes/if-else/components/condition-add.tsx
index 3b6d729078..85a45ac5c7 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-add.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-add.tsx
@@ -4,6 +4,7 @@ import type {
   ValueSelector,
   Var,
 } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiAddLine } from '@remixicon/react'
 import {
   useCallback,
@@ -15,7 +16,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 
 type ConditionAddProps = {
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 998cc48205..83dc97f088 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
@@ -1,5 +1,6 @@
 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 { RiArrowDownSLine } from '@remixicon/react'
 import {
@@ -12,7 +13,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 import { getOperators, isComparisonOperatorNeedTranslate } from '../../utils'
 
 const i18nPrefix = 'nodes.ifElse'
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 7bcb4137b5..954f713a78 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
@@ -2,6 +2,7 @@ import type {
   NodeOutPutVar,
   ValueSelector,
 } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
@@ -18,7 +19,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 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'
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
index 1744ee6490..92d70b37b1 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { Node, NodeOutPutVar, Var } from '../../../types'
 import type { CaseItem, HandleAddCondition, HandleAddSubVariableCondition, HandleRemoveCondition, handleRemoveSubVariableCondition, HandleToggleConditionLogicalOperator, HandleToggleSubVariableConditionLogicalOperator, HandleUpdateCondition, HandleUpdateSubVariableCondition } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
@@ -14,7 +15,6 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ReactSortable } from 'react-sortablejs'
 import { PortalSelect as Select } from '@/app/components/base/select'
-import { Button } from '@/app/components/base/ui/button'
 import { VarType } from '../../../types'
 import { SUB_VARIABLES } from '../../constants'
 import { useGetAvailableVars } from '../../variable-assigner/hooks'
diff --git a/web/app/components/workflow/nodes/if-else/panel.tsx b/web/app/components/workflow/nodes/if-else/panel.tsx
index e8dae6fad9..221b00d1f7 100644
--- a/web/app/components/workflow/nodes/if-else/panel.tsx
+++ b/web/app/components/workflow/nodes/if-else/panel.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import type { IfElseNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiAddLine,
 } from '@remixicon/react'
@@ -8,7 +9,6 @@ import {
   memo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import ConditionWrap from './components/condition-wrap'
 import useConfig from './use-config'
diff --git a/web/app/components/workflow/nodes/iteration/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/iteration/__tests__/integration.spec.tsx
index dc7538144e..26b938bf6e 100644
--- a/web/app/components/workflow/nodes/iteration/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/iteration/__tests__/integration.spec.tsx
@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react'
 import type { IterationNodeType } from '../types'
 import type { PanelProps } from '@/types/workflow'
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { toast } from '@/app/components/base/ui/toast'
 import { ErrorHandleMode } from '@/app/components/workflow/types'
 import { BlockEnum, VarType } from '../../../types'
 import AddBlock from '../add-block'
@@ -15,7 +15,7 @@ const mockHandleNodeAdd = vi.fn()
 const mockHandleNodeIterationRerender = vi.fn()
 let mockNodesReadOnly = false
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/workflow/nodes/iteration/node.tsx b/web/app/components/workflow/nodes/iteration/node.tsx
index ad9cb3b0fe..a3aee372d7 100644
--- a/web/app/components/workflow/nodes/iteration/node.tsx
+++ b/web/app/components/workflow/nodes/iteration/node.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import type { IterationNodeType } from './types'
 import type { NodeProps } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   memo,
   useEffect,
@@ -13,7 +14,6 @@ import {
   useNodesInitialized,
   useViewport,
 } from 'reactflow'
-import { toast } from '@/app/components/base/ui/toast'
 import { IterationStartNodeDumb } from '../iteration-start'
 import AddBlock from './add-block'
 import { useNodeIterationInteractions } from './use-interactions'
diff --git a/web/app/components/workflow/nodes/iteration/panel.tsx b/web/app/components/workflow/nodes/iteration/panel.tsx
index 7128c2d4b4..c9ed2de363 100644
--- a/web/app/components/workflow/nodes/iteration/panel.tsx
+++ b/web/app/components/workflow/nodes/iteration/panel.tsx
@@ -1,12 +1,12 @@
 import type { FC } from 'react'
 import type { IterationNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
+import { Slider } from '@langgenius/dify-ui/slider'
+import { Switch } from '@langgenius/dify-ui/switch'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import Select from '@/app/components/base/select'
-import Switch from '@/app/components/base/switch'
-import { Slider } from '@/app/components/base/ui/slider'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import { ErrorHandleMode } from '@/app/components/workflow/types'
 import { MAX_PARALLEL_LIMIT } from '@/config'
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx
index a7bba6879e..0920e8a8a7 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx
@@ -1,7 +1,7 @@
 import type { ChunkStructureEnum } from '../../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
 import OptionCard from '../option-card'
 import { useChunkStructure } from './hooks'
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 5018bbc784..7ab8de508f 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
@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 import type { ChunkStructureEnum } from '../../types'
 import type { Option } from './type'
+import { Button } from '@langgenius/dify-ui/button'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -8,7 +9,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 import OptionCard from '../option-card'
 
 type SelectorProps = {
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx b/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx
index 12cc0f1eb5..70ff0e47eb 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx
@@ -1,4 +1,5 @@
 import { cn } from '@langgenius/dify-ui/cn'
+import { Slider } from '@langgenius/dify-ui/slider'
 import { RiQuestionLine } from '@remixicon/react'
 import {
   memo,
@@ -11,7 +12,6 @@ import {
 } from '@/app/components/base/icons/src/vender/knowledge'
 import Input from '@/app/components/base/input'
 import Tooltip from '@/app/components/base/tooltip'
-import { Slider } from '@/app/components/base/ui/slider'
 import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
 import {
   ChunkStructureEnum,
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
index fe1d863944..a1f601cce9 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
@@ -8,6 +8,7 @@ import type {
   Option,
 } from './type'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import {
   memo,
   useCallback,
@@ -16,7 +17,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import WeightedScoreComponent from '@/app/components/app/configuration/dataset-config/params-config/weighted-score'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
-import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import { DEFAULT_WEIGHTED_SCORE } from '@/models/datasets'
 import {
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx
index 5136d4897f..814b3cea6d 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx
@@ -1,7 +1,3 @@
-import { memo, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import Switch from '@/app/components/base/switch'
-import Tooltip from '@/app/components/base/tooltip'
 import {
   NumberField,
   NumberFieldControls,
@@ -9,7 +5,11 @@ import {
   NumberFieldGroup,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '@/app/components/base/ui/number-field'
+} from '@langgenius/dify-ui/number-field'
+import { Switch } from '@langgenius/dify-ui/switch'
+import { memo, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import Tooltip from '@/app/components/base/tooltip'
 import { env } from '@/env'
 
 export type TopKAndScoreThresholdProps = {
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx
index e94caf7b30..ea7870431a 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx
@@ -1,5 +1,6 @@
 import type { MetadataShape } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 import type { MetadataInDoc } from '@/models/datasets'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiAddLine,
 } from '@remixicon/react'
@@ -15,7 +16,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 import MetadataIcon from './metadata-icon'
 
 const AddCondition = ({
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
index d6828a5392..f14743ce9f 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
@@ -2,6 +2,7 @@ import type {
   ComparisonOperator,
   MetadataFilteringVariableType,
 } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import {
@@ -14,7 +15,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 import {
   getOperators,
   isComparisonOperatorNeedTranslate,
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
index b69bd05cdd..12d7c9cc69 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { capitalize } from 'es-toolkit/string'
@@ -7,7 +8,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 
 export type ConditionValueMethodProps = {
   valueMethod?: string
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 67939a6448..396fd069e7 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,3 +1,4 @@
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiArrowDownSLine,
   RiCheckLine,
@@ -9,7 +10,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 import { MetadataFilteringModeEnum } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 
 type MetadataFilterSelectorProps = {
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx
index 1553da1e1f..dd530ae679 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx
@@ -1,4 +1,5 @@
 import type { MetadataShape } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiFilter3Line } from '@remixicon/react'
 import {
   useEffect,
@@ -10,7 +11,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 import MetadataPanel from './metadata-panel'
 
 const MetadataTrigger = ({
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
index 3f8198a822..da71682b35 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
@@ -5,6 +5,7 @@ import type { MultipleRetrievalConfig, SingleRetrievalConfig } from '../types'
 import type { ModelParameterModalProps } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import type { DataSet } from '@/models/datasets'
 import type { DatasetConfigs } from '@/models/debug'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
@@ -16,7 +17,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 import { DATASET_DEFAULT } from '@/config'
 import { RETRIEVE_TYPE } from '@/types/app'
 
diff --git a/web/app/components/workflow/nodes/list-operator/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/list-operator/__tests__/panel.spec.tsx
index 9e5147bc92..945ca70104 100644
--- a/web/app/components/workflow/nodes/list-operator/__tests__/panel.spec.tsx
+++ b/web/app/components/workflow/nodes/list-operator/__tests__/panel.spec.tsx
@@ -22,9 +22,8 @@ vi.mock('../use-config', () => ({
   default: (...args: unknown[]) => mockUseConfig(...args),
 }))
 
-vi.mock('@/app/components/base/switch', () => ({
-  __esModule: true,
-  default: (props: {
+vi.mock('@langgenius/dify-ui/switch', () => ({
+  Switch: (props: {
     checked?: boolean
     disabled?: boolean
     onCheckedChange: (value: boolean) => void
diff --git a/web/app/components/workflow/nodes/list-operator/components/__tests__/limit-config.spec.tsx b/web/app/components/workflow/nodes/list-operator/components/__tests__/limit-config.spec.tsx
index fbc3356b32..1314b4600b 100644
--- a/web/app/components/workflow/nodes/list-operator/components/__tests__/limit-config.spec.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/__tests__/limit-config.spec.tsx
@@ -19,8 +19,8 @@ type MockSliderProps = {
 const mockSwitch = vi.fn<(props: MockSwitchProps) => void>()
 const mockSlider = vi.fn<(props: MockSliderProps) => void>()
 
-vi.mock('@/app/components/base/switch', () => ({
-  default: (props: MockSwitchProps) => {
+vi.mock('@langgenius/dify-ui/switch', () => ({
+  Switch: (props: MockSwitchProps) => {
     mockSwitch(props)
     return (
       <button
diff --git a/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx b/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx
index 564f969bb4..3d49f97404 100644
--- a/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx
@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import type { Limit } from '../types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Switch from '@/app/components/base/switch'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import InputNumberWithSlider from '../../_base/components/input-number-with-slider'
 
diff --git a/web/app/components/workflow/nodes/list-operator/panel.tsx b/web/app/components/workflow/nodes/list-operator/panel.tsx
index 365c303086..c5c629137b 100644
--- a/web/app/components/workflow/nodes/list-operator/panel.tsx
+++ b/web/app/components/workflow/nodes/list-operator/panel.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import type { ListFilterNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
+import { Switch } from '@langgenius/dify-ui/switch'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Switch from '@/app/components/base/switch'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import ExtractInput from '@/app/components/workflow/nodes/list-operator/components/extract-input'
 import OptionCard from '../_base/components/option-card'
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/__tests__/json-importer.spec.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/__tests__/json-importer.spec.tsx
index 9344673a35..74b800f7cc 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/__tests__/json-importer.spec.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/__tests__/json-importer.spec.tsx
@@ -52,7 +52,7 @@ vi.mock('../error-message', () => ({
   default: ({ message }: { message: string }) => <div data-testid="error-message">{message}</div>,
 }))
 
-vi.mock('@/app/components/base/ui/popover', async () => {
+vi.mock('@langgenius/dify-ui/popover', async () => {
   const ReactModule = await vi.importActual<typeof import('react')>('react')
 
   const PopoverContext = ReactModule.createContext<{
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
index 673fd23ef2..da8c89f755 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
@@ -1,11 +1,11 @@
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/app/components/base/ui/popover'
 import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
 import { checkJsonDepth } from '../../utils'
 import CodeEditor from './code-editor'
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
index e09f6a59fc..96c508b48f 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
@@ -1,11 +1,11 @@
 import type { FC } from 'react'
 import type { SchemaRoot } from '../../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
 import { SegmentedControl } from '../../../../../base/segmented-control'
 import { Type } from '../../types'
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
index 4f7b2ceb0c..2023d093a7 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
@@ -1,11 +1,11 @@
 import type { FC } from 'react'
 import type { SchemaRoot } from '../../../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiArrowLeftLine, RiCloseLine, RiSparklingLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
-import { Button } from '@/app/components/base/ui/button'
 import { getValidationErrorMessage, validateSchemaAgainstDraft7 } from '../../../utils'
 import CodeEditor from '../code-editor'
 import ErrorMessage from '../error-message'
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
index 7b908bafd6..c949b89adb 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
@@ -3,6 +3,7 @@ import type { SchemaRoot } from '../../../types'
 import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { CompletionParams, Model } from '@/types/app'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import {
@@ -10,7 +11,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import useTheme from '@/hooks/use-theme'
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx
index 1a7bce0361..524d7079df 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx
@@ -1,13 +1,13 @@
 import type { FC } from 'react'
 import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { Model } from '@/types/app'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiCloseLine, RiSparklingFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Textarea from '@/app/components/base/textarea'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 
 type ModelInfo = {
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx
index d25ee83f80..8c57509f84 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx
@@ -1,8 +1,8 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { RiAddCircleFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { useMittContext } from './context'
 import { useVisualEditorStore } from './store'
 
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx
index 3601895942..9a72df3d31 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { useKeyPress } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import { getKeyboardKeyCodeBySystem } from '@/app/components/workflow/utils'
 
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/required-switch.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/required-switch.tsx
index 9d5a5c1fed..674ef320f2 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/required-switch.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/required-switch.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
+import { Switch } from '@langgenius/dify-ui/switch'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Switch from '@/app/components/base/switch'
 
 type RequiredSwitchProps = {
   defaultValue: boolean
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts
index cf7ef1571d..0c327b6e03 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts
@@ -1,10 +1,10 @@
 import type { VisualEditorProps } from '.'
 import type { Field } from '../../../types'
 import type { EditData } from './edit-card'
+import { toast } from '@langgenius/dify-ui/toast'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { ArrayType, Type } from '../../../types'
 import { findPropertyWithPath } from '../../../utils'
 import { useMittContext } from './context'
diff --git a/web/app/components/workflow/nodes/llm/components/panel-memory-section.tsx b/web/app/components/workflow/nodes/llm/components/panel-memory-section.tsx
index 568575139a..3d2697c44e 100644
--- a/web/app/components/workflow/nodes/llm/components/panel-memory-section.tsx
+++ b/web/app/components/workflow/nodes/llm/components/panel-memory-section.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import type { LLMNodeType } from '../types'
 import type { Memory, Node, NodeOutPutVar } from '@/app/components/workflow/types'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import MemoryConfig from '@/app/components/workflow/nodes/_base/components/memory-config'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 
diff --git a/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx b/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
index a70f035728..3a3ab7f8cb 100644
--- a/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
+++ b/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
@@ -1,10 +1,10 @@
 import type { FC } from 'react'
 import type { LLMNodeType, StructuredOutput } from '../types'
+import { Switch } from '@langgenius/dify-ui/switch'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { RiAlertFill, RiQuestionLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Switch from '@/app/components/base/switch'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import StructureOutput from './structure-output'
diff --git a/web/app/components/workflow/nodes/llm/components/reasoning-format-config.tsx b/web/app/components/workflow/nodes/llm/components/reasoning-format-config.tsx
index c9177e2d64..1c390ecb83 100644
--- a/web/app/components/workflow/nodes/llm/components/reasoning-format-config.tsx
+++ b/web/app/components/workflow/nodes/llm/components/reasoning-format-config.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
+import { Switch } from '@langgenius/dify-ui/switch'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Switch from '@/app/components/base/switch'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 
 type ReasoningFormatConfigProps = {
diff --git a/web/app/components/workflow/nodes/llm/components/structure-output.tsx b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
index 884c638110..d8b3e132bb 100644
--- a/web/app/components/workflow/nodes/llm/components/structure-output.tsx
+++ b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { FC } from 'react'
 import type { SchemaRoot, StructuredOutput } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiEditLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import ShowPanel from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show'
 import { Type } from '../types'
 import JsonSchemaConfigModal from './json-schema-config-modal'
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index f465366ee9..922a18e46e 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -1,10 +1,10 @@
 import type { FC } from 'react'
 import type { LLMNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
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 99ce377b99..0af05e9674 100644
--- a/web/app/components/workflow/nodes/loop/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/loop/__tests__/integration.spec.tsx
@@ -181,7 +181,7 @@ vi.mock('@/app/components/workflow/nodes/_base/components/editor/code-editor', (
   ),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: (message: string) => mockToastNotify({ type: 'success', message }),
     error: (message: string) => mockToastNotify({ type: 'error', message }),
diff --git a/web/app/components/workflow/nodes/loop/components/condition-add.tsx b/web/app/components/workflow/nodes/loop/components/condition-add.tsx
index 1d9be045d2..36a09dd434 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-add.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-add.tsx
@@ -4,6 +4,7 @@ import type {
   ValueSelector,
   Var,
 } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiAddLine } from '@remixicon/react'
 import {
   useCallback,
@@ -15,7 +16,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 
 type ConditionAddProps = {
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 9380282b54..916326c416 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
@@ -1,5 +1,6 @@
 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 { RiArrowDownSLine } from '@remixicon/react'
 import {
@@ -12,7 +13,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 import { getOperators, isComparisonOperatorNeedTranslate } from '../../utils'
 
 const i18nPrefix = 'nodes.ifElse'
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 7bcb4137b5..954f713a78 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
@@ -2,6 +2,7 @@ import type {
   NodeOutPutVar,
   ValueSelector,
 } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
@@ -18,7 +19,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 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'
diff --git a/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx b/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
index 50e3fd248e..f73386bfa8 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { Node, NodeOutPutVar, Var } from '../../../types'
 import type { Condition, HandleAddCondition, HandleAddSubVariableCondition, HandleRemoveCondition, handleRemoveSubVariableCondition, HandleToggleConditionLogicalOperator, HandleToggleSubVariableConditionLogicalOperator, HandleUpdateCondition, HandleUpdateSubVariableCondition, LogicalOperator } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
@@ -10,7 +11,6 @@ import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PortalSelect as Select } from '@/app/components/base/select'
-import { Button } from '@/app/components/base/ui/button'
 import { VarType } from '../../../types'
 import { useGetAvailableVars } from '../../variable-assigner/hooks'
 import { SUB_VARIABLES } from './../default'
diff --git a/web/app/components/workflow/nodes/loop/components/loop-variables/item.tsx b/web/app/components/workflow/nodes/loop/components/loop-variables/item.tsx
index 7bd7e09c1b..b0668cca60 100644
--- a/web/app/components/workflow/nodes/loop/components/loop-variables/item.tsx
+++ b/web/app/components/workflow/nodes/loop/components/loop-variables/item.tsx
@@ -2,12 +2,12 @@ import type {
   LoopVariable,
   LoopVariablesComponentShape,
 } from '@/app/components/workflow/nodes/loop/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiDeleteBinLine } from '@remixicon/react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Input from '@/app/components/base/input'
-import { toast } from '@/app/components/base/ui/toast'
 import { ValueType, VarType } from '@/app/components/workflow/types'
 import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
 import FormItem from './form-item'
diff --git a/web/app/components/workflow/nodes/parameter-extractor/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/parameter-extractor/__tests__/integration.spec.tsx
index 490f981268..f63d9a0d50 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/__tests__/integration.spec.tsx
@@ -4,9 +4,9 @@ import type { Param, ParameterExtractorNodeType } from '../types'
 import type { ToolParameter } from '@/app/components/tools/types'
 import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types'
 import type { PanelProps } from '@/types/workflow'
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { toast } from '@/app/components/base/ui/toast'
 import {
   useTextGenerationCurrentProviderAndModelAndModelList,
 } from '@/app/components/header/account-setting/model-provider-page/hooks'
@@ -39,7 +39,7 @@ let mockWorkflowTools: MockToolCollection[] = []
 let mockSelectedToolInfo: ToolDefaultValue | undefined
 let mockBlockSelectorOpen = false
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/update.spec.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/update.spec.tsx
index 7e6c7f22dc..c73b990b68 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/update.spec.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/update.spec.tsx
@@ -1,11 +1,11 @@
 import type { Param } from '../../../types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { toast } from '@/app/components/base/ui/toast'
 import { ParamType } from '../../../types'
 import Update from '../update'
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
index d3a3a39b60..9be35242c5 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
@@ -2,6 +2,9 @@
 import type { FC } from 'react'
 import type { Param } from '../../types'
 import type { MoreInfo } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
+import { Switch } from '@langgenius/dify-ui/switch'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
@@ -11,10 +14,7 @@ import ConfigSelect from '@/app/components/app/configuration/config-var/config-s
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Select from '@/app/components/base/select'
-import Switch from '@/app/components/base/switch'
 import Textarea from '@/app/components/base/textarea'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { ChangeType } from '@/app/components/workflow/types'
 import { checkKeys } from '@/utils/var'
 import { ParamType } from '../../types'
diff --git a/web/app/components/workflow/nodes/start/__tests__/use-config.spec.ts b/web/app/components/workflow/nodes/start/__tests__/use-config.spec.ts
index 16d37a6a8f..847d58afe4 100644
--- a/web/app/components/workflow/nodes/start/__tests__/use-config.spec.ts
+++ b/web/app/components/workflow/nodes/start/__tests__/use-config.spec.ts
@@ -32,7 +32,7 @@ vi.mock('@/app/components/workflow/hooks/use-inspect-vars-crud', () => ({
   default: (...args: unknown[]) => mockUseInspectVarsCrud(...args),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   __esModule: true,
   toast: {
     error: (message: string) => mockNotify({ type: 'error', message }),
diff --git a/web/app/components/workflow/nodes/start/components/var-list.tsx b/web/app/components/workflow/nodes/start/components/var-list.tsx
index d4f6511cdb..3cb1b82edf 100644
--- a/web/app/components/workflow/nodes/start/components/var-list.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-list.tsx
@@ -2,13 +2,13 @@
 import type { FC } from 'react'
 import type { InputVar, MoreInfo } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiDraggable } from '@remixicon/react'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ReactSortable } from 'react-sortablejs'
-import { toast } from '@/app/components/base/ui/toast'
 import { ChangeType } from '@/app/components/workflow/types'
 import { hasDuplicateStr } from '@/utils/var'
 import VarItem from './var-item'
diff --git a/web/app/components/workflow/nodes/start/use-config.ts b/web/app/components/workflow/nodes/start/use-config.ts
index e954253561..4ae67bb8d3 100644
--- a/web/app/components/workflow/nodes/start/use-config.ts
+++ b/web/app/components/workflow/nodes/start/use-config.ts
@@ -1,10 +1,10 @@
 import type { StartNodeType } from './types'
 import type { InputVar, MoreInfo, ValueSelector } from '@/app/components/workflow/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useBoolean } from 'ahooks'
 import { produce } from 'immer'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import {
   useIsChatMode,
   useNodesReadOnly,
diff --git a/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx b/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
index 7ccf137899..6cd13984f0 100644
--- a/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
+++ b/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
@@ -4,12 +4,12 @@ import type { ToolVarInputs } from '../../types'
 import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { Tool } from '@/app/components/tools/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiBracesLine,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { SchemaModal } from '@/app/components/plugins/plugin-detail-panel/tool-selector/components'
diff --git a/web/app/components/workflow/nodes/tool/hooks/use-config.ts b/web/app/components/workflow/nodes/tool/hooks/use-config.ts
index 5e3f928dcb..dda11df74a 100644
--- a/web/app/components/workflow/nodes/tool/hooks/use-config.ts
+++ b/web/app/components/workflow/nodes/tool/hooks/use-config.ts
@@ -1,11 +1,11 @@
 import type { ToolNodeType, ToolVarInputs } from '../types'
 import type { InputVar } from '@/app/components/workflow/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useBoolean } from 'ahooks'
 import { capitalize } from 'es-toolkit/string'
 import { produce } from 'immer'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { CollectionType } from '@/app/components/tools/types'
 import {
diff --git a/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx b/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx
index 68810fb068..44eb9d44c6 100644
--- a/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx
+++ b/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx
@@ -4,12 +4,12 @@ import type { CredentialFormSchema } from '@/app/components/header/account-setti
 import type { Event } from '@/app/components/tools/types'
 import type { TriggerWithProvider } from '@/app/components/workflow/block-selector/types'
 import type { PluginTriggerVarInputs } from '@/app/components/workflow/nodes/trigger-plugin/types'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiBracesLine,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { SchemaModal } from '@/app/components/plugins/plugin-detail-panel/tool-selector/components'
diff --git a/web/app/components/workflow/nodes/trigger-schedule/components/on-minute-selector.tsx b/web/app/components/workflow/nodes/trigger-schedule/components/on-minute-selector.tsx
index 61c943992c..7c0713019e 100644
--- a/web/app/components/workflow/nodes/trigger-schedule/components/on-minute-selector.tsx
+++ b/web/app/components/workflow/nodes/trigger-schedule/components/on-minute-selector.tsx
@@ -1,6 +1,6 @@
+import { Slider } from '@langgenius/dify-ui/slider'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Slider } from '@/app/components/base/ui/slider'
 
 type OnMinuteSelectorProps = {
   value?: number
diff --git a/web/app/components/workflow/nodes/trigger-webhook/__tests__/use-config.spec.tsx b/web/app/components/workflow/nodes/trigger-webhook/__tests__/use-config.spec.tsx
index 92a0457598..8f47304734 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/__tests__/use-config.spec.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/__tests__/use-config.spec.tsx
@@ -1,7 +1,7 @@
 import type { WebhookTriggerNodeType } from '../types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { renderHook } from '@testing-library/react'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { toast } from '@/app/components/base/ui/toast'
 import { BlockEnum, VarType } from '@/app/components/workflow/types'
 import { fetchWebhookUrl } from '@/service/apps'
 import { createNodeCrudModuleMock } from '../../__tests__/use-config-test-utils'
@@ -18,7 +18,7 @@ vi.mock('react-i18next', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   __esModule: true,
   toast: {
     error: vi.fn(),
diff --git a/web/app/components/workflow/nodes/trigger-webhook/panel.tsx b/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
index 4f276d3535..d7f46edfcf 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
@@ -1,14 +1,6 @@
 import type { FC } from 'react'
 import type { HttpMethod, WebhookTriggerNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
-import copy from 'copy-to-clipboard'
-
-import * as React from 'react'
-import { useEffect, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import InputWithCopy from '@/app/components/base/input-with-copy'
-import { SimpleSelect } from '@/app/components/base/select'
-import Tooltip from '@/app/components/base/tooltip'
 import {
   NumberField,
   NumberFieldControls,
@@ -16,8 +8,16 @@ import {
   NumberFieldGroup,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '@/app/components/base/ui/number-field'
-import { toast } from '@/app/components/base/ui/toast'
+} from '@langgenius/dify-ui/number-field'
+
+import { toast } from '@langgenius/dify-ui/toast'
+import copy from 'copy-to-clipboard'
+import * as React from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import InputWithCopy from '@/app/components/base/input-with-copy'
+import { SimpleSelect } from '@/app/components/base/select'
+import Tooltip from '@/app/components/base/tooltip'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import OutputVars from '@/app/components/workflow/nodes/_base/components/output-vars'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
diff --git a/web/app/components/workflow/nodes/trigger-webhook/use-config.ts b/web/app/components/workflow/nodes/trigger-webhook/use-config.ts
index 7924a35ba0..d01a5ee463 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/use-config.ts
+++ b/web/app/components/workflow/nodes/trigger-webhook/use-config.ts
@@ -1,8 +1,8 @@
 import type { HttpMethod, WebhookHeader, WebhookParameter, WebhookTriggerNodeType } from './types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { toast } from '@/app/components/base/ui/toast'
 import { useNodesReadOnly, useWorkflow } from '@/app/components/workflow/hooks'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import { fetchWebhookUrl } from '@/service/apps'
diff --git a/web/app/components/workflow/nodes/variable-assigner/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/variable-assigner/__tests__/integration.spec.tsx
index d9176480dc..11ec8bdbcd 100644
--- a/web/app/components/workflow/nodes/variable-assigner/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/__tests__/integration.spec.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable ts/no-explicit-any, style/jsx-one-expression-per-line */
 import type { VariableAssignerNodeType } from '../types'
 import type { PanelProps } from '@/types/workflow'
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { toast } from '@/app/components/base/ui/toast'
 import { renderWorkflowFlowComponent } from '@/app/components/workflow/__tests__/workflow-test-env'
 import { BlockEnum, VarType } from '@/app/components/workflow/types'
 import AddVariable from '../components/add-variable'
@@ -19,7 +19,7 @@ const mockHandleGroupItemMouseEnter = vi.fn()
 const mockHandleGroupItemMouseLeave = vi.fn()
 const mockGetAvailableVars = vi.fn()
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/__tests__/var-group-item.spec.tsx b/web/app/components/workflow/nodes/variable-assigner/components/__tests__/var-group-item.spec.tsx
index 20650f0ddd..2a922b9c79 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/__tests__/var-group-item.spec.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/__tests__/var-group-item.spec.tsx
@@ -1,12 +1,12 @@
 import type { ComponentProps } from 'react'
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, screen } from '@testing-library/react'
-import { toast } from '@/app/components/base/ui/toast'
 import { createNode, resetFixtureCounters } from '@/app/components/workflow/__tests__/fixtures'
 import { renderWorkflowFlowComponent } from '@/app/components/workflow/__tests__/workflow-test-env'
 import { BlockEnum, VarType } from '@/app/components/workflow/types'
 import VarGroupItem from '../var-group-item'
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx b/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
index 53c3c36e04..078f0c12b5 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
@@ -5,13 +5,13 @@ import type {
   Var,
 } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import {
   memo,
   useCallback,
   useState,
 } from 'react'
 import { Plus02 } from '@/app/components/base/icons/src/vender/line/general'
-import { Popover, PopoverContent, PopoverTrigger } from '@/app/components/base/ui/popover'
 import AddVariablePopup from '@/app/components/workflow/nodes/_base/components/add-variable-popup'
 import { useVariableAssigner } from '../../hooks'
 
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx b/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
index 738e986e9c..bc1e428b6a 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
@@ -2,6 +2,7 @@
 import type { ChangeEvent, FC } from 'react'
 import type { VarGroupItem as VarGroupItemType } from '../types'
 import type { NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiDeleteBinLine,
 } from '@remixicon/react'
@@ -11,7 +12,6 @@ import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Folder } from '@/app/components/base/icons/src/vender/line/files'
-import { toast } from '@/app/components/base/ui/toast'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
 import { VarType } from '@/app/components/workflow/types'
diff --git a/web/app/components/workflow/nodes/variable-assigner/panel.tsx b/web/app/components/workflow/nodes/variable-assigner/panel.tsx
index 922db3dcc3..93eaa9f9f4 100644
--- a/web/app/components/workflow/nodes/variable-assigner/panel.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/panel.tsx
@@ -2,9 +2,9 @@ import type { FC } from 'react'
 import type { VariableAssignerNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Switch from '@/app/components/base/switch'
 import AddButton from '@/app/components/workflow/nodes/_base/components/add-button'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
diff --git a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/__tests__/hooks.spec.tsx b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/__tests__/hooks.spec.tsx
index c3233b49d7..4272050fac 100644
--- a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/__tests__/hooks.spec.tsx
+++ b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/__tests__/hooks.spec.tsx
@@ -58,7 +58,7 @@ vi.mock('lexical', () => ({
   COMMAND_PRIORITY_LOW: 1,
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: mockToastError,
   },
diff --git a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
index c67b658de6..754905cd46 100644
--- a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
+++ b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
@@ -5,6 +5,7 @@ import {
   shift,
   useFloating,
 } from '@floating-ui/react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiEditLine,
@@ -19,7 +20,6 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { useStore } from '../../store'
 import { useLink } from './hooks'
 
diff --git a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/hooks.ts b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/hooks.ts
index 75a5a36fd0..6debfa5f8b 100644
--- a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/hooks.ts
+++ b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/hooks.ts
@@ -1,3 +1,4 @@
+import { toast } from '@langgenius/dify-ui/toast'
 import { TOGGLE_LINK_COMMAND } from '@lexical/link'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { mergeRegister } from '@lexical/utils'
@@ -5,7 +6,6 @@ import { escape } from 'es-toolkit/string'
 import { CLICK_COMMAND, COMMAND_PRIORITY_LOW } from 'lexical'
 import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { useNoteEditorStore } from '../../store'
 import { urlRegExp } from '../../utils'
 
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/__tests__/operator.spec.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/__tests__/operator.spec.tsx
index c60898b29e..a7959d1252 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/__tests__/operator.spec.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/__tests__/operator.spec.tsx
@@ -25,7 +25,7 @@ type DropdownTriggerProps = {
   'aria-label'?: string
 }
 
-vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+vi.mock('@langgenius/dify-ui/dropdown-menu', async () => {
   const React = await import('react')
   const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
 
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
index b17af7fec7..bfbfe317c7 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
@@ -1,17 +1,17 @@
 import { cn } from '@langgenius/dify-ui/cn'
-import {
-  memo,
-  useState,
-} from 'react'
-import { useTranslation } from 'react-i18next'
-import Switch from '@/app/components/base/switch'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import { Switch } from '@langgenius/dify-ui/switch'
+import {
+  memo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 
 export type OperatorProps = {
diff --git a/web/app/components/workflow/operator/__tests__/more-actions.spec.tsx b/web/app/components/workflow/operator/__tests__/more-actions.spec.tsx
index b984ca18d6..df5dea301d 100644
--- a/web/app/components/workflow/operator/__tests__/more-actions.spec.tsx
+++ b/web/app/components/workflow/operator/__tests__/more-actions.spec.tsx
@@ -29,7 +29,7 @@ vi.mock('react-i18next', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+vi.mock('@langgenius/dify-ui/dropdown-menu', async () => {
   const React = await import('react')
   const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
 
diff --git a/web/app/components/workflow/operator/more-actions.tsx b/web/app/components/workflow/operator/more-actions.tsx
index 66dbed1a91..c7ea22e1ca 100644
--- a/web/app/components/workflow/operator/more-actions.tsx
+++ b/web/app/components/workflow/operator/more-actions.tsx
@@ -1,5 +1,12 @@
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import { RiExportLine, RiMoreFill } from '@remixicon/react'
 import { toJpeg, toPng, toSvg } from 'html-to-image'
 import {
@@ -13,13 +20,6 @@ import { getNodesBounds, useReactFlow } from 'reactflow'
 import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
 import { useStore } from '@/app/components/workflow/store'
 import { downloadUrl } from '@/utils/download'
 import { useNodesReadOnly } from '../hooks'
diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx
index 14118b36c9..78b07af347 100644
--- a/web/app/components/workflow/operator/zoom-in-out.tsx
+++ b/web/app/components/workflow/operator/zoom-in-out.tsx
@@ -1,5 +1,12 @@
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import {
   Fragment,
   memo,
@@ -10,13 +17,6 @@ import {
   useReactFlow,
   useViewport,
 } from 'reactflow'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import {
   useNodesSyncDraft,
diff --git a/web/app/components/workflow/panel/__tests__/inputs-panel.spec.tsx b/web/app/components/workflow/panel/__tests__/inputs-panel.spec.tsx
index c8ad5f3dde..41174d97a1 100644
--- a/web/app/components/workflow/panel/__tests__/inputs-panel.spec.tsx
+++ b/web/app/components/workflow/panel/__tests__/inputs-panel.spec.tsx
@@ -17,7 +17,7 @@ vi.mock('next/navigation', () => ({
   useParams: () => ({}),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: (message: string) => mockNotify({ type: 'success', message }),
     error: (message: string) => mockNotify({ type: 'error', message }),
diff --git a/web/app/components/workflow/panel/__tests__/workflow-preview.spec.tsx b/web/app/components/workflow/panel/__tests__/workflow-preview.spec.tsx
index e3c85bd2ad..9b5f89ebd0 100644
--- a/web/app/components/workflow/panel/__tests__/workflow-preview.spec.tsx
+++ b/web/app/components/workflow/panel/__tests__/workflow-preview.spec.tsx
@@ -1,9 +1,9 @@
 import type { Shape } from '../../store/workflow'
 import type { HumanInputFilledFormData, HumanInputFormData } from '@/types/workflow'
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import copy from 'copy-to-clipboard'
-import { toast } from '@/app/components/base/ui/toast'
 import { createNodeTracing, createWorkflowRunningData } from '@/app/components/workflow/__tests__/fixtures'
 import { renderWorkflowComponent } from '@/app/components/workflow/__tests__/workflow-test-env'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
@@ -16,7 +16,7 @@ vi.mock('copy-to-clipboard', () => ({
   default: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
   },
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/__tests__/object-value-item.spec.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/__tests__/object-value-item.spec.tsx
index 9ed1bed1f4..e2e7c2d562 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/__tests__/object-value-item.spec.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/__tests__/object-value-item.spec.tsx
@@ -4,7 +4,7 @@ import ObjectValueItem, { DEFAULT_OBJECT_VALUE } from '../object-value-item'
 
 const toastError = vi.fn()
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (...args: unknown[]) => toastError(...args),
   },
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/__tests__/variable-modal.spec.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/__tests__/variable-modal.spec.tsx
index 67437b574a..cf9400636e 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/__tests__/variable-modal.spec.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/__tests__/variable-modal.spec.tsx
@@ -1,7 +1,7 @@
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
-import { toast } from '@/app/components/base/ui/toast'
 import { renderWorkflowComponent } from '@/app/components/workflow/__tests__/workflow-test-env'
 import { ChatVarType } from '../../type'
 import VariableModal from '../variable-modal'
@@ -10,7 +10,7 @@ vi.mock('uuid', () => ({
   v4: () => 'generated-id',
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: vi.fn(),
     info: vi.fn(),
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
index 8a896b0913..7a1f41028b 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddLine } from '@remixicon/react'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
 import BoolValue from './bool-value'
 
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
index 8dc21edd09..f37cc4715d 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiAddLine } from '@remixicon/react'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
 import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
 
 type Props = {
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
index cd8e8468a5..8ef7125f62 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
+import { toast } from '@langgenius/dify-ui/toast'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
 import VariableTypeSelector from '@/app/components/workflow/panel/chat-variable-panel/components/variable-type-select'
 import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
index 35845cd005..9c97583423 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { ConversationVariable } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { RiAddLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/app/components/base/ui/popover'
 import VariableModal from '@/app/components/workflow/panel/chat-variable-panel/components/variable-modal'
 
 type Props = {
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx
index e1ebe1306d..894ca2f05d 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx
@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
 import type { ObjectValueItem } from './variable-modal.helpers'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiDraftLine, RiInputField } from '@remixicon/react'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { ChatVarType } from '../type'
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
index 70191b035d..dac7d16efd 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
@@ -1,11 +1,11 @@
 import type { ToastPayload } from './variable-modal.helpers'
 import type { ConversationVariable } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
diff --git a/web/app/components/workflow/panel/comments-panel/__tests__/index.spec.tsx b/web/app/components/workflow/panel/comments-panel/__tests__/index.spec.tsx
index 5abacd6035..49ae2a11a8 100644
--- a/web/app/components/workflow/panel/comments-panel/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/panel/comments-panel/__tests__/index.spec.tsx
@@ -109,8 +109,8 @@ vi.mock('@/app/components/base/user-avatar-list', () => ({
   UserAvatarList: () => <div data-testid="user-avatar-list" />,
 }))
 
-vi.mock('@/app/components/base/switch', () => ({
-  default: ({ checked, onCheckedChange }: { checked: boolean, onCheckedChange: (value: boolean) => void }) => (
+vi.mock('@langgenius/dify-ui/switch', () => ({
+  Switch: ({ checked, onCheckedChange }: { checked: boolean, onCheckedChange: (value: boolean) => void }) => (
     <button type="button" data-testid="show-resolved-switch" onClick={() => onCheckedChange(!checked)}>
       toggle
     </button>
diff --git a/web/app/components/workflow/panel/comments-panel/index.tsx b/web/app/components/workflow/panel/comments-panel/index.tsx
index 21b3c3c4e6..05480abb2b 100644
--- a/web/app/components/workflow/panel/comments-panel/index.tsx
+++ b/web/app/components/workflow/panel/comments-panel/index.tsx
@@ -1,10 +1,10 @@
 import type { WorkflowCommentList } from '@/service/workflow-comment'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Switch } from '@langgenius/dify-ui/switch'
 import { RiCheckboxCircleFill, RiCheckboxCircleLine, RiCheckLine, RiCloseLine, RiFilter3Line } from '@remixicon/react'
 import { memo, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import Switch from '@/app/components/base/switch'
 import { UserAvatarList } from '@/app/components/base/user-avatar-list'
 import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
 import { useWorkflowComment } from '@/app/components/workflow/hooks/use-workflow-comment'
diff --git a/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks.spec.ts b/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks.spec.ts
index 425dd90e87..9a2b8a8df7 100644
--- a/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks.spec.ts
+++ b/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks.spec.ts
@@ -26,7 +26,7 @@ vi.mock('@/service/workflow', () => ({
   submitHumanInputForm: (...args: unknown[]) => mockSubmitHumanInputForm(...args),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/handle-resume.spec.ts b/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/handle-resume.spec.ts
index 04c19f50e9..5a608dcc5b 100644
--- a/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/handle-resume.spec.ts
+++ b/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/handle-resume.spec.ts
@@ -27,7 +27,7 @@ vi.mock('@/service/workflow', () => ({
   submitHumanInputForm: (...args: any[]) => mockSubmitHumanInputForm(...args),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/handle-send.spec.ts b/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/handle-send.spec.ts
index 0f6ae5d713..fb045c4723 100644
--- a/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/handle-send.spec.ts
+++ b/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/handle-send.spec.ts
@@ -26,7 +26,7 @@ vi.mock('@/service/workflow', () => ({
   submitHumanInputForm: (...args: any[]) => mockSubmitHumanInputForm(...args),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/handle-stop-restart.spec.ts b/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/handle-stop-restart.spec.ts
index d0b1908606..2868471bd3 100644
--- a/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/handle-stop-restart.spec.ts
+++ b/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/handle-stop-restart.spec.ts
@@ -27,7 +27,7 @@ vi.mock('@/service/workflow', () => ({
   submitHumanInputForm: (...args: any[]) => mockSubmitHumanInputForm(...args),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/misc.spec.ts b/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/misc.spec.ts
index 549fe08e05..cd2eaa0e00 100644
--- a/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/misc.spec.ts
+++ b/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/misc.spec.ts
@@ -27,7 +27,7 @@ vi.mock('@/service/workflow', () => ({
   submitHumanInputForm: (...args: any[]) => mockSubmitHumanInputForm(...args),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/opening-statement.spec.ts b/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/opening-statement.spec.ts
index 57db5502b5..cb45029340 100644
--- a/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/opening-statement.spec.ts
+++ b/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/opening-statement.spec.ts
@@ -27,7 +27,7 @@ vi.mock('@/service/workflow', () => ({
   submitHumanInputForm: (...args: any[]) => mockSubmitHumanInputForm(...args),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/sse-callbacks.spec.ts b/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/sse-callbacks.spec.ts
index 03857ce3d6..f8f3a02c5c 100644
--- a/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/sse-callbacks.spec.ts
+++ b/web/app/components/workflow/panel/debug-and-preview/__tests__/hooks/sse-callbacks.spec.ts
@@ -26,7 +26,7 @@ vi.mock('@/service/workflow', () => ({
   submitHumanInputForm: (...args: any[]) => mockSubmitHumanInputForm(...args),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/workflow/panel/debug-and-preview/hooks.ts b/web/app/components/workflow/panel/debug-and-preview/hooks.ts
index 6eef69bfdb..a94e4c1edd 100644
--- a/web/app/components/workflow/panel/debug-and-preview/hooks.ts
+++ b/web/app/components/workflow/panel/debug-and-preview/hooks.ts
@@ -6,6 +6,7 @@ import type {
 } from '@/app/components/base/chat/types'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import type { IOtherOptions } from '@/service/base'
+import { toast } from '@langgenius/dify-ui/toast'
 import { uniqBy } from 'es-toolkit/compat'
 import { produce, setAutoFreeze } from 'immer'
 import {
@@ -26,7 +27,6 @@ import {
   getProcessedFiles,
   getProcessedFilesFromResponse,
 } from '@/app/components/base/file-uploader/utils'
-import { toast } from '@/app/components/base/ui/toast'
 import {
   CUSTOM_NODE,
 } from '@/app/components/workflow/constants'
diff --git a/web/app/components/workflow/panel/env-panel/__tests__/variable-modal.spec.tsx b/web/app/components/workflow/panel/env-panel/__tests__/variable-modal.spec.tsx
index 7e97ef62dc..258784b692 100644
--- a/web/app/components/workflow/panel/env-panel/__tests__/variable-modal.spec.tsx
+++ b/web/app/components/workflow/panel/env-panel/__tests__/variable-modal.spec.tsx
@@ -1,14 +1,14 @@
 import type { ReactElement } from 'react'
 import type { Shape } from '@/app/components/workflow/store/workflow'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
+import { toast } from '@langgenius/dify-ui/toast'
 import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { toast } from '@/app/components/base/ui/toast'
 import { WorkflowContext } from '@/app/components/workflow/context'
 import { createWorkflowStore } from '@/app/components/workflow/store/workflow'
 import VariableModal from '../variable-modal'
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/workflow/panel/env-panel/variable-modal.tsx b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
index e824dd9f08..267c014e1d 100644
--- a/web/app/components/workflow/panel/env-panel/variable-modal.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
@@ -1,5 +1,7 @@
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect } from 'react'
@@ -7,8 +9,6 @@ import { useTranslation } from 'react-i18next'
 import { v4 as uuid4 } from 'uuid'
 import Input from '@/app/components/base/input'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
 
diff --git a/web/app/components/workflow/panel/env-panel/variable-trigger.tsx b/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
index e075238e48..378fc1c1b5 100644
--- a/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
+import { Button } from '@langgenius/dify-ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { RiAddLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/app/components/base/ui/popover'
 import VariableModal from '@/app/components/workflow/panel/env-panel/variable-modal'
 
 type Props = {
diff --git a/web/app/components/workflow/panel/inputs-panel.tsx b/web/app/components/workflow/panel/inputs-panel.tsx
index 4e6255a2c0..10004236dd 100644
--- a/web/app/components/workflow/panel/inputs-panel.tsx
+++ b/web/app/components/workflow/panel/inputs-panel.tsx
@@ -1,4 +1,5 @@
 import type { StartNodeType } from '../nodes/start/types'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   memo,
   useCallback,
@@ -10,7 +11,6 @@ import { useCheckInputsForms } from '@/app/components/base/chat/chat/check-input
 import {
   getProcessedInputs,
 } from '@/app/components/base/chat/chat/utils'
-import { Button } from '@/app/components/base/ui/button'
 import { TransferMethod } from '../../base/text-generation/types'
 import { useWorkflowRun } from '../hooks'
 import { useHooksStore } from '../hooks-store'
diff --git a/web/app/components/workflow/panel/version-history-panel/context-menu/__tests__/menu-item.spec.tsx b/web/app/components/workflow/panel/version-history-panel/context-menu/__tests__/menu-item.spec.tsx
index 844e189067..7dfc362a90 100644
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/__tests__/menu-item.spec.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/__tests__/menu-item.spec.tsx
@@ -1,6 +1,6 @@
+import { DropdownMenu, DropdownMenuContent } from '@langgenius/dify-ui/dropdown-menu'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { DropdownMenu, DropdownMenuContent } from '@/app/components/base/ui/dropdown-menu'
 import { VersionHistoryContextMenuOptions } from '../../../../types'
 import MenuItem from '../menu-item'
 
diff --git a/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx b/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
index f063902753..1b90166f65 100644
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
@@ -1,13 +1,13 @@
 import type { FC } from 'react'
-import { RiMoreFill } from '@remixicon/react'
-import * as React from 'react'
-import { Button } from '@/app/components/base/ui/button'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import { RiMoreFill } from '@remixicon/react'
+import * as React from 'react'
 import { VersionHistoryContextMenuOptions } from '../../../types'
 import MenuItem from './menu-item'
 import useContextMenu from './use-context-menu'
diff --git a/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx b/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
index b1d9ef6ec5..0c0096ab25 100644
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
 import type { VersionHistoryContextMenuOptions } from '../../../types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { DropdownMenuItem } from '@langgenius/dify-ui/dropdown-menu'
 import * as React from 'react'
-import { DropdownMenuItem } from '@/app/components/base/ui/dropdown-menu'
 
 type MenuItemProps = {
   item: {
diff --git a/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx b/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
index 4779be8984..1f7948c41b 100644
--- a/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import type { VersionHistory } from '@/types/workflow'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 
 type DeleteConfirmModalProps = {
   isOpen: boolean
diff --git a/web/app/components/workflow/panel/version-history-panel/empty.tsx b/web/app/components/workflow/panel/version-history-panel/empty.tsx
index 2c8f6655e1..21751234d7 100644
--- a/web/app/components/workflow/panel/version-history-panel/empty.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/empty.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiHistoryLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 type EmptyProps = {
   onResetFilter: () => void
diff --git a/web/app/components/workflow/panel/version-history-panel/filter/filter-switch.tsx b/web/app/components/workflow/panel/version-history-panel/filter/filter-switch.tsx
index 1df519d0f3..587dc43bdf 100644
--- a/web/app/components/workflow/panel/version-history-panel/filter/filter-switch.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/filter/filter-switch.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
+import { Switch } from '@langgenius/dify-ui/switch'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Switch from '@/app/components/base/switch'
 
 type FilterSwitchProps = {
   enabled: boolean
diff --git a/web/app/components/workflow/panel/version-history-panel/index.tsx b/web/app/components/workflow/panel/version-history-panel/index.tsx
index 10dd0e794a..eb1f5c962e 100644
--- a/web/app/components/workflow/panel/version-history-panel/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { VersionHistory } from '@/types/workflow'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiArrowDownDoubleLine, RiCloseLine, RiLoader2Line } from '@remixicon/react'
 import copy from 'copy-to-clipboard'
 import * as React from 'react'
@@ -7,7 +8,6 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import VersionInfoModal from '@/app/components/app/app-publisher/version-info-modal'
 import Divider from '@/app/components/base/divider'
-import { toast } from '@/app/components/base/ui/toast'
 import { useSelector as useAppContextSelector } from '@/context/app-context'
 import { useDeleteWorkflow, useInvalidAllLastRun, useResetWorkflowVersionHistory, useRestoreWorkflow, useUpdateWorkflow, useWorkflowVersionHistory } from '@/service/use-workflow'
 import { useDSL, useWorkflowRefreshDraft, useWorkflowRun } from '../../hooks'
diff --git a/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx b/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx
index 695e6fe35c..9fc2c25742 100644
--- a/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import type { VersionHistory } from '@/types/workflow'
+import { Button } from '@langgenius/dify-ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 
 type RestoreConfirmModalProps = {
   isOpen: boolean
diff --git a/web/app/components/workflow/panel/workflow-preview.tsx b/web/app/components/workflow/panel/workflow-preview.tsx
index e28c494b20..89ae09c374 100644
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@@ -1,4 +1,6 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import copy from 'copy-to-clipboard'
 import {
   memo,
@@ -8,8 +10,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { submitHumanInputForm } from '@/service/workflow'
 import {
   useWorkflowInteractions,
diff --git a/web/app/components/workflow/run/__tests__/index.spec.tsx b/web/app/components/workflow/run/__tests__/index.spec.tsx
index 87937dfb4f..39f26df97e 100644
--- a/web/app/components/workflow/run/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/run/__tests__/index.spec.tsx
@@ -22,7 +22,7 @@ vi.mock('@/service/log', () => ({
   fetchTracingList: (...args: unknown[]) => mockFetchTracingList(...args),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     error: (...args: unknown[]) => mockToastError(...args),
   },
diff --git a/web/app/components/workflow/run/agent-log/__tests__/agent-log-nav-more.spec.tsx b/web/app/components/workflow/run/agent-log/__tests__/agent-log-nav-more.spec.tsx
index 35b32a5ce6..e283740613 100644
--- a/web/app/components/workflow/run/agent-log/__tests__/agent-log-nav-more.spec.tsx
+++ b/web/app/components/workflow/run/agent-log/__tests__/agent-log-nav-more.spec.tsx
@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import AgentLogNavMore from '../agent-log-nav-more'
 
-vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+vi.mock('@langgenius/dify-ui/dropdown-menu', async () => {
   const React = await import('react')
   const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
 
diff --git a/web/app/components/workflow/run/agent-log/agent-log-item.tsx b/web/app/components/workflow/run/agent-log/agent-log-item.tsx
index e1714c5f35..67da9c7aa9 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-item.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-item.tsx
@@ -1,4 +1,5 @@
 import type { AgentLogItemWithChildren } from '@/types/workflow'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowRightSLine,
@@ -8,7 +9,6 @@ import {
   useMemo,
   useState,
 } from 'react'
-import { Button } from '@/app/components/base/ui/button'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
diff --git a/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx b/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
index 77f3c778a6..5c8d100012 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
@@ -1,13 +1,13 @@
 import type { AgentLogItemWithChildren } from '@/types/workflow'
-import { RiMoreLine } from '@remixicon/react'
-import { useState } from 'react'
-import { Button } from '@/app/components/base/ui/button'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+} from '@langgenius/dify-ui/dropdown-menu'
+import { RiMoreLine } from '@remixicon/react'
+import { useState } from 'react'
 
 type AgentLogNavMoreProps = {
   options: AgentLogItemWithChildren[]
diff --git a/web/app/components/workflow/run/agent-log/agent-log-nav.tsx b/web/app/components/workflow/run/agent-log/agent-log-nav.tsx
index 2548256cb1..7996595186 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-nav.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-nav.tsx
@@ -1,7 +1,7 @@
 import type { AgentLogItemWithChildren } from '@/types/workflow'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiArrowLeftLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import AgentLogNavMore from './agent-log-nav-more'
 
 type AgentLogNavProps = {
diff --git a/web/app/components/workflow/run/index.tsx b/web/app/components/workflow/run/index.tsx
index bd71b662f5..d066690120 100644
--- a/web/app/components/workflow/run/index.tsx
+++ b/web/app/components/workflow/run/index.tsx
@@ -3,10 +3,10 @@ import type { FC } from 'react'
 import type { WorkflowRunDetailResponse } from '@/models/log'
 import type { NodeTracing } from '@/types/workflow'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
-import { toast } from '@/app/components/base/ui/toast'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import { fetchRunDetail, fetchTracingList } from '@/service/log'
 import { useStore } from '../store'
diff --git a/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx b/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
index 77b9425501..8fb857f344 100644
--- a/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
+++ b/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
@@ -2,10 +2,10 @@ import type {
   IterationDurationMap,
   NodeTracing,
 } from '@/types/workflow'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiArrowRightSLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { Iteration } from '@/app/components/base/icons/src/vender/workflow'
-import { Button } from '@/app/components/base/ui/button'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
 
 type IterationLogTriggerProps = {
diff --git a/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx b/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx
index 42593e564f..277db8cef4 100644
--- a/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx
+++ b/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx
@@ -3,10 +3,10 @@ import type {
   LoopVariableMap,
   NodeTracing,
 } from '@/types/workflow'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiArrowRightSLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { Loop } from '@/app/components/base/icons/src/vender/workflow'
-import { Button } from '@/app/components/base/ui/button'
 
 type LoopLogTriggerProps = {
   nodeInfo: NodeTracing
diff --git a/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx b/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
index 592b7775f1..84c7808df1 100644
--- a/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
+++ b/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
@@ -1,10 +1,10 @@
 import type { NodeTracing } from '@/types/workflow'
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiArrowRightSLine,
   RiRestartFill,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 
 type RetryLogTriggerProps = {
   nodeInfo: NodeTracing
diff --git a/web/app/components/workflow/selection-contextmenu.tsx b/web/app/components/workflow/selection-contextmenu.tsx
index c82f431ddf..26b5429df4 100644
--- a/web/app/components/workflow/selection-contextmenu.tsx
+++ b/web/app/components/workflow/selection-contextmenu.tsx
@@ -1,4 +1,12 @@
 import type { Node } from './types'
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+} from '@langgenius/dify-ui/context-menu'
 import { produce } from 'immer'
 import {
   memo,
@@ -8,14 +16,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useReactFlowStore } from 'reactflow'
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuGroup,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-} from '@/app/components/base/ui/context-menu'
 import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
 import { useNodesInteractions, useNodesReadOnly, useNodesSyncDraft } from './hooks'
 import { useSelectionInteractions } from './hooks/use-selection-interactions'
diff --git a/web/app/components/workflow/update-dsl-modal.tsx b/web/app/components/workflow/update-dsl-modal.tsx
index 04d687ce73..cfa9c995eb 100644
--- a/web/app/components/workflow/update-dsl-modal.tsx
+++ b/web/app/components/workflow/update-dsl-modal.tsx
@@ -1,6 +1,8 @@
 'use client'
 
 import type { MouseEventHandler } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiAlertFill,
   RiCloseLine,
@@ -16,8 +18,6 @@ import { useTranslation } from 'react-i18next'
 import Uploader from '@/app/components/app/create-from-dsl-modal/uploader'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import {
diff --git a/web/app/components/workflow/variable-inspect/__tests__/value-content-sections.spec.tsx b/web/app/components/workflow/variable-inspect/__tests__/value-content-sections.spec.tsx
index 2ebe527104..bba17a7c32 100644
--- a/web/app/components/workflow/variable-inspect/__tests__/value-content-sections.spec.tsx
+++ b/web/app/components/workflow/variable-inspect/__tests__/value-content-sections.spec.tsx
@@ -18,7 +18,7 @@ const toastMocks = vi.hoisted(() => ({
   promise: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(toastMocks.call, {
     success: vi.fn(),
     error: vi.fn(),
diff --git a/web/app/components/workflow/variable-inspect/group.tsx b/web/app/components/workflow/variable-inspect/group.tsx
index 7d94226786..24786e4b1f 100644
--- a/web/app/components/workflow/variable-inspect/group.tsx
+++ b/web/app/components/workflow/variable-inspect/group.tsx
@@ -10,7 +10,7 @@ import {
 } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-// import { Button } from '@/app/components/base/ui/button'
+// import { Button } from '@langgenius/dify-ui/button'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
 import BlockIcon from '@/app/components/workflow/block-icon'
diff --git a/web/app/components/workflow/variable-inspect/left.tsx b/web/app/components/workflow/variable-inspect/left.tsx
index f3450cea13..6d590eb281 100644
--- a/web/app/components/workflow/variable-inspect/left.tsx
+++ b/web/app/components/workflow/variable-inspect/left.tsx
@@ -1,10 +1,10 @@
 import type { currentVarType } from './panel'
 
 import type { VarInInspect } from '@/types/workflow'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 // import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { VarInInspectType } from '@/types/workflow'
 import useCurrentVars from '../hooks/use-inspect-vars-crud'
 import { useNodesInteractions } from '../hooks/use-nodes-interactions'
diff --git a/web/app/components/workflow/variable-inspect/listening.tsx b/web/app/components/workflow/variable-inspect/listening.tsx
index 4559665ffa..3994355d58 100644
--- a/web/app/components/workflow/variable-inspect/listening.tsx
+++ b/web/app/components/workflow/variable-inspect/listening.tsx
@@ -3,13 +3,13 @@ import type { FC } from 'react'
 import type { Node } from 'reactflow'
 import type { ScheduleTriggerNodeType } from '@/app/components/workflow/nodes/trigger-schedule/types'
 import type { WebhookTriggerNodeType } from '@/app/components/workflow/nodes/trigger-webhook/types'
+import { Button } from '@langgenius/dify-ui/button'
 import copy from 'copy-to-clipboard'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStoreApi } from 'reactflow'
 import { StopCircle } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { useGetToolIcon } from '@/app/components/workflow/hooks/use-tool-icon'
 import { getNextExecutionTime } from '@/app/components/workflow/nodes/trigger-schedule/utils/execution-time-calculator'
diff --git a/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx b/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx
index 3f714c5ca9..9ea32caec3 100644
--- a/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx
+++ b/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx
@@ -1,5 +1,12 @@
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import {
   Fragment,
   memo,
@@ -10,13 +17,6 @@ import {
   useReactFlow,
   useViewport,
 } from 'reactflow'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
 import TipPopup from '@/app/components/workflow/operator/tip-popup'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 
diff --git a/web/app/education-apply/education-apply-page.tsx b/web/app/education-apply/education-apply-page.tsx
index 7fda139aa9..93259c1ccb 100644
--- a/web/app/education-apply/education-apply-page.tsx
+++ b/web/app/education-apply/education-apply-page.tsx
@@ -1,5 +1,7 @@
 'use client'
 
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiExternalLinkLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import {
@@ -7,8 +9,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { EDUCATION_VERIFYING_LOCALSTORAGE_ITEM } from '@/app/education-apply/constants'
 import { useDocLink } from '@/context/i18n'
 import { useProviderContext } from '@/context/provider-context'
diff --git a/web/app/education-apply/expire-notice-modal.tsx b/web/app/education-apply/expire-notice-modal.tsx
index ec88bba1b5..e54afaecde 100644
--- a/web/app/education-apply/expire-notice-modal.tsx
+++ b/web/app/education-apply/expire-notice-modal.tsx
@@ -1,9 +1,9 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
 import { RiExternalLinkLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 import { useModalContextSelector } from '@/context/modal-context'
 import useTimestamp from '@/hooks/use-timestamp'
diff --git a/web/app/education-apply/user-info.tsx b/web/app/education-apply/user-info.tsx
index 32d56b2780..be9b319038 100644
--- a/web/app/education-apply/user-info.tsx
+++ b/web/app/education-apply/user-info.tsx
@@ -1,7 +1,7 @@
+import { Avatar } from '@langgenius/dify-ui/avatar'
+import { Button } from '@langgenius/dify-ui/button'
 import { useTranslation } from 'react-i18next'
 import { Triangle } from '@/app/components/base/icons/src/public/education'
-import { Avatar } from '@/app/components/base/ui/avatar'
-import { Button } from '@/app/components/base/ui/button'
 import { useAppContext } from '@/context/app-context'
 import { useRouter } from '@/next/navigation'
 import { useLogout } from '@/service/use-common'
diff --git a/web/app/education-apply/verify-state-modal.tsx b/web/app/education-apply/verify-state-modal.tsx
index c4d836f178..bb7439352e 100644
--- a/web/app/education-apply/verify-state-modal.tsx
+++ b/web/app/education-apply/verify-state-modal.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@langgenius/dify-ui/button'
 import {
   RiExternalLinkLine,
 } from '@remixicon/react'
@@ -5,7 +6,6 @@ import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 
 type IConfirm = {
diff --git a/web/app/forgot-password/ChangePasswordForm.tsx b/web/app/forgot-password/ChangePasswordForm.tsx
index bf262181a9..deb520c436 100644
--- a/web/app/forgot-password/ChangePasswordForm.tsx
+++ b/web/app/forgot-password/ChangePasswordForm.tsx
@@ -1,11 +1,11 @@
 'use client'
 import { CheckCircleIcon } from '@heroicons/react/24/solid'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { validPassword } from '@/config'
 import { useSearchParams } from '@/next/navigation'
 import { changePasswordWithToken } from '@/service/common'
diff --git a/web/app/forgot-password/ForgotPasswordForm.tsx b/web/app/forgot-password/ForgotPasswordForm.tsx
index 7ce5e7d8dd..b4fba60182 100644
--- a/web/app/forgot-password/ForgotPasswordForm.tsx
+++ b/web/app/forgot-password/ForgotPasswordForm.tsx
@@ -1,15 +1,15 @@
 'use client'
 import type { InitValidateStatusResponse } from '@/models/common'
+import { Button } from '@langgenius/dify-ui/button'
+
 import { useStore } from '@tanstack/react-form'
 
 import * as React from 'react'
-
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import * as z from 'zod'
 import { formContext, useAppForm } from '@/app/components/base/form'
 import { zodSubmitValidator } from '@/app/components/base/form/utils/zod-submit-validator'
-import { Button } from '@/app/components/base/ui/button'
 import { useRouter } from '@/next/navigation'
 import {
   fetchInitValidateStatus,
diff --git a/web/app/init/InitPasswordPopup.tsx b/web/app/init/InitPasswordPopup.tsx
index b0c74978fa..6b25fa371a 100644
--- a/web/app/init/InitPasswordPopup.tsx
+++ b/web/app/init/InitPasswordPopup.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { InitValidateStatusResponse } from '@/models/common'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { useRouter } from '@/next/navigation'
 import { fetchInitValidateStatus, initValidate } from '@/service/common'
diff --git a/web/app/install/installForm.tsx b/web/app/install/installForm.tsx
index c068548561..d9b6e0c7ad 100644
--- a/web/app/install/installForm.tsx
+++ b/web/app/install/installForm.tsx
@@ -1,8 +1,9 @@
 'use client'
 import type { InitValidateStatusResponse, SetupStatusResponse } from '@/models/common'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useStore } from '@tanstack/react-form'
 
+import { useStore } from '@tanstack/react-form'
 import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -10,7 +11,6 @@ import * as z from 'zod'
 import { formContext, useAppForm } from '@/app/components/base/form'
 import { zodSubmitValidator } from '@/app/components/base/form/utils/zod-submit-validator'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
 import { validPassword } from '@/config'
 import { LICENSE_LINK } from '@/constants/link'
 
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 63e506bd45..be0c854f02 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -1,4 +1,6 @@
 import type { Viewport } from '@/next'
+import { ToastHost } from '@langgenius/dify-ui/toast'
+import { TooltipProvider } from '@langgenius/dify-ui/tooltip'
 import { Provider as JotaiProvider } from 'jotai/react'
 import { ThemeProvider } from 'next-themes'
 import { NuqsAdapter } from 'nuqs/adapters/next/app'
@@ -6,8 +8,6 @@ import GlobalPublicStoreProvider from '@/context/global-public-context'
 import { TanstackQueryInitializer } from '@/context/query-client'
 import { getDatasetMap } from '@/env'
 import { getLocaleOnServer } from '@/i18n-config/server'
-import { ToastHost } from './components/base/ui/toast'
-import { TooltipProvider } from './components/base/ui/tooltip'
 import PartnerStackCookieRecorder from './components/billing/partner-stack/cookie-recorder'
 import CreateAppAttributionBootstrap from './components/create-app-attribution-bootstrap'
 import { AgentationLoader } from './components/devtools/agentation-loader'
diff --git a/web/app/reset-password/check-code/page.tsx b/web/app/reset-password/check-code/page.tsx
index 98ea828aae..b11935481e 100644
--- a/web/app/reset-password/check-code/page.tsx
+++ b/web/app/reset-password/check-code/page.tsx
@@ -1,10 +1,10 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
 import { useRouter, useSearchParams } from '@/next/navigation'
diff --git a/web/app/reset-password/page.tsx b/web/app/reset-password/page.tsx
index d58fd7e9ff..63b950bd11 100644
--- a/web/app/reset-password/page.tsx
+++ b/web/app/reset-password/page.tsx
@@ -1,11 +1,11 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiArrowLeftLine, RiLockPasswordLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
 import useDocumentTitle from '@/hooks/use-document-title'
diff --git a/web/app/reset-password/set-password/page.tsx b/web/app/reset-password/set-password/page.tsx
index 7277b6d30c..4a8cb2af9b 100644
--- a/web/app/reset-password/set-password/page.tsx
+++ b/web/app/reset-password/set-password/page.tsx
@@ -1,12 +1,12 @@
 'use client'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiCheckboxCircleFill } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { validPassword } from '@/config'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { changePasswordWithToken } from '@/service/common'
diff --git a/web/app/signin/check-code/page.tsx b/web/app/signin/check-code/page.tsx
index b86c984f31..fb52e0b5b7 100644
--- a/web/app/signin/check-code/page.tsx
+++ b/web/app/signin/check-code/page.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FormEvent } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
 
diff --git a/web/app/signin/components/mail-and-code-auth.tsx b/web/app/signin/components/mail-and-code-auth.tsx
index 5c5431c42a..41cf50854e 100644
--- a/web/app/signin/components/mail-and-code-auth.tsx
+++ b/web/app/signin/components/mail-and-code-auth.tsx
@@ -1,9 +1,9 @@
 import type { FormEvent } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
diff --git a/web/app/signin/components/mail-and-password-auth.tsx b/web/app/signin/components/mail-and-password-auth.tsx
index ca93b9b391..6feaf11426 100644
--- a/web/app/signin/components/mail-and-password-auth.tsx
+++ b/web/app/signin/components/mail-and-password-auth.tsx
@@ -1,11 +1,11 @@
 import type { ResponseError } from '@/service/fetch'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
 import Link from '@/next/link'
diff --git a/web/app/signin/components/social-auth.tsx b/web/app/signin/components/social-auth.tsx
index 6eb9d62703..09fa528d1f 100644
--- a/web/app/signin/components/social-auth.tsx
+++ b/web/app/signin/components/social-auth.tsx
@@ -1,6 +1,6 @@
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import { API_PREFIX } from '@/config'
 import { useSearchParams } from '@/next/navigation'
 import { getPurifyHref } from '@/utils'
diff --git a/web/app/signin/components/sso-auth.tsx b/web/app/signin/components/sso-auth.tsx
index 5ead876741..32612e4edd 100644
--- a/web/app/signin/components/sso-auth.tsx
+++ b/web/app/signin/components/sso-auth.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { getUserOAuth2SSOUrl, getUserOIDCSSOUrl, getUserSAMLSSOUrl } from '@/service/sso'
 import { SSOProtocol } from '@/types/feature'
diff --git a/web/app/signin/invite-settings/page.tsx b/web/app/signin/invite-settings/page.tsx
index 91973f07f9..fe3dac7153 100644
--- a/web/app/signin/invite-settings/page.tsx
+++ b/web/app/signin/invite-settings/page.tsx
@@ -1,5 +1,7 @@
 'use client'
 import type { Locale } from '@/i18n-config'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiAccountCircleLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useCallback, useState } from 'react'
@@ -7,8 +9,6 @@ import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import Loading from '@/app/components/base/loading'
 import { SimpleSelect } from '@/app/components/base/select'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { LICENSE_LINK } from '@/constants/link'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { setLocaleOnClient } from '@/i18n-config'
diff --git a/web/app/signin/normal-form.tsx b/web/app/signin/normal-form.tsx
index 4fd0eabf66..2ead90f068 100644
--- a/web/app/signin/normal-form.tsx
+++ b/web/app/signin/normal-form.tsx
@@ -1,9 +1,9 @@
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiContractLine, RiDoorLockLine, RiErrorWarningFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { IS_CE_EDITION } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import Link from '@/next/link'
diff --git a/web/app/signin/one-more-step.tsx b/web/app/signin/one-more-step.tsx
index 6368533e2a..1f615d5e5a 100644
--- a/web/app/signin/one-more-step.tsx
+++ b/web/app/signin/one-more-step.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { Reducer } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useReducer } from 'react'
 import { useTranslation } from 'react-i18next'
 import { SimpleSelect } from '@/app/components/base/select'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { LICENSE_LINK } from '@/constants/link'
 import { languages, LanguagesSupported } from '@/i18n-config/language'
 import Link from '@/next/link'
diff --git a/web/app/signup/check-code/page.tsx b/web/app/signup/check-code/page.tsx
index a71d5289fe..a6a8cadc13 100644
--- a/web/app/signup/check-code/page.tsx
+++ b/web/app/signup/check-code/page.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { MailSendResponse, MailValidityResponse } from '@/service/use-common'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
 import { useRouter, useSearchParams } from '@/next/navigation'
diff --git a/web/app/signup/components/input-mail.tsx b/web/app/signup/components/input-mail.tsx
index ae7fbb986d..f4c5214c11 100644
--- a/web/app/signup/components/input-mail.tsx
+++ b/web/app/signup/components/input-mail.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { MailSendResponse } from '@/service/use-common'
+import { Button } from '@langgenius/dify-ui/button'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import Split from '@/app/signin/split'
 import { emailRegex } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
diff --git a/web/app/signup/set-password/page.tsx b/web/app/signup/set-password/page.tsx
index ffecd0bc0c..a8eb883078 100644
--- a/web/app/signup/set-password/page.tsx
+++ b/web/app/signup/set-password/page.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { MailRegisterResponse } from '@/service/use-common'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { toast } from '@langgenius/dify-ui/toast'
 import Cookies from 'js-cookie'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
 import Input from '@/app/components/base/input'
-import { Button } from '@/app/components/base/ui/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { validPassword } from '@/config'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { useMailRegister } from '@/service/use-common'
diff --git a/web/context/provider-context-provider.tsx b/web/context/provider-context-provider.tsx
index 078a954e31..0af0f24b9a 100644
--- a/web/context/provider-context-provider.tsx
+++ b/web/context/provider-context-provider.tsx
@@ -1,11 +1,11 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import { toast } from '@langgenius/dify-ui/toast'
 import { useQueryClient } from '@tanstack/react-query'
 import dayjs from 'dayjs'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { setZendeskConversationFields } from '@/app/components/base/zendesk/utils'
 import { defaultPlan } from '@/app/components/billing/config'
 import { parseCurrentPlan } from '@/app/components/billing/utils'
diff --git a/web/docs/overlay-migration.md b/web/docs/overlay-migration.md
index 29ef814fcd..0016f34e12 100644
--- a/web/docs/overlay-migration.md
+++ b/web/docs/overlay-migration.md
@@ -11,14 +11,14 @@ This document tracks the migration away from legacy overlay APIs.
   - `@/app/components/base/select` (including `custom` / `pure`)
   - `@/app/components/base/dialog`
 - Replacement primitives:
-  - `@/app/components/base/ui/tooltip`
-  - `@/app/components/base/ui/dropdown-menu`
-  - `@/app/components/base/ui/context-menu`
-  - `@/app/components/base/ui/popover`
-  - `@/app/components/base/ui/dialog`
-  - `@/app/components/base/ui/alert-dialog`
-  - `@/app/components/base/ui/select`
-  - `@/app/components/base/ui/toast`
+  - `@langgenius/dify-ui/tooltip`
+  - `@langgenius/dify-ui/dropdown-menu`
+  - `@langgenius/dify-ui/context-menu`
+  - `@langgenius/dify-ui/popover`
+  - `@langgenius/dify-ui/dialog`
+  - `@langgenius/dify-ui/alert-dialog`
+  - `@langgenius/dify-ui/select`
+  - `@langgenius/dify-ui/toast`
 - Tracking issue: <https://github.com/langgenius/dify/issues/32767>
 
 ## ESLint policy
diff --git a/web/eslint.constants.mjs b/web/eslint.constants.mjs
index 57a14fc22d..46690035fb 100644
--- a/web/eslint.constants.mjs
+++ b/web/eslint.constants.mjs
@@ -33,7 +33,7 @@ export const OVERLAY_RESTRICTED_IMPORT_PATTERNS = [
       '**/base/tooltip',
       '**/base/tooltip/index',
     ],
-    message: 'Deprecated: use @/app/components/base/ui/tooltip instead. See issue #32767.',
+    message: 'Deprecated: use @langgenius/dify-ui/tooltip instead. See issue #32767.',
   },
   {
     group: [
@@ -41,7 +41,7 @@ export const OVERLAY_RESTRICTED_IMPORT_PATTERNS = [
       '**/base/modal/index',
       '**/base/modal/modal',
     ],
-    message: 'Deprecated: use @/app/components/base/ui/dialog instead. See issue #32767.',
+    message: 'Deprecated: use @langgenius/dify-ui/dialog instead. See issue #32767.',
   },
   {
     group: [
@@ -50,14 +50,14 @@ export const OVERLAY_RESTRICTED_IMPORT_PATTERNS = [
       '**/base/select/custom',
       '**/base/select/pure',
     ],
-    message: 'Deprecated: use @/app/components/base/ui/select instead. See issue #32767.',
+    message: 'Deprecated: use @langgenius/dify-ui/select instead. See issue #32767.',
   },
   {
     group: [
       '**/base/dialog',
       '**/base/dialog/index',
     ],
-    message: 'Deprecated: use @/app/components/base/ui/dialog instead. See issue #32767.',
+    message: 'Deprecated: use @langgenius/dify-ui/dialog instead. See issue #32767.',
   },
 ]
 
diff --git a/web/hooks/use-import-dsl.ts b/web/hooks/use-import-dsl.ts
index 6be67c22ac..1ece2a27f0 100644
--- a/web/hooks/use-import-dsl.ts
+++ b/web/hooks/use-import-dsl.ts
@@ -3,13 +3,13 @@ import type {
   DSLImportResponse,
 } from '@/models/app'
 import type { AppIconType } from '@/types/app'
+import { toast } from '@langgenius/dify-ui/toast'
 import {
   useCallback,
   useRef,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from '@/app/components/base/ui/toast'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useSelector } from '@/context/app-context'
diff --git a/web/hooks/use-pay.tsx b/web/hooks/use-pay.tsx
index 237913b433..593a33a1d2 100644
--- a/web/hooks/use-pay.tsx
+++ b/web/hooks/use-pay.tsx
@@ -1,7 +1,5 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -9,7 +7,9 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
+} from '@langgenius/dify-ui/alert-dialog'
+import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { useNotionBinding } from '@/service/use-common'
 
diff --git a/web/service/base.ts b/web/service/base.ts
index 2063b5bc37..64d13ef59a 100644
--- a/web/service/base.ts
+++ b/web/service/base.ts
@@ -27,8 +27,8 @@ import type {
   WorkflowPausedResponse,
   WorkflowStartedResponse,
 } from '@/types/workflow'
+import { toast } from '@langgenius/dify-ui/toast'
 import Cookies from 'js-cookie'
-import { toast } from '@/app/components/base/ui/toast'
 import { API_PREFIX, CSRF_COOKIE_NAME, CSRF_HEADER_NAME, IS_CE_EDITION, PASSPORT_HEADER_NAME, PUBLIC_API_PREFIX, WEB_APP_SHARE_CODE_HEADER_NAME } from '@/config'
 import { asyncRunSafe } from '@/utils'
 import { basePath } from '@/utils/var'
diff --git a/web/service/fetch.spec.ts b/web/service/fetch.spec.ts
index 0c01d32438..632f898e88 100644
--- a/web/service/fetch.spec.ts
+++ b/web/service/fetch.spec.ts
@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { base } from './fetch'
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     add: vi.fn(),
   },
diff --git a/web/service/fetch.ts b/web/service/fetch.ts
index 82870a8d2e..34bd07160a 100644
--- a/web/service/fetch.ts
+++ b/web/service/fetch.ts
@@ -1,8 +1,8 @@
 import type { AfterResponseHook, BeforeRequestHook, Hooks } from 'ky'
 import type { IOtherOptions } from './base'
+import { toast } from '@langgenius/dify-ui/toast'
 import Cookies from 'js-cookie'
 import ky, { HTTPError } from 'ky'
-import { toast } from '@/app/components/base/ui/toast'
 import { API_PREFIX, APP_VERSION, CSRF_COOKIE_NAME, CSRF_HEADER_NAME, IS_MARKETPLACE, MARKETPLACE_API_PREFIX, PASSPORT_HEADER_NAME, PUBLIC_API_PREFIX, WEB_APP_SHARE_CODE_HEADER_NAME } from '@/config'
 import { getWebAppAccessToken, getWebAppPassport } from './webapp-auth'
 
diff --git a/web/tailwind.config.ts b/web/tailwind.config.ts
index 32b889e707..21c0455177 100644
--- a/web/tailwind.config.ts
+++ b/web/tailwind.config.ts
@@ -6,9 +6,11 @@ const config: Config = {
     './app/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}',
     './context/**/*.{js,ts,jsx,tsx}',
+    '../packages/dify-ui/src/**/*.{ts,tsx}',
     './node_modules/streamdown/dist/*.js',
     './node_modules/@streamdown/math/dist/*.js',
     '!./**/*.{spec,test}.{js,ts,jsx,tsx}',
+    '!../packages/dify-ui/src/**/*.{spec,test}.{ts,tsx}',
   ],
   ...commonConfig,
 }

From b9c300d57014c3601c1bccf2f2051ff50e6fe271 Mon Sep 17 00:00:00 2001
From: jerryzai <jerryzh8710@protonmail.com>
Date: Fri, 17 Apr 2026 04:52:27 -0400
Subject: [PATCH 15/24] =?UTF-8?q?chore(api):=20migrate=20mail=20task=20and?=
 =?UTF-8?q?=20OAuth=20data=20source=20to=20use=20Session(db=E2=80=A6=20(#3?=
 =?UTF-8?q?5235)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Asuka Minato <i@asukaminato.eu.org>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 api/libs/oauth_data_source.py                 | 131 +++++++++---------
 .../mail_clean_document_notify_task.py        | 121 ++++++++--------
 2 files changed, 128 insertions(+), 124 deletions(-)

diff --git a/api/libs/oauth_data_source.py b/api/libs/oauth_data_source.py
index 9b53918f24..934aacb45b 100644
--- a/api/libs/oauth_data_source.py
+++ b/api/libs/oauth_data_source.py
@@ -6,8 +6,8 @@ from flask_login import current_user
 from pydantic import TypeAdapter
 from sqlalchemy import select
 
+from core.db.session_factory import session_factory
 from core.helper.http_client_pooling import get_pooled_http_client
-from extensions.ext_database import db
 from libs.datetime_utils import naive_utc_now
 from models.source import DataSourceOauthBinding
 
@@ -95,27 +95,28 @@ class NotionOAuth(OAuthDataSource):
             pages=pages,
         )
         # save data source binding
-        data_source_binding = db.session.scalar(
-            select(DataSourceOauthBinding).where(
-                DataSourceOauthBinding.tenant_id == current_user.current_tenant_id,
-                DataSourceOauthBinding.provider == "notion",
-                DataSourceOauthBinding.access_token == access_token,
+        with session_factory.create_session() as session:
+            data_source_binding = session.scalar(
+                select(DataSourceOauthBinding).where(
+                    DataSourceOauthBinding.tenant_id == current_user.current_tenant_id,
+                    DataSourceOauthBinding.provider == "notion",
+                    DataSourceOauthBinding.access_token == access_token,
+                )
             )
-        )
-        if data_source_binding:
-            data_source_binding.source_info = SOURCE_INFO_STORAGE_ADAPTER.validate_python(source_info)
-            data_source_binding.disabled = False
-            data_source_binding.updated_at = naive_utc_now()
-            db.session.commit()
-        else:
-            new_data_source_binding = DataSourceOauthBinding(
-                tenant_id=current_user.current_tenant_id,
-                access_token=access_token,
-                source_info=SOURCE_INFO_STORAGE_ADAPTER.validate_python(source_info),
-                provider="notion",
-            )
-            db.session.add(new_data_source_binding)
-            db.session.commit()
+            if data_source_binding:
+                data_source_binding.source_info = SOURCE_INFO_STORAGE_ADAPTER.validate_python(source_info)
+                data_source_binding.disabled = False
+                data_source_binding.updated_at = naive_utc_now()
+                session.commit()
+            else:
+                new_data_source_binding = DataSourceOauthBinding(
+                    tenant_id=current_user.current_tenant_id,
+                    access_token=access_token,
+                    source_info=SOURCE_INFO_STORAGE_ADAPTER.validate_python(source_info),
+                    provider="notion",
+                )
+                session.add(new_data_source_binding)
+                session.commit()
 
     def save_internal_access_token(self, access_token: str) -> None:
         workspace_name = self.notion_workspace_name(access_token)
@@ -130,55 +131,57 @@ class NotionOAuth(OAuthDataSource):
             pages=pages,
         )
         # save data source binding
-        data_source_binding = db.session.scalar(
-            select(DataSourceOauthBinding).where(
-                DataSourceOauthBinding.tenant_id == current_user.current_tenant_id,
-                DataSourceOauthBinding.provider == "notion",
-                DataSourceOauthBinding.access_token == access_token,
+        with session_factory.create_session() as session:
+            data_source_binding = session.scalar(
+                select(DataSourceOauthBinding).where(
+                    DataSourceOauthBinding.tenant_id == current_user.current_tenant_id,
+                    DataSourceOauthBinding.provider == "notion",
+                    DataSourceOauthBinding.access_token == access_token,
+                )
             )
-        )
-        if data_source_binding:
-            data_source_binding.source_info = SOURCE_INFO_STORAGE_ADAPTER.validate_python(source_info)
-            data_source_binding.disabled = False
-            data_source_binding.updated_at = naive_utc_now()
-            db.session.commit()
-        else:
-            new_data_source_binding = DataSourceOauthBinding(
-                tenant_id=current_user.current_tenant_id,
-                access_token=access_token,
-                source_info=SOURCE_INFO_STORAGE_ADAPTER.validate_python(source_info),
-                provider="notion",
-            )
-            db.session.add(new_data_source_binding)
-            db.session.commit()
+            if data_source_binding:
+                data_source_binding.source_info = SOURCE_INFO_STORAGE_ADAPTER.validate_python(source_info)
+                data_source_binding.disabled = False
+                data_source_binding.updated_at = naive_utc_now()
+                session.commit()
+            else:
+                new_data_source_binding = DataSourceOauthBinding(
+                    tenant_id=current_user.current_tenant_id,
+                    access_token=access_token,
+                    source_info=SOURCE_INFO_STORAGE_ADAPTER.validate_python(source_info),
+                    provider="notion",
+                )
+                session.add(new_data_source_binding)
+                session.commit()
 
     def sync_data_source(self, binding_id: str) -> None:
         # save data source binding
-        data_source_binding = db.session.scalar(
-            select(DataSourceOauthBinding).where(
-                DataSourceOauthBinding.tenant_id == current_user.current_tenant_id,
-                DataSourceOauthBinding.provider == "notion",
-                DataSourceOauthBinding.id == binding_id,
-                DataSourceOauthBinding.disabled == False,
+        with session_factory.create_session() as session:
+            data_source_binding = session.scalar(
+                select(DataSourceOauthBinding).where(
+                    DataSourceOauthBinding.tenant_id == current_user.current_tenant_id,
+                    DataSourceOauthBinding.provider == "notion",
+                    DataSourceOauthBinding.id == binding_id,
+                    DataSourceOauthBinding.disabled == False,
+                )
             )
-        )
 
-        if data_source_binding:
-            # get all authorized pages
-            pages = self.get_authorized_pages(data_source_binding.access_token)
-            source_info = NOTION_SOURCE_INFO_ADAPTER.validate_python(data_source_binding.source_info)
-            new_source_info = self._build_source_info(
-                workspace_name=source_info["workspace_name"],
-                workspace_icon=source_info["workspace_icon"],
-                workspace_id=source_info["workspace_id"],
-                pages=pages,
-            )
-            data_source_binding.source_info = SOURCE_INFO_STORAGE_ADAPTER.validate_python(new_source_info)
-            data_source_binding.disabled = False
-            data_source_binding.updated_at = naive_utc_now()
-            db.session.commit()
-        else:
-            raise ValueError("Data source binding not found")
+            if data_source_binding:
+                # get all authorized pages
+                pages = self.get_authorized_pages(data_source_binding.access_token)
+                source_info = NOTION_SOURCE_INFO_ADAPTER.validate_python(data_source_binding.source_info)
+                new_source_info = self._build_source_info(
+                    workspace_name=source_info["workspace_name"],
+                    workspace_icon=source_info["workspace_icon"],
+                    workspace_id=source_info["workspace_id"],
+                    pages=pages,
+                )
+                data_source_binding.source_info = SOURCE_INFO_STORAGE_ADAPTER.validate_python(new_source_info)
+                data_source_binding.disabled = False
+                data_source_binding.updated_at = naive_utc_now()
+                session.commit()
+            else:
+                raise ValueError("Data source binding not found")
 
     def get_authorized_pages(self, access_token: str) -> list[NotionPageSummary]:
         pages: list[NotionPageSummary] = []
diff --git a/api/schedule/mail_clean_document_notify_task.py b/api/schedule/mail_clean_document_notify_task.py
index 8479cdfb0c..2cc0192a4a 100644
--- a/api/schedule/mail_clean_document_notify_task.py
+++ b/api/schedule/mail_clean_document_notify_task.py
@@ -7,8 +7,8 @@ from sqlalchemy import select
 
 import app
 from configs import dify_config
+from core.db.session_factory import session_factory
 from enums.cloud_plan import CloudPlan
-from extensions.ext_database import db
 from extensions.ext_mail import mail
 from libs.email_i18n import EmailType, get_email_i18n_service
 from models import Account, Tenant, TenantAccountJoin
@@ -33,67 +33,68 @@ def mail_clean_document_notify_task():
 
     # send document clean notify mail
     try:
-        dataset_auto_disable_logs = db.session.scalars(
-            select(DatasetAutoDisableLog).where(DatasetAutoDisableLog.notified == False)
-        ).all()
-        # group by tenant_id
-        dataset_auto_disable_logs_map: dict[str, list[DatasetAutoDisableLog]] = defaultdict(list)
-        for dataset_auto_disable_log in dataset_auto_disable_logs:
-            if dataset_auto_disable_log.tenant_id not in dataset_auto_disable_logs_map:
-                dataset_auto_disable_logs_map[dataset_auto_disable_log.tenant_id] = []
-            dataset_auto_disable_logs_map[dataset_auto_disable_log.tenant_id].append(dataset_auto_disable_log)
-        url = f"{dify_config.CONSOLE_WEB_URL}/datasets"
-        for tenant_id, tenant_dataset_auto_disable_logs in dataset_auto_disable_logs_map.items():
-            features = FeatureService.get_features(tenant_id)
-            plan = features.billing.subscription.plan
-            if plan != CloudPlan.SANDBOX:
-                knowledge_details = []
-                # check tenant
-                tenant = db.session.scalar(select(Tenant).where(Tenant.id == tenant_id))
-                if not tenant:
-                    continue
-                # check current owner
-                current_owner_join = db.session.scalar(
-                    select(TenantAccountJoin)
-                    .where(TenantAccountJoin.tenant_id == tenant.id, TenantAccountJoin.role == "owner")
-                    .limit(1)
-                )
-                if not current_owner_join:
-                    continue
-                account = db.session.scalar(select(Account).where(Account.id == current_owner_join.account_id))
-                if not account:
-                    continue
+        with session_factory.create_session() as session:
+            dataset_auto_disable_logs = session.scalars(
+                select(DatasetAutoDisableLog).where(DatasetAutoDisableLog.notified.is_(False))
+            ).all()
+            # group by tenant_id
+            dataset_auto_disable_logs_map: dict[str, list[DatasetAutoDisableLog]] = defaultdict(list)
+            for dataset_auto_disable_log in dataset_auto_disable_logs:
+                if dataset_auto_disable_log.tenant_id not in dataset_auto_disable_logs_map:
+                    dataset_auto_disable_logs_map[dataset_auto_disable_log.tenant_id] = []
+                dataset_auto_disable_logs_map[dataset_auto_disable_log.tenant_id].append(dataset_auto_disable_log)
+            url = f"{dify_config.CONSOLE_WEB_URL}/datasets"
+            for tenant_id, tenant_dataset_auto_disable_logs in dataset_auto_disable_logs_map.items():
+                features = FeatureService.get_features(tenant_id)
+                plan = features.billing.subscription.plan
+                if plan != CloudPlan.SANDBOX:
+                    knowledge_details = []
+                    # check tenant
+                    tenant = session.scalar(select(Tenant).where(Tenant.id == tenant_id))
+                    if not tenant:
+                        continue
+                    # check current owner
+                    current_owner_join = session.scalar(
+                        select(TenantAccountJoin)
+                        .where(TenantAccountJoin.tenant_id == tenant.id, TenantAccountJoin.role == "owner")
+                        .limit(1)
+                    )
+                    if not current_owner_join:
+                        continue
+                    account = session.scalar(select(Account).where(Account.id == current_owner_join.account_id))
+                    if not account:
+                        continue
 
-                dataset_auto_dataset_map = {}  # type: ignore
+                    dataset_auto_dataset_map = {}  # type: ignore
+                    for dataset_auto_disable_log in tenant_dataset_auto_disable_logs:
+                        if dataset_auto_disable_log.dataset_id not in dataset_auto_dataset_map:
+                            dataset_auto_dataset_map[dataset_auto_disable_log.dataset_id] = []
+                        dataset_auto_dataset_map[dataset_auto_disable_log.dataset_id].append(
+                            dataset_auto_disable_log.document_id
+                        )
+
+                    for dataset_id, document_ids in dataset_auto_dataset_map.items():
+                        dataset = session.scalar(select(Dataset).where(Dataset.id == dataset_id))
+                        if dataset:
+                            document_count = len(document_ids)
+                            knowledge_details.append(rf"Knowledge base {dataset.name}: {document_count} documents")
+                    if knowledge_details:
+                        email_service = get_email_i18n_service()
+                        email_service.send_email(
+                            email_type=EmailType.DOCUMENT_CLEAN_NOTIFY,
+                            language_code="en-US",
+                            to=account.email,
+                            template_context={
+                                "userName": account.email,
+                                "knowledge_details": knowledge_details,
+                                "url": url,
+                            },
+                        )
+
+                # update notified to True
                 for dataset_auto_disable_log in tenant_dataset_auto_disable_logs:
-                    if dataset_auto_disable_log.dataset_id not in dataset_auto_dataset_map:
-                        dataset_auto_dataset_map[dataset_auto_disable_log.dataset_id] = []
-                    dataset_auto_dataset_map[dataset_auto_disable_log.dataset_id].append(
-                        dataset_auto_disable_log.document_id
-                    )
-
-                for dataset_id, document_ids in dataset_auto_dataset_map.items():
-                    dataset = db.session.scalar(select(Dataset).where(Dataset.id == dataset_id))
-                    if dataset:
-                        document_count = len(document_ids)
-                        knowledge_details.append(rf"Knowledge base {dataset.name}: {document_count} documents")
-                if knowledge_details:
-                    email_service = get_email_i18n_service()
-                    email_service.send_email(
-                        email_type=EmailType.DOCUMENT_CLEAN_NOTIFY,
-                        language_code="en-US",
-                        to=account.email,
-                        template_context={
-                            "userName": account.email,
-                            "knowledge_details": knowledge_details,
-                            "url": url,
-                        },
-                    )
-
-            # update notified to True
-            for dataset_auto_disable_log in tenant_dataset_auto_disable_logs:
-                dataset_auto_disable_log.notified = True
-            db.session.commit()
+                    dataset_auto_disable_log.notified = True
+            session.commit()
         end_at = time.perf_counter()
         logger.info(click.style(f"Send document clean notify mail succeeded: latency: {end_at - start_at}", fg="green"))
     except Exception:

From 96122692cba202fab96d14e72cb4810593dc6669 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Fri, 17 Apr 2026 17:10:10 +0800
Subject: [PATCH 16/24] fix(web): keep workflow panel operator anchor mounted
 during menu close animation (#35363)

---
 .../nodes/_base/components/node-control.tsx   | 24 +++++++------------
 .../_base/components/panel-operator/index.tsx | 14 +++++------
 2 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/node-control.tsx b/web/app/components/workflow/nodes/_base/components/node-control.tsx
index 4f2980186d..439e097bc9 100644
--- a/web/app/components/workflow/nodes/_base/components/node-control.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-control.tsx
@@ -1,15 +1,12 @@
 import type { FC } from 'react'
 import type { Node } from '../../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@langgenius/dify-ui/tooltip'
-import {
-  memo,
-  useCallback,
-  useState,
-} from 'react'
+import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   Stop,
@@ -31,23 +28,19 @@ const NodeControl: FC<NodeControlProps> = ({
   pluginInstallLocked,
 }) => {
   const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
   const { handleNodeSelect } = useNodesInteractions()
   const workflowStore = useWorkflowStore()
   const isSingleRunning = data._singleRunningStatus === NodeRunningStatus.Running
-  const handleOpenChange = useCallback((newOpen: boolean) => {
-    setOpen(newOpen)
-  }, [])
 
   const isChildNode = !!(data.isInIteration || data.isInLoop)
   return (
     <div
-      className={`
-      absolute -top-7 right-0 hidden h-7 pb-1
-      ${!pluginInstallLocked && 'group-hover:flex'}
-      ${data.selected && 'flex!'}
-      ${open && 'flex!'}
-      `}
+      className={cn(
+        'invisible absolute -top-7 right-0 flex h-7 pb-1',
+        !pluginInstallLocked && 'group-hover:visible',
+        data.selected && 'visible',
+        'has-[[data-popup-open]]:visible',
+      )}
     >
       <div
         className="nodrag nopan nowheel flex h-6 items-center rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg px-0.5 text-text-tertiary shadow-md backdrop-blur-[5px]"
@@ -93,7 +86,6 @@ const NodeControl: FC<NodeControlProps> = ({
           id={id}
           data={data}
           offset={0}
-          onOpenChange={handleOpenChange}
           triggerClassName="w-5! h-5!"
         />
       </div>
diff --git a/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx b/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
index 32b91ca1ee..ee16fd0c06 100644
--- a/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
@@ -20,7 +20,6 @@ type PanelOperatorProps = {
   triggerClassName?: string
   offset?: OffsetOptions | number
   onOpenChange?: (open: boolean) => void
-  inNode?: boolean
   showHelpLink?: boolean
 }
 const PanelOperator = ({
@@ -45,15 +44,14 @@ const PanelOperator = ({
     ? offset.crossAxis
     : 0
 
-  const handleOpenChange = useCallback((newOpen: boolean) => {
-    setOpen(newOpen)
-
-    if (onOpenChange)
-      onOpenChange(newOpen)
+  const handleOpenChange = useCallback((nextOpen: boolean) => {
+    setOpen(nextOpen)
+    onOpenChange?.(nextOpen)
   }, [onOpenChange])
 
   return (
     <DropdownMenu
+      modal={false}
       open={open}
       onOpenChange={handleOpenChange}
     >
@@ -62,7 +60,7 @@ const PanelOperator = ({
         aria-label={t('operation.more', { ns: 'common' })}
         className={cn(
           'nodrag nopan nowheel flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-state-base-hover',
-          open && 'bg-state-base-hover',
+          'data-[popup-open]:bg-state-base-hover',
           triggerClassName,
         )}
       >
@@ -77,7 +75,7 @@ const PanelOperator = ({
         <PanelOperatorPopup
           id={id}
           data={data}
-          onClosePopup={() => handleOpenChange(false)}
+          onClosePopup={() => setOpen(false)}
           showHelpLink={showHelpLink}
         />
       </DropdownMenuContent>

From f980d5d3bef2d36752544a079f7a611536f437f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9D=9E=E6=B3=95=E6=93=8D=E4=BD=9C?= <hjlarry@163.com>
Date: Fri, 17 Apr 2026 18:02:26 +0800
Subject: [PATCH 17/24] feat: copy nodes cross apps (#33273)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 api/constants/dsl_version.py                  |   1 +
 api/services/app_dsl_service.py               |   3 +-
 api/services/feature_service.py               |   3 +
 eslint-suppressions.json                      |   2 +-
 .../header/__tests__/index.spec.tsx           |   1 +
 .../__tests__/use-nodes-interactions.spec.ts  | 324 ++++++-
 .../__tests__/use-panel-interactions.spec.ts  |  39 +
 .../hooks/__tests__/use-shortcuts.spec.ts     |  47 +
 .../workflow/hooks/use-nodes-interactions.ts  | 832 +++++++++++++-----
 .../workflow/hooks/use-panel-interactions.ts  |  13 +-
 .../workflow/hooks/use-shortcuts.ts           |  10 +-
 .../store/__tests__/workflow-store.spec.ts    |  13 +
 .../workflow/store/workflow/workflow-slice.ts |  12 +
 .../utils/__tests__/clipboard.spec.ts         | 101 +++
 .../components/workflow/utils/clipboard.ts    | 205 +++++
 web/app/components/workflow/utils/index.ts    |   1 +
 web/i18n/ar-TN/workflow.json                  |   1 +
 web/i18n/de-DE/workflow.json                  |   1 +
 web/i18n/en-US/workflow.json                  |   1 +
 web/i18n/es-ES/workflow.json                  |   1 +
 web/i18n/fa-IR/workflow.json                  |   1 +
 web/i18n/fr-FR/workflow.json                  |   1 +
 web/i18n/hi-IN/workflow.json                  |   1 +
 web/i18n/id-ID/workflow.json                  |   1 +
 web/i18n/it-IT/workflow.json                  |   1 +
 web/i18n/ja-JP/workflow.json                  |   1 +
 web/i18n/ko-KR/workflow.json                  |   1 +
 web/i18n/nl-NL/workflow.json                  |   1 +
 web/i18n/pl-PL/workflow.json                  |   1 +
 web/i18n/pt-BR/workflow.json                  |   1 +
 web/i18n/ro-RO/workflow.json                  |   1 +
 web/i18n/ru-RU/workflow.json                  |   1 +
 web/i18n/sl-SI/workflow.json                  |   1 +
 web/i18n/th-TH/workflow.json                  |   1 +
 web/i18n/tr-TR/workflow.json                  |   1 +
 web/i18n/uk-UA/workflow.json                  |   1 +
 web/i18n/vi-VN/workflow.json                  |   1 +
 web/i18n/zh-Hans/workflow.json                |   1 +
 web/i18n/zh-Hant/workflow.json                |   1 +
 web/types/feature.ts                          |   2 +
 40 files changed, 1384 insertions(+), 248 deletions(-)
 create mode 100644 api/constants/dsl_version.py
 create mode 100644 web/app/components/workflow/utils/__tests__/clipboard.spec.ts
 create mode 100644 web/app/components/workflow/utils/clipboard.ts

diff --git a/api/constants/dsl_version.py b/api/constants/dsl_version.py
new file mode 100644
index 0000000000..b0fbe0075c
--- /dev/null
+++ b/api/constants/dsl_version.py
@@ -0,0 +1 @@
+CURRENT_APP_DSL_VERSION = "0.6.0"
diff --git a/api/services/app_dsl_service.py b/api/services/app_dsl_service.py
index 78806927bc..97aaea3395 100644
--- a/api/services/app_dsl_service.py
+++ b/api/services/app_dsl_service.py
@@ -17,6 +17,7 @@ from sqlalchemy import select
 from sqlalchemy.orm import Session
 
 from configs import dify_config
+from constants.dsl_version import CURRENT_APP_DSL_VERSION
 from core.helper import ssrf_proxy
 from core.plugin.entities.plugin import PluginDependency
 from core.trigger.constants import (
@@ -50,7 +51,7 @@ IMPORT_INFO_REDIS_KEY_PREFIX = "app_import_info:"
 CHECK_DEPENDENCIES_REDIS_KEY_PREFIX = "app_check_dependencies:"
 IMPORT_INFO_REDIS_EXPIRY = 10 * 60  # 10 minutes
 DSL_MAX_SIZE = 10 * 1024 * 1024  # 10MB
-CURRENT_DSL_VERSION = "0.6.0"
+CURRENT_DSL_VERSION = CURRENT_APP_DSL_VERSION
 
 
 class Import(BaseModel):
diff --git a/api/services/feature_service.py b/api/services/feature_service.py
index d0d3fbd66b..e18eb096c9 100644
--- a/api/services/feature_service.py
+++ b/api/services/feature_service.py
@@ -3,6 +3,7 @@ from enum import StrEnum
 from pydantic import BaseModel, ConfigDict, Field
 
 from configs import dify_config
+from constants.dsl_version import CURRENT_APP_DSL_VERSION
 from enums.cloud_plan import CloudPlan
 from enums.hosted_provider import HostedTrialProvider
 from services.billing_service import BillingService
@@ -157,6 +158,7 @@ class PluginManagerModel(BaseModel):
 
 
 class SystemFeatureModel(BaseModel):
+    app_dsl_version: str = ""
     sso_enforced_for_signin: bool = False
     sso_enforced_for_signin_protocol: str = ""
     enable_marketplace: bool = False
@@ -225,6 +227,7 @@ class FeatureService:
     @classmethod
     def get_system_features(cls, is_authenticated: bool = False) -> SystemFeatureModel:
         system_features = SystemFeatureModel()
+        system_features.app_dsl_version = CURRENT_APP_DSL_VERSION
 
         cls._fulfill_system_params_from_env(system_features)
 
diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 477391e2de..fbeb1d6dcf 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -6206,7 +6206,7 @@
   },
   "web/app/components/workflow/utils/index.ts": {
     "no-barrel-files/no-barrel-files": {
-      "count": 9
+      "count": 10
     }
   },
   "web/app/components/workflow/utils/node-navigation.ts": {
diff --git a/web/app/components/base/chat/embedded-chatbot/header/__tests__/index.spec.tsx b/web/app/components/base/chat/embedded-chatbot/header/__tests__/index.spec.tsx
index 51aa8a9b0c..50ba15ae61 100644
--- a/web/app/components/base/chat/embedded-chatbot/header/__tests__/index.spec.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/header/__tests__/index.spec.tsx
@@ -48,6 +48,7 @@ describe('EmbeddedChatbot Header', () => {
   }
 
   const defaultSystemFeatures: SystemFeatures = {
+    app_dsl_version: '',
     trial_models: [],
     plugin_installation_permission: {
       plugin_installation_scope: InstallationScope.ALL,
diff --git a/web/app/components/workflow/hooks/__tests__/use-nodes-interactions.spec.ts b/web/app/components/workflow/hooks/__tests__/use-nodes-interactions.spec.ts
index 4117c85abd..41d1fb39d9 100644
--- a/web/app/components/workflow/hooks/__tests__/use-nodes-interactions.spec.ts
+++ b/web/app/components/workflow/hooks/__tests__/use-nodes-interactions.spec.ts
@@ -11,6 +11,14 @@ const mockHandleSyncWorkflowDraft = vi.hoisted(() => vi.fn())
 const mockSaveStateToHistory = vi.hoisted(() => vi.fn())
 const mockUndo = vi.hoisted(() => vi.fn())
 const mockRedo = vi.hoisted(() => vi.fn())
+const mockHandleNodeIterationChildrenCopy = vi.hoisted(() => vi.fn(() => ({
+  copyChildren: [],
+  newIdMapping: {},
+})))
+const mockHandleNodeLoopChildrenCopy = vi.hoisted(() => vi.fn(() => ({
+  copyChildren: [],
+  newIdMapping: {},
+})))
 const runtimeNodesMetaDataMap = vi.hoisted(() => ({
   value: {} as Record<string, unknown>,
 }))
@@ -72,14 +80,14 @@ vi.mock('../use-inspect-vars-crud', () => ({
 vi.mock('../../nodes/iteration/use-interactions', () => ({
   useNodeIterationInteractions: () => ({
     handleNodeIterationChildDrag: () => ({ restrictPosition: {} }),
-    handleNodeIterationChildrenCopy: vi.fn(),
+    handleNodeIterationChildrenCopy: mockHandleNodeIterationChildrenCopy,
   }),
 }))
 
 vi.mock('../../nodes/loop/use-interactions', () => ({
   useNodeLoopInteractions: () => ({
     handleNodeLoopChildDrag: () => ({ restrictPosition: {} }),
-    handleNodeLoopChildrenCopy: vi.fn(),
+    handleNodeLoopChildrenCopy: mockHandleNodeLoopChildrenCopy,
   }),
 }))
 
@@ -673,4 +681,316 @@ describe('useNodesInteractions', () => {
 
     expect(rfState.setNodes).toHaveBeenCalled()
   })
+
+  // Paste title handling should preserve original names until the destination canvas conflicts.
+  describe('paste title handling', () => {
+    beforeEach(() => {
+      runtimeNodesMetaDataMap.value = {
+        [BlockEnum.Code]: {
+          defaultValue: {
+            type: BlockEnum.Code,
+            title: 'Code',
+            desc: '',
+          },
+          metaData: {
+            isSingleton: false,
+          },
+        },
+      }
+    })
+
+    it('preserves the original title when the destination canvas has no conflict', async () => {
+      currentNodes = [
+        createNode({
+          id: 'existing-node',
+          data: {
+            type: BlockEnum.Code,
+            title: 'Existing',
+            desc: '',
+          },
+        }),
+      ]
+      currentEdges = []
+      rfState.nodes = currentNodes as unknown as typeof rfState.nodes
+      rfState.edges = currentEdges as unknown as typeof rfState.edges
+
+      const { result, store } = renderWorkflowHook(() => useNodesInteractions(), {
+        historyStore: {
+          nodes: currentNodes,
+          edges: currentEdges,
+        },
+      })
+
+      store.setState({
+        clipboardElements: [
+          createNode({
+            id: 'clipboard-node',
+            data: {
+              type: BlockEnum.Code,
+              title: 'Clipboard',
+              desc: '',
+            },
+          }),
+        ] as never,
+        clipboardEdges: [] as never,
+        mousePosition: {
+          pageX: 60,
+          pageY: 80,
+        } as never,
+      })
+
+      await act(async () => {
+        await result.current.handleNodesPaste()
+      })
+
+      const pastedNodes = rfState.setNodes.mock.calls.at(-1)?.[0] as Node[]
+      const newNode = pastedNodes.find(node => node.id !== 'existing-node')
+
+      expect(newNode?.data.title).toBe('Clipboard')
+    })
+
+    it('renames pasted nodes only when the destination canvas already uses the title', async () => {
+      currentNodes = [
+        createNode({
+          id: 'existing-node',
+          data: {
+            type: BlockEnum.Code,
+            title: 'Clipboard',
+            desc: '',
+          },
+        }),
+        createNode({
+          id: 'existing-node-2',
+          data: {
+            type: BlockEnum.Code,
+            title: 'Clipboard (1)',
+            desc: '',
+          },
+        }),
+      ]
+      currentEdges = []
+      rfState.nodes = currentNodes as unknown as typeof rfState.nodes
+      rfState.edges = currentEdges as unknown as typeof rfState.edges
+
+      const { result, store } = renderWorkflowHook(() => useNodesInteractions(), {
+        historyStore: {
+          nodes: currentNodes,
+          edges: currentEdges,
+        },
+      })
+
+      store.setState({
+        clipboardElements: [
+          createNode({
+            id: 'clipboard-node',
+            data: {
+              type: BlockEnum.Code,
+              title: 'Clipboard',
+              desc: '',
+            },
+          }),
+        ] as never,
+        clipboardEdges: [] as never,
+        mousePosition: {
+          pageX: 60,
+          pageY: 80,
+        } as never,
+      })
+
+      await act(async () => {
+        await result.current.handleNodesPaste()
+      })
+
+      const pastedNodes = rfState.setNodes.mock.calls.at(-1)?.[0] as Node[]
+      const newNode = pastedNodes.find(node => !currentNodes.some(existingNode => existingNode.id === node.id))
+
+      expect(newNode?.data.title).toBe('Clipboard (2)')
+    })
+  })
+
+  // A copied container can still be selected on the source canvas during same-canvas paste.
+  describe('container paste target detection', () => {
+    beforeEach(() => {
+      runtimeNodesMetaDataMap.value = {
+        [BlockEnum.Iteration]: {
+          defaultValue: {
+            type: BlockEnum.Iteration,
+            title: 'Iteration',
+            desc: '',
+            _children: [],
+          },
+          metaData: {
+            isSingleton: false,
+          },
+        },
+        [BlockEnum.Loop]: {
+          defaultValue: {
+            type: BlockEnum.Loop,
+            title: 'Loop',
+            desc: '',
+            _children: [],
+          },
+          metaData: {
+            isSingleton: false,
+          },
+        },
+      }
+    })
+
+    it.each([
+      [BlockEnum.Iteration, 'iteration-source'],
+      [BlockEnum.Loop, 'loop-source'],
+    ])('pastes a copied %s as a top-level node when the source container remains selected', async (containerType, nodeId) => {
+      currentNodes = [
+        createNode({
+          id: nodeId,
+          position: { x: 20, y: 20 },
+          selected: true,
+          data: {
+            type: containerType,
+            title: containerType === BlockEnum.Iteration ? 'Iteration' : 'Loop',
+            desc: '',
+            _children: [],
+          },
+        }),
+      ]
+      currentEdges = []
+      rfState.nodes = currentNodes as unknown as typeof rfState.nodes
+      rfState.edges = currentEdges as unknown as typeof rfState.edges
+
+      const { result, store } = renderWorkflowHook(() => useNodesInteractions(), {
+        historyStore: {
+          nodes: currentNodes,
+          edges: currentEdges,
+        },
+      })
+
+      store.setState({
+        clipboardElements: [
+          createNode({
+            id: nodeId,
+            position: { x: 120, y: 120 },
+            data: {
+              type: containerType,
+              title: containerType === BlockEnum.Iteration ? 'Iteration' : 'Loop',
+              desc: '',
+              _children: [],
+            },
+          }),
+        ] as never,
+        clipboardEdges: [] as never,
+        mousePosition: {
+          pageX: 60,
+          pageY: 80,
+        } as never,
+      })
+
+      await act(async () => {
+        await result.current.handleNodesPaste()
+      })
+
+      const pastedNodes = rfState.setNodes.mock.calls.at(-1)?.[0] as Node[]
+      const newContainer = pastedNodes.find(node => node.id !== nodeId && node.data.type === containerType)
+
+      expect(newContainer).toBeDefined()
+      expect(newContainer?.parentId).toBeUndefined()
+      expect(newContainer?.data.isInIteration).toBeFalsy()
+      expect(newContainer?.data.isInLoop).toBeFalsy()
+    })
+  })
+
+  // Nested container paste restrictions should stay aligned with available block filtering.
+  describe('nested container paste restrictions', () => {
+    const disallowedNestedPasteNodeTypes = [
+      BlockEnum.End,
+      BlockEnum.Iteration,
+      BlockEnum.Loop,
+      BlockEnum.DataSource,
+      BlockEnum.KnowledgeBase,
+      BlockEnum.HumanInput,
+    ]
+
+    const createNodeMeta = (type: BlockEnum) => ({
+      defaultValue: {
+        type,
+        title: `${type} node`,
+        desc: '',
+      },
+      metaData: {
+        isSingleton: false,
+      },
+    })
+
+    const runDisallowedPasteScenario = async (containerType: BlockEnum.Iteration | BlockEnum.Loop, nodeType: BlockEnum) => {
+      runtimeNodesMetaDataMap.value = {
+        [nodeType]: createNodeMeta(nodeType),
+      }
+
+      const containerId = `${containerType}-container`
+      currentNodes = [
+        createNode({
+          id: containerId,
+          position: { x: 20, y: 20 },
+          selected: true,
+          data: {
+            type: containerType,
+            title: containerType === BlockEnum.Iteration ? 'Iteration' : 'Loop',
+            desc: '',
+            _children: [],
+          },
+        }),
+      ]
+      currentEdges = []
+      rfState.nodes = currentNodes as unknown as typeof rfState.nodes
+      rfState.edges = currentEdges as unknown as typeof rfState.edges
+
+      const { result, store } = renderWorkflowHook(() => useNodesInteractions(), {
+        historyStore: {
+          nodes: currentNodes,
+          edges: currentEdges,
+        },
+      })
+
+      store.setState({
+        clipboardElements: [
+          createNode({
+            id: `${nodeType}-clipboard-node`,
+            position: { x: 100, y: 100 },
+            data: {
+              type: nodeType,
+              title: `${nodeType} clipboard node`,
+              desc: '',
+            },
+          }),
+        ] as never,
+        clipboardEdges: [] as never,
+        mousePosition: {
+          pageX: 60,
+          pageY: 80,
+        } as never,
+      })
+
+      await act(async () => {
+        await result.current.handleNodesPaste()
+      })
+
+      const pastedNodes = rfState.setNodes.mock.calls.at(-1)?.[0] as Node[]
+
+      expect(pastedNodes).toHaveLength(1)
+      expect(pastedNodes[0]?.id).toBe(containerId)
+      expect(pastedNodes[0]?.data._children).toEqual([])
+      expect(pastedNodes.some(node => node.data.type === nodeType && node.parentId === containerId)).toBe(false)
+    }
+
+    it.each(disallowedNestedPasteNodeTypes)(
+      'should not paste %s into an iteration container',
+      async (nodeType) => {
+        await runDisallowedPasteScenario(BlockEnum.Iteration, nodeType)
+      },
+    )
+
+    it('should not paste human-input into a loop container', async () => {
+      await runDisallowedPasteScenario(BlockEnum.Loop, BlockEnum.HumanInput)
+    })
+  })
 })
diff --git a/web/app/components/workflow/hooks/__tests__/use-panel-interactions.spec.ts b/web/app/components/workflow/hooks/__tests__/use-panel-interactions.spec.ts
index 83c21fcb6a..e6efea2870 100644
--- a/web/app/components/workflow/hooks/__tests__/use-panel-interactions.spec.ts
+++ b/web/app/components/workflow/hooks/__tests__/use-panel-interactions.spec.ts
@@ -1,11 +1,22 @@
 import type * as React from 'react'
+import { waitFor } from '@testing-library/react'
+import { createEdge, createNode } from '../../__tests__/fixtures'
 import { renderWorkflowHook } from '../../__tests__/workflow-test-env'
 import { usePanelInteractions } from '../use-panel-interactions'
 
 describe('usePanelInteractions', () => {
   let container: HTMLDivElement
+  let readTextMock: ReturnType<typeof vi.fn>
 
   beforeEach(() => {
+    readTextMock = vi.fn().mockResolvedValue('')
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: {
+        readText: readTextMock,
+      },
+    })
+
     container = document.createElement('div')
     container.id = 'workflow-container'
     container.getBoundingClientRect = vi.fn().mockReturnValue({
@@ -65,6 +76,34 @@ describe('usePanelInteractions', () => {
     }).toThrow()
   })
 
+  it('handlePaneContextMenu should sync clipboard from navigator clipboard', async () => {
+    const clipboardNode = createNode({ id: 'clipboard-node' })
+    const clipboardEdge = createEdge({
+      id: 'clipboard-edge',
+      source: clipboardNode.id,
+      target: 'target-node',
+    })
+    readTextMock.mockResolvedValue(JSON.stringify({
+      kind: 'dify-workflow-clipboard',
+      version: '0.6.0',
+      nodes: [clipboardNode],
+      edges: [clipboardEdge],
+    }))
+
+    const { result, store } = renderWorkflowHook(() => usePanelInteractions())
+
+    result.current.handlePaneContextMenu({
+      preventDefault: vi.fn(),
+      clientX: 350,
+      clientY: 250,
+    } as unknown as React.MouseEvent)
+
+    await waitFor(() => {
+      expect(store.getState().clipboardElements).toEqual([clipboardNode])
+      expect(store.getState().clipboardEdges).toEqual([clipboardEdge])
+    })
+  })
+
   it('handlePaneContextmenuCancel should clear panelMenu', () => {
     const { result, store } = renderWorkflowHook(() => usePanelInteractions(), {
       initialStoreState: { panelMenu: { top: 10, left: 20 } },
diff --git a/web/app/components/workflow/hooks/__tests__/use-shortcuts.spec.ts b/web/app/components/workflow/hooks/__tests__/use-shortcuts.spec.ts
index b3c63ff519..1769533221 100644
--- a/web/app/components/workflow/hooks/__tests__/use-shortcuts.spec.ts
+++ b/web/app/components/workflow/hooks/__tests__/use-shortcuts.spec.ts
@@ -11,10 +11,18 @@ type KeyPressRegistration = {
   }
 }
 
+type ReactFlowNodeMock = {
+  id: string
+  data: {
+    _isBundled?: boolean
+  }
+}
+
 const keyPressRegistrations = vi.hoisted<KeyPressRegistration[]>(() => [])
 const mockZoomTo = vi.hoisted(() => vi.fn())
 const mockGetZoom = vi.hoisted(() => vi.fn(() => 1))
 const mockFitView = vi.hoisted(() => vi.fn())
+const mockGetNodes = vi.hoisted(() => vi.fn<() => ReactFlowNodeMock[]>(() => []))
 const mockHandleNodesDelete = vi.hoisted(() => vi.fn())
 const mockHandleEdgeDelete = vi.hoisted(() => vi.fn())
 const mockHandleNodesCopy = vi.hoisted(() => vi.fn())
@@ -41,6 +49,7 @@ vi.mock('reactflow', () => ({
     zoomTo: mockZoomTo,
     getZoom: mockGetZoom,
     fitView: mockFitView,
+    getNodes: mockGetNodes,
   }),
 }))
 
@@ -84,6 +93,14 @@ const createKeyboardEvent = (target: HTMLElement = document.body) => ({
   target,
 }) as unknown as KeyboardEvent
 
+const createSelectionMock = (commonAncestorContainer: Node): Selection => ({
+  isCollapsed: false,
+  rangeCount: 1,
+  getRangeAt: () => ({
+    commonAncestorContainer,
+  } as unknown as Range),
+} as unknown as Selection)
+
 const findRegistration = (matcher: (registration: KeyPressRegistration) => boolean) => {
   const registration = keyPressRegistrations.find(matcher)
   expect(registration).toBeDefined()
@@ -94,6 +111,7 @@ describe('useShortcuts', () => {
   beforeEach(() => {
     keyPressRegistrations.length = 0
     vi.clearAllMocks()
+    mockGetNodes.mockReturnValue([])
   })
 
   it('deletes selected nodes and edges only outside editable inputs', () => {
@@ -141,6 +159,35 @@ describe('useShortcuts', () => {
     expect(mockHandleSyncWorkflowDraft).toHaveBeenCalledTimes(4)
   })
 
+  it('copies bundled nodes even when an incidental text selection exists outside the workflow canvas', () => {
+    const getSelectionSpy = vi.spyOn(document, 'getSelection')
+    const textContainer = document.createElement('div')
+    const selectedText = document.createElement('span')
+    selectedText.textContent = 'Selected browser text'
+    textContainer.appendChild(selectedText)
+
+    getSelectionSpy.mockReturnValue(createSelectionMock(selectedText))
+    mockGetNodes.mockReturnValue([
+      {
+        id: 'bundled-node',
+        data: {
+          _isBundled: true,
+        },
+      },
+    ])
+
+    renderWorkflowHook(() => useShortcuts())
+
+    const copyShortcut = findRegistration(registration => registration.keyFilter === 'ctrl.c' || registration.keyFilter === 'meta.c')
+    const event = createKeyboardEvent()
+    copyShortcut.handler(event)
+
+    expect(event.preventDefault).toHaveBeenCalled()
+    expect(mockHandleNodesCopy).toHaveBeenCalledTimes(1)
+
+    getSelectionSpy.mockRestore()
+  })
+
   it('dims on shift down, undims on shift up, and responds to zen toggle events', () => {
     const { unmount } = renderWorkflowHook(() => useShortcuts())
 
diff --git a/web/app/components/workflow/hooks/use-nodes-interactions.ts b/web/app/components/workflow/hooks/use-nodes-interactions.ts
index 27b13bb42c..a29c88e9cb 100644
--- a/web/app/components/workflow/hooks/use-nodes-interactions.ts
+++ b/web/app/components/workflow/hooks/use-nodes-interactions.ts
@@ -13,6 +13,7 @@ import type { LoopNodeType } from '../nodes/loop/types'
 import type { VariableAssignerNodeType } from '../nodes/variable-assigner/types'
 import type { Edge, Node, OnNodeAdd } from '../types'
 import type { RAGPipelineVariables } from '@/models/pipeline'
+import { toast } from '@langgenius/dify-ui/toast'
 import { produce } from 'immer'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -21,6 +22,7 @@ import {
   getOutgoers,
   useReactFlow,
 } from 'reactflow'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 import { collaborationManager } from '../collaboration/core/collaboration-manager'
 import {
   CUSTOM_EDGE,
@@ -48,6 +50,12 @@ import {
   getNodeCustomTypeByNodeDataType,
   getNodesConnectedSourceOrTargetHandleIdsMap,
   getTopLeftNodePosition,
+  isClipboardEdgeStructurallyValid,
+  isClipboardNodeStructurallyValid,
+  isClipboardValueCompatibleWithDefault,
+  readWorkflowClipboard,
+  sanitizeClipboardValueByDefault,
+  writeWorkflowClipboard,
 } from '../utils'
 import { useWorkflowHistoryStore } from '../workflow-history-store'
 import { useAutoGenerateWebhookUrl } from './use-auto-generate-webhook-url'
@@ -75,8 +83,62 @@ const ENTRY_NODE_WRAPPER_OFFSET = {
   y: 21, // Adjusted based on visual testing feedback
 } as const
 
+const pruneClipboardNodesWithFilteredAncestors = (
+  sourceNodes: Node[],
+  candidateNodes: Node[],
+): Node[] => {
+  const candidateNodeIds = new Set(candidateNodes.map(node => node.id))
+  const filteredRootIds = sourceNodes
+    .filter(node => !candidateNodeIds.has(node.id))
+    .map(node => node.id)
+
+  if (!filteredRootIds.length)
+    return candidateNodes
+
+  const childrenByParent = new Map<string, string[]>()
+  sourceNodes.forEach((node) => {
+    if (!node.parentId)
+      return
+
+    const children = childrenByParent.get(node.parentId) ?? []
+    children.push(node.id)
+    childrenByParent.set(node.parentId, children)
+  })
+
+  const filteredNodeIds = new Set(filteredRootIds)
+  const queue = [...filteredRootIds]
+
+  while (queue.length) {
+    const currentNodeId = queue.shift()!
+    const children = childrenByParent.get(currentNodeId) ?? []
+    children.forEach((childId) => {
+      if (filteredNodeIds.has(childId))
+        return
+
+      filteredNodeIds.add(childId)
+      queue.push(childId)
+    })
+  }
+
+  return candidateNodes.filter(node => !filteredNodeIds.has(node.id))
+}
+
+const getUniquePastedNodeTitle = (
+  sourceTitle: string,
+  reservedTitles: Set<string>,
+) => {
+  let titleCandidate = sourceTitle
+
+  while (reservedTitles.has(titleCandidate))
+    titleCandidate = genNewNodeTitleFromOld(titleCandidate)
+
+  reservedTitles.add(titleCandidate)
+  return titleCandidate
+}
+
 export const useNodesInteractions = () => {
   const { t } = useTranslation()
+  const appDslVersion = useGlobalPublicStore(s => s.systemFeatures.app_dsl_version)
   const collaborativeWorkflow = useCollaborativeWorkflow()
   const workflowStore = useWorkflowStore()
   const reactflow = useReactFlow()
@@ -445,13 +507,11 @@ export const useNodesInteractions = () => {
       }
 
       if (
-        edges.find(
-          edge =>
-            edge.source === source
-            && edge.sourceHandle === sourceHandle
-            && edge.target === target
-            && edge.targetHandle === targetHandle,
-        )
+        edges.some(edge =>
+          edge.source === source
+          && edge.sourceHandle === sourceHandle
+          && edge.target === target
+          && edge.targetHandle === targetHandle)
       ) {
         return
       }
@@ -769,9 +829,7 @@ export const useNodesInteractions = () => {
       const newEdges = produce(edges, (draft) => {
         return draft.filter(
           edge =>
-            !connectedEdges.find(
-              connectedEdge => connectedEdge.id === edge.id,
-            ),
+            !connectedEdges.some(connectedEdge => connectedEdge.id === edge.id),
         )
       })
       setEdges(newEdges)
@@ -849,7 +907,7 @@ export const useNodesInteractions = () => {
         const outgoers = getOutgoers(prevNode!, nodes, edges).sort(
           (a, b) => a.position.y - b.position.y,
         )
-        const lastOutgoer = outgoers[outgoers.length - 1]
+        const lastOutgoer = outgoers.at(-1)
 
         newNode.data._connectedTargetHandleIds
           = nodeType === BlockEnum.DataSource ? [] : [targetHandle]
@@ -1577,9 +1635,7 @@ export const useNodesInteractions = () => {
       setNodes(newNodes)
       const remainingEdges = edges.filter(
         edge =>
-          !connectedEdges.find(
-            connectedEdge => connectedEdge.id === edge.id,
-          ),
+          !connectedEdges.some(connectedEdge => connectedEdge.id === edge.id),
       )
       setEdges([...remainingEdges, ...reconnectedEdges])
       if (nodeType === BlockEnum.TriggerWebhook) {
@@ -1649,131 +1705,378 @@ export const useNodesInteractions = () => {
     [workflowStore, handleNodeSelect],
   )
 
+  const isNodeCopyable = useCallback((node: Node) => {
+    if (
+      node.type === CUSTOM_ITERATION_START_NODE
+      || node.type === CUSTOM_LOOP_START_NODE
+    ) {
+      return false
+    }
+
+    if (
+      node.data.type === BlockEnum.Start
+      || node.data.type === BlockEnum.LoopEnd
+      || node.data.type === BlockEnum.KnowledgeBase
+      || node.data.type === BlockEnum.DataSourceEmpty
+    ) {
+      return false
+    }
+
+    if (node.type === CUSTOM_NOTE_NODE)
+      return true
+
+    const nodeMeta = nodesMetaDataMap?.[node.data.type as BlockEnum]
+    if (!nodeMeta)
+      return false
+
+    const { metaData } = nodeMeta
+    return !metaData.isSingleton
+  }, [nodesMetaDataMap])
+
+  const getNodeDefaultValueForPaste = useCallback((node: Node) => {
+    if (node.type === CUSTOM_NOTE_NODE)
+      return {}
+
+    const nodeMeta = nodesMetaDataMap?.[node.data.type as BlockEnum]
+    return nodeMeta?.defaultValue
+  }, [nodesMetaDataMap])
+
   const handleNodesCopy = useCallback(
     (nodeId?: string) => {
       if (getNodesReadOnly())
         return
 
-      const { setClipboardElements } = workflowStore.getState()
-
-      const { nodes } = collaborativeWorkflow.getState()
+      const { setClipboardData } = workflowStore.getState()
+      const { nodes, edges } = collaborativeWorkflow.getState()
+      let nodesToCopy: Node[] = []
 
       if (nodeId) {
-        // If nodeId is provided, copy that specific node
-        const nodeToCopy = nodes.find(
-          node =>
-            node.id === nodeId
-            && node.data.type !== BlockEnum.Start
-            && node.type !== CUSTOM_ITERATION_START_NODE
-            && node.type !== CUSTOM_LOOP_START_NODE
-            && node.data.type !== BlockEnum.LoopEnd
-            && node.data.type !== BlockEnum.KnowledgeBase
-            && node.data.type !== BlockEnum.DataSourceEmpty,
-        )
+        const nodeToCopy = nodes.find(node => node.id === nodeId && isNodeCopyable(node))
         if (nodeToCopy)
-          setClipboardElements([nodeToCopy])
+          nodesToCopy = [nodeToCopy]
       }
       else {
-        // If no nodeId is provided, fall back to the current behavior
         const bundledNodes = nodes.filter((node) => {
           if (!node.data._isBundled)
             return false
+
+          if (!isNodeCopyable(node))
+            return false
+
           if (node.type === CUSTOM_NOTE_NODE)
             return true
-          const metaData = nodesMetaDataMap?.[node.data.type as BlockEnum]?.metaData
-          if (!metaData)
-            return false
-          if (metaData.isSingleton)
-            return false
           return !node.data.isInIteration && !node.data.isInLoop
         })
 
         if (bundledNodes.length) {
-          setClipboardElements(bundledNodes)
-          return
+          nodesToCopy = bundledNodes
         }
+        else {
+          const selectedNodes = nodes.filter(
+            node => node.data.selected && isNodeCopyable(node),
+          )
 
-        const selectedNode = nodes.find((node) => {
-          if (!node.data.selected)
-            return false
-          if (node.type === CUSTOM_NOTE_NODE)
-            return true
-          const metaData = nodesMetaDataMap?.[node.data.type as BlockEnum]?.metaData
-          if (!metaData)
-            return false
-          return !metaData.isSingleton
-        })
-
-        if (selectedNode)
-          setClipboardElements([selectedNode])
+          if (selectedNodes.length)
+            nodesToCopy = selectedNodes
+        }
       }
+
+      if (!nodesToCopy.length)
+        return
+
+      const copiedNodesMap = new Map(nodesToCopy.map(node => [node.id, node]))
+      const queue = nodesToCopy
+        .filter(node => node.data.type === BlockEnum.Iteration || node.data.type === BlockEnum.Loop)
+        .map(node => node.id)
+
+      while (queue.length) {
+        const parentId = queue.shift()!
+        nodes.forEach((node) => {
+          if (node.parentId !== parentId || copiedNodesMap.has(node.id))
+            return
+
+          copiedNodesMap.set(node.id, node)
+          if (node.data.type === BlockEnum.Iteration || node.data.type === BlockEnum.Loop)
+            queue.push(node.id)
+        })
+      }
+
+      const copiedNodes = [...copiedNodesMap.values()]
+      const copiedNodeIds = new Set(copiedNodes.map(node => node.id))
+      const copiedEdges = edges.filter(
+        edge => copiedNodeIds.has(edge.source) && copiedNodeIds.has(edge.target),
+      )
+
+      const clipboardData = {
+        nodes: copiedNodes,
+        edges: copiedEdges,
+      }
+
+      setClipboardData(clipboardData)
+      void writeWorkflowClipboard(clipboardData, appDslVersion).catch(() => {})
     },
-    [getNodesReadOnly, collaborativeWorkflow, workflowStore],
+    [getNodesReadOnly, workflowStore, collaborativeWorkflow, isNodeCopyable, appDslVersion],
   )
 
-  const handleNodesPaste = useCallback(() => {
+  const handleNodesPaste = useCallback(async () => {
     if (getNodesReadOnly())
       return
 
-    const { clipboardElements, mousePosition } = workflowStore.getState()
+    const {
+      clipboardElements: storeClipboardElements,
+      clipboardEdges: storeClipboardEdges,
+      mousePosition,
+      setClipboardData,
+    } = workflowStore.getState()
+    const clipboardData = await readWorkflowClipboard(appDslVersion)
+    const hasSystemClipboard = clipboardData.nodes.length > 0
+    const shouldRunCompatibilityCheck = hasSystemClipboard && clipboardData.isVersionMismatch
+
+    const clipboardElements = hasSystemClipboard
+      ? clipboardData.nodes
+      : storeClipboardElements
+    const clipboardEdges = hasSystemClipboard
+      ? clipboardData.edges
+      : storeClipboardEdges
+
+    if (hasSystemClipboard)
+      setClipboardData(clipboardData)
+
+    const validatedClipboardElements = clipboardElements.filter(isClipboardNodeStructurallyValid)
+    const validatedClipboardEdges = clipboardEdges.filter(isClipboardEdgeStructurallyValid)
+
+    if (!validatedClipboardElements.length)
+      return
 
     const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
+    const reservedNodeTitles = new Set(
+      nodes
+        .map(node => node.data.title)
+        .filter((title): title is string => typeof title === 'string'),
+    )
 
     const nodesToPaste: Node[] = []
     const edgesToPaste: Edge[] = []
 
-    if (clipboardElements.length) {
-      const { x, y } = getTopLeftNodePosition(clipboardElements)
-      const { screenToFlowPosition } = reactflow
-      const currentPosition = screenToFlowPosition({
-        x: mousePosition.pageX,
-        y: mousePosition.pageY,
-      })
-      const offsetX = currentPosition.x - x
-      const offsetY = currentPosition.y - y
-      let idMapping: Record<string, string> = {}
-      const pastedNodesMap: Record<string, Node> = {}
-      const parentChildrenToAppend: { parentId: string, childId: string, childType: BlockEnum }[] = []
-      clipboardElements.forEach((nodeToPaste, index) => {
-        const nodeType = nodeToPaste.data.type
-        const nodeDefaultValue = nodeToPaste.type !== CUSTOM_NOTE_NODE
-          ? nodesMetaDataMap?.[nodeType]?.defaultValue
-          : undefined
+    let compatibleClipboardElements = validatedClipboardElements.filter((node) => {
+      if (node.type === CUSTOM_NOTE_NODE)
+        return true
 
-        const { newNode, newIterationStartNode, newLoopStartNode }
-          = generateNewNode({
-            type: nodeToPaste.type,
-            data: {
-              ...(nodeDefaultValue || {}),
-              ...nodeToPaste.data,
-              selected: false,
-              _isBundled: false,
-              _connectedSourceHandleIds: [],
-              _connectedTargetHandleIds: [],
-              _dimmed: false,
-              title: genNewNodeTitleFromOld(nodeToPaste.data.title),
-            },
-            position: {
-              x: nodeToPaste.position.x + offsetX,
-              y: nodeToPaste.position.y + offsetY,
-            },
-            extent: nodeToPaste.extent,
-            zIndex: nodeToPaste.zIndex,
+      const nodeDefaultValue = getNodeDefaultValueForPaste(node)
+      if (!nodeDefaultValue)
+        return false
+
+      if (
+        shouldRunCompatibilityCheck
+        && !isClipboardValueCompatibleWithDefault(nodeDefaultValue, node.data)
+      ) {
+        return false
+      }
+
+      return true
+    })
+
+    if (shouldRunCompatibilityCheck) {
+      compatibleClipboardElements = pruneClipboardNodesWithFilteredAncestors(
+        validatedClipboardElements,
+        compatibleClipboardElements,
+      )
+    }
+
+    const compatibleClipboardNodeIds = new Set(
+      compatibleClipboardElements.map(node => node.id),
+    )
+    const filteredNodeCount = shouldRunCompatibilityCheck
+      ? validatedClipboardElements.length - compatibleClipboardElements.length
+      : 0
+    const filteredEdgeCount = shouldRunCompatibilityCheck
+      ? validatedClipboardEdges.filter(edge =>
+        !compatibleClipboardNodeIds.has(edge.source)
+        || !compatibleClipboardNodeIds.has(edge.target),
+      ).length
+      : 0
+
+    if (
+      shouldRunCompatibilityCheck
+      && (filteredNodeCount > 0 || filteredEdgeCount > 0)
+    ) {
+      toast.warning(t('common.clipboardVersionCompatibilityWarning', {
+        ns: 'workflow',
+      }))
+    }
+
+    if (!compatibleClipboardElements.length)
+      return
+
+    const rootClipboardNodes = compatibleClipboardElements.filter(
+      node => !node.parentId || !compatibleClipboardNodeIds.has(node.parentId),
+    )
+    const positionReferenceNodes = rootClipboardNodes.length
+      ? rootClipboardNodes
+      : compatibleClipboardElements
+    const { x, y } = getTopLeftNodePosition(positionReferenceNodes)
+    const { screenToFlowPosition } = reactflow
+    const currentPosition = screenToFlowPosition({
+      x: mousePosition.pageX,
+      y: mousePosition.pageY,
+    })
+    const offsetX = currentPosition.x - x
+    const offsetY = currentPosition.y - y
+    let idMapping: Record<string, string> = {}
+    const pastedNodesMap: Record<string, Node> = {}
+    const parentChildrenToAppend: { parentId: string, childId: string, childType: BlockEnum }[] = []
+    const selectedNodes = nodes.filter(node => node.selected)
+    // Keep this list aligned with availableBlocksFilter(inContainer)
+    // in use-available-blocks.ts.
+    const commonNestedDisallowPasteNodes = [
+      BlockEnum.End,
+      BlockEnum.Iteration,
+      BlockEnum.Loop,
+      BlockEnum.DataSource,
+      BlockEnum.KnowledgeBase,
+      BlockEnum.HumanInput,
+    ]
+    // Same-canvas copy keeps the source container selected, so only treat a
+    // selected container as the paste target when it is not part of the clipboard.
+    const selectedContainerNode = selectedNodes.length === 1
+      && (selectedNodes[0]?.data.type === BlockEnum.Iteration || selectedNodes[0]?.data.type === BlockEnum.Loop)
+      && !compatibleClipboardNodeIds.has(selectedNodes[0].id)
+      ? selectedNodes[0]
+      : undefined
+
+    rootClipboardNodes.forEach((nodeToPaste, index) => {
+      const nodeDefaultValue = getNodeDefaultValueForPaste(nodeToPaste)
+      if (nodeToPaste.type !== CUSTOM_NOTE_NODE && !nodeDefaultValue)
+        return
+
+      if (selectedContainerNode && commonNestedDisallowPasteNodes.includes(nodeToPaste.data.type))
+        return
+
+      const mergedData = shouldRunCompatibilityCheck
+        ? sanitizeClipboardValueByDefault(nodeDefaultValue ?? {}, nodeToPaste.data) as Record<string, unknown>
+        : {
+            ...(nodeToPaste.type !== CUSTOM_NOTE_NODE ? nodeDefaultValue : {}),
+            ...nodeToPaste.data,
+          }
+      const sourceTitle = typeof mergedData.title === 'string'
+        ? mergedData.title
+        : typeof nodeToPaste.data.title === 'string'
+          ? nodeToPaste.data.title
+          : 'Node'
+      const sourceDesc = typeof mergedData.desc === 'string'
+        ? mergedData.desc
+        : typeof nodeToPaste.data.desc === 'string'
+          ? nodeToPaste.data.desc
+          : ''
+
+      const { newNode, newIterationStartNode, newLoopStartNode }
+        = generateNewNode({
+          type: nodeToPaste.type,
+          data: {
+            ...mergedData,
+            type: nodeToPaste.data.type,
+            desc: sourceDesc,
+            selected: false,
+            _isBundled: false,
+            _connectedSourceHandleIds: [],
+            _connectedTargetHandleIds: [],
+            _dimmed: false,
+            isInIteration: false,
+            iteration_id: undefined,
+            isInLoop: false,
+            loop_id: undefined,
+            title: getUniquePastedNodeTitle(sourceTitle, reservedNodeTitles),
+          },
+          position: {
+            x: nodeToPaste.position.x + offsetX,
+            y: nodeToPaste.position.y + offsetY,
+          },
+          extent: nodeToPaste.extent,
+          zIndex: nodeToPaste.zIndex,
+        })
+      newNode.id = newNode.id + index
+
+      let newChildren: Node[] = []
+      if (nodeToPaste.data.type === BlockEnum.Iteration) {
+        if (newIterationStartNode) {
+          newIterationStartNode.parentId = newNode.id
+          const iterationNodeData = newNode.data as IterationNodeType
+          iterationNodeData.start_node_id = newIterationStartNode.id
+        }
+
+        const oldIterationStartNodeInClipboard = compatibleClipboardElements.find(
+          n =>
+            n.parentId === nodeToPaste.id
+            && n.type === CUSTOM_ITERATION_START_NODE,
+        )
+        if (oldIterationStartNodeInClipboard && newIterationStartNode)
+          idMapping[oldIterationStartNodeInClipboard.id] = newIterationStartNode.id
+
+        const copiedIterationChildren = compatibleClipboardElements.filter(
+          n =>
+            n.parentId === nodeToPaste.id
+            && n.type !== CUSTOM_ITERATION_START_NODE,
+        )
+        if (copiedIterationChildren.length) {
+          copiedIterationChildren.forEach((child, childIndex) => {
+            const childType = child.data.type
+            const childDefaultValue = getNodeDefaultValueForPaste(child)
+            if (child.type !== CUSTOM_NOTE_NODE && !childDefaultValue)
+              return
+
+            const mergedChildData = shouldRunCompatibilityCheck
+              ? sanitizeClipboardValueByDefault(childDefaultValue ?? {}, child.data) as Record<string, unknown>
+              : {
+                  ...(child.type !== CUSTOM_NOTE_NODE ? childDefaultValue : {}),
+                  ...child.data,
+                }
+            const childSourceTitle = typeof mergedChildData.title === 'string'
+              ? mergedChildData.title
+              : typeof child.data.title === 'string'
+                ? child.data.title
+                : 'Node'
+            const childSourceDesc = typeof mergedChildData.desc === 'string'
+              ? mergedChildData.desc
+              : typeof child.data.desc === 'string'
+                ? child.data.desc
+                : ''
+
+            const { newNode: newChild } = generateNewNode({
+              type: child.type,
+              data: {
+                ...mergedChildData,
+                desc: childSourceDesc,
+                selected: false,
+                _isBundled: false,
+                _connectedSourceHandleIds: [],
+                _connectedTargetHandleIds: [],
+                _dimmed: false,
+                title: getUniquePastedNodeTitle(childSourceTitle, reservedNodeTitles),
+                isInIteration: true,
+                iteration_id: newNode.id,
+                isInLoop: false,
+                loop_id: undefined,
+                type: childType,
+              },
+              position: child.position,
+              positionAbsolute: child.positionAbsolute,
+              parentId: newNode.id,
+              extent: child.extent,
+              zIndex: ITERATION_CHILDREN_Z_INDEX,
+            })
+            newChild.id = `${newNode.id}${newChild.id + childIndex}`
+            idMapping[child.id] = newChild.id
+            newChildren.push(newChild)
           })
-        newNode.id = newNode.id + index
-        // This new node is movable and can be placed anywhere
-        let newChildren: Node[] = []
-        if (nodeToPaste.data.type === BlockEnum.Iteration) {
-          newIterationStartNode!.parentId = newNode.id;
-          (newNode.data as IterationNodeType).start_node_id
-            = newIterationStartNode!.id
-
+        }
+        else {
           const oldIterationStartNode = nodes.find(
             n =>
               n.parentId === nodeToPaste.id
               && n.type === CUSTOM_ITERATION_START_NODE,
           )
-          idMapping[oldIterationStartNode!.id] = newIterationStartNode!.id
+          if (oldIterationStartNode && newIterationStartNode)
+            idMapping[oldIterationStartNode.id] = newIterationStartNode.id
 
           const { copyChildren, newIdMapping }
             = handleNodeIterationChildrenCopy(
@@ -1783,24 +2086,97 @@ export const useNodesInteractions = () => {
             )
           newChildren = copyChildren
           idMapping = newIdMapping
-          newChildren.forEach((child) => {
-            newNode.data._children?.push({
-              nodeId: child.id,
-              nodeType: child.data.type,
-            })
-          })
-          newChildren.push(newIterationStartNode!)
         }
-        else if (nodeToPaste.data.type === BlockEnum.Loop) {
-          newLoopStartNode!.parentId = newNode.id;
-          (newNode.data as LoopNodeType).start_node_id = newLoopStartNode!.id
 
+        newChildren.forEach((child) => {
+          newNode.data._children?.push({
+            nodeId: child.id,
+            nodeType: child.data.type,
+          })
+        })
+        if (newIterationStartNode)
+          newChildren.push(newIterationStartNode)
+      }
+      else if (nodeToPaste.data.type === BlockEnum.Loop) {
+        if (newLoopStartNode) {
+          newLoopStartNode.parentId = newNode.id
+          const loopNodeData = newNode.data as LoopNodeType
+          loopNodeData.start_node_id = newLoopStartNode.id
+        }
+
+        const oldLoopStartNodeInClipboard = compatibleClipboardElements.find(
+          n =>
+            n.parentId === nodeToPaste.id
+            && n.type === CUSTOM_LOOP_START_NODE,
+        )
+        if (oldLoopStartNodeInClipboard && newLoopStartNode)
+          idMapping[oldLoopStartNodeInClipboard.id] = newLoopStartNode.id
+
+        const copiedLoopChildren = compatibleClipboardElements.filter(
+          n =>
+            n.parentId === nodeToPaste.id
+            && n.type !== CUSTOM_LOOP_START_NODE,
+        )
+        if (copiedLoopChildren.length) {
+          copiedLoopChildren.forEach((child, childIndex) => {
+            const childType = child.data.type
+            const childDefaultValue = getNodeDefaultValueForPaste(child)
+            if (child.type !== CUSTOM_NOTE_NODE && !childDefaultValue)
+              return
+
+            const mergedChildData = shouldRunCompatibilityCheck
+              ? sanitizeClipboardValueByDefault(childDefaultValue ?? {}, child.data) as Record<string, unknown>
+              : {
+                  ...(child.type !== CUSTOM_NOTE_NODE ? childDefaultValue : {}),
+                  ...child.data,
+                }
+            const childSourceTitle = typeof mergedChildData.title === 'string'
+              ? mergedChildData.title
+              : typeof child.data.title === 'string'
+                ? child.data.title
+                : 'Node'
+            const childSourceDesc = typeof mergedChildData.desc === 'string'
+              ? mergedChildData.desc
+              : typeof child.data.desc === 'string'
+                ? child.data.desc
+                : ''
+
+            const { newNode: newChild } = generateNewNode({
+              type: child.type,
+              data: {
+                ...mergedChildData,
+                desc: childSourceDesc,
+                selected: false,
+                _isBundled: false,
+                _connectedSourceHandleIds: [],
+                _connectedTargetHandleIds: [],
+                _dimmed: false,
+                title: getUniquePastedNodeTitle(childSourceTitle, reservedNodeTitles),
+                isInIteration: false,
+                iteration_id: undefined,
+                isInLoop: true,
+                loop_id: newNode.id,
+                type: childType,
+              },
+              position: child.position,
+              positionAbsolute: child.positionAbsolute,
+              parentId: newNode.id,
+              extent: child.extent,
+              zIndex: LOOP_CHILDREN_Z_INDEX,
+            })
+            newChild.id = `${newNode.id}${newChild.id + childIndex}`
+            idMapping[child.id] = newChild.id
+            newChildren.push(newChild)
+          })
+        }
+        else {
           const oldLoopStartNode = nodes.find(
             n =>
               n.parentId === nodeToPaste.id
               && n.type === CUSTOM_LOOP_START_NODE,
           )
-          idMapping[oldLoopStartNode!.id] = newLoopStartNode!.id
+          if (oldLoopStartNode && newLoopStartNode)
+            idMapping[oldLoopStartNode.id] = newLoopStartNode.id
 
           const { copyChildren, newIdMapping }
             = handleNodeLoopChildrenCopy(
@@ -1810,148 +2186,124 @@ export const useNodesInteractions = () => {
             )
           newChildren = copyChildren
           idMapping = newIdMapping
-          newChildren.forEach((child) => {
-            newNode.data._children?.push({
-              nodeId: child.id,
-              nodeType: child.data.type,
-            })
+        }
+
+        newChildren.forEach((child) => {
+          newNode.data._children?.push({
+            nodeId: child.id,
+            nodeType: child.data.type,
           })
-          newChildren.push(newLoopStartNode!)
-        }
-        else {
-          // Paste a single regular node. Loop/Iteration nodes are handled above.
-          const selectedNode = nodes.find(node => node.selected)
-          let pastedToNestedBlock = false
-
-          if (selectedNode) {
-            // Keep this list aligned with availableBlocksFilter(inContainer)
-            // in use-available-blocks.ts.
-            const commonNestedDisallowPasteNodes = [
-              BlockEnum.End,
-              BlockEnum.Iteration,
-              BlockEnum.Loop,
-              BlockEnum.DataSource,
-              BlockEnum.KnowledgeBase,
-              BlockEnum.HumanInput,
-            ]
-
-            if (commonNestedDisallowPasteNodes.includes(nodeToPaste.data.type))
-              return
-
-            // If a Loop/Iteration container is selected, paste into it as a child.
-            if (selectedNode.data.type === BlockEnum.Iteration || selectedNode.data.type === BlockEnum.Loop) {
-              const isIteration = selectedNode.data.type === BlockEnum.Iteration
-
-              newNode.data.isInIteration = isIteration
-              newNode.data.iteration_id = isIteration ? selectedNode.id : undefined
-              newNode.data.isInLoop = !isIteration
-              newNode.data.loop_id = !isIteration ? selectedNode.id : undefined
-
-              newNode.parentId = selectedNode.id
-              newNode.zIndex = isIteration ? ITERATION_CHILDREN_Z_INDEX : LOOP_CHILDREN_Z_INDEX
-              newNode.positionAbsolute = {
-                x: newNode.position.x,
-                y: newNode.position.y,
-              }
-              // Rebase position into the selected container coordinate system.
-              newNode.position = getNestedNodePosition(newNode, selectedNode)
-
-              // Mirror native add behavior by appending parent._children.
-              parentChildrenToAppend.push({ parentId: selectedNode.id, childId: newNode.id, childType: newNode.data.type })
-
-              pastedToNestedBlock = true
-            }
-          }
-
-          // Clear loop/iteration metadata when pasting outside nested blocks (fixes #29835)
-          // This ensures nodes copied from inside Loop/Iteration are properly independent
-          // when pasted outside
-          if (!pastedToNestedBlock) {
-            newNode.data.isInLoop = false
-            newNode.data.loop_id = undefined
-            newNode.data.isInIteration = false
-            newNode.data.iteration_id = undefined
-            newNode.parentId = undefined
-          }
-        }
-
-        idMapping[nodeToPaste.id] = newNode.id
-        nodesToPaste.push(newNode)
-        pastedNodesMap[newNode.id] = newNode
-
-        if (newChildren.length) {
-          newChildren.forEach((child) => {
-            pastedNodesMap[child.id] = child
-          })
-          nodesToPaste.push(...newChildren)
-        }
-      })
-
-      // Rebuild edges where both endpoints are part of the pasted set.
-      edges.forEach((edge) => {
-        const sourceId = idMapping[edge.source]
-        const targetId = idMapping[edge.target]
-
-        if (sourceId && targetId) {
-          const sourceNode = pastedNodesMap[sourceId]
-          const targetNode = pastedNodesMap[targetId]
-          const parentNode = sourceNode?.parentId && sourceNode.parentId === targetNode?.parentId
-            ? pastedNodesMap[sourceNode.parentId] ?? nodes.find(n => n.id === sourceNode.parentId)
-            : null
-          const isInIteration = parentNode?.data.type === BlockEnum.Iteration
-          const isInLoop = parentNode?.data.type === BlockEnum.Loop
-          const newEdge: Edge = {
-            ...edge,
-            id: `${sourceId}-${edge.sourceHandle}-${targetId}-${edge.targetHandle}`,
-            source: sourceId,
-            target: targetId,
-            data: {
-              ...edge.data,
-              isInIteration,
-              iteration_id: isInIteration ? parentNode?.id : undefined,
-              isInLoop,
-              loop_id: isInLoop ? parentNode?.id : undefined,
-              _connectedNodeIsSelected: false,
-            },
-            zIndex: parentNode
-              ? isInIteration
-                ? ITERATION_CHILDREN_Z_INDEX
-                : isInLoop
-                  ? LOOP_CHILDREN_Z_INDEX
-                  : 0
-              : 0,
-          }
-          edgesToPaste.push(newEdge)
-        }
-      })
-
-      const newNodes = produce(nodes, (draft: Node[]) => {
-        parentChildrenToAppend.forEach(({ parentId, childId, childType }) => {
-          const p = draft.find(n => n.id === parentId)
-          if (p) {
-            p.data._children?.push({ nodeId: childId, nodeType: childType })
-          }
         })
-        draft.push(...nodesToPaste)
-      })
+        if (newLoopStartNode)
+          newChildren.push(newLoopStartNode)
+      }
+      else if (selectedContainerNode) {
+        if (selectedContainerNode.data.type === BlockEnum.Iteration || selectedContainerNode.data.type === BlockEnum.Loop) {
+          const isIteration = selectedContainerNode.data.type === BlockEnum.Iteration
 
-      setNodes(newNodes)
-      setEdges([...edges, ...edgesToPaste])
-      saveStateToHistory(WorkflowHistoryEvent.NodePaste, {
-        nodeId: nodesToPaste?.[0]?.id,
+          newNode.data.isInIteration = isIteration
+          newNode.data.iteration_id = isIteration ? selectedContainerNode.id : undefined
+          newNode.data.isInLoop = !isIteration
+          newNode.data.loop_id = !isIteration ? selectedContainerNode.id : undefined
+
+          newNode.parentId = selectedContainerNode.id
+          newNode.zIndex = isIteration ? ITERATION_CHILDREN_Z_INDEX : LOOP_CHILDREN_Z_INDEX
+          newNode.positionAbsolute = {
+            x: newNode.position.x,
+            y: newNode.position.y,
+          }
+          newNode.position = getNestedNodePosition(newNode, selectedContainerNode)
+          parentChildrenToAppend.push({
+            parentId: selectedContainerNode.id,
+            childId: newNode.id,
+            childType: newNode.data.type,
+          })
+        }
+      }
+
+      idMapping[nodeToPaste.id] = newNode.id
+      nodesToPaste.push(newNode)
+      pastedNodesMap[newNode.id] = newNode
+
+      if (newChildren.length) {
+        newChildren.forEach((child) => {
+          pastedNodesMap[child.id] = child
+        })
+        nodesToPaste.push(...newChildren)
+      }
+    })
+
+    const sourceEdges = validatedClipboardEdges
+
+    sourceEdges.forEach((edge) => {
+      const sourceId = idMapping[edge.source]
+      const targetId = idMapping[edge.target]
+
+      if (sourceId && targetId) {
+        const sourceNode = pastedNodesMap[sourceId]
+        const targetNode = pastedNodesMap[targetId]
+        if (!sourceNode || !targetNode)
+          return
+
+        const parentNode = sourceNode.parentId && sourceNode.parentId === targetNode.parentId
+          ? pastedNodesMap[sourceNode.parentId] ?? nodes.find(n => n.id === sourceNode.parentId)
+          : null
+        const isInIteration = parentNode?.data.type === BlockEnum.Iteration
+        const isInLoop = parentNode?.data.type === BlockEnum.Loop
+        const newEdge: Edge = {
+          ...edge,
+          id: `${sourceId}-${edge.sourceHandle}-${targetId}-${edge.targetHandle}`,
+          source: sourceId,
+          target: targetId,
+          data: {
+            ...(edge.data || {}),
+            sourceType: sourceNode.data.type,
+            targetType: targetNode.data.type,
+            isInIteration,
+            iteration_id: isInIteration ? parentNode?.id : undefined,
+            isInLoop,
+            loop_id: isInLoop ? parentNode?.id : undefined,
+            _connectedNodeIsSelected: false,
+          },
+          zIndex: parentNode
+            ? isInIteration
+              ? ITERATION_CHILDREN_Z_INDEX
+              : isInLoop
+                ? LOOP_CHILDREN_Z_INDEX
+                : 0
+            : 0,
+        }
+        edgesToPaste.push(newEdge)
+      }
+    })
+
+    const newNodes = produce(nodes, (draft: Node[]) => {
+      parentChildrenToAppend.forEach(({ parentId, childId, childType }) => {
+        const p = draft.find(n => n.id === parentId)
+        if (p)
+          p.data._children?.push({ nodeId: childId, nodeType: childType })
       })
-      handleSyncWorkflowDraft()
-    }
+      draft.push(...nodesToPaste)
+    })
+
+    setNodes(newNodes)
+    setEdges([...edges, ...edgesToPaste])
+    saveStateToHistory(WorkflowHistoryEvent.NodePaste, {
+      nodeId: nodesToPaste?.[0]?.id,
+    })
+    handleSyncWorkflowDraft()
   }, [
     getNodesReadOnly,
     workflowStore,
     collaborativeWorkflow,
     reactflow,
+    t,
     saveStateToHistory,
     handleSyncWorkflowDraft,
     handleNodeIterationChildrenCopy,
     handleNodeLoopChildrenCopy,
-    nodesMetaDataMap,
+    getNodeDefaultValueForPaste,
+    appDslVersion,
   ])
 
   const handleNodesDuplicate = useCallback(
@@ -2091,9 +2443,7 @@ export const useNodesInteractions = () => {
       const newEdges = produce(edges, (draft) => {
         return draft.filter(
           edge =>
-            !connectedEdges.find(
-              connectedEdge => connectedEdge.id === edge.id,
-            ),
+            !connectedEdges.some(connectedEdge => connectedEdge.id === edge.id),
         )
       })
       setEdges(newEdges)
diff --git a/web/app/components/workflow/hooks/use-panel-interactions.ts b/web/app/components/workflow/hooks/use-panel-interactions.ts
index 469a7abdee..37120068d4 100644
--- a/web/app/components/workflow/hooks/use-panel-interactions.ts
+++ b/web/app/components/workflow/hooks/use-panel-interactions.ts
@@ -1,12 +1,23 @@
 import type { MouseEvent } from 'react'
 import { useCallback } from 'react'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useWorkflowStore } from '../store'
+import { readWorkflowClipboard } from '../utils'
 
 export const usePanelInteractions = () => {
   const workflowStore = useWorkflowStore()
+  const appDslVersion = useGlobalPublicStore(s => s.systemFeatures.app_dsl_version)
 
   const handlePaneContextMenu = useCallback((e: MouseEvent) => {
     e.preventDefault()
+    // Sync the latest system clipboard into the workflow store before opening
+    // the pane menu because "Paste here" is disabled when no compatible node
+    // copy exists, including cross-app copies written outside this tab.
+    void readWorkflowClipboard(appDslVersion).then(({ nodes, edges }) => {
+      if (nodes.length)
+        workflowStore.getState().setClipboardData({ nodes, edges })
+    })
+
     const container = document.querySelector('#workflow-container')
     const { x, y } = container!.getBoundingClientRect()
     workflowStore.setState({
@@ -18,7 +29,7 @@ export const usePanelInteractions = () => {
         left: e.clientX - x,
       },
     })
-  }, [workflowStore])
+  }, [workflowStore, appDslVersion])
 
   const handlePaneContextmenuCancel = useCallback(() => {
     workflowStore.setState({
diff --git a/web/app/components/workflow/hooks/use-shortcuts.ts b/web/app/components/workflow/hooks/use-shortcuts.ts
index 8ba7fa4602..e4100908ff 100644
--- a/web/app/components/workflow/hooks/use-shortcuts.ts
+++ b/web/app/components/workflow/hooks/use-shortcuts.ts
@@ -46,6 +46,7 @@ export const useShortcuts = (): void => {
     zoomTo,
     getZoom,
     fitView,
+    getNodes,
   } = useReactFlow()
 
   // Zoom out to a minimum of 0.25 for shortcut
@@ -67,9 +68,14 @@ export const useShortcuts = (): void => {
   }, [])
 
   const shouldHandleCopy = useCallback(() => {
+    // Box selection can leave incidental DOM text selection behind while the
+    // workflow selection itself lives on node.data._isBundled.
+    if (getNodes().some(node => node.data._isBundled))
+      return true
+
     const selection = document.getSelection()
-    return !selection || selection.isCollapsed
-  }, [])
+    return !selection || selection.isCollapsed || !selection.rangeCount
+  }, [getNodes])
 
   useKeyPress(['delete', 'backspace'], (e) => {
     if (shouldHandleShortcut(e)) {
diff --git a/web/app/components/workflow/store/__tests__/workflow-store.spec.ts b/web/app/components/workflow/store/__tests__/workflow-store.spec.ts
index 6edc3dc316..6cebc4e23c 100644
--- a/web/app/components/workflow/store/__tests__/workflow-store.spec.ts
+++ b/web/app/components/workflow/store/__tests__/workflow-store.spec.ts
@@ -1,6 +1,7 @@
 import type { Shape, SliceFromInjection } from '../workflow'
 import { renderHook } from '@testing-library/react'
 import { BlockEnum } from '@/app/components/workflow/types'
+import { createEdge, createNode } from '../../__tests__/fixtures'
 import { createTestWorkflowStore, renderWorkflowHook } from '../../__tests__/workflow-test-env'
 import { createWorkflowStore, useStore, useWorkflowStore } from '../workflow'
 
@@ -51,6 +52,7 @@ describe('createWorkflowStore', () => {
       ['listeningTriggerNodeIds', 'setListeningTriggerNodeIds', ['n1', 'n2']],
       ['listeningTriggerIsAll', 'setListeningTriggerIsAll', true],
       ['clipboardElements', 'setClipboardElements', []],
+      ['clipboardEdges', 'setClipboardEdges', []],
       ['selection', 'setSelection', { x1: 0, y1: 0, x2: 100, y2: 100 }],
       ['bundleNodeSize', 'setBundleNodeSize', { width: 200, height: 100 }],
       ['mousePosition', 'setMousePosition', { pageX: 10, pageY: 20, elementX: 5, elementY: 15 }],
@@ -68,6 +70,17 @@ describe('createWorkflowStore', () => {
       expect(store.getState().controlMode).toBe('pointer')
       expect(localStorage.setItem).toHaveBeenCalledWith('workflow-operation-mode', 'pointer')
     })
+
+    it('should update clipboard nodes and edges with setClipboardData', () => {
+      const store = createStore()
+      const nodes = [createNode({ id: 'n-1' })]
+      const edges = [createEdge({ id: 'e-1', source: 'n-1', target: 'n-2' })]
+
+      store.getState().setClipboardData({ nodes, edges })
+
+      expect(store.getState().clipboardElements).toEqual(nodes)
+      expect(store.getState().clipboardEdges).toEqual(edges)
+    })
   })
 
   describe('Node Slice Setters', () => {
diff --git a/web/app/components/workflow/store/workflow/workflow-slice.ts b/web/app/components/workflow/store/workflow/workflow-slice.ts
index c3b41f06a2..58e3debc63 100644
--- a/web/app/components/workflow/store/workflow/workflow-slice.ts
+++ b/web/app/components/workflow/store/workflow/workflow-slice.ts
@@ -1,5 +1,6 @@
 import type { StateCreator } from 'zustand'
 import type {
+  Edge,
   Node,
   TriggerNodeType,
   WorkflowRunningData,
@@ -34,7 +35,10 @@ export type WorkflowSliceShape = {
   listeningTriggerIsAll: boolean
   setListeningTriggerIsAll: (isAll: boolean) => void
   clipboardElements: Node[]
+  clipboardEdges: Edge[]
   setClipboardElements: (clipboardElements: Node[]) => void
+  setClipboardEdges: (clipboardEdges: Edge[]) => void
+  setClipboardData: (clipboardData: { nodes: Node[], edges: Edge[] }) => void
   selection: null | { x1: number, y1: number, x2: number, y2: number }
   setSelection: (selection: WorkflowSliceShape['selection']) => void
   bundleNodeSize: { width: number, height: number } | null
@@ -75,7 +79,15 @@ export const createWorkflowSlice: StateCreator<WorkflowSliceShape> = set => ({
   listeningTriggerIsAll: false,
   setListeningTriggerIsAll: isAll => set(() => ({ listeningTriggerIsAll: isAll })),
   clipboardElements: [],
+  clipboardEdges: [],
   setClipboardElements: clipboardElements => set(() => ({ clipboardElements })),
+  setClipboardEdges: clipboardEdges => set(() => ({ clipboardEdges })),
+  setClipboardData: ({ nodes, edges }) => {
+    set(() => ({
+      clipboardElements: nodes,
+      clipboardEdges: edges,
+    }))
+  },
   selection: null,
   setSelection: selection => set(() => ({ selection })),
   bundleNodeSize: null,
diff --git a/web/app/components/workflow/utils/__tests__/clipboard.spec.ts b/web/app/components/workflow/utils/__tests__/clipboard.spec.ts
new file mode 100644
index 0000000000..ccb3f426d4
--- /dev/null
+++ b/web/app/components/workflow/utils/__tests__/clipboard.spec.ts
@@ -0,0 +1,101 @@
+import { createEdge, createNode } from '../../__tests__/fixtures'
+import {
+  parseWorkflowClipboardText,
+  readWorkflowClipboard,
+  stringifyWorkflowClipboardData,
+  writeWorkflowClipboard,
+} from '../clipboard'
+
+describe('workflow clipboard storage', () => {
+  const currentVersion = '0.6.0'
+  const readTextMock = vi.fn<() => Promise<string>>()
+  const writeTextMock = vi.fn<(text: string) => Promise<void>>()
+
+  beforeEach(() => {
+    readTextMock.mockReset()
+    writeTextMock.mockReset()
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: {
+        readText: readTextMock,
+        writeText: writeTextMock,
+      },
+    })
+  })
+
+  it('should return empty clipboard data when clipboard text is empty', async () => {
+    readTextMock.mockResolvedValue('')
+
+    await expect(readWorkflowClipboard(currentVersion)).resolves.toEqual({
+      nodes: [],
+      edges: [],
+      isVersionMismatch: false,
+    })
+  })
+
+  it('should write and read clipboard data', async () => {
+    const nodes = [createNode({ id: 'node-1' })]
+    const edges = [createEdge({ id: 'edge-1', source: 'node-1', target: 'node-2' })]
+
+    const serialized = stringifyWorkflowClipboardData({ nodes, edges }, currentVersion)
+    readTextMock.mockResolvedValue(serialized)
+
+    await writeWorkflowClipboard({ nodes, edges }, currentVersion)
+    expect(writeTextMock).toHaveBeenCalledWith(serialized)
+    await expect(readWorkflowClipboard(currentVersion)).resolves.toEqual({
+      nodes,
+      edges,
+      sourceVersion: currentVersion,
+      isVersionMismatch: false,
+    })
+  })
+
+  it('should allow reading clipboard data with different version', async () => {
+    const nodes = [createNode({ id: 'node-1' })]
+    const edges = [createEdge({ id: 'edge-1', source: 'node-1', target: 'node-2' })]
+    readTextMock.mockResolvedValue(JSON.stringify({
+      kind: 'dify-workflow-clipboard',
+      version: '0.5.0',
+      nodes,
+      edges,
+    }))
+
+    await expect(readWorkflowClipboard(currentVersion)).resolves.toEqual({
+      nodes,
+      edges,
+      sourceVersion: '0.5.0',
+      isVersionMismatch: true,
+    })
+  })
+
+  it('should return empty clipboard data for invalid JSON', () => {
+    expect(parseWorkflowClipboardText('{invalid-json', currentVersion)).toEqual({
+      nodes: [],
+      edges: [],
+      isVersionMismatch: false,
+    })
+  })
+
+  it('should return empty clipboard data for invalid structure', () => {
+    expect(parseWorkflowClipboardText(JSON.stringify({
+      kind: 'unknown',
+      version: 1,
+      nodes: [],
+      edges: [],
+    }), currentVersion)).toEqual({
+      nodes: [],
+      edges: [],
+      isVersionMismatch: false,
+    })
+  })
+
+  it('should return empty clipboard data when clipboard read fails', async () => {
+    readTextMock.mockRejectedValue(new Error('clipboard denied'))
+
+    await expect(readWorkflowClipboard(currentVersion)).resolves.toEqual({
+      nodes: [],
+      edges: [],
+      isVersionMismatch: false,
+    })
+  })
+})
diff --git a/web/app/components/workflow/utils/clipboard.ts b/web/app/components/workflow/utils/clipboard.ts
new file mode 100644
index 0000000000..246d3351f3
--- /dev/null
+++ b/web/app/components/workflow/utils/clipboard.ts
@@ -0,0 +1,205 @@
+import type { Edge, Node } from '../types'
+
+const WORKFLOW_CLIPBOARD_KIND = 'dify-workflow-clipboard'
+
+type WorkflowClipboardPayload = {
+  kind: string
+  version: string
+  nodes: Node[]
+  edges: Edge[]
+}
+
+type WorkflowClipboardData = {
+  nodes: Node[]
+  edges: Edge[]
+}
+
+type WorkflowClipboardReadResult = WorkflowClipboardData & {
+  sourceVersion?: string
+  isVersionMismatch: boolean
+}
+
+const emptyClipboardData: WorkflowClipboardData = {
+  nodes: [],
+  edges: [],
+}
+
+const emptyClipboardReadResult: WorkflowClipboardReadResult = {
+  ...emptyClipboardData,
+  isVersionMismatch: false,
+}
+
+const isNodeArray = (value: unknown): value is Node[] => Array.isArray(value)
+const isEdgeArray = (value: unknown): value is Edge[] => Array.isArray(value)
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  value !== null && typeof value === 'object' && !Array.isArray(value)
+
+export const sanitizeClipboardValueByDefault = (defaultValue: unknown, incomingValue: unknown): unknown => {
+  if (defaultValue === undefined)
+    return incomingValue
+
+  if (Array.isArray(defaultValue))
+    return Array.isArray(incomingValue) ? incomingValue : [...defaultValue]
+
+  if (isPlainObject(defaultValue)) {
+    if (!isPlainObject(incomingValue)) {
+      return Object.fromEntries(
+        Object.entries(defaultValue).map(([key, value]) => [
+          key,
+          sanitizeClipboardValueByDefault(value, undefined),
+        ]),
+      )
+    }
+
+    const merged: Record<string, unknown> = {}
+    const keys = new Set([
+      ...Object.keys(defaultValue),
+      ...Object.keys(incomingValue),
+    ])
+
+    keys.forEach((key) => {
+      const hasDefault = Object.hasOwn(defaultValue, key)
+      const hasIncoming = Object.hasOwn(incomingValue, key)
+      if (hasDefault && hasIncoming) {
+        merged[key] = sanitizeClipboardValueByDefault(
+          defaultValue[key],
+          incomingValue[key],
+        )
+        return
+      }
+
+      if (hasIncoming) {
+        merged[key] = incomingValue[key]
+        return
+      }
+
+      merged[key] = sanitizeClipboardValueByDefault(defaultValue[key], undefined)
+    })
+
+    return merged
+  }
+
+  if (typeof defaultValue === 'number')
+    return typeof incomingValue === 'number' && Number.isFinite(incomingValue) ? incomingValue : defaultValue
+
+  return typeof incomingValue === typeof defaultValue ? incomingValue : defaultValue
+}
+
+export const isClipboardValueCompatibleWithDefault = (defaultValue: unknown, incomingValue: unknown): boolean => {
+  if (incomingValue === undefined)
+    return true
+
+  if (defaultValue === undefined)
+    return true
+
+  if (Array.isArray(defaultValue))
+    return Array.isArray(incomingValue)
+
+  if (isPlainObject(defaultValue)) {
+    if (!isPlainObject(incomingValue))
+      return false
+
+    return Object.entries(defaultValue).every(([key, value]) => {
+      return isClipboardValueCompatibleWithDefault(
+        value,
+        incomingValue[key],
+      )
+    })
+  }
+
+  if (typeof defaultValue === 'number')
+    return typeof incomingValue === 'number' && Number.isFinite(incomingValue)
+
+  return typeof incomingValue === typeof defaultValue
+}
+
+export const isClipboardNodeStructurallyValid = (value: unknown): value is Node => {
+  if (!isPlainObject(value))
+    return false
+
+  if (typeof value.id !== 'string' || typeof value.type !== 'string')
+    return false
+
+  if (!isPlainObject(value.data) || !isPlainObject(value.position))
+    return false
+
+  return Number.isFinite(value.position.x) && Number.isFinite(value.position.y)
+}
+
+export const isClipboardEdgeStructurallyValid = (value: unknown): value is Edge => {
+  if (!isPlainObject(value))
+    return false
+
+  return typeof value.id === 'string'
+    && typeof value.source === 'string'
+    && typeof value.target === 'string'
+}
+
+export const parseWorkflowClipboardText = (
+  text: string,
+  currentClipboardVersion: string,
+): WorkflowClipboardReadResult => {
+  if (!text)
+    return emptyClipboardReadResult
+
+  try {
+    const parsed = JSON.parse(text) as Partial<WorkflowClipboardPayload>
+    if (
+      parsed.kind !== WORKFLOW_CLIPBOARD_KIND
+      || typeof parsed.version !== 'string'
+      || !isNodeArray(parsed.nodes)
+      || !isEdgeArray(parsed.edges)
+    ) {
+      return emptyClipboardReadResult
+    }
+
+    const sourceVersion = parsed.version
+
+    const validatedNodes = parsed.nodes.filter(isClipboardNodeStructurallyValid)
+    const validatedEdges = parsed.edges.filter(isClipboardEdgeStructurallyValid)
+
+    return {
+      nodes: validatedNodes,
+      edges: validatedEdges,
+      sourceVersion,
+      isVersionMismatch: sourceVersion !== currentClipboardVersion,
+    }
+  }
+  catch {
+    return emptyClipboardReadResult
+  }
+}
+
+export const stringifyWorkflowClipboardData = (
+  payload: WorkflowClipboardData,
+  currentClipboardVersion: string,
+): string => {
+  const data: WorkflowClipboardPayload = {
+    kind: WORKFLOW_CLIPBOARD_KIND,
+    version: currentClipboardVersion,
+    nodes: payload.nodes,
+    edges: payload.edges,
+  }
+
+  return JSON.stringify(data)
+}
+
+export const writeWorkflowClipboard = async (
+  payload: WorkflowClipboardData,
+  currentClipboardVersion: string,
+): Promise<void> => {
+  const text = stringifyWorkflowClipboardData(payload, currentClipboardVersion)
+  await navigator.clipboard.writeText(text)
+}
+
+export const readWorkflowClipboard = async (
+  currentClipboardVersion: string,
+): Promise<WorkflowClipboardReadResult> => {
+  try {
+    const text = await navigator.clipboard.readText()
+    return parseWorkflowClipboardText(text, currentClipboardVersion)
+  }
+  catch {
+    return emptyClipboardReadResult
+  }
+}
diff --git a/web/app/components/workflow/utils/index.ts b/web/app/components/workflow/utils/index.ts
index 641deec695..5098549528 100644
--- a/web/app/components/workflow/utils/index.ts
+++ b/web/app/components/workflow/utils/index.ts
@@ -1,3 +1,4 @@
+export * from './clipboard'
 export * from './common'
 export * from './data-source'
 export * from './edge'
diff --git a/web/i18n/ar-TN/workflow.json b/web/i18n/ar-TN/workflow.json
index 6b9d2b2f8c..1e17bdd5ac 100644
--- a/web/i18n/ar-TN/workflow.json
+++ b/web/i18n/ar-TN/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "فرع",
   "common.chooseDSL": "اختر ملف DSL",
   "common.chooseStartNodeToRun": "اختر عقدة البداية للتشغيل",
+  "common.clipboardVersionCompatibilityWarning": "تم نسخ هذا المحتوى من إصدار مختلف من تطبيق Dify. قد تكون بعض الأجزاء غير متوافقة.",
   "common.commentMode": "وضع التعليقات",
   "common.configure": "تكوين",
   "common.configureRequired": "التكوين مطلوب",
diff --git a/web/i18n/de-DE/workflow.json b/web/i18n/de-DE/workflow.json
index 20a142431c..f354824321 100644
--- a/web/i18n/de-DE/workflow.json
+++ b/web/i18n/de-DE/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "ZWEIG",
   "common.chooseDSL": "Wählen Sie eine DSL(yml)-Datei",
   "common.chooseStartNodeToRun": "Wählen Sie den Startknoten zum Ausführen",
+  "common.clipboardVersionCompatibilityWarning": "Dieser Inhalt wurde aus einer anderen Dify-App-Version kopiert. Einige Teile sind möglicherweise nicht kompatibel.",
   "common.commentMode": "Kommentar-Modus",
   "common.configure": "Konfigurieren",
   "common.configureRequired": "Konfiguration erforderlich",
diff --git a/web/i18n/en-US/workflow.json b/web/i18n/en-US/workflow.json
index aaadce8814..15b165d108 100644
--- a/web/i18n/en-US/workflow.json
+++ b/web/i18n/en-US/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "BRANCH",
   "common.chooseDSL": "Choose DSL file",
   "common.chooseStartNodeToRun": "Choose the start node to run",
+  "common.clipboardVersionCompatibilityWarning": "This content was copied from a different Dify app version. Some parts may be incompatible.",
   "common.commentMode": "Comment Mode",
   "common.configure": "Configure",
   "common.configureRequired": "Configure Required",
diff --git a/web/i18n/es-ES/workflow.json b/web/i18n/es-ES/workflow.json
index 2b7ca99452..e77ca46200 100644
--- a/web/i18n/es-ES/workflow.json
+++ b/web/i18n/es-ES/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "RAMA",
   "common.chooseDSL": "Elegir archivo DSL (yml)",
   "common.chooseStartNodeToRun": "Elige el nodo de inicio para ejecutar",
+  "common.clipboardVersionCompatibilityWarning": "Este contenido se copió desde una versión diferente de la aplicación Dify. Es posible que algunas partes no sean compatibles.",
   "common.commentMode": "Modo de comentarios",
   "common.configure": "Configurar",
   "common.configureRequired": "Configuración requerida",
diff --git a/web/i18n/fa-IR/workflow.json b/web/i18n/fa-IR/workflow.json
index 7914b861ed..36c2a37f4b 100644
--- a/web/i18n/fa-IR/workflow.json
+++ b/web/i18n/fa-IR/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "شاخه",
   "common.chooseDSL": "انتخاب فایل DSL (yml)",
   "common.chooseStartNodeToRun": "گره شروع را برای اجرا انتخاب کنید",
+  "common.clipboardVersionCompatibilityWarning": "این محتوا از نسخه دیگری از برنامه Dify کپی شده است. ممکن است برخی بخش‌ها ناسازگار باشند.",
   "common.commentMode": "حالت نظرات",
   "common.configure": "پیکربندی",
   "common.configureRequired": "پیکربندی الزامی است",
diff --git a/web/i18n/fr-FR/workflow.json b/web/i18n/fr-FR/workflow.json
index d4fbd8f27a..e84ceb2343 100644
--- a/web/i18n/fr-FR/workflow.json
+++ b/web/i18n/fr-FR/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "BRANCHE",
   "common.chooseDSL": "Choisir le fichier DSL(yml)",
   "common.chooseStartNodeToRun": "Choisissez le nœud de départ pour lancer",
+  "common.clipboardVersionCompatibilityWarning": "Ce contenu a été copié depuis une version différente de l'application Dify. Certaines parties peuvent être incompatibles.",
   "common.commentMode": "Mode commentaires",
   "common.configure": "Configurer",
   "common.configureRequired": "Configuration requise",
diff --git a/web/i18n/hi-IN/workflow.json b/web/i18n/hi-IN/workflow.json
index 5c3b6eb1f9..026034c812 100644
--- a/web/i18n/hi-IN/workflow.json
+++ b/web/i18n/hi-IN/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "शाखा",
   "common.chooseDSL": "डीएसएल (वाईएमएल) फ़ाइल चुनें",
   "common.chooseStartNodeToRun": "चलाने के लिए प्रारंभ नोड चुनें",
+  "common.clipboardVersionCompatibilityWarning": "यह सामग्री Dify ऐप के किसी अलग संस्करण से कॉपी की गई है। इसके कुछ हिस्से असंगत हो सकते हैं।",
   "common.commentMode": "टिप्पणी मोड",
   "common.configure": "कॉन्फ़िगर करें",
   "common.configureRequired": "कॉन्फ़िगरेशन आवश्यक",
diff --git a/web/i18n/id-ID/workflow.json b/web/i18n/id-ID/workflow.json
index 376227eedf..c604539e0a 100644
--- a/web/i18n/id-ID/workflow.json
+++ b/web/i18n/id-ID/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "CABANG",
   "common.chooseDSL": "Pilih file DSL",
   "common.chooseStartNodeToRun": "Pilih node awal untuk dijalankan",
+  "common.clipboardVersionCompatibilityWarning": "Konten ini disalin dari versi aplikasi Dify yang berbeda. Beberapa bagian mungkin tidak kompatibel.",
   "common.commentMode": "Mode komentar",
   "common.configure": "Konfigurasikan",
   "common.configureRequired": "Konfigurasi yang Diperlukan",
diff --git a/web/i18n/it-IT/workflow.json b/web/i18n/it-IT/workflow.json
index 7bd102f745..f34cb96155 100644
--- a/web/i18n/it-IT/workflow.json
+++ b/web/i18n/it-IT/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "RAMO",
   "common.chooseDSL": "Scegli file DSL(yml)",
   "common.chooseStartNodeToRun": "Scegli il nodo di partenza da eseguire",
+  "common.clipboardVersionCompatibilityWarning": "Questo contenuto è stato copiato da una versione diversa dell'app Dify. Alcune parti potrebbero non essere compatibili.",
   "common.commentMode": "Modalità commenti",
   "common.configure": "Configura",
   "common.configureRequired": "Configurazione Richiesta",
diff --git a/web/i18n/ja-JP/workflow.json b/web/i18n/ja-JP/workflow.json
index 9564abc43d..ce94735a4a 100644
--- a/web/i18n/ja-JP/workflow.json
+++ b/web/i18n/ja-JP/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "ブランチ",
   "common.chooseDSL": "DSL(yml) ファイルを選択",
   "common.chooseStartNodeToRun": "実行する開始ノードを選択",
+  "common.clipboardVersionCompatibilityWarning": "このコンテンツは別の Dify アプリバージョンからコピーされました。一部が互換性のない可能性があります。",
   "common.commentMode": "コメントモード",
   "common.configure": "設定",
   "common.configureRequired": "設定が必要",
diff --git a/web/i18n/ko-KR/workflow.json b/web/i18n/ko-KR/workflow.json
index 7dfeda4573..92911fad82 100644
--- a/web/i18n/ko-KR/workflow.json
+++ b/web/i18n/ko-KR/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "브랜치",
   "common.chooseDSL": "DSL(yml) 파일 선택",
   "common.chooseStartNodeToRun": "실행할 시작 노드를 선택하세요",
+  "common.clipboardVersionCompatibilityWarning": "이 콘텐츠는 다른 Dify 앱 버전에서 복사되었습니다. 일부 항목은 호환되지 않을 수 있습니다.",
   "common.commentMode": "댓글 모드",
   "common.configure": "구성",
   "common.configureRequired": "구성 필요",
diff --git a/web/i18n/nl-NL/workflow.json b/web/i18n/nl-NL/workflow.json
index 852415b419..b21e057c92 100644
--- a/web/i18n/nl-NL/workflow.json
+++ b/web/i18n/nl-NL/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "BRANCH",
   "common.chooseDSL": "Choose DSL file",
   "common.chooseStartNodeToRun": "Choose the start node to run",
+  "common.clipboardVersionCompatibilityWarning": "Deze inhoud is gekopieerd vanuit een andere Dify-appversie. Sommige onderdelen zijn mogelijk niet compatibel.",
   "common.commentMode": "Opmerkingsmodus",
   "common.configure": "Configure",
   "common.configureRequired": "Configure Required",
diff --git a/web/i18n/pl-PL/workflow.json b/web/i18n/pl-PL/workflow.json
index 996681f50b..914127be33 100644
--- a/web/i18n/pl-PL/workflow.json
+++ b/web/i18n/pl-PL/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "GAŁĄŹ",
   "common.chooseDSL": "Wybierz plik DSL(yml)",
   "common.chooseStartNodeToRun": "Wybierz węzeł początkowy, aby uruchomić",
+  "common.clipboardVersionCompatibilityWarning": "Ta zawartość została skopiowana z innej wersji aplikacji Dify. Niektóre elementy mogą być niekompatybilne.",
   "common.commentMode": "Tryb komentarzy",
   "common.configure": "Skonfiguruj",
   "common.configureRequired": "Wymagana konfiguracja",
diff --git a/web/i18n/pt-BR/workflow.json b/web/i18n/pt-BR/workflow.json
index 74af4a8e62..58fbe2be2e 100644
--- a/web/i18n/pt-BR/workflow.json
+++ b/web/i18n/pt-BR/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "RAMIFICAÇÃO",
   "common.chooseDSL": "Escolha o arquivo DSL(yml)",
   "common.chooseStartNodeToRun": "Escolha o nó inicial para executar",
+  "common.clipboardVersionCompatibilityWarning": "Este conteúdo foi copiado de uma versão diferente do aplicativo Dify. Algumas partes podem ser incompatíveis.",
   "common.commentMode": "Modo de comentários",
   "common.configure": "Configurar",
   "common.configureRequired": "Configuração necessária",
diff --git a/web/i18n/ro-RO/workflow.json b/web/i18n/ro-RO/workflow.json
index 6c02f5fc3c..7ef8244fd3 100644
--- a/web/i18n/ro-RO/workflow.json
+++ b/web/i18n/ro-RO/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "RAMURĂ",
   "common.chooseDSL": "Alegeți fișierul DSL(yml)",
   "common.chooseStartNodeToRun": "Alegeți nodul de start pentru a rula",
+  "common.clipboardVersionCompatibilityWarning": "Acest conținut a fost copiat dintr-o altă versiune a aplicației Dify. Unele părți pot fi incompatibile.",
   "common.commentMode": "Mod comentarii",
   "common.configure": "Configurează",
   "common.configureRequired": "Configurare necesară",
diff --git a/web/i18n/ru-RU/workflow.json b/web/i18n/ru-RU/workflow.json
index 87153206a9..4474db83b0 100644
--- a/web/i18n/ru-RU/workflow.json
+++ b/web/i18n/ru-RU/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "ВЕТКА",
   "common.chooseDSL": "Выберите файл DSL(yml)",
   "common.chooseStartNodeToRun": "Выберите начальный узел для запуска",
+  "common.clipboardVersionCompatibilityWarning": "Этот контент был скопирован из другой версии приложения Dify. Некоторые части могут быть несовместимы.",
   "common.commentMode": "Режим комментариев",
   "common.configure": "Настроить",
   "common.configureRequired": "Требуется настройка",
diff --git a/web/i18n/sl-SI/workflow.json b/web/i18n/sl-SI/workflow.json
index 987d439f9a..2ce35d8093 100644
--- a/web/i18n/sl-SI/workflow.json
+++ b/web/i18n/sl-SI/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "VEJA",
   "common.chooseDSL": "Izberi DSL datoteko",
   "common.chooseStartNodeToRun": "Izberite začetno vozlišče za zagon",
+  "common.clipboardVersionCompatibilityWarning": "Ta vsebina je bila kopirana iz druge različice aplikacije Dify. Nekateri deli morda niso združljivi.",
   "common.commentMode": "Način komentarjev",
   "common.configure": "Konfiguriraj",
   "common.configureRequired": "Konfigurirajte zahteve",
diff --git a/web/i18n/th-TH/workflow.json b/web/i18n/th-TH/workflow.json
index 424f510d4a..e4e1f8b0a8 100644
--- a/web/i18n/th-TH/workflow.json
+++ b/web/i18n/th-TH/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "กิ่ง",
   "common.chooseDSL": "เลือกไฟล์ DSL",
   "common.chooseStartNodeToRun": "เลือกโหนดเริ่มต้นเพื่อรัน",
+  "common.clipboardVersionCompatibilityWarning": "เนื้อหานี้ถูกคัดลอกจากแอป Dify คนละเวอร์ชัน บางส่วนอาจไม่เข้ากัน",
   "common.commentMode": "โหมดความคิดเห็น",
   "common.configure": "กําหนดค่า",
   "common.configureRequired": "กําหนดค่าที่จําเป็น",
diff --git a/web/i18n/tr-TR/workflow.json b/web/i18n/tr-TR/workflow.json
index ce43144e5c..3e4b379d9b 100644
--- a/web/i18n/tr-TR/workflow.json
+++ b/web/i18n/tr-TR/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "DAL",
   "common.chooseDSL": "DSL(yml) dosyasını seçin",
   "common.chooseStartNodeToRun": "Çalıştırmak için başlangıç düğümünü seçin",
+  "common.clipboardVersionCompatibilityWarning": "Bu içerik farklı bir Dify uygulama sürümünden kopyalandı. Bazı bölümler uyumsuz olabilir.",
   "common.commentMode": "Yorum modu",
   "common.configure": "Yapılandır",
   "common.configureRequired": "Yapılandırma Gerekli",
diff --git a/web/i18n/uk-UA/workflow.json b/web/i18n/uk-UA/workflow.json
index 76cd3eddee..92c20acf73 100644
--- a/web/i18n/uk-UA/workflow.json
+++ b/web/i18n/uk-UA/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "ГІЛКА",
   "common.chooseDSL": "Виберіть файл DSL(yml)",
   "common.chooseStartNodeToRun": "Виберіть початковий вузол для запуску",
+  "common.clipboardVersionCompatibilityWarning": "Цей вміст скопійовано з іншої версії застосунку Dify. Деякі частини можуть бути несумісними.",
   "common.commentMode": "Режим коментарів",
   "common.configure": "Налаштувати",
   "common.configureRequired": "Потрібна конфігурація",
diff --git a/web/i18n/vi-VN/workflow.json b/web/i18n/vi-VN/workflow.json
index 7750f0efb6..74dbbbd6dd 100644
--- a/web/i18n/vi-VN/workflow.json
+++ b/web/i18n/vi-VN/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "NHÁNH",
   "common.chooseDSL": "Chọn tệp DSL(yml)",
   "common.chooseStartNodeToRun": "Chọn nút bắt đầu để chạy",
+  "common.clipboardVersionCompatibilityWarning": "Nội dung này được sao chép từ một phiên bản ứng dụng Dify khác. Một số phần có thể không tương thích.",
   "common.commentMode": "Chế độ bình luận",
   "common.configure": "Cấu hình",
   "common.configureRequired": "Yêu cầu cấu hình",
diff --git a/web/i18n/zh-Hans/workflow.json b/web/i18n/zh-Hans/workflow.json
index 2b6f4bcbe7..fc2aa1c880 100644
--- a/web/i18n/zh-Hans/workflow.json
+++ b/web/i18n/zh-Hans/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "分支",
   "common.chooseDSL": "选择 DSL(yml) 文件",
   "common.chooseStartNodeToRun": "选择启动节点进行运行",
+  "common.clipboardVersionCompatibilityWarning": "此内容复制自不同版本的 Dify 应用，部分内容可能不兼容。",
   "common.commentMode": "评论模式",
   "common.configure": "配置",
   "common.configureRequired": "需要进行配置",
diff --git a/web/i18n/zh-Hant/workflow.json b/web/i18n/zh-Hant/workflow.json
index 6b8ad06650..ef81f091f0 100644
--- a/web/i18n/zh-Hant/workflow.json
+++ b/web/i18n/zh-Hant/workflow.json
@@ -151,6 +151,7 @@
   "common.branch": "分支",
   "common.chooseDSL": "選擇 DSL（yml）檔",
   "common.chooseStartNodeToRun": "選擇要執行的起始節點",
+  "common.clipboardVersionCompatibilityWarning": "此內容複製自不同版本的 Dify 應用，部分內容可能不相容。",
   "common.commentMode": "評論模式",
   "common.configure": "配置",
   "common.configureRequired": "需要進行配置",
diff --git a/web/types/feature.ts b/web/types/feature.ts
index 5abfb1e1a0..635221f2be 100644
--- a/web/types/feature.ts
+++ b/web/types/feature.ts
@@ -28,6 +28,7 @@ type License = {
 }
 
 export type SystemFeatures = {
+  app_dsl_version: string
   trial_models: ModelProviderQuotaGetPaid[]
   plugin_installation_permission: {
     plugin_installation_scope: InstallationScope
@@ -68,6 +69,7 @@ export type SystemFeatures = {
 }
 
 export const defaultSystemFeatures: SystemFeatures = {
+  app_dsl_version: '',
   trial_models: [],
   plugin_installation_permission: {
     plugin_installation_scope: InstallationScope.ALL,

From 9ce7464c792435476a5a32a2e57093d78643327e Mon Sep 17 00:00:00 2001
From: Asuka Minato <i@asukaminato.eu.org>
Date: Fri, 17 Apr 2026 19:19:00 +0900
Subject: [PATCH 18/24] ci: Add conditional comment creation for diff (#35179)

---
 .github/workflows/pyrefly-diff-comment.yml | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/.github/workflows/pyrefly-diff-comment.yml b/.github/workflows/pyrefly-diff-comment.yml
index eefb1ebbb9..c55b013dbe 100644
--- a/.github/workflows/pyrefly-diff-comment.yml
+++ b/.github/workflows/pyrefly-diff-comment.yml
@@ -76,13 +76,11 @@ jobs:
               diff += '\\n\\n... (truncated) ...';
             }
 
-            const body = diff.trim()
-              ? '### Pyrefly Diff\n<details>\n<summary>base → PR</summary>\n\n```diff\n' + diff + '\n```\n</details>'
-              : '### Pyrefly Diff\nNo changes detected.';
-
-            await github.rest.issues.createComment({
-              issue_number: prNumber,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body,
-            });
+            if (diff.trim()) {
+              await github.rest.issues.createComment({
+                issue_number: prNumber,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                body: '### Pyrefly Diff\n<details>\n<summary>base → PR</summary>\n\n```diff\n' + diff + '\n```\n</details>',
+              });
+            }

From 560195f9f42011b7144e28c2b645a287b4815b3e Mon Sep 17 00:00:00 2001
From: Coding On Star <447357187@qq.com>
Date: Fri, 17 Apr 2026 20:24:34 +0800
Subject: [PATCH 19/24] feat(explore): implement banner impression tracking and
 refactor tracking logic (#35369)

Co-authored-by: CodingOnStar <hanxujiang@dify.com>
---
 .../explore/banner/__tests__/banner.spec.tsx  | 47 ++++++++++---
 web/app/components/explore/banner/banner.tsx  | 70 +++++++++++++------
 2 files changed, 83 insertions(+), 34 deletions(-)

diff --git a/web/app/components/explore/banner/__tests__/banner.spec.tsx b/web/app/components/explore/banner/__tests__/banner.spec.tsx
index 069aaf02dc..c95f2532e2 100644
--- a/web/app/components/explore/banner/__tests__/banner.spec.tsx
+++ b/web/app/components/explore/banner/__tests__/banner.spec.tsx
@@ -1,6 +1,6 @@
-import type * as React from 'react'
 import type { Banner as BannerType } from '@/models/app'
 import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import * as React from 'react'
 import { act } from 'react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import Banner from '../banner'
@@ -8,6 +8,13 @@ import Banner from '../banner'
 const mockUseGetBanners = vi.fn()
 const mockUseSelector = vi.fn()
 const mockTrackEvent = vi.fn()
+let mockSelectedIndex = 0
+const mockCarouselListeners = new Set<() => void>()
+
+const setMockSelectedIndex = (index: number) => {
+  mockSelectedIndex = index
+  mockCarouselListeners.forEach(listener => listener())
+}
 
 vi.mock('@/service/use-explore', () => ({
   useGetBanners: (...args: unknown[]) => mockUseGetBanners(...args),
@@ -54,13 +61,23 @@ vi.mock('@/app/components/base/carousel', () => ({
       },
     },
   ),
-  useCarousel: () => ({
-    api: {
-      scrollTo: vi.fn(),
-      slideNodes: () => [],
-    },
-    selectedIndex: 0,
-  }),
+  useCarousel: () => {
+    const selectedIndex = React.useSyncExternalStore(
+      (listener) => {
+        mockCarouselListeners.add(listener)
+        return () => mockCarouselListeners.delete(listener)
+      },
+      () => mockSelectedIndex,
+    )
+
+    return {
+      api: {
+        scrollTo: vi.fn(),
+        slideNodes: () => [],
+      },
+      selectedIndex,
+    }
+  },
 }))
 
 vi.mock('../banner-item', () => ({
@@ -102,7 +119,10 @@ const createMockBanner = (id: string, status: string = 'enabled', title: string
 
 describe('Banner', () => {
   beforeEach(() => {
+    vi.clearAllMocks()
     vi.useFakeTimers()
+    mockSelectedIndex = 0
+    mockCarouselListeners.clear()
     mockUseSelector.mockImplementation(selector => selector({
       userProfile: {
         id: 'account-123',
@@ -112,7 +132,6 @@ describe('Banner', () => {
 
   afterEach(() => {
     cleanup()
-    vi.clearAllMocks()
     vi.useRealTimers()
   })
 
@@ -257,7 +276,7 @@ describe('Banner', () => {
       expect(screen.getByTestId('carousel')).toHaveClass('rounded-2xl')
     })
 
-    it('tracks enabled banner impressions with expected payload', () => {
+    it('tracks only the current banner impression and reports the next one after slide changes', () => {
       mockUseGetBanners.mockReturnValue({
         data: [
           createMockBanner('1', 'enabled', 'Enabled Banner 1'),
@@ -270,7 +289,7 @@ describe('Banner', () => {
 
       render(<Banner />)
 
-      expect(mockTrackEvent).toHaveBeenCalledTimes(2)
+      expect(mockTrackEvent).toHaveBeenCalledTimes(1)
       expect(mockTrackEvent).toHaveBeenNthCalledWith(1, 'explore_banner_impression', expect.objectContaining({
         banner_id: '1',
         title: 'Enabled Banner 1',
@@ -281,6 +300,12 @@ describe('Banner', () => {
         account_id: 'account-123',
         event_time: expect.any(Number),
       }))
+
+      act(() => {
+        setMockSelectedIndex(1)
+      })
+
+      expect(mockTrackEvent).toHaveBeenCalledTimes(2)
       expect(mockTrackEvent).toHaveBeenNthCalledWith(2, 'explore_banner_impression', expect.objectContaining({
         banner_id: '3',
         title: 'Enabled Banner 2',
diff --git a/web/app/components/explore/banner/banner.tsx b/web/app/components/explore/banner/banner.tsx
index a320bb1974..505902195b 100644
--- a/web/app/components/explore/banner/banner.tsx
+++ b/web/app/components/explore/banner/banner.tsx
@@ -1,8 +1,9 @@
 import type { FC } from 'react'
+import type { Banner as BannerType } from '@/models/app'
 import * as React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { trackEvent } from '@/app/components/base/amplitude'
-import { Carousel } from '@/app/components/base/carousel'
+import { Carousel, useCarousel } from '@/app/components/base/carousel'
 import { useSelector } from '@/context/app-context'
 import { useLocale } from '@/context/i18n'
 import { useGetBanners } from '@/service/use-explore'
@@ -22,6 +23,45 @@ const LoadingState: FC = () => (
   </div>
 )
 
+type BannerImpressionTrackerProps = {
+  banners: BannerType[]
+  accountId?: string
+  language: string
+  trackedBannerIdsRef: React.MutableRefObject<Set<string>>
+}
+
+const BannerImpressionTracker: FC<BannerImpressionTrackerProps> = ({
+  banners,
+  accountId,
+  language,
+  trackedBannerIdsRef,
+}) => {
+  const { selectedIndex } = useCarousel()
+
+  useEffect(() => {
+    if (!accountId)
+      return
+
+    const currentBanner = banners[selectedIndex]
+    if (!currentBanner || trackedBannerIdsRef.current.has(currentBanner.id))
+      return
+
+    trackEvent('explore_banner_impression', {
+      banner_id: currentBanner.id,
+      title: currentBanner.content.title,
+      sort: selectedIndex + 1,
+      link: currentBanner.link,
+      page: 'explore',
+      language,
+      account_id: accountId,
+      event_time: Date.now(),
+    })
+    trackedBannerIdsRef.current.add(currentBanner.id)
+  }, [accountId, banners, language, selectedIndex, trackedBannerIdsRef])
+
+  return null
+}
+
 const Banner: FC = () => {
   const locale = useLocale()
   const { data: banners, isLoading, isError } = useGetBanners(locale)
@@ -60,28 +100,6 @@ const Banner: FC = () => {
     }
   }, [])
 
-  useEffect(() => {
-    if (!accountId)
-      return
-
-    enabledBanners.forEach((banner, index) => {
-      if (trackedBannerIdsRef.current.has(banner.id))
-        return
-
-      trackEvent('explore_banner_impression', {
-        banner_id: banner.id,
-        title: banner.content.title,
-        sort: index + 1,
-        link: banner.link,
-        page: 'explore',
-        language: locale,
-        account_id: accountId,
-        event_time: Date.now(),
-      })
-      trackedBannerIdsRef.current.add(banner.id)
-    })
-  }, [accountId, enabledBanners, locale])
-
   if (isLoading)
     return <LoadingState />
 
@@ -102,6 +120,12 @@ const Banner: FC = () => {
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
+      <BannerImpressionTracker
+        banners={enabledBanners}
+        accountId={accountId}
+        language={locale}
+        trackedBannerIdsRef={trackedBannerIdsRef}
+      />
       <Carousel.Content>
         {enabledBanners.map((banner, index) => (
           <Carousel.Item key={banner.id}>

From 3c7d6739b5adb274261d3f98f6a011e19ee5bf4e Mon Sep 17 00:00:00 2001
From: Stephen Zhou <hi@hyoban.cc>
Date: Fri, 17 Apr 2026 20:32:12 +0800
Subject: [PATCH 20/24] test: browser mode for dify ui (#35365)

---
 .github/workflows/web-tests.yml               |    3 +
 eslint.config.mjs                             |    2 +-
 packages/dify-ui/package.json                 |    7 +-
 .../src/alert-dialog/__tests__/index.spec.tsx |   72 +-
 .../src/avatar/__tests__/index.spec.tsx       |   82 +-
 .../src/button/__tests__/index.spec.tsx       |  162 +-
 .../src/context-menu/__tests__/index.spec.tsx |  117 +-
 .../src/dialog/__tests__/index.spec.tsx       |   40 +-
 .../dropdown-menu/__tests__/index.spec.tsx    |  163 +-
 .../src/number-field/__tests__/index.spec.tsx |  136 +-
 .../src/popover/__tests__/index.spec.tsx      |   46 +-
 .../src/scroll-area/__tests__/index.spec.tsx  |  302 ++-
 .../src/select/__tests__/index.spec.tsx       |  172 +-
 .../src/slider/__tests__/index.spec.tsx       |   90 +-
 .../src/switch/__tests__/index.spec.tsx       |  201 +-
 .../src/toast/__tests__/index.spec.tsx        |  334 ++-
 .../src/tooltip/__tests__/index.spec.tsx      |   53 +-
 packages/dify-ui/tests/setup.ts               |   44 -
 packages/dify-ui/tsconfig.json                |    8 +-
 packages/dify-ui/vite.config.ts               |    9 +-
 pnpm-lock.yaml                                | 1903 +++--------------
 pnpm-workspace.yaml                           |   91 +-
 22 files changed, 1259 insertions(+), 2778 deletions(-)
 delete mode 100644 packages/dify-ui/tests/setup.ts

diff --git a/.github/workflows/web-tests.yml b/.github/workflows/web-tests.yml
index dcee8863ce..2a5cf19645 100644
--- a/.github/workflows/web-tests.yml
+++ b/.github/workflows/web-tests.yml
@@ -109,6 +109,9 @@ jobs:
       - name: Setup web environment
         uses: ./.github/actions/setup-web
 
+      - name: Install Chromium for Browser Mode
+        run: vp exec playwright install --with-deps chromium
+
       - name: Run dify-ui tests
         run: vp test run --coverage --silent=passed-only
 
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 5e81e95f2f..ae9fdaff01 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -13,6 +13,7 @@ export default antfu(
       '!e2e/**',
       '!eslint.config.mjs',
       '!package.json',
+      '!pnpm-workspace.yaml',
       '!vite.config.ts',
       ...original,
     ],
@@ -35,7 +36,6 @@ export default antfu(
       },
     },
     e18e: false,
-    pnpm: false,
   },
   markdownPreferences.configs.standard,
   {
diff --git a/packages/dify-ui/package.json b/packages/dify-ui/package.json
index 2b78b25ed6..b3430ab4ee 100644
--- a/packages/dify-ui/package.json
+++ b/packages/dify-ui/package.json
@@ -99,15 +99,12 @@
     "@storybook/addon-themes": "catalog:",
     "@storybook/react-vite": "catalog:",
     "@tailwindcss/vite": "catalog:",
-    "@testing-library/jest-dom": "catalog:",
-    "@testing-library/react": "catalog:",
-    "@testing-library/user-event": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "@vitejs/plugin-react": "catalog:",
     "@vitest/coverage-v8": "catalog:",
     "class-variance-authority": "catalog:",
-    "happy-dom": "catalog:",
+    "playwright": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
     "storybook": "catalog:",
@@ -115,6 +112,6 @@
     "typescript": "catalog:",
     "vite": "catalog:",
     "vite-plus": "catalog:",
-    "vitest": "catalog:"
+    "vitest-browser-react": "catalog:"
   }
 }
diff --git a/packages/dify-ui/src/alert-dialog/__tests__/index.spec.tsx b/packages/dify-ui/src/alert-dialog/__tests__/index.spec.tsx
index 23fbcb19d6..5248be9a16 100644
--- a/packages/dify-ui/src/alert-dialog/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/alert-dialog/__tests__/index.spec.tsx
@@ -1,5 +1,4 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
+import { render } from 'vitest-browser-react'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -11,10 +10,12 @@ import {
   AlertDialogTrigger,
 } from '../index'
 
+const asHTMLElement = (element: HTMLElement | SVGElement) => element as HTMLElement
+
 describe('AlertDialog wrapper', () => {
   describe('Rendering', () => {
-    it('should render alert dialog content when dialog is open', () => {
-      render(
+    it('should render alert dialog content when dialog is open', async () => {
+      const screen = await render(
         <AlertDialog open>
           <AlertDialogContent>
             <AlertDialogTitle>Confirm Delete</AlertDialogTitle>
@@ -23,13 +24,12 @@ describe('AlertDialog wrapper', () => {
         </AlertDialog>,
       )
 
-      const dialog = screen.getByRole('alertdialog')
-      expect(dialog).toHaveTextContent('Confirm Delete')
-      expect(dialog).toHaveTextContent('This action cannot be undone.')
+      await expect.element(screen.getByRole('alertdialog')).toHaveTextContent('Confirm Delete')
+      await expect.element(screen.getByRole('alertdialog')).toHaveTextContent('This action cannot be undone.')
     })
 
-    it('should not render content when dialog is closed', () => {
-      render(
+    it('should not render content when dialog is closed', async () => {
+      const screen = await render(
         <AlertDialog open={false}>
           <AlertDialogContent>
             <AlertDialogTitle>Hidden Title</AlertDialogTitle>
@@ -37,13 +37,13 @@ describe('AlertDialog wrapper', () => {
         </AlertDialog>,
       )
 
-      expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
+      expect(screen.container.querySelector('[role="alertdialog"]')).not.toBeInTheDocument()
     })
   })
 
   describe('Props', () => {
-    it('should apply custom className to popup', () => {
-      render(
+    it('should apply custom className to popup', async () => {
+      const screen = await render(
         <AlertDialog open>
           <AlertDialogContent className="custom-class">
             <AlertDialogTitle>Title</AlertDialogTitle>
@@ -51,12 +51,11 @@ describe('AlertDialog wrapper', () => {
         </AlertDialog>,
       )
 
-      const dialog = screen.getByRole('alertdialog')
-      expect(dialog).toHaveClass('custom-class')
+      await expect.element(screen.getByRole('alertdialog')).toHaveClass('custom-class')
     })
 
-    it('should not render a close button by default', () => {
-      render(
+    it('should not render a close button by default', async () => {
+      const screen = await render(
         <AlertDialog open>
           <AlertDialogContent>
             <AlertDialogTitle>Title</AlertDialogTitle>
@@ -64,13 +63,13 @@ describe('AlertDialog wrapper', () => {
         </AlertDialog>,
       )
 
-      expect(screen.queryByRole('button', { name: 'Close' })).not.toBeInTheDocument()
+      expect(() => screen.getByRole('button', { name: 'Close' }).element()).toThrow()
     })
   })
 
   describe('User Interactions', () => {
     it('should open and close dialog when trigger and cancel button are clicked', async () => {
-      render(
+      const screen = await render(
         <AlertDialog>
           <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
           <AlertDialogContent>
@@ -83,21 +82,21 @@ describe('AlertDialog wrapper', () => {
         </AlertDialog>,
       )
 
-      expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
+      expect(screen.container.querySelector('[role="alertdialog"]')).not.toBeInTheDocument()
 
-      fireEvent.click(screen.getByRole('button', { name: 'Open Dialog' }))
-      expect(await screen.findByRole('alertdialog')).toHaveTextContent('Action Required')
+      asHTMLElement(screen.getByRole('button', { name: 'Open Dialog' }).element()).click()
+      await expect.element(screen.getByRole('alertdialog')).toHaveTextContent('Action Required')
 
-      fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
-      await waitFor(() => {
-        expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
+      asHTMLElement(screen.getByRole('button', { name: 'Cancel' }).element()).click()
+      await vi.waitFor(() => {
+        expect(screen.container.querySelector('[role="alertdialog"]')).not.toBeInTheDocument()
       })
     })
   })
 
   describe('Composition Helpers', () => {
-    it('should render actions wrapper and default confirm button styles', () => {
-      render(
+    it('should render actions wrapper and default confirm button styles', async () => {
+      const screen = await render(
         <AlertDialog open>
           <AlertDialogContent>
             <AlertDialogTitle>Action Required</AlertDialogTitle>
@@ -108,15 +107,14 @@ describe('AlertDialog wrapper', () => {
         </AlertDialog>,
       )
 
-      expect(screen.getByTestId('actions')).toHaveClass('flex', 'items-start', 'justify-end', 'gap-2', 'self-stretch', 'p-6', 'custom-actions')
-      const confirmButton = screen.getByRole('button', { name: 'Confirm' })
-      expect(confirmButton).toHaveClass('bg-components-button-destructive-primary-bg')
+      await expect.element(screen.getByTestId('actions')).toHaveClass('flex', 'items-start', 'justify-end', 'gap-2', 'self-stretch', 'p-6', 'custom-actions')
+      await expect.element(screen.getByRole('button', { name: 'Confirm' })).toHaveClass('bg-components-button-destructive-primary-bg')
     })
 
     it('should keep dialog open after confirm click and close via cancel helper', async () => {
       const onConfirm = vi.fn()
 
-      render(
+      const screen = await render(
         <AlertDialog>
           <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
           <AlertDialogContent>
@@ -129,16 +127,16 @@ describe('AlertDialog wrapper', () => {
         </AlertDialog>,
       )
 
-      fireEvent.click(screen.getByRole('button', { name: 'Open Dialog' }))
-      expect(await screen.findByRole('alertdialog')).toBeInTheDocument()
+      asHTMLElement(screen.getByRole('button', { name: 'Open Dialog' }).element()).click()
+      await expect.element(screen.getByRole('alertdialog')).toBeInTheDocument()
 
-      fireEvent.click(screen.getByRole('button', { name: 'Confirm' }))
+      asHTMLElement(screen.getByRole('button', { name: 'Confirm' }).element()).click()
       expect(onConfirm).toHaveBeenCalledTimes(1)
-      expect(screen.getByRole('alertdialog')).toBeInTheDocument()
+      await expect.element(screen.getByRole('alertdialog')).toBeInTheDocument()
 
-      fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
-      await waitFor(() => {
-        expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
+      asHTMLElement(screen.getByRole('button', { name: 'Cancel' }).element()).click()
+      await vi.waitFor(() => {
+        expect(screen.container.querySelector('[role="alertdialog"]')).not.toBeInTheDocument()
       })
     })
   })
diff --git a/packages/dify-ui/src/avatar/__tests__/index.spec.tsx b/packages/dify-ui/src/avatar/__tests__/index.spec.tsx
index 8a384139c2..b0ea496282 100644
--- a/packages/dify-ui/src/avatar/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/avatar/__tests__/index.spec.tsx
@@ -1,25 +1,25 @@
-import { render, screen } from '@testing-library/react'
+import { render } from 'vitest-browser-react'
 import { Avatar, AvatarFallback, AvatarImage, AvatarRoot } from '..'
 
 describe('Avatar', () => {
   describe('Rendering', () => {
-    it('should keep the fallback visible when avatar URL is provided before image load', () => {
-      render(<Avatar name="John Doe" avatar="https://example.com/avatar.jpg" />)
+    it('should keep the fallback visible when avatar URL is provided before image load', async () => {
+      const screen = await render(<Avatar name="John Doe" avatar="https://example.com/avatar.jpg" />)
 
-      expect(screen.getByText('J')).toBeInTheDocument()
+      await expect.element(screen.getByText('J')).toBeInTheDocument()
     })
 
-    it('should render fallback with uppercase initial when avatar is null', () => {
-      render(<Avatar name="alice" avatar={null} />)
+    it('should render fallback with uppercase initial when avatar is null', async () => {
+      const screen = await render(<Avatar name="alice" avatar={null} />)
 
-      expect(screen.queryByRole('img')).not.toBeInTheDocument()
-      expect(screen.getByText('A')).toBeInTheDocument()
+      expect(screen.container.querySelector('img')).not.toBeInTheDocument()
+      await expect.element(screen.getByText('A')).toBeInTheDocument()
     })
 
-    it('should render the fallback when avatar is provided', () => {
-      render(<Avatar name="John" avatar="https://example.com/avatar.jpg" />)
+    it('should render the fallback when avatar is provided', async () => {
+      const screen = await render(<Avatar name="John" avatar="https://example.com/avatar.jpg" />)
 
-      expect(screen.getByText('J')).toBeInTheDocument()
+      await expect.element(screen.getByText('J')).toBeInTheDocument()
     })
   })
 
@@ -33,36 +33,36 @@ describe('Avatar', () => {
       { size: 'xl' as const, expectedClass: 'size-10' },
       { size: '2xl' as const, expectedClass: 'size-12' },
       { size: '3xl' as const, expectedClass: 'size-16' },
-    ])('should apply $expectedClass for size="$size"', ({ size, expectedClass }) => {
-      const { container } = render(<Avatar name="Test" avatar={null} size={size} />)
+    ])('should apply $expectedClass for size="$size"', async ({ size, expectedClass }) => {
+      const screen = await render(<Avatar name="Test" avatar={null} size={size} />)
 
-      const root = container.firstElementChild as HTMLElement
+      const root = screen.container.firstElementChild as HTMLElement
       expect(root).toHaveClass(expectedClass)
     })
 
-    it('should default to md size when size is not specified', () => {
-      const { container } = render(<Avatar name="Test" avatar={null} />)
+    it('should default to md size when size is not specified', async () => {
+      const screen = await render(<Avatar name="Test" avatar={null} />)
 
-      const root = container.firstElementChild as HTMLElement
+      const root = screen.container.firstElementChild as HTMLElement
       expect(root).toHaveClass('size-8')
     })
   })
 
   describe('className prop', () => {
-    it('should merge className with avatar variant classes on root', () => {
-      const { container } = render(
+    it('should merge className with avatar variant classes on root', async () => {
+      const screen = await render(
         <Avatar name="Test" avatar={null} className="custom-class" />,
       )
 
-      const root = container.firstElementChild as HTMLElement
+      const root = screen.container.firstElementChild as HTMLElement
       expect(root).toHaveClass('custom-class')
       expect(root).toHaveClass('rounded-full', 'bg-primary-600')
     })
   })
 
   describe('Primitives', () => {
-    it('should support composed avatar usage through exported primitives', () => {
-      render(
+    it('should support composed avatar usage through exported primitives', async () => {
+      const screen = await render(
         <AvatarRoot size="sm" data-testid="avatar-root">
           <AvatarImage src="https://example.com/avatar.jpg" alt="Jane Doe" />
           <AvatarFallback size="sm" style={{ backgroundColor: 'rgb(1, 2, 3)' }}>
@@ -71,17 +71,17 @@ describe('Avatar', () => {
         </AvatarRoot>,
       )
 
-      expect(screen.getByTestId('avatar-root')).toHaveClass('size-6')
-      expect(screen.getByText('J')).toBeInTheDocument()
-      expect(screen.getByText('J')).toHaveStyle({ backgroundColor: 'rgb(1, 2, 3)' })
+      await expect.element(screen.getByTestId('avatar-root')).toHaveClass('size-6')
+      await expect.element(screen.getByText('J')).toBeInTheDocument()
+      await expect.element(screen.getByText('J')).toHaveStyle({ backgroundColor: 'rgb(1, 2, 3)' })
     })
   })
 
   describe('Edge Cases', () => {
-    it('should handle empty string name gracefully', () => {
-      const { container } = render(<Avatar name="" avatar={null} />)
+    it('should handle empty string name gracefully', async () => {
+      const screen = await render(<Avatar name="" avatar={null} />)
 
-      const fallback = container.querySelector('.text-white') as HTMLElement
+      const fallback = screen.container.querySelector('.text-white') as HTMLElement
       expect(fallback).toBeInTheDocument()
       expect(fallback.textContent).toBe('')
     })
@@ -89,23 +89,23 @@ describe('Avatar', () => {
     it.each([
       { name: '中文名', expected: '中', label: 'Chinese characters' },
       { name: '123User', expected: '1', label: 'number' },
-    ])('should display first character when name starts with $label', ({ name, expected }) => {
-      render(<Avatar name={name} avatar={null} />)
+    ])('should display first character when name starts with $label', async ({ name, expected }) => {
+      const screen = await render(<Avatar name={name} avatar={null} />)
 
-      expect(screen.getByText(expected)).toBeInTheDocument()
+      await expect.element(screen.getByText(expected)).toBeInTheDocument()
     })
 
-    it('should handle empty string avatar as falsy value', () => {
-      render(<Avatar name="Test" avatar={'' as string | null} />)
+    it('should handle empty string avatar as falsy value', async () => {
+      const screen = await render(<Avatar name="Test" avatar={'' as string | null} />)
 
-      expect(screen.queryByRole('img')).not.toBeInTheDocument()
-      expect(screen.getByText('T')).toBeInTheDocument()
+      expect(screen.container.querySelector('img')).not.toBeInTheDocument()
+      await expect.element(screen.getByText('T')).toBeInTheDocument()
     })
   })
 
   describe('onLoadingStatusChange', () => {
-    it('should render the fallback when avatar and onLoadingStatusChange are provided', () => {
-      render(
+    it('should render the fallback when avatar and onLoadingStatusChange are provided', async () => {
+      const screen = await render(
         <Avatar
           name="John"
           avatar="https://example.com/avatar.jpg"
@@ -113,16 +113,16 @@ describe('Avatar', () => {
         />,
       )
 
-      expect(screen.getByText('J')).toBeInTheDocument()
+      await expect.element(screen.getByText('J')).toBeInTheDocument()
     })
 
-    it('should not render image when avatar is null even with onLoadingStatusChange', () => {
+    it('should not render image when avatar is null even with onLoadingStatusChange', async () => {
       const onStatusChange = vi.fn()
-      render(
+      const screen = await render(
         <Avatar name="John" avatar={null} onLoadingStatusChange={onStatusChange} />,
       )
 
-      expect(screen.queryByRole('img')).not.toBeInTheDocument()
+      expect(screen.container.querySelector('img')).not.toBeInTheDocument()
     })
   })
 })
diff --git a/packages/dify-ui/src/button/__tests__/index.spec.tsx b/packages/dify-ui/src/button/__tests__/index.spec.tsx
index e7b9c92c91..f3694c29af 100644
--- a/packages/dify-ui/src/button/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/button/__tests__/index.spec.tsx
@@ -1,46 +1,48 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { render } from 'vitest-browser-react'
 import { Button } from '../index'
 
+const asHTMLElement = (element: HTMLElement | SVGElement) => element as HTMLElement
+
 describe('Button', () => {
   describe('rendering', () => {
-    it('renders children text', () => {
-      render(<Button>Click me</Button>)
-      expect(screen.getByRole('button')).toHaveTextContent('Click me')
+    it('renders children text', async () => {
+      const screen = await render(<Button>Click me</Button>)
+      await expect.element(screen.getByRole('button')).toHaveTextContent('Click me')
     })
 
-    it('renders as a native button element by default', () => {
-      render(<Button>Click me</Button>)
-      expect(screen.getByRole('button').tagName).toBe('BUTTON')
+    it('renders as a native button element by default', async () => {
+      const screen = await render(<Button>Click me</Button>)
+      expect(screen.getByRole('button').element().tagName).toBe('BUTTON')
     })
 
-    it('defaults to type="button"', () => {
-      render(<Button>Click me</Button>)
-      expect(screen.getByRole('button')).toHaveAttribute('type', 'button')
+    it('defaults to type="button"', async () => {
+      const screen = await render(<Button>Click me</Button>)
+      await expect.element(screen.getByRole('button')).toHaveAttribute('type', 'button')
     })
 
-    it('allows type override to submit', () => {
-      render(<Button type="submit">Submit</Button>)
-      expect(screen.getByRole('button')).toHaveAttribute('type', 'submit')
+    it('allows type override to submit', async () => {
+      const screen = await render(<Button type="submit">Submit</Button>)
+      await expect.element(screen.getByRole('button')).toHaveAttribute('type', 'submit')
     })
 
-    it('renders custom element via render prop', () => {
-      render(<Button render={<a href="/test" />}>Link</Button>)
-      const link = screen.getByRole('link')
-      expect(link).toHaveTextContent('Link')
-      expect(link).toHaveAttribute('href', '/test')
+    it('renders custom element via render prop', async () => {
+      const screen = await render(<Button nativeButton={false} render={<a href="/test" />}>Link</Button>)
+      const button = screen.getByRole('button', { name: 'Link' }).element()
+      expect(button.tagName).toBe('A')
+      expect(button).toHaveAttribute('href', '/test')
     })
 
-    it('applies base layout classes', () => {
-      render(<Button>Click me</Button>)
-      const btn = screen.getByRole('button')
+    it('applies base layout classes', async () => {
+      const screen = await render(<Button>Click me</Button>)
+      const btn = screen.getByRole('button').element()
       expect(btn).toHaveClass('inline-flex', 'justify-center', 'items-center', 'cursor-pointer')
     })
   })
 
   describe('variants', () => {
-    it('applies default secondary variant', () => {
-      render(<Button>Click me</Button>)
-      const btn = screen.getByRole('button')
+    it('applies default secondary variant', async () => {
+      const screen = await render(<Button>Click me</Button>)
+      const btn = screen.getByRole('button').element()
       expect(btn).toHaveClass('bg-components-button-secondary-bg', 'text-components-button-secondary-text')
     })
 
@@ -51,124 +53,124 @@ describe('Button', () => {
       { variant: 'ghost' as const, expectedClass: 'text-components-button-ghost-text' },
       { variant: 'ghost-accent' as const, expectedClass: 'hover:bg-state-accent-hover' },
       { variant: 'tertiary' as const, expectedClass: 'bg-components-button-tertiary-bg' },
-    ])('applies $variant variant', ({ variant, expectedClass }) => {
-      render(<Button variant={variant}>Click me</Button>)
-      expect(screen.getByRole('button')).toHaveClass(expectedClass)
+    ])('applies $variant variant', async ({ variant, expectedClass }) => {
+      const screen = await render(<Button variant={variant}>Click me</Button>)
+      await expect.element(screen.getByRole('button')).toHaveClass(expectedClass)
     })
 
-    it('applies destructive tone with default variant', () => {
-      render(<Button tone="destructive">Click me</Button>)
-      expect(screen.getByRole('button')).toHaveClass('bg-components-button-destructive-secondary-bg')
+    it('applies destructive tone with default variant', async () => {
+      const screen = await render(<Button tone="destructive">Click me</Button>)
+      await expect.element(screen.getByRole('button')).toHaveClass('bg-components-button-destructive-secondary-bg')
     })
 
-    it('applies destructive tone with primary variant', () => {
-      render(<Button variant="primary" tone="destructive">Click me</Button>)
-      expect(screen.getByRole('button')).toHaveClass('bg-components-button-destructive-primary-bg')
+    it('applies destructive tone with primary variant', async () => {
+      const screen = await render(<Button variant="primary" tone="destructive">Click me</Button>)
+      await expect.element(screen.getByRole('button')).toHaveClass('bg-components-button-destructive-primary-bg')
     })
 
-    it('applies destructive tone with tertiary variant', () => {
-      render(<Button variant="tertiary" tone="destructive">Click me</Button>)
-      expect(screen.getByRole('button')).toHaveClass('bg-components-button-destructive-tertiary-bg')
+    it('applies destructive tone with tertiary variant', async () => {
+      const screen = await render(<Button variant="tertiary" tone="destructive">Click me</Button>)
+      await expect.element(screen.getByRole('button')).toHaveClass('bg-components-button-destructive-tertiary-bg')
     })
 
-    it('applies destructive tone with ghost variant', () => {
-      render(<Button variant="ghost" tone="destructive">Click me</Button>)
-      expect(screen.getByRole('button')).toHaveClass('text-components-button-destructive-ghost-text')
+    it('applies destructive tone with ghost variant', async () => {
+      const screen = await render(<Button variant="ghost" tone="destructive">Click me</Button>)
+      await expect.element(screen.getByRole('button')).toHaveClass('text-components-button-destructive-ghost-text')
     })
   })
 
   describe('sizes', () => {
-    it('applies default medium size', () => {
-      render(<Button>Click me</Button>)
-      expect(screen.getByRole('button')).toHaveClass('h-8', 'rounded-lg')
+    it('applies default medium size', async () => {
+      const screen = await render(<Button>Click me</Button>)
+      await expect.element(screen.getByRole('button')).toHaveClass('h-8', 'rounded-lg')
     })
 
     it.each([
       { size: 'small' as const, expectedClass: 'h-6' },
       { size: 'medium' as const, expectedClass: 'h-8' },
       { size: 'large' as const, expectedClass: 'h-9' },
-    ])('applies $size size', ({ size, expectedClass }) => {
-      render(<Button size={size}>Click me</Button>)
-      expect(screen.getByRole('button')).toHaveClass(expectedClass)
+    ])('applies $size size', async ({ size, expectedClass }) => {
+      const screen = await render(<Button size={size}>Click me</Button>)
+      await expect.element(screen.getByRole('button')).toHaveClass(expectedClass)
     })
   })
 
   describe('loading', () => {
-    it('shows spinner when loading', () => {
-      render(<Button loading>Click me</Button>)
-      expect(screen.getByRole('button').querySelector('[aria-hidden="true"]')).toBeInTheDocument()
+    it('shows spinner when loading', async () => {
+      const screen = await render(<Button loading>Click me</Button>)
+      expect(screen.getByRole('button').element().querySelector('[aria-hidden="true"]')).toBeInTheDocument()
     })
 
-    it('hides spinner when not loading', () => {
-      render(<Button loading={false}>Click me</Button>)
-      expect(screen.getByRole('button').querySelector('[aria-hidden="true"]')).not.toBeInTheDocument()
+    it('hides spinner when not loading', async () => {
+      const screen = await render(<Button loading={false}>Click me</Button>)
+      expect(screen.getByRole('button').element().querySelector('[aria-hidden="true"]')).not.toBeInTheDocument()
     })
 
-    it('auto-disables when loading', () => {
-      render(<Button loading>Click me</Button>)
-      expect(screen.getByRole('button')).toBeDisabled()
+    it('auto-disables when loading', async () => {
+      const screen = await render(<Button loading>Click me</Button>)
+      await expect.element(screen.getByRole('button')).toBeDisabled()
     })
 
-    it('sets aria-busy when loading', () => {
-      render(<Button loading>Click me</Button>)
-      expect(screen.getByRole('button')).toHaveAttribute('aria-busy', 'true')
+    it('sets aria-busy when loading', async () => {
+      const screen = await render(<Button loading>Click me</Button>)
+      await expect.element(screen.getByRole('button')).toHaveAttribute('aria-busy', 'true')
     })
 
-    it('does not set aria-busy when not loading', () => {
-      render(<Button>Click me</Button>)
-      expect(screen.getByRole('button')).not.toHaveAttribute('aria-busy')
+    it('does not set aria-busy when not loading', async () => {
+      const screen = await render(<Button>Click me</Button>)
+      await expect.element(screen.getByRole('button')).not.toHaveAttribute('aria-busy')
     })
   })
 
   describe('disabled', () => {
-    it('disables button when disabled prop is set', () => {
-      render(<Button disabled>Click me</Button>)
-      expect(screen.getByRole('button')).toBeDisabled()
+    it('disables button when disabled prop is set', async () => {
+      const screen = await render(<Button disabled>Click me</Button>)
+      await expect.element(screen.getByRole('button')).toBeDisabled()
     })
 
-    it('keeps focusable when loading with focusableWhenDisabled', () => {
-      render(<Button loading focusableWhenDisabled>Loading</Button>)
-      const button = screen.getByRole('button')
+    it('keeps focusable when loading with focusableWhenDisabled', async () => {
+      const screen = await render(<Button loading focusableWhenDisabled>Loading</Button>)
+      const button = screen.getByRole('button').element()
       expect(button).toHaveAttribute('aria-disabled', 'true')
     })
   })
 
   describe('events', () => {
-    it('fires onClick when clicked', () => {
+    it('fires onClick when clicked', async () => {
       const onClick = vi.fn()
-      render(<Button onClick={onClick}>Click me</Button>)
-      fireEvent.click(screen.getByRole('button'))
+      const screen = await render(<Button onClick={onClick}>Click me</Button>)
+      await screen.getByRole('button').click()
       expect(onClick).toHaveBeenCalledTimes(1)
     })
 
-    it('does not fire onClick when disabled', () => {
+    it('does not fire onClick when disabled', async () => {
       const onClick = vi.fn()
-      render(<Button onClick={onClick} disabled>Click me</Button>)
-      fireEvent.click(screen.getByRole('button'))
+      const screen = await render(<Button onClick={onClick} disabled>Click me</Button>)
+      asHTMLElement(screen.getByRole('button').element()).click()
       expect(onClick).not.toHaveBeenCalled()
     })
 
-    it('does not fire onClick when loading', () => {
+    it('does not fire onClick when loading', async () => {
       const onClick = vi.fn()
-      render(<Button onClick={onClick} loading>Click me</Button>)
-      fireEvent.click(screen.getByRole('button'))
+      const screen = await render(<Button onClick={onClick} loading>Click me</Button>)
+      asHTMLElement(screen.getByRole('button').element()).click()
       expect(onClick).not.toHaveBeenCalled()
     })
   })
 
   describe('className merging', () => {
-    it('merges custom className with variant classes', () => {
-      render(<Button className="custom-class">Click me</Button>)
-      const btn = screen.getByRole('button')
+    it('merges custom className with variant classes', async () => {
+      const screen = await render(<Button className="custom-class">Click me</Button>)
+      const btn = screen.getByRole('button').element()
       expect(btn).toHaveClass('custom-class')
       expect(btn).toHaveClass('inline-flex')
     })
   })
 
   describe('ref forwarding', () => {
-    it('forwards ref to the button element', () => {
+    it('forwards ref to the button element', async () => {
       let buttonRef: HTMLButtonElement | null = null
-      render(
+      await render(
         <Button ref={(el) => {
           buttonRef = el
         }}
diff --git a/packages/dify-ui/src/context-menu/__tests__/index.spec.tsx b/packages/dify-ui/src/context-menu/__tests__/index.spec.tsx
index 7146f3b15e..6e1fdacb65 100644
--- a/packages/dify-ui/src/context-menu/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/context-menu/__tests__/index.spec.tsx
@@ -1,5 +1,4 @@
-import { fireEvent, render, screen, within } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
+import { render } from 'vitest-browser-react'
 import {
   ContextMenu,
   ContextMenuContent,
@@ -12,10 +11,16 @@ import {
   ContextMenuTrigger,
 } from '../index'
 
+const renderWithSafeViewport = (ui: import('react').ReactNode) => render(
+  <div style={{ minHeight: '100vh', minWidth: '100vw', padding: '240px' }}>
+    {ui}
+  </div>,
+)
+
 describe('context-menu wrapper', () => {
   describe('ContextMenuContent', () => {
-    it('should position content at bottom-start with default placement when props are omitted', () => {
-      render(
+    it('should position content at bottom-start with default placement when props are omitted', async () => {
+      const screen = await renderWithSafeViewport(
         <ContextMenu open>
           <ContextMenuTrigger aria-label="context trigger">Open</ContextMenuTrigger>
           <ContextMenuContent positionerProps={{ 'role': 'group', 'aria-label': 'content positioner' }}>
@@ -24,15 +29,13 @@ describe('context-menu wrapper', () => {
         </ContextMenu>,
       )
 
-      const positioner = screen.getByRole('group', { name: 'content positioner' })
-      const popup = screen.getByRole('menu')
-      expect(positioner).toHaveAttribute('data-side', 'bottom')
-      expect(positioner).toHaveAttribute('data-align', 'start')
-      expect(within(popup).getByRole('menuitem', { name: 'Content action' })).toBeInTheDocument()
+      await expect.element(screen.getByRole('group', { name: 'content positioner' })).toHaveAttribute('data-side', 'bottom')
+      await expect.element(screen.getByRole('group', { name: 'content positioner' })).toHaveAttribute('data-align', 'start')
+      await expect.element(screen.getByRole('menuitem', { name: 'Content action' })).toBeInTheDocument()
     })
 
-    it('should apply custom placement when custom positioning props are provided', () => {
-      render(
+    it('should apply custom top placement and keep point-anchor alignment stable when custom positioning props are provided', async () => {
+      const screen = await renderWithSafeViewport(
         <ContextMenu open>
           <ContextMenuTrigger aria-label="context trigger">Open</ContextMenuTrigger>
           <ContextMenuContent
@@ -46,18 +49,16 @@ describe('context-menu wrapper', () => {
         </ContextMenu>,
       )
 
-      const positioner = screen.getByRole('group', { name: 'custom content positioner' })
-      const popup = screen.getByRole('menu')
-      expect(positioner).toHaveAttribute('data-side', 'top')
-      expect(positioner).toHaveAttribute('data-align', 'end')
-      expect(within(popup).getByRole('menuitem', { name: 'Custom content' })).toBeInTheDocument()
+      await expect.element(screen.getByRole('group', { name: 'custom content positioner' })).toHaveAttribute('data-side', 'top')
+      await expect.element(screen.getByRole('group', { name: 'custom content positioner' })).toHaveAttribute('data-align', 'start')
+      await expect.element(screen.getByRole('menuitem', { name: 'Custom content' })).toBeInTheDocument()
     })
 
-    it('should forward passthrough attributes and handlers when positionerProps and popupProps are provided', () => {
+    it('should forward passthrough attributes and handlers when positionerProps and popupProps are provided', async () => {
       const handlePositionerMouseEnter = vi.fn()
       const handlePopupClick = vi.fn()
 
-      render(
+      const screen = await render(
         <ContextMenu open>
           <ContextMenuTrigger aria-label="context trigger">Open</ContextMenuTrigger>
           <ContextMenuContent
@@ -78,20 +79,19 @@ describe('context-menu wrapper', () => {
         </ContextMenu>,
       )
 
-      const positioner = screen.getByRole('group', { name: 'context content positioner' })
-      const popup = screen.getByRole('menu')
-      fireEvent.mouseEnter(positioner)
-      fireEvent.click(popup)
-      expect(positioner).toHaveAttribute('id', 'context-content-positioner')
-      expect(popup).toHaveAttribute('id', 'context-content-popup')
+      await screen.getByRole('group', { name: 'context content positioner' }).hover()
+      await screen.getByRole('menu').click()
+
+      await expect.element(screen.getByRole('group', { name: 'context content positioner' })).toHaveAttribute('id', 'context-content-positioner')
+      await expect.element(screen.getByRole('menu')).toHaveAttribute('id', 'context-content-popup')
       expect(handlePositionerMouseEnter).toHaveBeenCalledTimes(1)
       expect(handlePopupClick).toHaveBeenCalledTimes(1)
     })
   })
 
   describe('ContextMenuSubContent', () => {
-    it('should position sub-content at right-start with default placement when props are omitted', () => {
-      render(
+    it('should position sub-content at right-start with default placement when props are omitted', async () => {
+      const screen = await renderWithSafeViewport(
         <ContextMenu open>
           <ContextMenuTrigger aria-label="context trigger">Open</ContextMenuTrigger>
           <ContextMenuContent>
@@ -105,18 +105,17 @@ describe('context-menu wrapper', () => {
         </ContextMenu>,
       )
 
-      const positioner = screen.getByRole('group', { name: 'sub positioner' })
-      expect(positioner).toHaveAttribute('data-side', 'right')
-      expect(positioner).toHaveAttribute('data-align', 'start')
-      expect(screen.getByRole('menuitem', { name: 'Sub action' })).toBeInTheDocument()
+      await expect.element(screen.getByRole('group', { name: 'sub positioner' })).toHaveAttribute('data-side', 'right')
+      await expect.element(screen.getByRole('group', { name: 'sub positioner' })).toHaveAttribute('data-align', 'start')
+      await expect.element(screen.getByRole('menuitem', { name: 'Sub action' })).toBeInTheDocument()
     })
   })
 
   describe('variant prop behavior', () => {
-    it.each(['default', 'destructive'] as const)('should remain interactive and set data-variant on item when variant is %s', (variant) => {
+    it.each(['default', 'destructive'] as const)('should remain interactive and set data-variant on item when variant is %s', async (variant) => {
       const handleClick = vi.fn()
 
-      render(
+      const screen = await render(
         <ContextMenu open>
           <ContextMenuTrigger aria-label="context trigger">Open</ContextMenuTrigger>
           <ContextMenuContent>
@@ -132,17 +131,16 @@ describe('context-menu wrapper', () => {
         </ContextMenu>,
       )
 
-      const item = screen.getByRole('menuitem', { name: 'menu action' })
-      fireEvent.click(item)
-      expect(item).toHaveAttribute('id', `context-item-${variant}`)
-      expect(item).toHaveAttribute('data-variant', variant)
+      await screen.getByRole('menuitem', { name: 'menu action' }).click()
+      await expect.element(screen.getByRole('menuitem', { name: 'menu action' })).toHaveAttribute('id', `context-item-${variant}`)
+      await expect.element(screen.getByRole('menuitem', { name: 'menu action' })).toHaveAttribute('data-variant', variant)
       expect(handleClick).toHaveBeenCalledTimes(1)
     })
 
-    it.each(['default', 'destructive'] as const)('should remain interactive and set data-variant on submenu trigger when variant is %s', (variant) => {
+    it.each(['default', 'destructive'] as const)('should remain interactive and set data-variant on submenu trigger when variant is %s', async (variant) => {
       const handleClick = vi.fn()
 
-      render(
+      const screen = await render(
         <ContextMenu open>
           <ContextMenuTrigger aria-label="context trigger">Open</ContextMenuTrigger>
           <ContextMenuContent>
@@ -160,15 +158,14 @@ describe('context-menu wrapper', () => {
         </ContextMenu>,
       )
 
-      const trigger = screen.getByRole('menuitem', { name: 'submenu action' })
-      fireEvent.click(trigger)
-      expect(trigger).toHaveAttribute('id', `context-sub-${variant}`)
-      expect(trigger).toHaveAttribute('data-variant', variant)
+      await screen.getByRole('menuitem', { name: 'submenu action' }).click()
+      await expect.element(screen.getByRole('menuitem', { name: 'submenu action' })).toHaveAttribute('id', `context-sub-${variant}`)
+      await expect.element(screen.getByRole('menuitem', { name: 'submenu action' })).toHaveAttribute('data-variant', variant)
       expect(handleClick).toHaveBeenCalledTimes(1)
     })
 
-    it.each(['default', 'destructive'] as const)('should remain interactive and set data-variant on link item when variant is %s', (variant) => {
-      render(
+    it.each(['default', 'destructive'] as const)('should remain interactive and set data-variant on link item when variant is %s', async (variant) => {
+      const screen = await render(
         <ContextMenu open>
           <ContextMenuTrigger aria-label="context trigger">Open</ContextMenuTrigger>
           <ContextMenuContent>
@@ -186,7 +183,7 @@ describe('context-menu wrapper', () => {
         </ContextMenu>,
       )
 
-      const link = screen.getByRole('menuitem', { name: 'context docs link' })
+      const link = screen.getByRole('menuitem', { name: 'context docs link' }).element()
       expect(link.tagName.toLowerCase()).toBe('a')
       expect(link).toHaveAttribute('id', `context-link-${variant}`)
       expect(link).toHaveAttribute('data-variant', variant)
@@ -194,8 +191,8 @@ describe('context-menu wrapper', () => {
   })
 
   describe('ContextMenuLinkItem close behavior', () => {
-    it('should keep link semantics and not leak closeOnClick prop when closeOnClick is false', () => {
-      render(
+    it('should keep link semantics and not leak closeOnClick prop when closeOnClick is false', async () => {
+      const screen = await render(
         <ContextMenu open>
           <ContextMenuTrigger aria-label="context trigger">Open</ContextMenuTrigger>
           <ContextMenuContent>
@@ -210,7 +207,7 @@ describe('context-menu wrapper', () => {
         </ContextMenu>,
       )
 
-      const link = screen.getByRole('menuitem', { name: 'docs link' })
+      const link = screen.getByRole('menuitem', { name: 'docs link' }).element()
       expect(link.tagName.toLowerCase()).toBe('a')
       expect(link).toHaveAttribute('href', 'https://example.com/docs')
       expect(link).not.toHaveAttribute('closeOnClick')
@@ -218,8 +215,8 @@ describe('context-menu wrapper', () => {
   })
 
   describe('ContextMenuTrigger interaction', () => {
-    it('should open menu when right-clicking trigger area', () => {
-      render(
+    it('should open menu when right-clicking trigger area', async () => {
+      const screen = await render(
         <ContextMenu>
           <ContextMenuTrigger aria-label="context trigger area">
             Trigger area
@@ -230,15 +227,19 @@ describe('context-menu wrapper', () => {
         </ContextMenu>,
       )
 
-      const trigger = screen.getByLabelText('context trigger area')
-      fireEvent.contextMenu(trigger)
-      expect(screen.getByRole('menuitem', { name: 'Open on right click' })).toBeInTheDocument()
+      screen.getByLabelText('context trigger area').element().dispatchEvent(new MouseEvent('contextmenu', {
+        bubbles: true,
+        cancelable: true,
+        button: 2,
+      }))
+
+      await expect.element(screen.getByRole('menuitem', { name: 'Open on right click' })).toBeInTheDocument()
     })
   })
 
   describe('ContextMenuSeparator', () => {
-    it('should render separator and keep surrounding rows when separator is between items', () => {
-      render(
+    it('should render separator and keep surrounding rows when separator is between items', async () => {
+      const screen = await render(
         <ContextMenu open>
           <ContextMenuTrigger aria-label="context trigger">Open</ContextMenuTrigger>
           <ContextMenuContent>
@@ -249,9 +250,9 @@ describe('context-menu wrapper', () => {
         </ContextMenu>,
       )
 
-      expect(screen.getByRole('menuitem', { name: 'First action' })).toBeInTheDocument()
-      expect(screen.getByRole('menuitem', { name: 'Second action' })).toBeInTheDocument()
-      expect(screen.getAllByRole('separator')).toHaveLength(1)
+      await expect.element(screen.getByRole('menuitem', { name: 'First action' })).toBeInTheDocument()
+      await expect.element(screen.getByRole('menuitem', { name: 'Second action' })).toBeInTheDocument()
+      expect(screen.getByRole('separator').elements()).toHaveLength(1)
     })
   })
 })
diff --git a/packages/dify-ui/src/dialog/__tests__/index.spec.tsx b/packages/dify-ui/src/dialog/__tests__/index.spec.tsx
index 55f4e53288..e2126d1441 100644
--- a/packages/dify-ui/src/dialog/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/dialog/__tests__/index.spec.tsx
@@ -1,5 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
+import { render } from 'vitest-browser-react'
 import {
   Dialog,
   DialogCloseButton,
@@ -8,10 +7,12 @@ import {
   DialogTitle,
 } from '../index'
 
+const asHTMLElement = (element: HTMLElement | SVGElement) => element as HTMLElement
+
 describe('Dialog wrapper', () => {
   describe('Rendering', () => {
-    it('should render dialog content when dialog is open', () => {
-      render(
+    it('should render dialog content when dialog is open', async () => {
+      const screen = await render(
         <Dialog open>
           <DialogContent>
             <DialogTitle>Dialog Title</DialogTitle>
@@ -20,15 +21,14 @@ describe('Dialog wrapper', () => {
         </Dialog>,
       )
 
-      const dialog = screen.getByRole('dialog')
-      expect(dialog).toHaveTextContent('Dialog Title')
-      expect(dialog).toHaveTextContent('Dialog Description')
+      await expect.element(screen.getByRole('dialog')).toHaveTextContent('Dialog Title')
+      await expect.element(screen.getByRole('dialog')).toHaveTextContent('Dialog Description')
     })
   })
 
   describe('Props', () => {
-    it('should not render close button when DialogCloseButton is not provided', () => {
-      render(
+    it('should not render close button when DialogCloseButton is not provided', async () => {
+      const screen = await render(
         <Dialog open>
           <DialogContent>
             <span>Dialog body</span>
@@ -36,11 +36,11 @@ describe('Dialog wrapper', () => {
         </Dialog>,
       )
 
-      expect(screen.queryByRole('button', { name: 'Close' })).not.toBeInTheDocument()
+      expect(() => screen.getByRole('button', { name: 'Close' }).element()).toThrow()
     })
 
-    it('should render explicit close button with custom aria-label', () => {
-      render(
+    it('should render explicit close button with custom aria-label', async () => {
+      const screen = await render(
         <Dialog open>
           <DialogContent>
             <DialogCloseButton aria-label="Dismiss dialog" />
@@ -49,11 +49,11 @@ describe('Dialog wrapper', () => {
         </Dialog>,
       )
 
-      expect(screen.getByRole('button', { name: 'Dismiss dialog' })).toBeInTheDocument()
+      await expect.element(screen.getByRole('button', { name: 'Dismiss dialog' })).toBeInTheDocument()
     })
 
-    it('should render default close button label when aria-label is omitted', () => {
-      render(
+    it('should render default close button label when aria-label is omitted', async () => {
+      const screen = await render(
         <Dialog open>
           <DialogContent>
             <DialogCloseButton />
@@ -62,12 +62,12 @@ describe('Dialog wrapper', () => {
         </Dialog>,
       )
 
-      expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
+      await expect.element(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
     })
 
-    it('should forward close button props to base primitive', () => {
+    it('should forward close button props to base primitive', async () => {
       const onClick = vi.fn()
-      render(
+      const screen = await render(
         <Dialog open>
           <DialogContent>
             <DialogCloseButton data-testid="close-button" disabled onClick={onClick} />
@@ -77,8 +77,8 @@ describe('Dialog wrapper', () => {
       )
 
       const closeButton = screen.getByTestId('close-button')
-      expect(closeButton).toBeDisabled()
-      fireEvent.click(closeButton)
+      await expect.element(closeButton).toBeDisabled()
+      asHTMLElement(closeButton.element()).click()
       expect(onClick).not.toHaveBeenCalled()
     })
   })
diff --git a/packages/dify-ui/src/dropdown-menu/__tests__/index.spec.tsx b/packages/dify-ui/src/dropdown-menu/__tests__/index.spec.tsx
index 89b1ebf100..a9753a8444 100644
--- a/packages/dify-ui/src/dropdown-menu/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/dropdown-menu/__tests__/index.spec.tsx
@@ -1,5 +1,4 @@
-import { fireEvent, render, screen, within } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
+import { render } from 'vitest-browser-react'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -12,10 +11,16 @@ import {
   DropdownMenuTrigger,
 } from '../index'
 
+const renderWithSafeViewport = (ui: import('react').ReactNode) => render(
+  <div style={{ minHeight: '100vh', minWidth: '100vw', padding: '240px' }}>
+    {ui}
+  </div>,
+)
+
 describe('dropdown-menu wrapper', () => {
   describe('DropdownMenuContent', () => {
-    it('should position content at bottom-end with default placement when props are omitted', () => {
-      render(
+    it('should position content at bottom-end with default placement when props are omitted', async () => {
+      const screen = await renderWithSafeViewport(
         <DropdownMenu open>
           <DropdownMenuTrigger aria-label="menu trigger">Open</DropdownMenuTrigger>
           <DropdownMenuContent positionerProps={{ 'role': 'group', 'aria-label': 'content positioner' }}>
@@ -24,16 +29,13 @@ describe('dropdown-menu wrapper', () => {
         </DropdownMenu>,
       )
 
-      const positioner = screen.getByRole('group', { name: 'content positioner' })
-      const popup = screen.getByRole('menu')
-
-      expect(positioner).toHaveAttribute('data-side', 'bottom')
-      expect(positioner).toHaveAttribute('data-align', 'end')
-      expect(within(popup).getByRole('menuitem', { name: 'Content action' })).toBeInTheDocument()
+      await expect.element(screen.getByRole('group', { name: 'content positioner' })).toHaveAttribute('data-side', 'bottom')
+      await expect.element(screen.getByRole('group', { name: 'content positioner' })).toHaveAttribute('data-align', 'end')
+      await expect.element(screen.getByRole('menuitem', { name: 'Content action' })).toBeInTheDocument()
     })
 
-    it('should apply custom placement when custom positioning props are provided', () => {
-      render(
+    it('should apply custom placement when custom positioning props are provided', async () => {
+      const screen = await renderWithSafeViewport(
         <DropdownMenu open>
           <DropdownMenuTrigger aria-label="menu trigger">Open</DropdownMenuTrigger>
           <DropdownMenuContent
@@ -47,19 +49,16 @@ describe('dropdown-menu wrapper', () => {
         </DropdownMenu>,
       )
 
-      const positioner = screen.getByRole('group', { name: 'custom content positioner' })
-      const popup = screen.getByRole('menu')
-
-      expect(positioner).toHaveAttribute('data-side', 'top')
-      expect(positioner).toHaveAttribute('data-align', 'start')
-      expect(within(popup).getByRole('menuitem', { name: 'Custom content' })).toBeInTheDocument()
+      await expect.element(screen.getByRole('group', { name: 'custom content positioner' })).toHaveAttribute('data-side', 'top')
+      await expect.element(screen.getByRole('group', { name: 'custom content positioner' })).toHaveAttribute('data-align', 'start')
+      await expect.element(screen.getByRole('menuitem', { name: 'Custom content' })).toBeInTheDocument()
     })
 
-    it('should forward passthrough attributes and handlers when positionerProps and popupProps are provided', () => {
+    it('should forward passthrough attributes and handlers when positionerProps and popupProps are provided', async () => {
       const handlePositionerMouseEnter = vi.fn()
       const handlePopupClick = vi.fn()
 
-      render(
+      const screen = await render(
         <DropdownMenu open>
           <DropdownMenuTrigger aria-label="menu trigger">Open</DropdownMenuTrigger>
           <DropdownMenuContent
@@ -80,21 +79,19 @@ describe('dropdown-menu wrapper', () => {
         </DropdownMenu>,
       )
 
-      const positioner = screen.getByRole('group', { name: 'dropdown content positioner' })
-      const popup = screen.getByRole('menu')
-      fireEvent.mouseEnter(positioner)
-      fireEvent.click(popup)
+      await screen.getByRole('group', { name: 'dropdown content positioner' }).hover()
+      await screen.getByRole('menu').click()
 
-      expect(positioner).toHaveAttribute('id', 'dropdown-content-positioner')
-      expect(popup).toHaveAttribute('id', 'dropdown-content-popup')
+      await expect.element(screen.getByRole('group', { name: 'dropdown content positioner' })).toHaveAttribute('id', 'dropdown-content-positioner')
+      await expect.element(screen.getByRole('menu')).toHaveAttribute('id', 'dropdown-content-popup')
       expect(handlePositionerMouseEnter).toHaveBeenCalledTimes(1)
       expect(handlePopupClick).toHaveBeenCalledTimes(1)
     })
   })
 
   describe('DropdownMenuSubContent', () => {
-    it('should position sub-content at left-start with default placement when props are omitted', () => {
-      render(
+    it('should position sub-content at left-start with default placement when props are omitted', async () => {
+      const screen = await renderWithSafeViewport(
         <DropdownMenu open>
           <DropdownMenuTrigger aria-label="menu trigger">Open</DropdownMenuTrigger>
           <DropdownMenuContent>
@@ -108,17 +105,16 @@ describe('dropdown-menu wrapper', () => {
         </DropdownMenu>,
       )
 
-      const positioner = screen.getByRole('group', { name: 'sub positioner' })
-      expect(positioner).toHaveAttribute('data-side', 'left')
-      expect(positioner).toHaveAttribute('data-align', 'start')
-      expect(screen.getByRole('menuitem', { name: 'Sub action' })).toBeInTheDocument()
+      await expect.element(screen.getByRole('group', { name: 'sub positioner' })).toHaveAttribute('data-side', 'left')
+      await expect.element(screen.getByRole('group', { name: 'sub positioner' })).toHaveAttribute('data-align', 'start')
+      await expect.element(screen.getByRole('menuitem', { name: 'Sub action' })).toBeInTheDocument()
     })
 
-    it('should apply custom placement and forward passthrough props for sub-content when custom props are provided', () => {
+    it('should apply custom placement and forward passthrough props for sub-content when custom props are provided', async () => {
       const handlePositionerFocus = vi.fn()
       const handlePopupClick = vi.fn()
 
-      render(
+      const screen = await render(
         <DropdownMenu open>
           <DropdownMenuTrigger aria-label="menu trigger">Open</DropdownMenuTrigger>
           <DropdownMenuContent>
@@ -147,23 +143,23 @@ describe('dropdown-menu wrapper', () => {
         </DropdownMenu>,
       )
 
-      const positioner = screen.getByRole('group', { name: 'dropdown sub positioner' })
-      const popup = screen.getByRole('menu', { name: 'More actions' })
-      fireEvent.focus(positioner)
-      fireEvent.click(popup)
+      screen.getByRole('group', { name: 'dropdown sub positioner' }).element().dispatchEvent(new FocusEvent('focus', {
+        bubbles: true,
+      }))
+      await screen.getByRole('menu', { name: 'More actions' }).click()
 
-      expect(positioner).toHaveAttribute('data-side', 'right')
-      expect(positioner).toHaveAttribute('data-align', 'end')
-      expect(positioner).toHaveAttribute('id', 'dropdown-sub-positioner')
-      expect(popup).toHaveAttribute('id', 'dropdown-sub-popup')
+      await expect.element(screen.getByRole('group', { name: 'dropdown sub positioner' })).toHaveAttribute('data-side', 'right')
+      await expect.element(screen.getByRole('group', { name: 'dropdown sub positioner' })).toHaveAttribute('data-align', 'end')
+      await expect.element(screen.getByRole('group', { name: 'dropdown sub positioner' })).toHaveAttribute('id', 'dropdown-sub-positioner')
+      await expect.element(screen.getByRole('menu', { name: 'More actions' })).toHaveAttribute('id', 'dropdown-sub-popup')
       expect(handlePositionerFocus).toHaveBeenCalledTimes(1)
       expect(handlePopupClick).toHaveBeenCalledTimes(1)
     })
   })
 
   describe('DropdownMenuSubTrigger', () => {
-    it('should render submenu trigger content when trigger children are provided', () => {
-      render(
+    it('should render submenu trigger content when trigger children are provided', async () => {
+      const screen = await render(
         <DropdownMenu open>
           <DropdownMenuTrigger aria-label="menu trigger">Open</DropdownMenuTrigger>
           <DropdownMenuContent>
@@ -174,13 +170,13 @@ describe('dropdown-menu wrapper', () => {
         </DropdownMenu>,
       )
 
-      expect(screen.getByRole('menuitem', { name: 'Trigger item' })).toBeInTheDocument()
+      await expect.element(screen.getByRole('menuitem', { name: 'Trigger item' })).toBeInTheDocument()
     })
 
-    it.each(['default', 'destructive'] as const)('should remain interactive and set data-variant on submenu trigger when variant is %s', (variant) => {
+    it.each(['default', 'destructive'] as const)('should remain interactive and set data-variant on submenu trigger when variant is %s', async (variant) => {
       const handleClick = vi.fn()
 
-      render(
+      const screen = await render(
         <DropdownMenu open>
           <DropdownMenuTrigger aria-label="menu trigger">Open</DropdownMenuTrigger>
           <DropdownMenuContent>
@@ -198,20 +194,18 @@ describe('dropdown-menu wrapper', () => {
         </DropdownMenu>,
       )
 
-      const subTrigger = screen.getByRole('menuitem', { name: 'submenu action' })
-      fireEvent.click(subTrigger)
-
-      expect(subTrigger).toHaveAttribute('id', `submenu-trigger-${variant}`)
-      expect(subTrigger).toHaveAttribute('data-variant', variant)
+      await screen.getByRole('menuitem', { name: 'submenu action' }).click()
+      await expect.element(screen.getByRole('menuitem', { name: 'submenu action' })).toHaveAttribute('id', `submenu-trigger-${variant}`)
+      await expect.element(screen.getByRole('menuitem', { name: 'submenu action' })).toHaveAttribute('data-variant', variant)
       expect(handleClick).toHaveBeenCalledTimes(1)
     })
   })
 
   describe('DropdownMenuItem', () => {
-    it.each(['default', 'destructive'] as const)('should remain interactive and set data-variant when variant is %s', (variant) => {
+    it.each(['default', 'destructive'] as const)('should remain interactive and set data-variant when variant is %s', async (variant) => {
       const handleClick = vi.fn()
 
-      render(
+      const screen = await render(
         <DropdownMenu open>
           <DropdownMenuTrigger aria-label="menu trigger">Open</DropdownMenuTrigger>
           <DropdownMenuContent>
@@ -227,18 +221,16 @@ describe('dropdown-menu wrapper', () => {
         </DropdownMenu>,
       )
 
-      const item = screen.getByRole('menuitem', { name: 'menu action' })
-      fireEvent.click(item)
-
-      expect(item).toHaveAttribute('id', `menu-item-${variant}`)
-      expect(item).toHaveAttribute('data-variant', variant)
+      await screen.getByRole('menuitem', { name: 'menu action' }).click()
+      await expect.element(screen.getByRole('menuitem', { name: 'menu action' })).toHaveAttribute('id', `menu-item-${variant}`)
+      await expect.element(screen.getByRole('menuitem', { name: 'menu action' })).toHaveAttribute('data-variant', variant)
       expect(handleClick).toHaveBeenCalledTimes(1)
     })
   })
 
   describe('DropdownMenuLinkItem', () => {
-    it('should render as anchor and keep href/target attributes when link props are provided', () => {
-      render(
+    it('should render as anchor and keep href/target attributes when link props are provided', async () => {
+      const screen = await render(
         <DropdownMenu open>
           <DropdownMenuTrigger aria-label="menu trigger">Open</DropdownMenuTrigger>
           <DropdownMenuContent>
@@ -249,15 +241,15 @@ describe('dropdown-menu wrapper', () => {
         </DropdownMenu>,
       )
 
-      const link = screen.getByRole('menuitem', { name: 'Docs' })
+      const link = screen.getByRole('menuitem', { name: 'Docs' }).element()
       expect(link.tagName.toLowerCase()).toBe('a')
       expect(link).toHaveAttribute('href', 'https://example.com/docs')
       expect(link).toHaveAttribute('target', '_blank')
       expect(link).toHaveAttribute('rel', 'noopener noreferrer')
     })
 
-    it('should keep link semantics and not leak closeOnClick prop when closeOnClick is false', () => {
-      render(
+    it('should keep link semantics and not leak closeOnClick prop when closeOnClick is false', async () => {
+      const screen = await render(
         <DropdownMenu open>
           <DropdownMenuTrigger aria-label="menu trigger">Open</DropdownMenuTrigger>
           <DropdownMenuContent>
@@ -272,14 +264,14 @@ describe('dropdown-menu wrapper', () => {
         </DropdownMenu>,
       )
 
-      const link = screen.getByRole('menuitem', { name: 'docs link' })
+      const link = screen.getByRole('menuitem', { name: 'docs link' }).element()
       expect(link.tagName.toLowerCase()).toBe('a')
       expect(link).toHaveAttribute('href', 'https://example.com/docs')
       expect(link).not.toHaveAttribute('closeOnClick')
     })
 
-    it('should preserve link semantics when render prop uses a custom anchor element', () => {
-      render(
+    it('should preserve link semantics when render prop uses a custom anchor element', async () => {
+      const screen = await render(
         <DropdownMenu open>
           <DropdownMenuTrigger aria-label="menu trigger">Open</DropdownMenuTrigger>
           <DropdownMenuContent>
@@ -293,16 +285,16 @@ describe('dropdown-menu wrapper', () => {
         </DropdownMenu>,
       )
 
-      const link = screen.getByRole('menuitem', { name: 'account link' })
+      const link = screen.getByRole('menuitem', { name: 'account link' }).element()
       expect(link.tagName.toLowerCase()).toBe('a')
       expect(link).toHaveAttribute('href', '/account')
       expect(link).toHaveTextContent('Account settings')
     })
 
-    it.each(['default', 'destructive'] as const)('should remain interactive and set data-variant when variant is %s', (variant) => {
+    it.each(['default', 'destructive'] as const)('should remain interactive and set data-variant when variant is %s', async (variant) => {
       const handleClick = vi.fn()
 
-      render(
+      const screen = await render(
         <DropdownMenu open>
           <DropdownMenuTrigger aria-label="menu trigger">Open</DropdownMenuTrigger>
           <DropdownMenuContent>
@@ -311,7 +303,10 @@ describe('dropdown-menu wrapper', () => {
               href="https://example.com/docs"
               aria-label="docs link"
               id={`menu-link-${variant}`}
-              onClick={handleClick}
+              onClick={(event) => {
+                event.preventDefault()
+                handleClick(event)
+              }}
             >
               Docs
             </DropdownMenuLinkItem>
@@ -319,9 +314,9 @@ describe('dropdown-menu wrapper', () => {
         </DropdownMenu>,
       )
 
-      const link = screen.getByRole('menuitem', { name: 'docs link' })
-      fireEvent.click(link)
+      await screen.getByRole('menuitem', { name: 'docs link' }).click()
 
+      const link = screen.getByRole('menuitem', { name: 'docs link' }).element()
       expect(link.tagName.toLowerCase()).toBe('a')
       expect(link).toHaveAttribute('id', `menu-link-${variant}`)
       expect(link).toHaveAttribute('data-variant', variant)
@@ -330,10 +325,10 @@ describe('dropdown-menu wrapper', () => {
   })
 
   describe('DropdownMenuSeparator', () => {
-    it('should forward passthrough props and handlers when separator props are provided', () => {
+    it('should forward passthrough props and handlers when separator props are provided', async () => {
       const handleMouseEnter = vi.fn()
 
-      render(
+      const screen = await render(
         <DropdownMenu open>
           <DropdownMenuTrigger aria-label="menu trigger">Open</DropdownMenuTrigger>
           <DropdownMenuContent>
@@ -346,15 +341,15 @@ describe('dropdown-menu wrapper', () => {
         </DropdownMenu>,
       )
 
-      const separator = screen.getByRole('separator', { name: 'actions divider' })
-      fireEvent.mouseEnter(separator)
-
-      expect(separator).toHaveAttribute('id', 'menu-separator')
+      screen.getByRole('separator', { name: 'actions divider' }).element().dispatchEvent(new MouseEvent('mouseover', {
+        bubbles: true,
+      }))
+      await expect.element(screen.getByRole('separator', { name: 'actions divider' })).toHaveAttribute('id', 'menu-separator')
       expect(handleMouseEnter).toHaveBeenCalledTimes(1)
     })
 
-    it('should keep surrounding menu rows rendered when separator is placed between items', () => {
-      render(
+    it('should keep surrounding menu rows rendered when separator is placed between items', async () => {
+      const screen = await render(
         <DropdownMenu open>
           <DropdownMenuTrigger aria-label="menu trigger">Open</DropdownMenuTrigger>
           <DropdownMenuContent>
@@ -365,9 +360,9 @@ describe('dropdown-menu wrapper', () => {
         </DropdownMenu>,
       )
 
-      expect(screen.getByRole('menuitem', { name: 'First action' })).toBeInTheDocument()
-      expect(screen.getByRole('menuitem', { name: 'Second action' })).toBeInTheDocument()
-      expect(screen.getAllByRole('separator')).toHaveLength(1)
+      await expect.element(screen.getByRole('menuitem', { name: 'First action' })).toBeInTheDocument()
+      await expect.element(screen.getByRole('menuitem', { name: 'Second action' })).toBeInTheDocument()
+      expect(screen.getByRole('separator').elements()).toHaveLength(1)
     })
   })
 })
diff --git a/packages/dify-ui/src/number-field/__tests__/index.spec.tsx b/packages/dify-ui/src/number-field/__tests__/index.spec.tsx
index 4d83075f19..0461e5f40e 100644
--- a/packages/dify-ui/src/number-field/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/number-field/__tests__/index.spec.tsx
@@ -6,7 +6,7 @@ import type {
   NumberFieldInputProps,
   NumberFieldUnitProps,
 } from '../index'
-import { render, screen } from '@testing-library/react'
+import { render } from 'vitest-browser-react'
 import {
   NumberField,
   NumberFieldControls,
@@ -66,23 +66,20 @@ const renderNumberField = ({
 }
 
 describe('NumberField wrapper', () => {
-  // Group and input wrappers should preserve the design-system variants and DOM defaults.
   describe('Group and input', () => {
-    it('should apply medium group classes by default and merge custom className', () => {
-      renderNumberField({
+    it('should apply medium group classes by default and merge custom className', async () => {
+      const screen = await renderNumberField({
         groupProps: {
           className: 'custom-group',
         },
       })
 
-      const group = screen.getByTestId('group')
-
-      expect(group).toHaveClass('rounded-lg')
-      expect(group).toHaveClass('custom-group')
+      await expect.element(screen.getByTestId('group')).toHaveClass('rounded-lg')
+      await expect.element(screen.getByTestId('group')).toHaveClass('custom-group')
     })
 
-    it('should apply large group and input classes when large size is provided', () => {
-      renderNumberField({
+    it('should apply large group and input classes when large size is provided', async () => {
+      const screen = await renderNumberField({
         groupProps: {
           size: 'large',
         },
@@ -91,16 +88,13 @@ describe('NumberField wrapper', () => {
         },
       })
 
-      const group = screen.getByTestId('group')
-      const input = screen.getByTestId('input')
-
-      expect(group).toHaveClass('rounded-[10px]')
-      expect(input).toHaveClass('px-4')
-      expect(input).toHaveClass('py-2')
+      await expect.element(screen.getByTestId('group')).toHaveClass('rounded-[10px]')
+      await expect.element(screen.getByTestId('input')).toHaveClass('px-4')
+      await expect.element(screen.getByTestId('input')).toHaveClass('py-2')
     })
 
-    it('should set input defaults and forward passthrough props', () => {
-      renderNumberField({
+    it('should set input defaults and forward passthrough props', async () => {
+      const screen = await renderNumberField({
         inputProps: {
           className: 'custom-input',
           placeholder: 'Regular placeholder',
@@ -108,26 +102,23 @@ describe('NumberField wrapper', () => {
         },
       })
 
-      const input = screen.getByRole('textbox', { name: 'Amount' })
-
-      expect(input).toHaveAttribute('autoComplete', 'off')
-      expect(input).toHaveAttribute('autoCorrect', 'off')
-      expect(input).toHaveAttribute('placeholder', 'Regular placeholder')
-      expect(input).toBeRequired()
-      expect(input).toHaveClass('px-3')
-      expect(input).toHaveClass('py-[7px]')
-      expect(input).toHaveClass('system-sm-regular')
-      expect(input).toHaveClass('custom-input')
+      await expect.element(screen.getByRole('textbox', { name: 'Amount' })).toHaveAttribute('autocomplete', 'off')
+      await expect.element(screen.getByRole('textbox', { name: 'Amount' })).toHaveAttribute('autocorrect', 'off')
+      await expect.element(screen.getByRole('textbox', { name: 'Amount' })).toHaveAttribute('placeholder', 'Regular placeholder')
+      await expect.element(screen.getByRole('textbox', { name: 'Amount' })).toBeRequired()
+      await expect.element(screen.getByRole('textbox', { name: 'Amount' })).toHaveClass('px-3')
+      await expect.element(screen.getByRole('textbox', { name: 'Amount' })).toHaveClass('py-[7px]')
+      await expect.element(screen.getByRole('textbox', { name: 'Amount' })).toHaveClass('system-sm-regular')
+      await expect.element(screen.getByRole('textbox', { name: 'Amount' })).toHaveClass('custom-input')
     })
   })
 
-  // Unit and controls wrappers should preserve layout tokens and HTML passthrough props.
   describe('Unit and controls', () => {
     it.each([
       ['medium', 'pr-2'],
       ['large', 'pr-2.5'],
-    ] as const)('should apply the %s unit spacing variant', (size, spacingClass) => {
-      renderNumberField({
+    ] as const)('should apply the %s unit spacing variant', async (size, spacingClass) => {
+      const screen = await renderNumberField({
         unitProps: {
           size,
           className: 'custom-unit',
@@ -135,45 +126,37 @@ describe('NumberField wrapper', () => {
         },
       })
 
-      const unit = screen.getByTestId('unit')
-
-      expect(unit).toHaveTextContent('ms')
-      expect(unit).toHaveAttribute('title', `unit-${size}`)
-      expect(unit).toHaveClass('custom-unit')
-      expect(unit).toHaveClass(spacingClass)
+      await expect.element(screen.getByTestId('unit')).toHaveTextContent('ms')
+      await expect.element(screen.getByTestId('unit')).toHaveAttribute('title', `unit-${size}`)
+      await expect.element(screen.getByTestId('unit')).toHaveClass('custom-unit')
+      await expect.element(screen.getByTestId('unit')).toHaveClass(spacingClass)
     })
 
-    it('should forward passthrough props to controls', () => {
-      renderNumberField({
+    it('should forward passthrough props to controls', async () => {
+      const screen = await renderNumberField({
         controlsProps: {
           className: 'custom-controls',
           title: 'controls-title',
         },
       })
 
-      const controls = screen.getByTestId('controls')
-
-      expect(controls).toHaveAttribute('title', 'controls-title')
-      expect(controls).toHaveClass('custom-controls')
+      await expect.element(screen.getByTestId('controls')).toHaveAttribute('title', 'controls-title')
+      await expect.element(screen.getByTestId('controls')).toHaveClass('custom-controls')
     })
   })
 
-  // Increment and decrement buttons should preserve accessible naming, icon fallbacks, and spacing variants.
   describe('Control buttons', () => {
-    it('should provide english fallback aria labels and default icons when labels are not provided', () => {
-      renderNumberField({
+    it('should provide english fallback aria labels and default icons when labels are not provided', async () => {
+      const screen = await renderNumberField({
         controlsProps: {},
       })
 
-      const increment = screen.getByRole('button', { name: 'Increment value' })
-      const decrement = screen.getByRole('button', { name: 'Decrement value' })
-
-      expect(increment.querySelector('.i-ri-arrow-up-s-line')).toBeInTheDocument()
-      expect(decrement.querySelector('.i-ri-arrow-down-s-line')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Increment value' }).element().querySelector('.i-ri-arrow-up-s-line')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Decrement value' }).element().querySelector('.i-ri-arrow-down-s-line')).toBeInTheDocument()
     })
 
-    it('should preserve explicit aria labels and custom children', () => {
-      renderNumberField({
+    it('should preserve explicit aria labels and custom children', async () => {
+      const screen = await renderNumberField({
         controlsProps: {},
         incrementProps: {
           'aria-label': 'Increase amount',
@@ -185,17 +168,14 @@ describe('NumberField wrapper', () => {
         },
       })
 
-      const increment = screen.getByRole('button', { name: 'Increase amount' })
-      const decrement = screen.getByRole('button', { name: 'Decrease amount' })
-
-      expect(increment).toContainElement(screen.getByTestId('custom-increment-icon'))
-      expect(decrement).toContainElement(screen.getByTestId('custom-decrement-icon'))
-      expect(increment.querySelector('.i-ri-arrow-up-s-line')).not.toBeInTheDocument()
-      expect(decrement.querySelector('.i-ri-arrow-down-s-line')).not.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Increase amount' }).element()).toContainElement(screen.getByTestId('custom-increment-icon').element())
+      expect(screen.getByRole('button', { name: 'Decrease amount' }).element()).toContainElement(screen.getByTestId('custom-decrement-icon').element())
+      expect(screen.getByRole('button', { name: 'Increase amount' }).element().querySelector('.i-ri-arrow-up-s-line')).not.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Decrease amount' }).element().querySelector('.i-ri-arrow-down-s-line')).not.toBeInTheDocument()
     })
 
-    it('should keep the fallback aria labels when aria-label is omitted in props', () => {
-      renderNumberField({
+    it('should keep the fallback aria labels when aria-label is omitted in props', async () => {
+      const screen = await renderNumberField({
         controlsProps: {},
         incrementProps: {
           'aria-label': undefined,
@@ -205,12 +185,12 @@ describe('NumberField wrapper', () => {
         },
       })
 
-      expect(screen.getByRole('button', { name: 'Increment value' })).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'Decrement value' })).toBeInTheDocument()
+      await expect.element(screen.getByRole('button', { name: 'Increment value' })).toBeInTheDocument()
+      await expect.element(screen.getByRole('button', { name: 'Decrement value' })).toBeInTheDocument()
     })
 
-    it('should rely on aria-labelledby when provided instead of injecting a fallback aria-label', () => {
-      render(
+    it('should rely on aria-labelledby when provided instead of injecting a fallback aria-label', async () => {
+      const screen = await render(
         <>
           <span id="increment-label">Increment from label</span>
           <span id="decrement-label">Decrement from label</span>
@@ -226,18 +206,15 @@ describe('NumberField wrapper', () => {
         </>,
       )
 
-      const increment = screen.getByRole('button', { name: 'Increment from label' })
-      const decrement = screen.getByRole('button', { name: 'Decrement from label' })
-
-      expect(increment).not.toHaveAttribute('aria-label')
-      expect(decrement).not.toHaveAttribute('aria-label')
+      await expect.element(screen.getByRole('button', { name: 'Increment from label' })).not.toHaveAttribute('aria-label')
+      await expect.element(screen.getByRole('button', { name: 'Decrement from label' })).not.toHaveAttribute('aria-label')
     })
 
     it.each([
       ['medium', 'pt-1', 'pb-1'],
       ['large', 'pt-1.5', 'pb-1.5'],
-    ] as const)('should apply the %s control button compound spacing classes', (size, incrementClass, decrementClass) => {
-      renderNumberField({
+    ] as const)('should apply the %s control button compound spacing classes', async (size, incrementClass, decrementClass) => {
+      const screen = await renderNumberField({
         controlsProps: {},
         incrementProps: {
           size,
@@ -250,14 +227,11 @@ describe('NumberField wrapper', () => {
         },
       })
 
-      const increment = screen.getByTestId('increment')
-      const decrement = screen.getByTestId('decrement')
-
-      expect(increment).toHaveClass(incrementClass)
-      expect(increment).toHaveClass('custom-increment')
-      expect(decrement).toHaveClass(decrementClass)
-      expect(decrement).toHaveClass('custom-decrement')
-      expect(decrement).toHaveAttribute('title', `decrement-${size}`)
+      await expect.element(screen.getByTestId('increment')).toHaveClass(incrementClass)
+      await expect.element(screen.getByTestId('increment')).toHaveClass('custom-increment')
+      await expect.element(screen.getByTestId('decrement')).toHaveClass(decrementClass)
+      await expect.element(screen.getByTestId('decrement')).toHaveClass('custom-decrement')
+      await expect.element(screen.getByTestId('decrement')).toHaveAttribute('title', `decrement-${size}`)
     })
   })
 })
diff --git a/packages/dify-ui/src/popover/__tests__/index.spec.tsx b/packages/dify-ui/src/popover/__tests__/index.spec.tsx
index 39fb3f3fac..ba368c9ad3 100644
--- a/packages/dify-ui/src/popover/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/popover/__tests__/index.spec.tsx
@@ -1,15 +1,20 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
+import { render } from 'vitest-browser-react'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '..'
 
+const renderWithSafeViewport = (ui: import('react').ReactNode) => render(
+  <div style={{ minHeight: '100vh', minWidth: '100vw', padding: '240px' }}>
+    {ui}
+  </div>,
+)
+
 describe('PopoverContent', () => {
   describe('Placement', () => {
-    it('should use bottom placement and default offsets when placement props are not provided', () => {
-      render(
+    it('should use bottom placement and default offsets when placement props are not provided', async () => {
+      const screen = await renderWithSafeViewport(
         <Popover open>
           <PopoverTrigger aria-label="popover trigger">Open</PopoverTrigger>
           <PopoverContent
@@ -21,16 +26,13 @@ describe('PopoverContent', () => {
         </Popover>,
       )
 
-      const positioner = screen.getByRole('group', { name: 'default positioner' })
-      const popup = screen.getByRole('dialog', { name: 'default popover' })
-
-      expect(positioner).toHaveAttribute('data-side', 'bottom')
-      expect(positioner).toHaveAttribute('data-align', 'center')
-      expect(popup).toHaveTextContent('Default content')
+      await expect.element(screen.getByRole('group', { name: 'default positioner' })).toHaveAttribute('data-side', 'bottom')
+      await expect.element(screen.getByRole('group', { name: 'default positioner' })).toHaveAttribute('data-align', 'center')
+      await expect.element(screen.getByRole('dialog', { name: 'default popover' })).toHaveTextContent('Default content')
     })
 
-    it('should apply parsed custom placement and custom offsets when placement props are provided', () => {
-      render(
+    it('should apply parsed custom placement and custom offsets when placement props are provided', async () => {
+      const screen = await renderWithSafeViewport(
         <Popover open>
           <PopoverTrigger aria-label="popover trigger">Open</PopoverTrigger>
           <PopoverContent
@@ -45,20 +47,17 @@ describe('PopoverContent', () => {
         </Popover>,
       )
 
-      const positioner = screen.getByRole('group', { name: 'custom positioner' })
-      const popup = screen.getByRole('dialog', { name: 'custom popover' })
-
-      expect(positioner).toHaveAttribute('data-side', 'top')
-      expect(positioner).toHaveAttribute('data-align', 'end')
-      expect(popup).toHaveTextContent('Custom placement content')
+      await expect.element(screen.getByRole('group', { name: 'custom positioner' })).toHaveAttribute('data-side', 'top')
+      await expect.element(screen.getByRole('group', { name: 'custom positioner' })).toHaveAttribute('data-align', 'end')
+      await expect.element(screen.getByRole('dialog', { name: 'custom popover' })).toHaveTextContent('Custom placement content')
     })
   })
 
   describe('Passthrough props', () => {
-    it('should forward positionerProps and popupProps when passthrough props are provided', () => {
+    it('should forward positionerProps and popupProps when passthrough props are provided', async () => {
       const onPopupClick = vi.fn()
 
-      render(
+      const screen = await render(
         <Popover open>
           <PopoverTrigger aria-label="popover trigger">Open</PopoverTrigger>
           <PopoverContent
@@ -79,12 +78,11 @@ describe('PopoverContent', () => {
         </Popover>,
       )
 
-      const positioner = screen.getByRole('group', { name: 'popover positioner' })
       const popup = screen.getByRole('dialog', { name: 'popover content' })
-      fireEvent.click(popup)
+      await popup.click()
 
-      expect(positioner).toHaveAttribute('id', 'popover-positioner-id')
-      expect(popup).toHaveAttribute('id', 'popover-popup-id')
+      await expect.element(screen.getByRole('group', { name: 'popover positioner' })).toHaveAttribute('id', 'popover-positioner-id')
+      await expect.element(popup).toHaveAttribute('id', 'popover-popup-id')
       expect(onPopupClick).toHaveBeenCalledTimes(1)
     })
   })
diff --git a/packages/dify-ui/src/scroll-area/__tests__/index.spec.tsx b/packages/dify-ui/src/scroll-area/__tests__/index.spec.tsx
index 7696a9be29..1c1a6e9d71 100644
--- a/packages/dify-ui/src/scroll-area/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/scroll-area/__tests__/index.spec.tsx
@@ -1,5 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
+import { render } from 'vitest-browser-react'
 import {
   ScrollArea,
   ScrollAreaContent,
@@ -10,6 +9,28 @@ import {
   ScrollAreaViewport,
 } from '../index'
 
+const stubElementMetric = (
+  element: HTMLElement,
+  property: 'clientHeight' | 'clientWidth' | 'scrollHeight' | 'scrollWidth',
+  value: number,
+) => {
+  const originalDescriptor = Object.getOwnPropertyDescriptor(element, property)
+
+  Object.defineProperty(element, property, {
+    configurable: true,
+    get: () => value,
+  })
+
+  return () => {
+    if (originalDescriptor) {
+      Object.defineProperty(element, property, originalDescriptor)
+      return
+    }
+
+    delete (element as Partial<Record<typeof property, number>>)[property]
+  }
+}
+
 const renderScrollArea = (options: {
   rootClassName?: string
   viewportClassName?: string
@@ -50,21 +71,19 @@ const renderScrollArea = (options: {
 describe('scroll-area wrapper', () => {
   describe('Rendering', () => {
     it('should render the compound exports together', async () => {
-      renderScrollArea()
+      const screen = await renderScrollArea()
 
-      await waitFor(() => {
-        expect(screen.getByTestId('scroll-area-root')).toBeInTheDocument()
-        expect(screen.getByTestId('scroll-area-viewport')).toBeInTheDocument()
-        expect(screen.getByTestId('scroll-area-content')).toHaveTextContent('Scrollable content')
-        expect(screen.getByTestId('scroll-area-vertical-scrollbar')).toBeInTheDocument()
-        expect(screen.getByTestId('scroll-area-vertical-thumb')).toBeInTheDocument()
-        expect(screen.getByTestId('scroll-area-horizontal-scrollbar')).toBeInTheDocument()
-        expect(screen.getByTestId('scroll-area-horizontal-thumb')).toBeInTheDocument()
-      })
+      await expect.element(screen.getByTestId('scroll-area-root')).toBeInTheDocument()
+      await expect.element(screen.getByTestId('scroll-area-viewport')).toBeInTheDocument()
+      await expect.element(screen.getByTestId('scroll-area-content')).toHaveTextContent('Scrollable content')
+      await expect.element(screen.getByTestId('scroll-area-vertical-scrollbar')).toBeInTheDocument()
+      await expect.element(screen.getByTestId('scroll-area-vertical-thumb')).toBeInTheDocument()
+      await expect.element(screen.getByTestId('scroll-area-horizontal-scrollbar')).toBeInTheDocument()
+      await expect.element(screen.getByTestId('scroll-area-horizontal-thumb')).toBeInTheDocument()
     })
 
     it('should render the convenience wrapper and apply slot props', async () => {
-      render(
+      const screen = await render(
         <>
           <p id="installed-apps-label">Installed apps</p>
           <ScrollArea
@@ -82,177 +101,141 @@ describe('scroll-area wrapper', () => {
         </>,
       )
 
-      await waitFor(() => {
-        const root = screen.getByTestId('scroll-area-wrapper-root')
-        const viewport = screen.getByRole('region', { name: 'Installed apps' })
-        const content = screen.getByText('Scrollable content').parentElement
+      const viewport = screen.getByRole('region', { name: 'Installed apps' })
+      const content = screen.getByText('Scrollable content').element().parentElement
 
-        expect(root).toBeInTheDocument()
-        expect(viewport).toHaveClass('custom-viewport-class')
-        expect(viewport).toHaveAccessibleName('Installed apps')
-        expect(content).toHaveClass('custom-content-class')
-        expect(screen.getByText('Scrollable content')).toBeInTheDocument()
-      })
+      await expect.element(screen.getByTestId('scroll-area-wrapper-root')).toBeInTheDocument()
+      await expect.element(viewport).toHaveClass('custom-viewport-class')
+      await expect.element(viewport).toHaveAccessibleName('Installed apps')
+      expect(content).toHaveClass('custom-content-class')
+      await expect.element(screen.getByText('Scrollable content')).toBeInTheDocument()
     })
   })
 
   describe('Scrollbar', () => {
     it('should apply the default vertical scrollbar classes and orientation data attribute', async () => {
-      renderScrollArea()
+      const screen = await renderScrollArea()
 
-      await waitFor(() => {
-        const scrollbar = screen.getByTestId('scroll-area-vertical-scrollbar')
-        const thumb = screen.getByTestId('scroll-area-vertical-thumb')
-
-        expect(scrollbar).toHaveAttribute('data-orientation', 'vertical')
-        expect(scrollbar).toHaveAttribute('data-dify-scrollbar')
-        expect(scrollbar).toHaveClass(
-          'flex',
-          'overflow-clip',
-          'p-1',
-          'touch-none',
-          'select-none',
-          'opacity-100',
-          'transition-opacity',
-          'motion-reduce:transition-none',
-          'pointer-events-none',
-          'data-hovering:pointer-events-auto',
-          'data-scrolling:pointer-events-auto',
-          'data-[orientation=vertical]:absolute',
-          'data-[orientation=vertical]:inset-y-0',
-          'data-[orientation=vertical]:w-3',
-          'data-[orientation=vertical]:justify-center',
-        )
-        expect(thumb).toHaveAttribute('data-orientation', 'vertical')
-        expect(thumb).toHaveClass(
-          'shrink-0',
-          'rounded-sm',
-          'bg-state-base-handle',
-          'transition-[background-color]',
-          'motion-reduce:transition-none',
-          'data-[orientation=vertical]:w-1',
-        )
-      })
+      await expect.element(screen.getByTestId('scroll-area-vertical-scrollbar')).toHaveAttribute('data-orientation', 'vertical')
+      await expect.element(screen.getByTestId('scroll-area-vertical-scrollbar')).toHaveAttribute('data-dify-scrollbar')
+      await expect.element(screen.getByTestId('scroll-area-vertical-scrollbar')).toHaveClass(
+        'flex',
+        'overflow-clip',
+        'p-1',
+        'touch-none',
+        'select-none',
+        'opacity-100',
+        'transition-opacity',
+        'motion-reduce:transition-none',
+        'pointer-events-none',
+        'data-hovering:pointer-events-auto',
+        'data-scrolling:pointer-events-auto',
+        'data-[orientation=vertical]:absolute',
+        'data-[orientation=vertical]:inset-y-0',
+        'data-[orientation=vertical]:w-3',
+        'data-[orientation=vertical]:justify-center',
+      )
+      await expect.element(screen.getByTestId('scroll-area-vertical-thumb')).toHaveAttribute('data-orientation', 'vertical')
+      await expect.element(screen.getByTestId('scroll-area-vertical-thumb')).toHaveClass(
+        'shrink-0',
+        'rounded-sm',
+        'bg-state-base-handle',
+        'transition-[background-color]',
+        'motion-reduce:transition-none',
+        'data-[orientation=vertical]:w-1',
+      )
     })
 
     it('should apply horizontal scrollbar and thumb classes when orientation is horizontal', async () => {
-      renderScrollArea()
+      const screen = await renderScrollArea()
 
-      await waitFor(() => {
-        const scrollbar = screen.getByTestId('scroll-area-horizontal-scrollbar')
-        const thumb = screen.getByTestId('scroll-area-horizontal-thumb')
-
-        expect(scrollbar).toHaveAttribute('data-orientation', 'horizontal')
-        expect(scrollbar).toHaveAttribute('data-dify-scrollbar')
-        expect(scrollbar).toHaveClass(
-          'flex',
-          'overflow-clip',
-          'p-1',
-          'touch-none',
-          'select-none',
-          'opacity-100',
-          'transition-opacity',
-          'motion-reduce:transition-none',
-          'pointer-events-none',
-          'data-hovering:pointer-events-auto',
-          'data-scrolling:pointer-events-auto',
-          'data-[orientation=horizontal]:absolute',
-          'data-[orientation=horizontal]:inset-x-0',
-          'data-[orientation=horizontal]:h-3',
-          'data-[orientation=horizontal]:items-center',
-        )
-        expect(thumb).toHaveAttribute('data-orientation', 'horizontal')
-        expect(thumb).toHaveClass(
-          'shrink-0',
-          'rounded-sm',
-          'bg-state-base-handle',
-          'transition-[background-color]',
-          'motion-reduce:transition-none',
-          'data-[orientation=horizontal]:h-1',
-        )
-      })
+      await expect.element(screen.getByTestId('scroll-area-horizontal-scrollbar')).toHaveAttribute('data-orientation', 'horizontal')
+      await expect.element(screen.getByTestId('scroll-area-horizontal-scrollbar')).toHaveAttribute('data-dify-scrollbar')
+      await expect.element(screen.getByTestId('scroll-area-horizontal-scrollbar')).toHaveClass(
+        'flex',
+        'overflow-clip',
+        'p-1',
+        'touch-none',
+        'select-none',
+        'opacity-100',
+        'transition-opacity',
+        'motion-reduce:transition-none',
+        'pointer-events-none',
+        'data-hovering:pointer-events-auto',
+        'data-scrolling:pointer-events-auto',
+        'data-[orientation=horizontal]:absolute',
+        'data-[orientation=horizontal]:inset-x-0',
+        'data-[orientation=horizontal]:h-3',
+        'data-[orientation=horizontal]:items-center',
+      )
+      await expect.element(screen.getByTestId('scroll-area-horizontal-thumb')).toHaveAttribute('data-orientation', 'horizontal')
+      await expect.element(screen.getByTestId('scroll-area-horizontal-thumb')).toHaveClass(
+        'shrink-0',
+        'rounded-sm',
+        'bg-state-base-handle',
+        'transition-[background-color]',
+        'motion-reduce:transition-none',
+        'data-[orientation=horizontal]:h-1',
+      )
     })
   })
 
   describe('Props', () => {
     it('should forward className to the viewport', async () => {
-      renderScrollArea({
+      const screen = await renderScrollArea({
         viewportClassName: 'custom-viewport-class',
       })
 
-      await waitFor(() => {
-        expect(screen.getByTestId('scroll-area-viewport')).toHaveClass(
-          'size-full',
-          'min-h-0',
-          'min-w-0',
-          'outline-hidden',
-          'focus-visible:ring-1',
-          'focus-visible:ring-inset',
-          'focus-visible:ring-components-input-border-hover',
-          'custom-viewport-class',
-        )
-      })
+      await expect.element(screen.getByTestId('scroll-area-viewport')).toHaveClass(
+        'size-full',
+        'min-h-0',
+        'min-w-0',
+        'outline-hidden',
+        'focus-visible:ring-1',
+        'focus-visible:ring-inset',
+        'focus-visible:ring-components-input-border-hover',
+        'custom-viewport-class',
+      )
     })
 
     it('should let callers control scrollbar inset spacing via margin-based className overrides', async () => {
-      renderScrollArea({
+      const screen = await renderScrollArea({
         verticalScrollbarClassName: 'data-[orientation=vertical]:my-2 data-[orientation=vertical]:-me-3',
         horizontalScrollbarClassName: 'data-[orientation=horizontal]:mx-2 data-[orientation=horizontal]:mb-2',
       })
 
-      await waitFor(() => {
-        expect(screen.getByTestId('scroll-area-vertical-scrollbar')).toHaveClass(
-          'data-[orientation=vertical]:my-2',
-          'data-[orientation=vertical]:-me-3',
-        )
-        expect(screen.getByTestId('scroll-area-horizontal-scrollbar')).toHaveClass(
-          'data-[orientation=horizontal]:mx-2',
-          'data-[orientation=horizontal]:mb-2',
-        )
-      })
+      await expect.element(screen.getByTestId('scroll-area-vertical-scrollbar')).toHaveClass(
+        'data-[orientation=vertical]:my-2',
+        'data-[orientation=vertical]:-me-3',
+      )
+      await expect.element(screen.getByTestId('scroll-area-horizontal-scrollbar')).toHaveClass(
+        'data-[orientation=horizontal]:mx-2',
+        'data-[orientation=horizontal]:mb-2',
+      )
     })
   })
 
   describe('Corner', () => {
     it('should render the corner export when both axes overflow', async () => {
-      const originalDescriptors = {
-        clientHeight: Object.getOwnPropertyDescriptor(HTMLDivElement.prototype, 'clientHeight'),
-        clientWidth: Object.getOwnPropertyDescriptor(HTMLDivElement.prototype, 'clientWidth'),
-        scrollHeight: Object.getOwnPropertyDescriptor(HTMLDivElement.prototype, 'scrollHeight'),
-        scrollWidth: Object.getOwnPropertyDescriptor(HTMLDivElement.prototype, 'scrollWidth'),
-      }
-
-      Object.defineProperties(HTMLDivElement.prototype, {
-        clientHeight: {
-          configurable: true,
-          get() {
-            return this.getAttribute('data-testid') === 'scroll-area-viewport' ? 80 : 0
-          },
-        },
-        clientWidth: {
-          configurable: true,
-          get() {
-            return this.getAttribute('data-testid') === 'scroll-area-viewport' ? 80 : 0
-          },
-        },
-        scrollHeight: {
-          configurable: true,
-          get() {
-            return this.getAttribute('data-testid') === 'scroll-area-viewport' ? 160 : 0
-          },
-        },
-        scrollWidth: {
-          configurable: true,
-          get() {
-            return this.getAttribute('data-testid') === 'scroll-area-viewport' ? 160 : 0
-          },
-        },
-      })
+      const restoreViewportMetrics: Array<() => void> = []
 
       try {
-        render(
+        const screen = await render(
           <ScrollAreaRoot className="h-40 w-40" data-testid="scroll-area-root">
-            <ScrollAreaViewport data-testid="scroll-area-viewport">
+            <ScrollAreaViewport
+              data-testid="scroll-area-viewport"
+              ref={(node) => {
+                if (!node || restoreViewportMetrics.length > 0)
+                  return
+
+                restoreViewportMetrics.push(
+                  stubElementMetric(node, 'clientHeight', 80),
+                  stubElementMetric(node, 'clientWidth', 80),
+                  stubElementMetric(node, 'scrollHeight', 160),
+                  stubElementMetric(node, 'scrollWidth', 160),
+                )
+              }}
+            >
               <ScrollAreaContent data-testid="scroll-area-content">
                 <div className="h-48 w-48">Scrollable content</div>
               </ScrollAreaContent>
@@ -271,24 +254,13 @@ describe('scroll-area wrapper', () => {
           </ScrollAreaRoot>,
         )
 
-        await waitFor(() => {
-          expect(screen.getByTestId('scroll-area-corner')).toBeInTheDocument()
-          expect(screen.getByTestId('scroll-area-corner')).toHaveClass('bg-transparent')
+        await vi.waitFor(() => {
+          expect(screen.getByTestId('scroll-area-corner').element()).toBeInTheDocument()
+          expect(screen.getByTestId('scroll-area-corner').element()).toHaveClass('bg-transparent')
         })
       }
       finally {
-        if (originalDescriptors.clientHeight) {
-          Object.defineProperty(HTMLDivElement.prototype, 'clientHeight', originalDescriptors.clientHeight)
-        }
-        if (originalDescriptors.clientWidth) {
-          Object.defineProperty(HTMLDivElement.prototype, 'clientWidth', originalDescriptors.clientWidth)
-        }
-        if (originalDescriptors.scrollHeight) {
-          Object.defineProperty(HTMLDivElement.prototype, 'scrollHeight', originalDescriptors.scrollHeight)
-        }
-        if (originalDescriptors.scrollWidth) {
-          Object.defineProperty(HTMLDivElement.prototype, 'scrollWidth', originalDescriptors.scrollWidth)
-        }
+        restoreViewportMetrics.splice(0).forEach(restore => restore())
       }
     })
   })
diff --git a/packages/dify-ui/src/select/__tests__/index.spec.tsx b/packages/dify-ui/src/select/__tests__/index.spec.tsx
index e8083f04b2..eab980a607 100644
--- a/packages/dify-ui/src/select/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/select/__tests__/index.spec.tsx
@@ -1,7 +1,13 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
+import { render } from 'vitest-browser-react'
 import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger, SelectValue } from '../index'
 
+const asHTMLElement = (element: HTMLElement | SVGElement) => element as HTMLElement
+const renderWithSafeViewport = (ui: import('react').ReactNode) => render(
+  <div style={{ minHeight: '100vh', minWidth: '100vw', padding: '240px' }}>
+    {ui}
+  </div>,
+)
+
 const renderOpenSelect = ({
   rootProps = {},
   triggerProps = {},
@@ -13,7 +19,7 @@ const renderOpenSelect = ({
   contentProps?: Record<string, unknown>
   onValueChange?: (value: string | null) => void
 } = {}) => {
-  return render(
+  return renderWithSafeViewport(
     <Select open defaultValue="seattle" onValueChange={onValueChange} {...rootProps}>
       <SelectTrigger aria-label="city select" {...triggerProps}>
         <SelectValue />
@@ -48,8 +54,8 @@ const renderOpenSelect = ({
 
 describe('Select wrappers', () => {
   describe('Select root integration', () => {
-    it('should submit the hidden input value and preserve autocomplete hints inside a form', () => {
-      const { container } = render(
+    it('should submit the hidden input value and preserve autocomplete hints inside a form', async () => {
+      const screen = await render(
         <form aria-label="profile form">
           <Select defaultValue="seattle" name="city" autoComplete="address-level2">
             <SelectTrigger aria-label="city select">
@@ -69,8 +75,8 @@ describe('Select wrappers', () => {
         </form>,
       )
 
-      const hiddenInput = container.querySelector('input[name="city"]')
-      const form = screen.getByRole('form', { name: 'profile form' }) as HTMLFormElement
+      const hiddenInput = screen.container.querySelector('input[name="city"]')
+      const form = screen.getByRole('form', { name: 'profile form' }).element() as HTMLFormElement
 
       expect(hiddenInput).toHaveAttribute('autocomplete', 'address-level2')
       expect(new FormData(form).get('city')).toBe('seattle')
@@ -78,119 +84,104 @@ describe('Select wrappers', () => {
   })
 
   describe('SelectTrigger', () => {
-    it('should forward native trigger props when trigger props are provided', () => {
-      renderOpenSelect({
+    it('should forward native trigger props when trigger props are provided', async () => {
+      const screen = await renderOpenSelect({
         triggerProps: {
           'aria-label': 'Choose option',
           'disabled': true,
         },
       })
 
-      const trigger = screen.getByRole('combobox', { name: 'Choose option' })
-      expect(trigger).toBeDisabled()
+      await expect.element(screen.getByRole('combobox', { name: 'Choose option' })).toBeDisabled()
     })
 
-    it('should apply regular size variant classes by default', () => {
-      renderOpenSelect()
+    it('should apply regular size variant classes by default', async () => {
+      const screen = await renderOpenSelect()
 
-      const trigger = screen.getByRole('combobox', { name: 'city select' })
-      expect(trigger.className).toMatch(/system-sm-regular/)
-      expect(trigger.className).toMatch(/rounded-lg/)
+      expect(screen.getByRole('combobox', { name: 'city select' }).element().className).toMatch(/system-sm-regular/)
+      expect(screen.getByRole('combobox', { name: 'city select' }).element().className).toMatch(/rounded-lg/)
     })
 
-    it('should apply small size variant classes when size is small', () => {
-      renderOpenSelect({
+    it('should apply small size variant classes when size is small', async () => {
+      const screen = await renderOpenSelect({
         triggerProps: { size: 'small' },
       })
 
-      const trigger = screen.getByRole('combobox', { name: 'city select' })
-      expect(trigger.className).toMatch(/system-xs-regular/)
-      expect(trigger.className).toMatch(/rounded-md/)
+      expect(screen.getByRole('combobox', { name: 'city select' }).element().className).toMatch(/system-xs-regular/)
+      expect(screen.getByRole('combobox', { name: 'city select' }).element().className).toMatch(/rounded-md/)
     })
 
-    it('should apply large size variant classes when size is large', () => {
-      renderOpenSelect({
+    it('should apply large size variant classes when size is large', async () => {
+      const screen = await renderOpenSelect({
         triggerProps: { size: 'large' },
       })
 
-      const trigger = screen.getByRole('combobox', { name: 'city select' })
-      expect(trigger.className).toMatch(/system-md-regular/)
+      expect(screen.getByRole('combobox', { name: 'city select' }).element().className).toMatch(/system-md-regular/)
     })
 
-    it('should apply disabled styling via data attributes when disabled', () => {
-      renderOpenSelect({
+    it('should apply disabled styling via data attributes when disabled', async () => {
+      const screen = await renderOpenSelect({
         triggerProps: { disabled: true },
       })
 
-      const trigger = screen.getByRole('combobox', { name: 'city select' })
-      expect(trigger).toHaveAttribute('data-disabled')
-      expect(trigger.className).toContain('data-disabled:bg-components-input-bg-disabled')
+      await expect.element(screen.getByRole('combobox', { name: 'city select' })).toHaveAttribute('data-disabled')
+      expect(screen.getByRole('combobox', { name: 'city select' }).element().className).toContain('data-disabled:bg-components-input-bg-disabled')
     })
 
-    it('should apply disabled placeholder color class for compound state', () => {
-      renderOpenSelect({
+    it('should apply disabled placeholder color class for compound state', async () => {
+      const screen = await renderOpenSelect({
         triggerProps: { disabled: true },
       })
 
-      const trigger = screen.getByRole('combobox', { name: 'city select' })
-      expect(trigger.className).toContain('data-disabled:data-placeholder:text-components-input-text-disabled')
+      expect(screen.getByRole('combobox', { name: 'city select' }).element().className).toContain('data-disabled:data-placeholder:text-components-input-text-disabled')
     })
 
-    it('should apply readonly styling via data attributes when Root is readOnly', () => {
-      renderOpenSelect({
+    it('should apply readonly styling via data attributes when Root is readOnly', async () => {
+      const screen = await renderOpenSelect({
         rootProps: { readOnly: true },
       })
 
-      const trigger = screen.getByRole('combobox', { name: 'city select' })
-      expect(trigger).toHaveAttribute('data-readonly')
-      expect(trigger.className).toContain('data-readonly:bg-transparent')
+      await expect.element(screen.getByRole('combobox', { name: 'city select' })).toHaveAttribute('data-readonly')
+      expect(screen.getByRole('combobox', { name: 'city select' }).element().className).toContain('data-readonly:bg-transparent')
     })
 
-    it('should hide arrow icon via CSS when Root is readOnly', () => {
-      renderOpenSelect({
+    it('should hide arrow icon via CSS when Root is readOnly', async () => {
+      const screen = await renderOpenSelect({
         rootProps: { readOnly: true },
       })
 
-      const trigger = screen.getByRole('combobox', { name: 'city select' })
-      const iconWrapper = trigger.querySelector('[class*="group-data-readonly:hidden"]')
-      expect(iconWrapper).toBeInTheDocument()
+      expect(screen.getByRole('combobox', { name: 'city select' }).element().querySelector('[class*="group-data-readonly:hidden"]')).toBeInTheDocument()
     })
 
-    it('should set aria-hidden on decorative icons', () => {
-      renderOpenSelect()
+    it('should set aria-hidden on decorative icons', async () => {
+      const screen = await renderOpenSelect()
 
-      const trigger = screen.getByRole('combobox', { name: 'city select' })
-      const arrowIcon = trigger.querySelector('.i-ri-arrow-down-s-line')
-      expect(arrowIcon).toHaveAttribute('aria-hidden', 'true')
+      expect(screen.getByRole('combobox', { name: 'city select' }).element().querySelector('.i-ri-arrow-down-s-line')).toHaveAttribute('aria-hidden', 'true')
     })
 
-    it('should include placeholder color class via data attribute', () => {
-      renderOpenSelect()
+    it('should include placeholder color class via data attribute', async () => {
+      const screen = await renderOpenSelect()
 
-      const trigger = screen.getByRole('combobox', { name: 'city select' })
-      expect(trigger.className).toContain('data-placeholder:text-components-input-text-placeholder')
+      expect(screen.getByRole('combobox', { name: 'city select' }).element().className).toContain('data-placeholder:text-components-input-text-placeholder')
     })
 
-    it('should render built-in chevron icon', () => {
-      renderOpenSelect()
+    it('should render built-in chevron icon', async () => {
+      const screen = await renderOpenSelect()
 
-      const trigger = screen.getByRole('combobox', { name: 'city select' })
-      const chevron = trigger.querySelector('.i-ri-arrow-down-s-line')
-      expect(chevron).toBeInTheDocument()
+      expect(screen.getByRole('combobox', { name: 'city select' }).element().querySelector('.i-ri-arrow-down-s-line')).toBeInTheDocument()
     })
   })
 
   describe('SelectContent', () => {
-    it('should use default placement when placement is not provided', () => {
-      renderOpenSelect()
+    it('should use positioning attributes when placement is not provided', async () => {
+      const screen = await renderOpenSelect()
 
-      const positioner = screen.getByRole('group', { name: 'select positioner' })
-      expect(positioner).toHaveAttribute('data-side', 'bottom')
-      expect(positioner).toHaveAttribute('data-align', 'start')
+      await expect.element(screen.getByRole('group', { name: 'select positioner' })).toHaveAttribute('data-side', 'bottom')
+      await expect.element(screen.getByRole('group', { name: 'select positioner' })).toHaveAttribute('data-align', 'start')
     })
 
-    it('should apply custom placement when placement props are provided', () => {
-      renderOpenSelect({
+    it('should preserve positioning attributes when placement props are provided', async () => {
+      const screen = await renderOpenSelect({
         contentProps: {
           placement: 'top-end',
           sideOffset: 12,
@@ -198,17 +189,16 @@ describe('Select wrappers', () => {
         },
       })
 
-      const positioner = screen.getByRole('group', { name: 'select positioner' })
-      expect(positioner).toHaveAttribute('data-side', 'top')
-      expect(positioner).toHaveAttribute('data-align', 'end')
+      await expect.element(screen.getByRole('group', { name: 'select positioner' })).toHaveAttribute('data-side', 'top')
+      await expect.element(screen.getByRole('group', { name: 'select positioner' })).toHaveAttribute('data-align', 'end')
     })
 
-    it('should forward passthrough props to positioner popup and list when passthrough props are provided', () => {
+    it('should forward passthrough props to positioner popup and list when passthrough props are provided', async () => {
       const onPositionerMouseEnter = vi.fn()
       const onPopupClick = vi.fn()
       const onListFocus = vi.fn()
 
-      render(
+      const screen = await render(
         <Select open defaultValue="seattle">
           <SelectTrigger aria-label="city select">
             <SelectValue />
@@ -241,35 +231,35 @@ describe('Select wrappers', () => {
         </Select>,
       )
 
-      const positioner = screen.getByRole('group', { name: 'select positioner' })
-      const popup = screen.getByRole('dialog', { name: 'select popup' })
-      const list = screen.getByRole('listbox', { name: 'select list' })
+      screen.getByRole('group', { name: 'select positioner' }).element().dispatchEvent(new MouseEvent('mouseover', {
+        bubbles: true,
+      }))
+      asHTMLElement(screen.getByRole('dialog', { name: 'select popup' }).element()).click()
+      screen.getByRole('listbox', { name: 'select list' }).element().dispatchEvent(new FocusEvent('focusin', {
+        bubbles: true,
+      }))
 
-      fireEvent.mouseEnter(positioner)
-      fireEvent.click(popup)
-      fireEvent.focus(list)
-
-      expect(positioner).toHaveAttribute('id', 'select-positioner')
-      expect(popup).toHaveAttribute('id', 'select-popup')
-      expect(list).toHaveAttribute('id', 'select-list')
+      await expect.element(screen.getByRole('group', { name: 'select positioner' })).toHaveAttribute('id', 'select-positioner')
+      await expect.element(screen.getByRole('dialog', { name: 'select popup' })).toHaveAttribute('id', 'select-popup')
+      await expect.element(screen.getByRole('listbox', { name: 'select list' })).toHaveAttribute('id', 'select-list')
       expect(onPositionerMouseEnter).toHaveBeenCalledTimes(1)
       expect(onPopupClick).toHaveBeenCalledTimes(1)
-      expect(onListFocus).toHaveBeenCalledTimes(1)
+      expect(onListFocus).toHaveBeenCalled()
     })
   })
 
   describe('SelectItem', () => {
-    it('should render options when children are provided', () => {
-      renderOpenSelect()
+    it('should render options when children are provided', async () => {
+      const screen = await renderOpenSelect()
 
-      expect(screen.getByRole('option', { name: 'Seattle' })).toBeInTheDocument()
-      expect(screen.getByRole('option', { name: 'New York' })).toBeInTheDocument()
+      await expect.element(screen.getByRole('option', { name: 'Seattle' })).toBeInTheDocument()
+      await expect.element(screen.getByRole('option', { name: 'New York' })).toBeInTheDocument()
     })
 
-    it('should not call onValueChange when disabled item is clicked', () => {
+    it('should not call onValueChange when disabled item is clicked', async () => {
       const onValueChange = vi.fn()
 
-      render(
+      const screen = await render(
         <Select open defaultValue="seattle" onValueChange={onValueChange}>
           <SelectTrigger aria-label="city select">
             <SelectValue />
@@ -287,13 +277,13 @@ describe('Select wrappers', () => {
         </Select>,
       )
 
-      fireEvent.click(screen.getByRole('option', { name: 'Disabled New York' }))
+      asHTMLElement(screen.getByRole('option', { name: 'Disabled New York' }).element()).click()
 
       expect(onValueChange).not.toHaveBeenCalled()
     })
 
-    it('should support custom composition with SelectItemText without indicator', () => {
-      render(
+    it('should support custom composition with SelectItemText without indicator', async () => {
+      const screen = await render(
         <Select open defaultValue="a">
           <SelectTrigger aria-label="custom select">
             <SelectValue />
@@ -306,7 +296,7 @@ describe('Select wrappers', () => {
         </Select>,
       )
 
-      expect(screen.getByRole('option', { name: 'Custom Item' })).toBeInTheDocument()
+      await expect.element(screen.getByRole('option', { name: 'Custom Item' })).toBeInTheDocument()
     })
   })
 })
diff --git a/packages/dify-ui/src/slider/__tests__/index.spec.tsx b/packages/dify-ui/src/slider/__tests__/index.spec.tsx
index ab58df844f..6e175d7324 100644
--- a/packages/dify-ui/src/slider/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/slider/__tests__/index.spec.tsx
@@ -1,96 +1,80 @@
-import { act, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
+import { render } from 'vitest-browser-react'
 import { Slider } from '../index'
 
+const asHTMLElement = (element: HTMLElement | SVGElement) => element as HTMLElement
+
 describe('Slider', () => {
-  const getSliderInput = () => screen.getByLabelText('Value')
+  it('should render with correct default ARIA limits and current value', async () => {
+    const screen = await render(<Slider value={50} onValueChange={vi.fn()} aria-label="Value" />)
 
-  it('should render with correct default ARIA limits and current value', () => {
-    render(<Slider value={50} onValueChange={vi.fn()} aria-label="Value" />)
-
-    const slider = getSliderInput()
-    expect(slider).toHaveAttribute('min', '0')
-    expect(slider).toHaveAttribute('max', '100')
-    expect(slider).toHaveAttribute('aria-valuenow', '50')
+    await expect.element(screen.getByLabelText('Value')).toHaveAttribute('min', '0')
+    await expect.element(screen.getByLabelText('Value')).toHaveAttribute('max', '100')
+    await expect.element(screen.getByLabelText('Value')).toHaveAttribute('aria-valuenow', '50')
   })
 
-  it('should apply custom min, max, and step values', () => {
-    render(<Slider value={10} min={5} max={20} step={5} onValueChange={vi.fn()} aria-label="Value" />)
+  it('should apply custom min, max, and step values', async () => {
+    const screen = await render(<Slider value={10} min={5} max={20} step={5} onValueChange={vi.fn()} aria-label="Value" />)
 
-    const slider = getSliderInput()
-    expect(slider).toHaveAttribute('min', '5')
-    expect(slider).toHaveAttribute('max', '20')
-    expect(slider).toHaveAttribute('aria-valuenow', '10')
+    await expect.element(screen.getByLabelText('Value')).toHaveAttribute('min', '5')
+    await expect.element(screen.getByLabelText('Value')).toHaveAttribute('max', '20')
+    await expect.element(screen.getByLabelText('Value')).toHaveAttribute('aria-valuenow', '10')
   })
 
-  it('should clamp non-finite values to min', () => {
-    render(<Slider value={Number.NaN} min={5} onValueChange={vi.fn()} aria-label="Value" />)
+  it('should clamp non-finite values to min', async () => {
+    const screen = await render(<Slider value={Number.NaN} min={5} onValueChange={vi.fn()} aria-label="Value" />)
 
-    expect(getSliderInput()).toHaveAttribute('aria-valuenow', '5')
+    await expect.element(screen.getByLabelText('Value')).toHaveAttribute('aria-valuenow', '5')
   })
 
   it('should call onValueChange when arrow keys are pressed', async () => {
-    const user = userEvent.setup()
     const onValueChange = vi.fn()
+    const screen = await render(<Slider value={20} onValueChange={onValueChange} aria-label="Value" />)
 
-    render(<Slider value={20} onValueChange={onValueChange} aria-label="Value" />)
+    const slider = screen.getByLabelText('Value').element()
+    slider.focus()
+    slider.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
 
-    const slider = getSliderInput()
-
-    await act(async () => {
-      slider.focus()
-      await user.keyboard('{ArrowRight}')
+    await vi.waitFor(() => {
+      expect(onValueChange).toHaveBeenCalledTimes(1)
     })
-
-    expect(onValueChange).toHaveBeenCalledTimes(1)
     expect(onValueChange).toHaveBeenLastCalledWith(21, expect.anything())
   })
 
   it('should round floating point keyboard updates to the configured step', async () => {
-    const user = userEvent.setup()
     const onValueChange = vi.fn()
+    const screen = await render(<Slider value={0.2} min={0} max={1} step={0.1} onValueChange={onValueChange} aria-label="Value" />)
 
-    render(<Slider value={0.2} min={0} max={1} step={0.1} onValueChange={onValueChange} aria-label="Value" />)
+    const slider = screen.getByLabelText('Value').element()
+    slider.focus()
+    slider.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
 
-    const slider = getSliderInput()
-
-    await act(async () => {
-      slider.focus()
-      await user.keyboard('{ArrowRight}')
+    await vi.waitFor(() => {
+      expect(onValueChange).toHaveBeenCalledTimes(1)
     })
-
-    expect(onValueChange).toHaveBeenCalledTimes(1)
     expect(onValueChange).toHaveBeenLastCalledWith(0.3, expect.anything())
   })
 
   it('should not trigger onValueChange when disabled', async () => {
-    const user = userEvent.setup()
     const onValueChange = vi.fn()
-    render(<Slider value={20} onValueChange={onValueChange} disabled aria-label="Value" />)
-
-    const slider = getSliderInput()
+    const screen = await render(<Slider value={20} onValueChange={onValueChange} disabled aria-label="Value" />)
 
+    const slider = screen.getByLabelText('Value').element()
     expect(slider).toBeDisabled()
 
-    await act(async () => {
-      slider.focus()
-      await user.keyboard('{ArrowRight}')
-    })
+    asHTMLElement(slider).click()
 
     expect(onValueChange).not.toHaveBeenCalled()
   })
 
-  it('should apply custom class names on root', () => {
-    const { container } = render(<Slider value={10} onValueChange={vi.fn()} className="outer-test" aria-label="Value" />)
+  it('should apply custom class names on root', async () => {
+    const screen = await render(<Slider value={10} onValueChange={vi.fn()} className="outer-test" aria-label="Value" />)
 
-    const sliderWrapper = container.querySelector('.outer-test')
-    expect(sliderWrapper).toBeInTheDocument()
+    expect(screen.container.querySelector('.outer-test')).toBeInTheDocument()
   })
 
-  it('should not render prehydration script tags', () => {
-    const { container } = render(<Slider value={10} onValueChange={vi.fn()} aria-label="Value" />)
+  it('should not render prehydration script tags', async () => {
+    const screen = await render(<Slider value={10} onValueChange={vi.fn()} aria-label="Value" />)
 
-    expect(container.querySelector('script')).not.toBeInTheDocument()
+    expect(screen.container.querySelector('script')).not.toBeInTheDocument()
   })
 })
diff --git a/packages/dify-ui/src/switch/__tests__/index.spec.tsx b/packages/dify-ui/src/switch/__tests__/index.spec.tsx
index 055b6e0791..56fe68d34b 100644
--- a/packages/dify-ui/src/switch/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/switch/__tests__/index.spec.tsx
@@ -1,198 +1,189 @@
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
+import { render } from 'vitest-browser-react'
 import { Switch, SwitchSkeleton } from '../index'
 
-const getThumb = (switchElement: HTMLElement) => switchElement.querySelector('span')
+const asHTMLElement = (element: HTMLElement | SVGElement) => element as HTMLElement
+const getThumb = (switchElement: HTMLElement | SVGElement) => switchElement.querySelector('span')
 
 describe('Switch', () => {
-  it('should render in unchecked state when checked is false', () => {
-    render(<Switch checked={false} />)
+  it('should render in unchecked state when checked is false', async () => {
+    const screen = await render(<Switch checked={false} />)
     const switchElement = screen.getByRole('switch')
-    expect(switchElement).toBeInTheDocument()
-    expect(switchElement).toHaveAttribute('aria-checked', 'false')
-    expect(switchElement).not.toHaveAttribute('data-checked')
+
+    await expect.element(switchElement).toBeInTheDocument()
+    await expect.element(switchElement).toHaveAttribute('aria-checked', 'false')
+    await expect.element(switchElement).not.toHaveAttribute('data-checked')
   })
 
-  it('should render in checked state when checked is true', () => {
-    render(<Switch checked={true} />)
+  it('should render in checked state when checked is true', async () => {
+    const screen = await render(<Switch checked={true} />)
     const switchElement = screen.getByRole('switch')
-    expect(switchElement).toHaveAttribute('aria-checked', 'true')
-    expect(switchElement).toHaveAttribute('data-checked', '')
+
+    await expect.element(switchElement).toHaveAttribute('aria-checked', 'true')
+    await expect.element(switchElement).toHaveAttribute('data-checked', '')
   })
 
   it('should call onCheckedChange with next value when clicked', async () => {
     const onCheckedChange = vi.fn()
-    const user = userEvent.setup()
-    render(<Switch checked={false} onCheckedChange={onCheckedChange} />)
+    const screen = await render(<Switch checked={false} onCheckedChange={onCheckedChange} />)
 
     const switchElement = screen.getByRole('switch')
+    asHTMLElement(switchElement.element()).click()
 
-    await user.click(switchElement)
     expect(onCheckedChange).toHaveBeenCalledWith(true)
     expect(onCheckedChange).toHaveBeenCalledTimes(1)
-
-    expect(switchElement).toHaveAttribute('aria-checked', 'false')
+    await expect.element(switchElement).toHaveAttribute('aria-checked', 'false')
   })
 
   it('should work in controlled mode with checked prop', async () => {
     const onCheckedChange = vi.fn()
-    const user = userEvent.setup()
-    const { rerender } = render(<Switch checked={false} onCheckedChange={onCheckedChange} />)
+    const screen = await render(<Switch checked={false} onCheckedChange={onCheckedChange} />)
     const switchElement = screen.getByRole('switch')
 
-    expect(switchElement).toHaveAttribute('aria-checked', 'false')
+    await expect.element(switchElement).toHaveAttribute('aria-checked', 'false')
 
-    await user.click(switchElement)
+    asHTMLElement(switchElement.element()).click()
     expect(onCheckedChange).toHaveBeenCalledWith(true)
-    expect(switchElement).toHaveAttribute('aria-checked', 'false')
+    await expect.element(switchElement).toHaveAttribute('aria-checked', 'false')
 
-    rerender(<Switch checked={true} onCheckedChange={onCheckedChange} />)
-    expect(switchElement).toHaveAttribute('aria-checked', 'true')
+    await screen.rerender(<Switch checked={true} onCheckedChange={onCheckedChange} />)
+    await expect.element(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true')
   })
 
   it('should not call onCheckedChange when disabled', async () => {
     const onCheckedChange = vi.fn()
-    const user = userEvent.setup()
-    render(<Switch checked={false} disabled onCheckedChange={onCheckedChange} />)
+    const screen = await render(<Switch checked={false} disabled onCheckedChange={onCheckedChange} />)
 
     const switchElement = screen.getByRole('switch')
-    expect(switchElement).toHaveClass('data-disabled:cursor-not-allowed')
-    expect(switchElement).toHaveAttribute('data-disabled', '')
+    await expect.element(switchElement).toHaveClass('data-disabled:cursor-not-allowed')
+    await expect.element(switchElement).toHaveAttribute('data-disabled', '')
 
-    await user.click(switchElement)
+    asHTMLElement(switchElement.element()).click()
     expect(onCheckedChange).not.toHaveBeenCalled()
   })
 
-  it('should apply correct size classes', () => {
-    const { rerender } = render(<Switch checked={false} size="xs" />)
-    const switchElement = screen.getByRole('switch')
-    expect(switchElement).toHaveClass('h-2.5', 'w-3.5', 'rounded-xs')
+  it('should apply correct size classes', async () => {
+    const screen = await render(<Switch checked={false} size="xs" />)
 
-    rerender(<Switch checked={false} size="sm" />)
-    expect(switchElement).toHaveClass('h-3', 'w-5')
+    await expect.element(screen.getByRole('switch')).toHaveClass('h-2.5', 'w-3.5', 'rounded-xs')
 
-    rerender(<Switch checked={false} size="md" />)
-    expect(switchElement).toHaveClass('h-4', 'w-7')
+    await screen.rerender(<Switch checked={false} size="sm" />)
+    await expect.element(screen.getByRole('switch')).toHaveClass('h-3', 'w-5')
 
-    rerender(<Switch checked={false} size="lg" />)
-    expect(switchElement).toHaveClass('h-5', 'w-9')
+    await screen.rerender(<Switch checked={false} size="md" />)
+    await expect.element(screen.getByRole('switch')).toHaveClass('h-4', 'w-7')
+
+    await screen.rerender(<Switch checked={false} size="lg" />)
+    await expect.element(screen.getByRole('switch')).toHaveClass('h-5', 'w-9')
   })
 
-  it('should apply custom className', () => {
-    render(<Switch checked={false} className="custom-test-class" />)
-    expect(screen.getByRole('switch')).toHaveClass('custom-test-class')
+  it('should apply custom className', async () => {
+    const screen = await render(<Switch checked={false} className="custom-test-class" />)
+    await expect.element(screen.getByRole('switch')).toHaveClass('custom-test-class')
   })
 
-  it('should expose checked state styling hooks on the root and thumb', () => {
-    const { rerender } = render(<Switch checked={false} />)
-    const switchElement = screen.getByRole('switch')
+  it('should expose checked state styling hooks on the root and thumb', async () => {
+    const screen = await render(<Switch checked={false} />)
+    const switchElement = screen.getByRole('switch').element()
     const thumb = getThumb(switchElement)
 
     expect(switchElement).toHaveClass('bg-components-toggle-bg-unchecked', 'data-checked:bg-components-toggle-bg')
     expect(thumb).toHaveClass('data-checked:translate-x-[14px]')
     expect(thumb).not.toHaveAttribute('data-checked')
 
-    rerender(<Switch checked={true} />)
-    expect(switchElement).toHaveAttribute('data-checked', '')
-    expect(thumb).toHaveAttribute('data-checked', '')
+    await screen.rerender(<Switch checked={true} />)
+
+    await expect.element(screen.getByRole('switch')).toHaveAttribute('data-checked', '')
+    expect(getThumb(screen.getByRole('switch').element())).toHaveAttribute('data-checked', '')
   })
 
-  it('should expose disabled state styling hooks instead of relying on opacity', () => {
-    const { rerender } = render(<Switch checked={false} disabled />)
-    const switchElement = screen.getByRole('switch')
+  it('should expose disabled state styling hooks instead of relying on opacity', async () => {
+    const screen = await render(<Switch checked={false} disabled />)
 
-    expect(switchElement).toHaveClass(
+    await expect.element(screen.getByRole('switch')).toHaveClass(
       'data-disabled:bg-components-toggle-bg-unchecked-disabled',
       'data-disabled:data-checked:bg-components-toggle-bg-disabled',
     )
-    expect(switchElement).toHaveAttribute('data-disabled', '')
+    await expect.element(screen.getByRole('switch')).toHaveAttribute('data-disabled', '')
 
-    rerender(<Switch checked={true} disabled />)
-    expect(switchElement).toHaveAttribute('data-disabled', '')
-    expect(switchElement).toHaveAttribute('data-checked', '')
+    await screen.rerender(<Switch checked={true} disabled />)
+    await expect.element(screen.getByRole('switch')).toHaveAttribute('data-disabled', '')
+    await expect.element(screen.getByRole('switch')).toHaveAttribute('data-checked', '')
   })
 
-  it('should have focus-visible ring-3 styles', () => {
-    render(<Switch checked={false} />)
-    const switchElement = screen.getByRole('switch')
-    expect(switchElement).toHaveClass('focus-visible:ring-2')
+  it('should have focus-visible ring-3 styles', async () => {
+    const screen = await render(<Switch checked={false} />)
+    await expect.element(screen.getByRole('switch')).toHaveClass('focus-visible:ring-2')
   })
 
-  it('should respect prefers-reduced-motion', () => {
-    render(<Switch checked={false} />)
-    const switchElement = screen.getByRole('switch')
-    expect(switchElement).toHaveClass('motion-reduce:transition-none')
+  it('should respect prefers-reduced-motion', async () => {
+    const screen = await render(<Switch checked={false} />)
+    await expect.element(screen.getByRole('switch')).toHaveClass('motion-reduce:transition-none')
   })
 
   describe('loading state', () => {
     it('should render as disabled when loading', async () => {
       const onCheckedChange = vi.fn()
-      const user = userEvent.setup()
-      render(<Switch checked={false} loading onCheckedChange={onCheckedChange} />)
+      const screen = await render(<Switch checked={false} loading onCheckedChange={onCheckedChange} />)
 
       const switchElement = screen.getByRole('switch')
-      expect(switchElement).toHaveClass('data-disabled:cursor-not-allowed')
-      expect(switchElement).toHaveAttribute('aria-busy', 'true')
-      expect(switchElement).toHaveAttribute('data-disabled', '')
+      await expect.element(switchElement).toHaveClass('data-disabled:cursor-not-allowed')
+      await expect.element(switchElement).toHaveAttribute('aria-busy', 'true')
+      await expect.element(switchElement).toHaveAttribute('data-disabled', '')
 
-      await user.click(switchElement)
+      asHTMLElement(switchElement.element()).click()
       expect(onCheckedChange).not.toHaveBeenCalled()
     })
 
-    it('should show spinner icon for md and lg sizes', () => {
-      const { rerender, container } = render(<Switch checked={false} loading size="md" />)
-      expect(container.querySelector('span[aria-hidden="true"] i')).toBeInTheDocument()
+    it('should show spinner icon for md and lg sizes', async () => {
+      const screen = await render(<Switch checked={false} loading size="md" />)
+      expect(screen.container.querySelector('span[aria-hidden="true"] i')).toBeInTheDocument()
 
-      rerender(<Switch checked={false} loading size="lg" />)
-      expect(container.querySelector('span[aria-hidden="true"] i')).toBeInTheDocument()
+      await screen.rerender(<Switch checked={false} loading size="lg" />)
+      expect(screen.container.querySelector('span[aria-hidden="true"] i')).toBeInTheDocument()
     })
 
-    it('should not show spinner for xs and sm sizes', () => {
-      const { rerender, container } = render(<Switch checked={false} loading size="xs" />)
-      expect(container.querySelector('span[aria-hidden="true"] i')).not.toBeInTheDocument()
+    it('should not show spinner for xs and sm sizes', async () => {
+      const screen = await render(<Switch checked={false} loading size="xs" />)
+      expect(screen.container.querySelector('span[aria-hidden="true"] i')).not.toBeInTheDocument()
 
-      rerender(<Switch checked={false} loading size="sm" />)
-      expect(container.querySelector('span[aria-hidden="true"] i')).not.toBeInTheDocument()
+      await screen.rerender(<Switch checked={false} loading size="sm" />)
+      expect(screen.container.querySelector('span[aria-hidden="true"] i')).not.toBeInTheDocument()
     })
 
-    it('should apply disabled data-state hooks when loading', () => {
-      const { rerender } = render(<Switch checked={false} loading />)
-      const switchElement = screen.getByRole('switch')
+    it('should apply disabled data-state hooks when loading', async () => {
+      const screen = await render(<Switch checked={false} loading />)
 
-      expect(switchElement).toHaveAttribute('data-disabled', '')
+      await expect.element(screen.getByRole('switch')).toHaveAttribute('data-disabled', '')
 
-      rerender(<Switch checked={true} loading />)
-      expect(switchElement).toHaveAttribute('data-disabled', '')
-      expect(switchElement).toHaveAttribute('data-checked', '')
+      await screen.rerender(<Switch checked={true} loading />)
+      await expect.element(screen.getByRole('switch')).toHaveAttribute('data-disabled', '')
+      await expect.element(screen.getByRole('switch')).toHaveAttribute('data-checked', '')
     })
   })
 })
 
 describe('SwitchSkeleton', () => {
-  it('should render a plain div without switch role', () => {
-    render(<SwitchSkeleton data-testid="skeleton-switch" />)
-    expect(screen.queryByRole('switch')).not.toBeInTheDocument()
-    expect(screen.getByTestId('skeleton-switch')).toBeInTheDocument()
+  it('should render a plain div without switch role', async () => {
+    const screen = await render(<SwitchSkeleton data-testid="skeleton-switch" />)
+    expect(screen.container.querySelector('[role="switch"]')).not.toBeInTheDocument()
+    await expect.element(screen.getByTestId('skeleton-switch')).toBeInTheDocument()
   })
 
-  it('should apply skeleton styles', () => {
-    render(<SwitchSkeleton data-testid="skeleton-switch" />)
-    const el = screen.getByTestId('skeleton-switch')
-    expect(el).toHaveClass('bg-text-quaternary', 'opacity-20')
+  it('should apply skeleton styles', async () => {
+    const screen = await render(<SwitchSkeleton data-testid="skeleton-switch" />)
+    await expect.element(screen.getByTestId('skeleton-switch')).toHaveClass('bg-text-quaternary', 'opacity-20')
   })
 
-  it('should apply correct skeleton size classes', () => {
-    const { rerender } = render(<SwitchSkeleton size="xs" data-testid="s" />)
-    const el = screen.getByTestId('s')
-    expect(el).toHaveClass('h-2.5', 'w-3.5', 'rounded-xs')
+  it('should apply correct skeleton size classes', async () => {
+    const screen = await render(<SwitchSkeleton size="xs" data-testid="s" />)
+    await expect.element(screen.getByTestId('s')).toHaveClass('h-2.5', 'w-3.5', 'rounded-xs')
 
-    rerender(<SwitchSkeleton size="lg" data-testid="s" />)
-    expect(el).toHaveClass('h-5', 'w-9', 'rounded-md')
+    await screen.rerender(<SwitchSkeleton size="lg" data-testid="s" />)
+    await expect.element(screen.getByTestId('s')).toHaveClass('h-5', 'w-9', 'rounded-md')
   })
 
-  it('should apply custom className to skeleton', () => {
-    render(<SwitchSkeleton className="custom-class" data-testid="s" />)
-    expect(screen.getByTestId('s')).toHaveClass('custom-class')
+  it('should apply custom className to skeleton', async () => {
+    const screen = await render(<SwitchSkeleton className="custom-class" data-testid="s" />)
+    await expect.element(screen.getByTestId('s')).toHaveClass('custom-class')
   })
 })
diff --git a/packages/dify-ui/src/toast/__tests__/index.spec.tsx b/packages/dify-ui/src/toast/__tests__/index.spec.tsx
index a35d16f2b2..a1191dff86 100644
--- a/packages/dify-ui/src/toast/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/toast/__tests__/index.spec.tsx
@@ -1,316 +1,236 @@
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import * as React from 'react'
+import { render } from 'vitest-browser-react'
 import { toast, ToastHost } from '../index'
 
+const asHTMLElement = (element: HTMLElement | SVGElement) => element as HTMLElement
+
 describe('base/ui/toast', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     vi.useFakeTimers({ shouldAdvanceTime: true })
-    act(() => {
-      toast.dismiss()
-    })
+    toast.dismiss()
   })
 
   afterEach(() => {
-    act(() => {
-      toast.dismiss()
-      vi.runOnlyPendingTimers()
-    })
+    toast.dismiss()
+    vi.runOnlyPendingTimers()
     vi.useRealTimers()
   })
 
-  // Core host and manager integration.
   it('should render a success toast when called through the typed shortcut', async () => {
-    render(<ToastHost />)
+    const screen = await render(<ToastHost />)
 
-    act(() => {
-      toast.success('Saved', {
-        description: 'Your changes are available now.',
-      })
+    toast.success('Saved', {
+      description: 'Your changes are available now.',
     })
 
-    expect(await screen.findByText('Saved')).toBeInTheDocument()
-    expect(screen.getByText('Your changes are available now.')).toBeInTheDocument()
-    const viewport = screen.getByRole('region', { name: 'Notifications' })
-    expect(viewport).toHaveAttribute('aria-live', 'polite')
-    expect(viewport).toHaveClass('z-1003')
-    expect(viewport.firstElementChild).toHaveClass('top-4')
-    expect(screen.getByRole('dialog')).not.toHaveClass('outline-hidden')
+    await expect.element(screen.getByText('Saved')).toBeInTheDocument()
+    await expect.element(screen.getByText('Your changes are available now.')).toBeInTheDocument()
+    await expect.element(screen.getByRole('region', { name: 'Notifications' })).toHaveAttribute('aria-live', 'polite')
+    await expect.element(screen.getByRole('region', { name: 'Notifications' })).toHaveClass('z-1003')
+    expect(screen.getByRole('region', { name: 'Notifications' }).element().firstElementChild).toHaveClass('top-4')
+    expect(screen.getByRole('dialog').element()).not.toHaveClass('outline-hidden')
     expect(document.body.querySelector('[aria-hidden="true"].i-ri-checkbox-circle-fill')).toBeInTheDocument()
     expect(document.body.querySelector('button[aria-label="Close notification"][aria-hidden="true"]')).toBeInTheDocument()
   })
 
-  // Collapsed stacks should keep multiple toast roots mounted for smooth stack animation.
   it('should keep multiple toast roots mounted in a collapsed stack', async () => {
-    render(<ToastHost />)
+    const screen = await render(<ToastHost />)
 
-    act(() => {
-      toast('First toast')
-    })
+    toast('First toast')
+    await expect.element(screen.getByText('First toast')).toBeInTheDocument()
 
-    expect(await screen.findByText('First toast')).toBeInTheDocument()
+    toast('Second toast')
+    toast('Third toast')
 
-    act(() => {
-      toast('Second toast')
-      toast('Third toast')
-    })
-
-    expect(await screen.findByText('Third toast')).toBeInTheDocument()
-    expect(screen.getAllByRole('dialog')).toHaveLength(3)
+    await expect.element(screen.getByText('Third toast')).toBeInTheDocument()
+    expect(document.body.querySelectorAll('[role="dialog"]')).toHaveLength(3)
     expect(document.body.querySelectorAll('button[aria-label="Close notification"][aria-hidden="true"]')).toHaveLength(3)
 
-    fireEvent.mouseEnter(screen.getByRole('region', { name: 'Notifications' }))
+    screen.getByRole('region', { name: 'Notifications' }).element().dispatchEvent(new MouseEvent('mouseover', {
+      bubbles: true,
+    }))
 
-    await waitFor(() => {
+    await vi.waitFor(() => {
       expect(document.body.querySelector('button[aria-label="Close notification"][aria-hidden="true"]')).not.toBeInTheDocument()
     })
   })
 
-  // Neutral calls should map directly to a toast with only a title.
   it('should render a neutral toast when called directly', async () => {
-    render(<ToastHost />)
+    const screen = await render(<ToastHost />)
 
-    act(() => {
-      toast('Neutral toast')
-    })
+    toast('Neutral toast')
 
-    expect(await screen.findByText('Neutral toast')).toBeInTheDocument()
+    await expect.element(screen.getByText('Neutral toast')).toBeInTheDocument()
     expect(document.body.querySelector('[aria-hidden="true"].i-ri-information-2-fill')).not.toBeInTheDocument()
   })
 
-  // Base UI limit should cap the visible stack and mark overflow toasts as limited.
   it('should mark overflow toasts as limited when the stack exceeds the configured limit', async () => {
-    render(<ToastHost limit={1} />)
+    const screen = await render(<ToastHost limit={1} />)
 
-    act(() => {
-      toast('First toast')
-      toast('Second toast')
-    })
+    toast('First toast')
+    toast('Second toast')
 
-    expect(await screen.findByText('Second toast')).toBeInTheDocument()
+    await expect.element(screen.getByText('Second toast')).toBeInTheDocument()
     expect(document.body.querySelector('[data-limited]')).toBeInTheDocument()
   })
 
-  // Closing should work through the public manager API.
   it('should dismiss a toast when dismiss(id) is called', async () => {
-    render(<ToastHost />)
+    const screen = await render(<ToastHost />)
 
-    let toastId = ''
-    act(() => {
-      toastId = toast('Closable', {
-        description: 'This toast can be removed.',
-      })
+    const toastId = toast('Closable', {
+      description: 'This toast can be removed.',
     })
 
-    expect(await screen.findByText('Closable')).toBeInTheDocument()
+    await expect.element(screen.getByText('Closable')).toBeInTheDocument()
 
-    act(() => {
-      toast.dismiss(toastId)
-    })
+    toast.dismiss(toastId)
 
-    await waitFor(() => {
-      expect(screen.queryByText('Closable')).not.toBeInTheDocument()
+    await vi.waitFor(() => {
+      expect(document.body).not.toHaveTextContent('Closable')
     })
   })
 
-  // User dismissal needs to remain accessible.
   it('should close a toast when the dismiss button is clicked', async () => {
     const onClose = vi.fn()
+    const screen = await render(<ToastHost />)
 
-    render(<ToastHost />)
-
-    act(() => {
-      toast('Dismiss me', {
-        description: 'Manual dismissal path.',
-        onClose,
-      })
+    toast('Dismiss me', {
+      description: 'Manual dismissal path.',
+      onClose,
     })
 
-    fireEvent.mouseEnter(screen.getByRole('region', { name: 'Notifications' }))
+    screen.getByRole('region', { name: 'Notifications' }).element().dispatchEvent(new MouseEvent('mouseover', {
+      bubbles: true,
+    }))
 
-    const dismissButton = await screen.findByRole('button', { name: 'Close notification' })
+    await expect.element(screen.getByRole('button', { name: 'Close notification' })).toBeInTheDocument()
+    asHTMLElement(screen.getByRole('button', { name: 'Close notification' }).element()).click()
 
-    act(() => {
-      dismissButton.click()
-    })
-
-    await waitFor(() => {
-      expect(screen.queryByText('Dismiss me')).not.toBeInTheDocument()
+    await vi.waitFor(() => {
+      expect(document.body).not.toHaveTextContent('Dismiss me')
     })
     expect(onClose).toHaveBeenCalledTimes(1)
   })
 
-  // Base UI default timeout should apply when no timeout is provided.
   it('should auto dismiss toasts with the Base UI default timeout', async () => {
-    render(<ToastHost />)
+    const screen = await render(<ToastHost />)
 
-    act(() => {
-      toast('Default timeout')
-    })
+    toast('Default timeout')
+    await expect.element(screen.getByText('Default timeout')).toBeInTheDocument()
 
-    expect(await screen.findByText('Default timeout')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(4999)
+    expect(document.body).toHaveTextContent('Default timeout')
 
-    act(() => {
-      vi.advanceTimersByTime(4999)
-    })
-
-    expect(screen.getByText('Default timeout')).toBeInTheDocument()
-
-    act(() => {
-      vi.advanceTimersByTime(1)
-    })
-
-    await waitFor(() => {
-      expect(screen.queryByText('Default timeout')).not.toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(1)
+    await vi.waitFor(() => {
+      expect(document.body).not.toHaveTextContent('Default timeout')
     })
   })
 
-  // Provider timeout should apply to all toasts when configured.
   it('should respect the host timeout configuration', async () => {
-    render(<ToastHost timeout={3000} />)
+    const screen = await render(<ToastHost timeout={3000} />)
 
-    act(() => {
-      toast('Configured timeout')
-    })
+    toast('Configured timeout')
+    await expect.element(screen.getByText('Configured timeout')).toBeInTheDocument()
 
-    expect(await screen.findByText('Configured timeout')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(2999)
+    expect(document.body).toHaveTextContent('Configured timeout')
 
-    act(() => {
-      vi.advanceTimersByTime(2999)
-    })
-
-    expect(screen.getByText('Configured timeout')).toBeInTheDocument()
-
-    act(() => {
-      vi.advanceTimersByTime(1)
-    })
-
-    await waitFor(() => {
-      expect(screen.queryByText('Configured timeout')).not.toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(1)
+    await vi.waitFor(() => {
+      expect(document.body).not.toHaveTextContent('Configured timeout')
     })
   })
 
-  // Callers must be able to override or disable timeout per toast.
   it('should respect custom timeout values including zero', async () => {
-    render(<ToastHost />)
+    const screen = await render(<ToastHost />)
 
-    act(() => {
-      toast('Custom timeout', {
-        timeout: 1000,
-      })
+    toast('Custom timeout', {
+      timeout: 1000,
+    })
+    await expect.element(screen.getByText('Custom timeout')).toBeInTheDocument()
+
+    await vi.advanceTimersByTimeAsync(1000)
+    await vi.waitFor(() => {
+      expect(document.body).not.toHaveTextContent('Custom timeout')
     })
 
-    expect(await screen.findByText('Custom timeout')).toBeInTheDocument()
-
-    act(() => {
-      vi.advanceTimersByTime(1000)
+    toast('Persistent', {
+      timeout: 0,
     })
+    await expect.element(screen.getByText('Persistent')).toBeInTheDocument()
 
-    await waitFor(() => {
-      expect(screen.queryByText('Custom timeout')).not.toBeInTheDocument()
-    })
-
-    act(() => {
-      toast('Persistent', {
-        timeout: 0,
-      })
-    })
-
-    expect(await screen.findByText('Persistent')).toBeInTheDocument()
-
-    act(() => {
-      vi.advanceTimersByTime(10000)
-    })
-
-    expect(screen.getByText('Persistent')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(10000)
+    expect(document.body).toHaveTextContent('Persistent')
   })
 
-  // Updates should flow through the same manager state.
   it('should update an existing toast', async () => {
-    render(<ToastHost />)
+    const screen = await render(<ToastHost />)
 
-    let toastId = ''
-    act(() => {
-      toastId = toast.info('Loading', {
-        description: 'Preparing your data…',
-      })
+    const toastId = toast.info('Loading', {
+      description: 'Preparing your data…',
+    })
+    await expect.element(screen.getByText('Loading')).toBeInTheDocument()
+
+    toast.update(toastId, {
+      title: 'Done',
+      description: 'Your data is ready.',
+      type: 'success',
     })
 
-    expect(await screen.findByText('Loading')).toBeInTheDocument()
-
-    act(() => {
-      toast.update(toastId, {
-        title: 'Done',
-        description: 'Your data is ready.',
-        type: 'success',
-      })
-    })
-
-    expect(screen.getByText('Done')).toBeInTheDocument()
-    expect(screen.getByText('Your data is ready.')).toBeInTheDocument()
-    expect(screen.queryByText('Loading')).not.toBeInTheDocument()
+    await expect.element(screen.getByText('Done')).toBeInTheDocument()
+    await expect.element(screen.getByText('Your data is ready.')).toBeInTheDocument()
+    expect(document.body).not.toHaveTextContent('Loading')
   })
 
-  // Re-adding the same toast id should upsert in place instead of stacking duplicates.
   it('should upsert an existing toast when add is called with the same id', async () => {
-    render(<ToastHost />)
+    const screen = await render(<ToastHost />)
 
-    act(() => {
-      toast('Syncing', {
-        id: 'sync-job',
-        description: 'Uploading changes…',
-      })
+    toast('Syncing', {
+      id: 'sync-job',
+      description: 'Uploading changes…',
+    })
+    await expect.element(screen.getByText('Syncing')).toBeInTheDocument()
+
+    toast.success('Synced', {
+      id: 'sync-job',
+      description: 'All changes are uploaded.',
     })
 
-    expect(await screen.findByText('Syncing')).toBeInTheDocument()
-
-    act(() => {
-      toast.success('Synced', {
-        id: 'sync-job',
-        description: 'All changes are uploaded.',
-      })
+    await vi.waitFor(() => {
+      expect(document.body).not.toHaveTextContent('Syncing')
     })
-
-    expect(screen.queryByText('Syncing')).not.toBeInTheDocument()
-    expect(screen.getByText('Synced')).toBeInTheDocument()
-    expect(screen.getByText('All changes are uploaded.')).toBeInTheDocument()
-    expect(screen.getAllByRole('dialog')).toHaveLength(1)
+    await expect.element(screen.getByText('Synced')).toBeInTheDocument()
+    await expect.element(screen.getByText('All changes are uploaded.')).toBeInTheDocument()
+    expect(document.body.querySelectorAll('[role="dialog"]')).toHaveLength(1)
   })
 
-  // Action props should pass through to the Base UI action button.
   it('should render and invoke toast action props', async () => {
     const onAction = vi.fn()
+    const screen = await render(<ToastHost />)
 
-    render(<ToastHost />)
-
-    act(() => {
-      toast('Action toast', {
-        actionProps: {
-          children: 'Undo',
-          onClick: onAction,
-        },
-      })
+    toast('Action toast', {
+      actionProps: {
+        children: 'Undo',
+        onClick: onAction,
+      },
     })
 
-    const actionButton = await screen.findByRole('button', { name: 'Undo' })
-
-    act(() => {
-      actionButton.click()
-    })
+    await expect.element(screen.getByRole('button', { name: 'Undo' })).toBeInTheDocument()
+    asHTMLElement(screen.getByRole('button', { name: 'Undo' }).element()).click()
 
     expect(onAction).toHaveBeenCalledTimes(1)
   })
 
-  // Promise helpers are part of the public API and need a regression test.
   it('should transition a promise toast from loading to success', async () => {
-    render(<ToastHost />)
+    const screen = await render(<ToastHost />)
 
     let resolvePromise: ((value: string) => void) | undefined
     const promise = new Promise<string>((resolve) => {
       resolvePromise = resolve
     })
 
-    void act(() => toast.promise(promise, {
+    void toast.promise(promise, {
       loading: 'Saving…',
       success: result => ({
         title: 'Saved',
@@ -318,16 +238,14 @@ describe('base/ui/toast', () => {
         type: 'success',
       }),
       error: 'Failed',
-    }))
-
-    expect(await screen.findByText('Saving…')).toBeInTheDocument()
-
-    await act(async () => {
-      resolvePromise?.('Your changes are available now.')
-      await promise
     })
 
-    expect(await screen.findByText('Saved')).toBeInTheDocument()
-    expect(screen.getByText('Your changes are available now.')).toBeInTheDocument()
+    await expect.element(screen.getByText('Saving…')).toBeInTheDocument()
+
+    resolvePromise?.('Your changes are available now.')
+    await promise
+
+    await expect.element(screen.getByText('Saved')).toBeInTheDocument()
+    await expect.element(screen.getByText('Your changes are available now.')).toBeInTheDocument()
   })
 })
diff --git a/packages/dify-ui/src/tooltip/__tests__/index.spec.tsx b/packages/dify-ui/src/tooltip/__tests__/index.spec.tsx
index 7feee4f8c3..3660c2c8e5 100644
--- a/packages/dify-ui/src/tooltip/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/tooltip/__tests__/index.spec.tsx
@@ -1,11 +1,16 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
+import { render } from 'vitest-browser-react'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../index'
 
+const renderWithSafeViewport = (ui: import('react').ReactNode) => render(
+  <div style={{ minHeight: '100vh', minWidth: '100vw', padding: '240px' }}>
+    {ui}
+  </div>,
+)
+
 describe('TooltipContent', () => {
   describe('Placement and offsets', () => {
-    it('should use default top placement when placement is not provided', () => {
-      render(
+    it('should use default top placement when placement is not provided', async () => {
+      const screen = await renderWithSafeViewport(
         <Tooltip open>
           <TooltipTrigger aria-label="tooltip trigger">Trigger</TooltipTrigger>
           <TooltipContent role="tooltip" aria-label="default tooltip">
@@ -14,14 +19,13 @@ describe('TooltipContent', () => {
         </Tooltip>,
       )
 
-      const popup = screen.getByRole('tooltip', { name: 'default tooltip' })
-      expect(popup).toHaveAttribute('data-side', 'top')
-      expect(popup).toHaveAttribute('data-align', 'center')
-      expect(popup).toHaveTextContent('Tooltip body')
+      await expect.element(screen.getByRole('tooltip', { name: 'default tooltip' })).toHaveAttribute('data-side', 'top')
+      await expect.element(screen.getByRole('tooltip', { name: 'default tooltip' })).toHaveAttribute('data-align', 'center')
+      await expect.element(screen.getByRole('tooltip', { name: 'default tooltip' })).toHaveTextContent('Tooltip body')
     })
 
-    it('should apply custom placement when placement props are provided', () => {
-      render(
+    it('should apply custom placement when placement props are provided', async () => {
+      const screen = await renderWithSafeViewport(
         <Tooltip open>
           <TooltipTrigger aria-label="tooltip trigger">Trigger</TooltipTrigger>
           <TooltipContent
@@ -36,16 +40,15 @@ describe('TooltipContent', () => {
         </Tooltip>,
       )
 
-      const popup = screen.getByRole('tooltip', { name: 'custom tooltip' })
-      expect(popup).toHaveAttribute('data-side', 'bottom')
-      expect(popup).toHaveAttribute('data-align', 'start')
-      expect(popup).toHaveTextContent('Custom tooltip body')
+      await expect.element(screen.getByRole('tooltip', { name: 'custom tooltip' })).toHaveAttribute('data-side', 'bottom')
+      await expect.element(screen.getByRole('tooltip', { name: 'custom tooltip' })).toHaveAttribute('data-align', 'start')
+      await expect.element(screen.getByRole('tooltip', { name: 'custom tooltip' })).toHaveTextContent('Custom tooltip body')
     })
   })
 
   describe('Variant and popup props', () => {
-    it('should render popup content when variant is plain', () => {
-      render(
+    it('should render popup content when variant is plain', async () => {
+      const screen = await render(
         <Tooltip open>
           <TooltipTrigger aria-label="tooltip trigger">Trigger</TooltipTrigger>
           <TooltipContent variant="plain" role="tooltip" aria-label="plain tooltip">
@@ -54,13 +57,13 @@ describe('TooltipContent', () => {
         </Tooltip>,
       )
 
-      expect(screen.getByRole('tooltip', { name: 'plain tooltip' })).toHaveTextContent('Plain tooltip body')
+      await expect.element(screen.getByRole('tooltip', { name: 'plain tooltip' })).toHaveTextContent('Plain tooltip body')
     })
 
-    it('should forward popup props and handlers when popup props are provided', () => {
+    it('should forward popup props and handlers when popup props are provided', async () => {
       const onMouseEnter = vi.fn()
 
-      render(
+      const screen = await render(
         <Tooltip open>
           <TooltipTrigger aria-label="tooltip trigger">Trigger</TooltipTrigger>
           <TooltipContent
@@ -76,15 +79,15 @@ describe('TooltipContent', () => {
       )
 
       const popup = screen.getByRole('tooltip', { name: 'help text' })
-      fireEvent.mouseEnter(popup)
+      await popup.hover()
 
-      expect(popup).toHaveAttribute('id', 'tooltip-popup-id')
-      expect(popup).toHaveAttribute('data-track-id', 'tooltip-track')
+      await expect.element(popup).toHaveAttribute('id', 'tooltip-popup-id')
+      await expect.element(popup).toHaveAttribute('data-track-id', 'tooltip-track')
       expect(onMouseEnter).toHaveBeenCalledTimes(1)
     })
 
-    it('should apply className to the popup and positionerClassName to the positioner', () => {
-      render(
+    it('should apply className to the popup and positionerClassName to the positioner', async () => {
+      const screen = await render(
         <Tooltip open>
           <TooltipTrigger aria-label="tooltip trigger">Trigger</TooltipTrigger>
           <TooltipContent
@@ -98,7 +101,7 @@ describe('TooltipContent', () => {
         </Tooltip>,
       )
 
-      const popup = screen.getByRole('tooltip', { name: 'styled tooltip' })
+      const popup = screen.getByRole('tooltip', { name: 'styled tooltip' }).element()
       expect(popup).toHaveClass('popup-class')
       expect(popup.parentElement).toHaveClass('positioner-class')
     })
diff --git a/packages/dify-ui/tests/setup.ts b/packages/dify-ui/tests/setup.ts
deleted file mode 100644
index e1ea15af2b..0000000000
--- a/packages/dify-ui/tests/setup.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { act, cleanup } from '@testing-library/react'
-import '@testing-library/jest-dom/vitest'
-
-if (typeof Element !== 'undefined' && !Element.prototype.getAnimations)
-  Element.prototype.getAnimations = () => []
-
-if (typeof document !== 'undefined' && !document.getAnimations)
-  document.getAnimations = () => []
-
-if (typeof globalThis.ResizeObserver === 'undefined') {
-  globalThis.ResizeObserver = class {
-    observe() {
-      return undefined
-    }
-
-    unobserve() {
-      return undefined
-    }
-
-    disconnect() {
-      return undefined
-    }
-  }
-}
-
-if (typeof globalThis.IntersectionObserver === 'undefined') {
-  globalThis.IntersectionObserver = class {
-    readonly root: Element | Document | null = null
-    readonly rootMargin: string = ''
-    readonly scrollMargin: string = ''
-    readonly thresholds: ReadonlyArray<number> = []
-    constructor(_callback: IntersectionObserverCallback, _options?: IntersectionObserverInit) { /* noop */ }
-    observe(_target: Element) { /* noop */ }
-    unobserve(_target: Element) { /* noop */ }
-    disconnect() { /* noop */ }
-    takeRecords(): IntersectionObserverEntry[] { return [] }
-  }
-}
-
-afterEach(async () => {
-  await act(async () => {
-    cleanup()
-  })
-})
diff --git a/packages/dify-ui/tsconfig.json b/packages/dify-ui/tsconfig.json
index 678e1de897..10cffbcd76 100644
--- a/packages/dify-ui/tsconfig.json
+++ b/packages/dify-ui/tsconfig.json
@@ -1,10 +1,6 @@
 {
   "extends": "@dify/tsconfig/react.json",
   "compilerOptions": {
-    "rootDir": ".",
-    "types": ["vitest/globals", "@testing-library/jest-dom"],
-    "isolatedModules": true,
-    "verbatimModuleSyntax": true
-  },
-  "include": ["src", "tests", ".storybook", "tailwind.config.ts", "vite.config.ts"]
+    "types": ["vite-plus/test/globals"]
+  }
 }
diff --git a/packages/dify-ui/vite.config.ts b/packages/dify-ui/vite.config.ts
index a20b7fb35c..5f3533c706 100644
--- a/packages/dify-ui/vite.config.ts
+++ b/packages/dify-ui/vite.config.ts
@@ -1,5 +1,6 @@
 import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite-plus'
+import { playwright } from 'vite-plus/test/browser-playwright'
 
 const isCI = !!process.env.CI
 
@@ -9,9 +10,13 @@ export default defineConfig({
     tsconfigPaths: true,
   },
   test: {
-    environment: 'happy-dom',
     globals: true,
-    setupFiles: ['./tests/setup.ts'],
+    browser: {
+      enabled: true,
+      provider: playwright(),
+      instances: [{ browser: 'chromium' }],
+      headless: true,
+    },
     coverage: {
       provider: 'v8',
       include: ['src/**/*.{ts,tsx}'],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1e0994d0a2..65f2e05bf4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,7 +1,7 @@
 lockfileVersion: '9.0'
 
 settings:
-  autoInstallPeers: true
+  autoInstallPeers: false
   excludeLinksFromLockfile: false
 
 catalogs:
@@ -414,6 +414,9 @@ catalogs:
     pinyin-pro:
       specifier: 3.28.1
       version: 3.28.1
+    playwright:
+      specifier: 1.59.1
+      version: 1.59.1
     postcss:
       specifier: 8.5.9
       version: 8.5.9
@@ -531,6 +534,9 @@ catalogs:
     vite-plus:
       specifier: 0.1.18
       version: 0.1.18
+    vitest-browser-react:
+      specifier: 2.2.0
+      version: 2.2.0
     vitest-canvas-mock:
       specifier: 1.1.4
       version: 1.1.4
@@ -579,7 +585,7 @@ importers:
     devDependencies:
       '@antfu/eslint-config':
         specifier: 'catalog:'
-        version: 8.2.0(@eslint-react/eslint-plugin@3.0.0(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@next/eslint-plugin-next@16.2.3)(@typescript-eslint/rule-tester@8.57.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@typescript-eslint/typescript-estree@8.58.2(typescript@6.0.2))(@typescript-eslint/utils@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@vue/compiler-sfc@3.5.31)(eslint-plugin-react-refresh@0.5.2(eslint@10.2.0(jiti@2.6.1)))(eslint@10.2.0(jiti@2.6.1))(oxlint@1.60.0(oxlint-tsgolint@0.20.0))(typescript@6.0.2)(vitest@4.1.4)
+        version: 8.2.0(@eslint-react/eslint-plugin@3.0.0(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@next/eslint-plugin-next@16.2.3)(@types/node@25.6.0)(@typescript-eslint/typescript-estree@8.58.2(typescript@6.0.2))(@typescript-eslint/utils@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(eslint-plugin-react-refresh@0.5.2(eslint@10.2.0(jiti@2.6.1)))(eslint@10.2.0(jiti@2.6.1))(happy-dom@20.9.0)(jiti@2.6.1)(oxlint@1.60.0(oxlint-tsgolint@0.20.0))(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
       eslint:
         specifier: 'catalog:'
         version: 10.2.0(jiti@2.6.1)
@@ -594,10 +600,10 @@ importers:
         version: 1.3.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
       vite:
         specifier: npm:@voidzero-dev/vite-plus-core@0.1.18
-        version: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+        version: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
       vite-plus:
         specifier: 'catalog:'
-        version: 0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
+        version: 0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
 
   e2e:
     devDependencies:
@@ -621,10 +627,10 @@ importers:
         version: 6.0.2
       vite:
         specifier: npm:@voidzero-dev/vite-plus-core@0.1.18
-        version: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+        version: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
       vite-plus:
         specifier: 'catalog:'
-        version: 0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
+        version: 0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
 
   packages/dify-ui:
     dependencies:
@@ -637,7 +643,7 @@ importers:
     devDependencies:
       '@base-ui/react':
         specifier: 'catalog:'
-        version: 1.4.0(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+        version: 1.4.0(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@chromatic-com/storybook':
         specifier: 'catalog:'
         version: 5.1.2(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
@@ -652,7 +658,7 @@ importers:
         version: 1.2.10
       '@storybook/addon-docs':
         specifier: 'catalog:'
-        version: 10.3.5(@types/react@19.2.14)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2))
+        version: 10.3.5(@types/react@19.2.14)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
       '@storybook/addon-links':
         specifier: 'catalog:'
         version: 10.3.5(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
@@ -661,19 +667,10 @@ importers:
         version: 10.3.5(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
       '@storybook/react-vite':
         specifier: 'catalog:'
-        version: 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)(webpack@5.105.4(esbuild@0.27.2))
+        version: 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)
       '@tailwindcss/vite':
         specifier: 'catalog:'
-        version: 4.2.2(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))
-      '@testing-library/jest-dom':
-        specifier: 'catalog:'
-        version: 6.9.1
-      '@testing-library/react':
-        specifier: 'catalog:'
-        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
-      '@testing-library/user-event':
-        specifier: 'catalog:'
-        version: 14.6.1(@testing-library/dom@10.4.1)
+        version: 4.2.2(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))
       '@types/react':
         specifier: 'catalog:'
         version: 19.2.14
@@ -682,16 +679,16 @@ importers:
         version: 19.2.3(@types/react@19.2.14)
       '@vitejs/plugin-react':
         specifier: 'catalog:'
-        version: 6.0.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))
+        version: 6.0.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))
       '@vitest/coverage-v8':
         specifier: 'catalog:'
-        version: 4.1.4(@voidzero-dev/vite-plus-test@0.1.18)
+        version: 4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
       class-variance-authority:
         specifier: 'catalog:'
         version: 0.7.1
-      happy-dom:
+      playwright:
         specifier: 'catalog:'
-        version: 20.9.0
+        version: 1.59.1
       react:
         specifier: 'catalog:'
         version: 19.2.5
@@ -709,13 +706,13 @@ importers:
         version: 6.0.2
       vite:
         specifier: npm:@voidzero-dev/vite-plus-core@0.1.18
-        version: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+        version: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
       vite-plus:
         specifier: 'catalog:'
-        version: 0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
-      vitest:
-        specifier: npm:@voidzero-dev/vite-plus-test@0.1.18
-        version: '@voidzero-dev/vite-plus-test@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+        version: 0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
+      vitest-browser-react:
+        specifier: 'catalog:'
+        version: 2.2.0(@types/node@25.6.0)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
 
   packages/iconify-collections:
     devDependencies:
@@ -737,10 +734,10 @@ importers:
         version: 25.6.0
       vite:
         specifier: npm:@voidzero-dev/vite-plus-core@0.1.18
-        version: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+        version: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
       vite-plus:
         specifier: 'catalog:'
-        version: 0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
+        version: 0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
 
   packages/tsconfig: {}
 
@@ -763,7 +760,7 @@ importers:
         version: 8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
       '@vitest/coverage-v8':
         specifier: 'catalog:'
-        version: 4.1.4(@voidzero-dev/vite-plus-test@0.1.18)
+        version: 4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
       eslint:
         specifier: 'catalog:'
         version: 10.2.0(jiti@2.6.1)
@@ -772,13 +769,13 @@ importers:
         version: 6.0.2
       vite:
         specifier: npm:@voidzero-dev/vite-plus-core@0.1.18
-        version: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+        version: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
       vite-plus:
         specifier: 'catalog:'
-        version: 0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
+        version: 0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
       vitest:
         specifier: npm:@voidzero-dev/vite-plus-test@0.1.18
-        version: '@voidzero-dev/vite-plus-test@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+        version: '@voidzero-dev/vite-plus-test@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
 
   web:
     dependencies:
@@ -787,10 +784,10 @@ importers:
         version: 2.39.0
       '@amplitude/plugin-session-replay-browser':
         specifier: 'catalog:'
-        version: 1.27.7(@amplitude/rrweb@2.0.0-alpha.37)(rollup@4.59.0)
+        version: 1.27.7(@amplitude/rrweb@2.0.0-alpha.37)
       '@base-ui/react':
         specifier: 'catalog:'
-        version: 1.4.0(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+        version: 1.4.0(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@emoji-mart/data':
         specifier: 'catalog:'
         version: 1.2.1
@@ -817,7 +814,7 @@ importers:
         version: 0.43.0
       '@lexical/react':
         specifier: 'catalog:'
-        version: 0.43.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(yjs@13.6.30)
+        version: 0.43.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@lexical/selection':
         specifier: 'catalog:'
         version: 0.43.0
@@ -829,7 +826,7 @@ importers:
         version: 0.43.0
       '@monaco-editor/react':
         specifier: 'catalog:'
-        version: 4.7.0(monaco-editor@0.55.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+        version: 4.7.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@orpc/client':
         specifier: 'catalog:'
         version: 1.13.14
@@ -985,13 +982,13 @@ importers:
         version: 1.0.0
       next:
         specifier: 'catalog:'
-        version: 16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(sass@1.98.0)
+        version: 16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       next-themes:
         specifier: 'catalog:'
         version: 0.4.6(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       nuqs:
         specifier: 'catalog:'
-        version: 2.8.9(next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(sass@1.98.0))(react@19.2.5)
+        version: 2.8.9(next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react@19.2.5)
       pinyin-pro:
         specifier: 'catalog:'
         version: 3.28.1
@@ -1091,7 +1088,7 @@ importers:
     devDependencies:
       '@antfu/eslint-config':
         specifier: 'catalog:'
-        version: 8.2.0(@eslint-react/eslint-plugin@3.0.0(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@next/eslint-plugin-next@16.2.3)(@typescript-eslint/rule-tester@8.57.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@typescript-eslint/typescript-estree@8.58.2(typescript@6.0.2))(@typescript-eslint/utils@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@voidzero-dev/vite-plus-test@0.1.18)(@vue/compiler-sfc@3.5.31)(eslint-plugin-react-refresh@0.5.2(eslint@10.2.0(jiti@2.6.1)))(eslint@10.2.0(jiti@2.6.1))(oxlint@1.60.0(oxlint-tsgolint@0.20.0))(typescript@6.0.2)
+        version: 8.2.0(@eslint-react/eslint-plugin@3.0.0(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@next/eslint-plugin-next@16.2.3)(@types/node@25.6.0)(@typescript-eslint/typescript-estree@8.58.2(typescript@6.0.2))(@typescript-eslint/utils@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(eslint-plugin-react-refresh@0.5.2(eslint@10.2.0(jiti@2.6.1)))(eslint@10.2.0(jiti@2.6.1))(happy-dom@20.9.0)(jiti@2.6.1)(oxlint@1.60.0(oxlint-tsgolint@0.20.0))(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
       '@chromatic-com/storybook':
         specifier: 'catalog:'
         version: 5.1.2(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
@@ -1121,25 +1118,25 @@ importers:
         version: link:../packages/dify-ui
       '@mdx-js/loader':
         specifier: 'catalog:'
-        version: 3.1.1(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))
+        version: 3.1.1
       '@mdx-js/react':
         specifier: 'catalog:'
         version: 3.1.1(@types/react@19.2.14)(react@19.2.5)
       '@mdx-js/rollup':
         specifier: 'catalog:'
-        version: 3.1.1(rollup@4.59.0)
+        version: 3.1.1
       '@next/eslint-plugin-next':
         specifier: 'catalog:'
         version: 16.2.3
       '@next/mdx':
         specifier: 'catalog:'
-        version: 16.2.3(@mdx-js/loader@3.1.1(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3)))(@mdx-js/react@3.1.1(@types/react@19.2.14)(react@19.2.5))
+        version: 16.2.3(@mdx-js/loader@3.1.1)(@mdx-js/react@3.1.1(@types/react@19.2.14)(react@19.2.5))
       '@rgrove/parse-xml':
         specifier: 'catalog:'
         version: 4.2.0
       '@storybook/addon-docs':
         specifier: 'catalog:'
-        version: 10.3.5(@types/react@19.2.14)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))
+        version: 10.3.5(@types/react@19.2.14)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
       '@storybook/addon-links':
         specifier: 'catalog:'
         version: 10.3.5(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
@@ -1151,7 +1148,7 @@ importers:
         version: 10.3.5(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
       '@storybook/nextjs-vite':
         specifier: 'catalog:'
-        version: 10.3.5(@babel/core@7.29.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(sass@1.98.0))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))
+        version: 10.3.5(@babel/core@7.29.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)
       '@storybook/react':
         specifier: 'catalog:'
         version: 10.3.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)
@@ -1160,13 +1157,13 @@ importers:
         version: 4.2.2
       '@tailwindcss/vite':
         specifier: 'catalog:'
-        version: 4.2.2(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))
+        version: 4.2.2(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))
       '@tanstack/eslint-plugin-query':
         specifier: 'catalog:'
         version: 5.99.0(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
       '@tanstack/react-devtools':
         specifier: 'catalog:'
-        version: 0.10.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(csstype@3.2.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(solid-js@1.9.11)
+        version: 0.10.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(csstype@3.2.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@tanstack/react-form-devtools':
         specifier: 'catalog:'
         version: 0.2.21(@types/react@19.2.14)(csstype@3.2.3)(react@19.2.5)(solid-js@1.9.11)
@@ -1226,13 +1223,13 @@ importers:
         version: 7.0.0-dev.20260413.1
       '@vitejs/plugin-react':
         specifier: 'catalog:'
-        version: 6.0.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))
+        version: 6.0.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))
       '@vitejs/plugin-rsc':
         specifier: 'catalog:'
-        version: 0.5.24(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(react-dom@19.2.5(react@19.2.5))(react-server-dom-webpack@19.2.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3)))(react@19.2.5)
+        version: 0.5.24(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(react-dom@19.2.5(react@19.2.5))(react-server-dom-webpack@19.2.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react@19.2.5)
       '@vitest/coverage-v8':
         specifier: 'catalog:'
-        version: 4.1.4(@voidzero-dev/vite-plus-test@0.1.18)
+        version: 4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
       agentation:
         specifier: 'catalog:'
         version: 3.0.2(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
@@ -1274,13 +1271,13 @@ importers:
         version: 4.12.14
       knip:
         specifier: 'catalog:'
-        version: 6.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+        version: 6.4.1(@emnapi/runtime@1.9.1)
       postcss:
         specifier: 'catalog:'
         version: 8.5.9
       react-server-dom-webpack:
         specifier: 'catalog:'
-        version: 19.2.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))
+        version: 19.2.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       storybook:
         specifier: 'catalog:'
         version: 10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
@@ -1298,22 +1295,22 @@ importers:
         version: 3.19.3
       vinext:
         specifier: 'catalog:'
-        version: 0.0.41(453b4e184a832f83060410b31544dc36)
+        version: 0.0.41(@mdx-js/rollup@3.1.1)(@vitejs/plugin-react@6.0.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)))(@vitejs/plugin-rsc@0.5.24(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(react-dom@19.2.5(react@19.2.5))(react-server-dom-webpack@19.2.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react@19.2.5))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react-server-dom-webpack@19.2.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react@19.2.5)(typescript@6.0.2)
       vite:
         specifier: npm:@voidzero-dev/vite-plus-core@0.1.18
-        version: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+        version: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
       vite-plugin-inspect:
         specifier: 'catalog:'
-        version: 12.0.0-beta.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2)(ws@8.20.0)
+        version: 12.0.0-beta.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2)(ws@8.20.0)
       vite-plus:
         specifier: 'catalog:'
-        version: 0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
+        version: 0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
       vitest:
         specifier: npm:@voidzero-dev/vite-plus-test@0.1.18
-        version: '@voidzero-dev/vite-plus-test@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+        version: '@voidzero-dev/vite-plus-test@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
       vitest-canvas-mock:
         specifier: 'catalog:'
-        version: 1.1.4(@voidzero-dev/vite-plus-test@0.1.18)
+        version: 1.1.4(@voidzero-dev/vite-plus-test@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))
 
 packages:
 
@@ -1682,9 +1679,6 @@ packages:
   '@cucumber/tag-expressions@9.1.0':
     resolution: {integrity: sha512-bvHjcRFZ+J1TqIa9eFNO1wGHqwx4V9ZKV3hYgkuK/VahHx73uiP4rKV3JVrvWSMrwrFvJG6C8aEwnCWSvbyFdQ==}
 
-  '@date-fns/tz@1.4.1':
-    resolution: {integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==}
-
   '@e18e/eslint-plugin@0.3.0':
     resolution: {integrity: sha512-hHgfpxsrZ2UYHcicA+tGZnmk19uJTaye9VH79O+XS8R4ona2Hx3xjhXghclNW58uXMk3xXlbYEOMr8thsoBmWg==}
     peerDependencies:
@@ -1701,18 +1695,9 @@ packages:
     peerDependencies:
       tailwindcss: '*'
 
-  '@emnapi/core@1.9.2':
-    resolution: {integrity: sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==}
-
   '@emnapi/runtime@1.9.1':
     resolution: {integrity: sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==}
 
-  '@emnapi/runtime@1.9.2':
-    resolution: {integrity: sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==}
-
-  '@emnapi/wasi-threads@1.2.1':
-    resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
-
   '@emoji-mart/data@1.2.1':
     resolution: {integrity: sha512-no2pQMWiBy6gpBEiqGeU77/bFejDqUTRY7KX+0+iur13op3bqUsXdnwoZs6Xb1zbv0gAj5VvS1PWoUUckSr5Dw==}
 
@@ -2290,9 +2275,6 @@ packages:
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/source-map@0.3.11':
-    resolution: {integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==}
-
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
@@ -3068,94 +3050,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@parcel/watcher-android-arm64@2.5.6':
-    resolution: {integrity: sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm64]
-    os: [android]
-
-  '@parcel/watcher-darwin-arm64@2.5.6':
-    resolution: {integrity: sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@parcel/watcher-darwin-x64@2.5.6':
-    resolution: {integrity: sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@parcel/watcher-freebsd-x64@2.5.6':
-    resolution: {integrity: sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@parcel/watcher-linux-arm-glibc@2.5.6':
-    resolution: {integrity: sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm]
-    os: [linux]
-    libc: [glibc]
-
-  '@parcel/watcher-linux-arm-musl@2.5.6':
-    resolution: {integrity: sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm]
-    os: [linux]
-    libc: [musl]
-
-  '@parcel/watcher-linux-arm64-glibc@2.5.6':
-    resolution: {integrity: sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@parcel/watcher-linux-arm64-musl@2.5.6':
-    resolution: {integrity: sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@parcel/watcher-linux-x64-glibc@2.5.6':
-    resolution: {integrity: sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@parcel/watcher-linux-x64-musl@2.5.6':
-    resolution: {integrity: sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@parcel/watcher-win32-arm64@2.5.6':
-    resolution: {integrity: sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@parcel/watcher-win32-ia32@2.5.6':
-    resolution: {integrity: sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@parcel/watcher-win32-x64@2.5.6':
-    resolution: {integrity: sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [x64]
-    os: [win32]
-
-  '@parcel/watcher@2.5.6':
-    resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
-    engines: {node: '>= 10.0.0'}
-
   '@pkgr/core@0.2.9':
     resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
@@ -3474,144 +3368,6 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.59.0':
-    resolution: {integrity: sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==}
-    cpu: [arm]
-    os: [android]
-
-  '@rollup/rollup-android-arm64@4.59.0':
-    resolution: {integrity: sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==}
-    cpu: [arm64]
-    os: [android]
-
-  '@rollup/rollup-darwin-arm64@4.59.0':
-    resolution: {integrity: sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@rollup/rollup-darwin-x64@4.59.0':
-    resolution: {integrity: sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@rollup/rollup-freebsd-arm64@4.59.0':
-    resolution: {integrity: sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==}
-    cpu: [arm64]
-    os: [freebsd]
-
-  '@rollup/rollup-freebsd-x64@4.59.0':
-    resolution: {integrity: sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@rollup/rollup-linux-arm-gnueabihf@4.59.0':
-    resolution: {integrity: sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==}
-    cpu: [arm]
-    os: [linux]
-    libc: [glibc]
-
-  '@rollup/rollup-linux-arm-musleabihf@4.59.0':
-    resolution: {integrity: sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==}
-    cpu: [arm]
-    os: [linux]
-    libc: [musl]
-
-  '@rollup/rollup-linux-arm64-gnu@4.59.0':
-    resolution: {integrity: sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rollup/rollup-linux-arm64-musl@4.59.0':
-    resolution: {integrity: sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@rollup/rollup-linux-loong64-gnu@4.59.0':
-    resolution: {integrity: sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==}
-    cpu: [loong64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rollup/rollup-linux-loong64-musl@4.59.0':
-    resolution: {integrity: sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==}
-    cpu: [loong64]
-    os: [linux]
-    libc: [musl]
-
-  '@rollup/rollup-linux-ppc64-gnu@4.59.0':
-    resolution: {integrity: sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rollup/rollup-linux-ppc64-musl@4.59.0':
-    resolution: {integrity: sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [musl]
-
-  '@rollup/rollup-linux-riscv64-gnu@4.59.0':
-    resolution: {integrity: sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rollup/rollup-linux-riscv64-musl@4.59.0':
-    resolution: {integrity: sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [musl]
-
-  '@rollup/rollup-linux-s390x-gnu@4.59.0':
-    resolution: {integrity: sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
-  '@rollup/rollup-linux-x64-gnu@4.59.0':
-    resolution: {integrity: sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rollup/rollup-linux-x64-musl@4.59.0':
-    resolution: {integrity: sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@rollup/rollup-openbsd-x64@4.59.0':
-    resolution: {integrity: sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==}
-    cpu: [x64]
-    os: [openbsd]
-
-  '@rollup/rollup-openharmony-arm64@4.59.0':
-    resolution: {integrity: sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==}
-    cpu: [arm64]
-    os: [openharmony]
-
-  '@rollup/rollup-win32-arm64-msvc@4.59.0':
-    resolution: {integrity: sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==}
-    cpu: [arm64]
-    os: [win32]
-
-  '@rollup/rollup-win32-ia32-msvc@4.59.0':
-    resolution: {integrity: sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==}
-    cpu: [ia32]
-    os: [win32]
-
-  '@rollup/rollup-win32-x64-gnu@4.59.0':
-    resolution: {integrity: sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==}
-    cpu: [x64]
-    os: [win32]
-
-  '@rollup/rollup-win32-x64-msvc@4.59.0':
-    resolution: {integrity: sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==}
-    cpu: [x64]
-    os: [win32]
-
   '@sentry-internal/browser-utils@10.48.0':
     resolution: {integrity: sha512-SCiTLBXzugFKxev6NoKYBIhQoDk0gUh0AVVVepCBqfCJiWBG01Zvv0R5tCVohr4cWRllkQ8mlBdNQd/I7s9tdA==}
     engines: {node: '>=18'}
@@ -3989,8 +3745,6 @@ packages:
   '@tanstack/devtools-ui@0.5.1':
     resolution: {integrity: sha512-T9JjAdqMSnxsVO6AQykD5vhxPF4iFLKtbYxee/bU3OLlk446F5C1220GdCmhDSz7y4lx+m8AvIS0bq6zzvdDUA==}
     engines: {node: '>=18'}
-    peerDependencies:
-      solid-js: 1.9.11
 
   '@tanstack/devtools-utils@0.4.0':
     resolution: {integrity: sha512-KsGzYhA8L/fCNgyyMyoUy+TKtx+DjNbzWwqH6wXL48Llzo7kvV9RynYJlaO8Qkzwm+NdHXSgsljQNjQ3CKPpZA==}
@@ -4018,8 +3772,6 @@ packages:
     resolution: {integrity: sha512-K8+tsBx+ptTLqqd4dOF10B6laj1g+XYImqYZL9n0jBINGaT+sOf17PKV9pbBt8kdbZeIGsHaJ5OZWCyZoHqN4A==}
     engines: {node: '>=18'}
     hasBin: true
-    peerDependencies:
-      solid-js: 1.9.11
 
   '@tanstack/eslint-plugin-query@5.99.0':
     resolution: {integrity: sha512-jVp1AEL7S7BeuQvH5SN1F5UdrNW/AbryKDeWUUMeAKNzh9C+Ik/bRSa/HeuJLlmaN+WOUkdDFbtCK0go7BxnUQ==}
@@ -4289,12 +4041,6 @@ packages:
   '@types/doctrine@0.0.9':
     resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
 
-  '@types/eslint-scope@3.7.7':
-    resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
-
-  '@types/eslint@9.6.1':
-    resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
-
   '@types/esrecurse@4.3.1':
     resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
 
@@ -4389,13 +4135,6 @@ packages:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/parser@8.57.2':
-    resolution: {integrity: sha512-30ScMRHIAD33JJQkgfGW1t8CURZtjc2JpTrq5n2HFhOefbAhb7ucc7xJwdWcrEtqUIYJ73Nybpsggii6GtAHjA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.0.0'
-
   '@typescript-eslint/parser@8.58.2':
     resolution: {integrity: sha512-/Zb/xaIDfxeJnvishjGdcR4jmr7S+bda8PKNhRGdljDM+elXhlvN0FyPSsMnLmJUrVG9aPO6dof80wjMawsASg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -4403,38 +4142,16 @@ packages:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/project-service@8.57.2':
-    resolution: {integrity: sha512-FuH0wipFywXRTHf+bTTjNyuNQQsQC3qh/dYzaM4I4W0jrCqjCVuUh99+xd9KamUfmCGPvbO8NDngo/vsnNVqgw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
   '@typescript-eslint/project-service@8.58.2':
     resolution: {integrity: sha512-Cq6UfpZZk15+r87BkIh5rDpi38W4b+Sjnb8wQCPPDDweS/LRCFjCyViEbzHk5Ck3f2QDfgmlxqSa7S7clDtlfg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/rule-tester@8.57.2':
-    resolution: {integrity: sha512-cb5m0irr1449waTuYzGi4KD3SGUH3khL4ta/o9lzShvT7gnIwR5qVhU0VM0p966kCrtFId8hwmkvz1fOElsxTg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-
-  '@typescript-eslint/scope-manager@8.57.2':
-    resolution: {integrity: sha512-snZKH+W4WbWkrBqj4gUNRIGb/jipDW3qMqVJ4C9rzdFc+wLwruxk+2a5D+uoFcKPAqyqEnSb4l2ULuZf95eSkw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/scope-manager@8.58.2':
     resolution: {integrity: sha512-SgmyvDPexWETQek+qzZnrG6844IaO02UVyOLhI4wpo82dpZJY9+6YZCKAMFzXb7qhx37mFK1QcPQ18tud+vo6Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.57.2':
-    resolution: {integrity: sha512-3Lm5DSM+DCowsUOJC+YqHHnKEfFh5CoGkj5Z31NQSNF4l5wdOwqGn99wmwN/LImhfY3KJnmordBq/4+VDe2eKw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
   '@typescript-eslint/tsconfig-utils@8.58.2':
     resolution: {integrity: sha512-3SR+RukipDvkkKp/d0jP0dyzuls3DbGmwDpVEc5wqk5f38KFThakqAAO0XMirWAE+kT00oTauTbzMFGPoAzB0A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -4448,33 +4165,16 @@ packages:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/types@8.57.2':
-    resolution: {integrity: sha512-/iZM6FnM4tnx9csuTxspMW4BOSegshwX5oBDznJ7S4WggL7Vczz5d2W11ecc4vRrQMQHXRSxzrCsyG5EsPPTbA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/types@8.58.2':
     resolution: {integrity: sha512-9TukXyATBQf/Jq9AMQXfvurk+G5R2MwfqQGDR2GzGz28HvY/lXNKGhkY+6IOubwcquikWk5cjlgPvD2uAA7htQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.57.2':
-    resolution: {integrity: sha512-2MKM+I6g8tJxfSmFKOnHv2t8Sk3T6rF20A1Puk0svLK+uVapDZB/4pfAeB7nE83uAZrU6OxW+HmOd5wHVdXwXA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
   '@typescript-eslint/typescript-estree@8.58.2':
     resolution: {integrity: sha512-ELGuoofuhhoCvNbQjFFiobFcGgcDCEm0ThWdmO4Z0UzLqPXS3KFvnEZ+SHewwOYHjM09tkzOWXNTv9u6Gqtyuw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/utils@8.57.2':
-    resolution: {integrity: sha512-krRIbvPK1ju1WBKIefiX+bngPs+odIQUtR7kymzPfo1POVw3jlF+nLkmexdSSd4UCbDcQn+wMBATOOmpBbqgKg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.0.0'
-
   '@typescript-eslint/utils@8.58.2':
     resolution: {integrity: sha512-QZfjHNEzPY8+l0+fIXMvuQ2sJlplB4zgDZvA+NmvZsZv3EQwOcc1DuIU1VJUTWZ/RKouBMhDyNaBMx4sWvrzRA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -4482,10 +4182,6 @@ packages:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/visitor-keys@8.57.2':
-    resolution: {integrity: sha512-zhahknjobV2FiD6Ee9iLbS7OV9zi10rG26odsQdfBO/hjSzUQbkIYgda+iNKK1zNiW2ey+Lf8MU5btN17V3dUw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/visitor-keys@8.58.2':
     resolution: {integrity: sha512-f1WO2Lx8a9t8DARmcWAUPJbu0G20bJlj8L4z72K00TMeJAoyLr/tHhI/pzYBLrR4dXWkcxO1cWYZEOX8DKHTqA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -4598,7 +4294,6 @@ packages:
     resolution: {integrity: sha512-x7FptB5oDruxNPDNY2+S8tCh0pcq7ymCe1gTHcsp733jYjrJl8V1gMUlVysuCD9Kz46Xz9t1akkv08dPcYDs1w==}
     peerDependencies:
       '@vitest/browser': 4.1.4
-      vitest: 4.1.4
     peerDependenciesMeta:
       '@vitest/browser':
         optional: true
@@ -4610,50 +4305,24 @@ packages:
       '@typescript-eslint/eslint-plugin': '*'
       eslint: '>=8.57.0'
       typescript: '>=5.0.0'
-      vitest: '*'
     peerDependenciesMeta:
       '@typescript-eslint/eslint-plugin':
         optional: true
       typescript:
         optional: true
-      vitest:
-        optional: true
 
   '@vitest/expect@3.2.4':
     resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
 
-  '@vitest/expect@4.1.4':
-    resolution: {integrity: sha512-iPBpra+VDuXmBFI3FMKHSFXp3Gx5HfmSCE8X67Dn+bwephCnQCaB7qWK2ldHa+8ncN8hJU8VTMcxjPpyMkUjww==}
-
-  '@vitest/mocker@4.1.4':
-    resolution: {integrity: sha512-R9HTZBhW6yCSGbGQnDnH3QHfJxokKN4KB+Yvk9Q1le7eQNYwiCyKxmLmurSpFy6BzJanSLuEUDrD+j97Q+ZLPg==}
-    peerDependencies:
-      msw: ^2.4.9
-      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
-    peerDependenciesMeta:
-      msw:
-        optional: true
-      vite:
-        optional: true
-
   '@vitest/pretty-format@3.2.4':
     resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
 
   '@vitest/pretty-format@4.1.4':
     resolution: {integrity: sha512-ddmDHU0gjEUyEVLxtZa7xamrpIefdEETu3nZjWtHeZX4QxqJ7tRxSteHVXJOcr8jhiLoGAhkK4WJ3WqBpjx42A==}
 
-  '@vitest/runner@4.1.4':
-    resolution: {integrity: sha512-xTp7VZ5aXP5ZJrn15UtJUWlx6qXLnGtF6jNxHepdPHpMfz/aVPx+htHtgcAL2mDXJgKhpoo2e9/hVJsIeFbytQ==}
-
-  '@vitest/snapshot@4.1.4':
-    resolution: {integrity: sha512-MCjCFgaS8aZz+m5nTcEcgk/xhWv0rEH4Yl53PPlMXOZ1/Ka2VcZU6CJ+MgYCZbcJvzGhQRjVrGQNZqkGPttIKw==}
-
   '@vitest/spy@3.2.4':
     resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
 
-  '@vitest/spy@4.1.4':
-    resolution: {integrity: sha512-XxNdAsKW7C+FLydqFJLb5KhJtl3PGCMmYwFRfhvIgxJvLSXhhVI1zM8f1qD3Zg7RCjTSzDVyct6sghs9UEgBEQ==}
-
   '@vitest/utils@3.2.4':
     resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
@@ -4821,81 +4490,18 @@ packages:
   '@vue/compiler-dom@3.5.31':
     resolution: {integrity: sha512-BMY/ozS/xxjYqRFL+tKdRpATJYDTTgWSo0+AJvJNg4ig+Hgb0dOsHPXvloHQ5hmlivUqw1Yt2pPIqp4e0v1GUw==}
 
-  '@vue/compiler-sfc@3.5.31':
-    resolution: {integrity: sha512-M8wpPgR9UJ8MiRGjppvx9uWJfLV7A/T+/rL8s/y3QG3u0c2/YZgff3d6SuimKRIhcYnWg5fTfDMlz2E6seUW8Q==}
-
-  '@vue/compiler-ssr@3.5.31':
-    resolution: {integrity: sha512-h0xIMxrt/LHOvJKMri+vdYT92BrK3HFLtDqq9Pr/lVVfE4IyKZKvWf0vJFW10Yr6nX02OR4MkJwI0c1HDa1hog==}
-
   '@vue/shared@3.5.31':
     resolution: {integrity: sha512-nBxuiuS9Lj5bPkPbWogPUnjxxWpkRniX7e5UBQDWl6Fsf4roq9wwV+cR7ezQ4zXswNvPIlsdj1slcLB7XCsRAw==}
 
-  '@webassemblyjs/ast@1.14.1':
-    resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
-
-  '@webassemblyjs/floating-point-hex-parser@1.13.2':
-    resolution: {integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==}
-
-  '@webassemblyjs/helper-api-error@1.13.2':
-    resolution: {integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==}
-
-  '@webassemblyjs/helper-buffer@1.14.1':
-    resolution: {integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==}
-
-  '@webassemblyjs/helper-numbers@1.13.2':
-    resolution: {integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==}
-
-  '@webassemblyjs/helper-wasm-bytecode@1.13.2':
-    resolution: {integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==}
-
-  '@webassemblyjs/helper-wasm-section@1.14.1':
-    resolution: {integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==}
-
-  '@webassemblyjs/ieee754@1.13.2':
-    resolution: {integrity: sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==}
-
-  '@webassemblyjs/leb128@1.13.2':
-    resolution: {integrity: sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==}
-
-  '@webassemblyjs/utf8@1.13.2':
-    resolution: {integrity: sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==}
-
-  '@webassemblyjs/wasm-edit@1.14.1':
-    resolution: {integrity: sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==}
-
-  '@webassemblyjs/wasm-gen@1.14.1':
-    resolution: {integrity: sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==}
-
-  '@webassemblyjs/wasm-opt@1.14.1':
-    resolution: {integrity: sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==}
-
-  '@webassemblyjs/wasm-parser@1.14.1':
-    resolution: {integrity: sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==}
-
-  '@webassemblyjs/wast-printer@1.14.1':
-    resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}
-
   '@webcontainer/env@1.1.1':
     resolution: {integrity: sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==}
 
   '@xstate/fsm@1.6.5':
     resolution: {integrity: sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==}
 
-  '@xtuc/ieee754@1.2.0':
-    resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
-
-  '@xtuc/long@4.2.2':
-    resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
-
   abcjs@6.6.2:
     resolution: {integrity: sha512-YLbp5lYUq0uOywWZx9EuTdm0TcflKZi7hOzz366A/LFl3qoAXSYIjznJQmr/VeHg8NcLxZYoN8dLi7PqCpxKEA==}
 
-  acorn-import-phases@1.0.4:
-    resolution: {integrity: sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==}
-    engines: {node: '>=10.13.0'}
-    peerDependencies:
-      acorn: ^8.14.0
-
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -4927,25 +4533,9 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  ajv-formats@2.1.1:
-    resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
-    peerDependencies:
-      ajv: ^8.0.0
-    peerDependenciesMeta:
-      ajv:
-        optional: true
-
-  ajv-keywords@5.1.0:
-    resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==}
-    peerDependencies:
-      ajv: ^8.8.2
-
   ajv@6.14.0:
     resolution: {integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==}
 
-  ajv@8.18.0:
-    resolution: {integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==}
-
   ansi-regex@4.1.1:
     resolution: {integrity: sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==}
     engines: {node: '>=6'}
@@ -5119,10 +4709,6 @@ packages:
     resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
     engines: {node: '>=18'}
 
-  chai@6.2.2:
-    resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
-    engines: {node: '>=18'}
-
   chalk@4.1.1:
     resolution: {integrity: sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==}
     engines: {node: '>=10'}
@@ -5165,10 +4751,6 @@ packages:
   chevrotain@11.1.2:
     resolution: {integrity: sha512-opLQzEVriiH1uUQ4Kctsd49bRoFDXGGSC4GUqj7pGyxM3RehRhvTlZJc1FL/Flew2p5uwxa1tUDWKzI4wNM8pg==}
 
-  chokidar@4.0.3:
-    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
-    engines: {node: '>= 14.16.0'}
-
   chownr@1.1.4:
     resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
 
@@ -5188,10 +4770,6 @@ packages:
       '@chromatic-com/playwright':
         optional: true
 
-  chrome-trace-event@1.0.4:
-    resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
-    engines: {node: '>=6.0'}
-
   ci-info@4.4.0:
     resolution: {integrity: sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==}
     engines: {node: '>=8'}
@@ -5257,9 +4835,6 @@ packages:
     resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
     engines: {node: '>=20'}
 
-  commander@2.20.3:
-    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
-
   commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
@@ -5517,9 +5092,6 @@ packages:
   dagre-d3-es@7.0.14:
     resolution: {integrity: sha512-P4rFMVq9ESWqmOgK+dlXvOtLwYg0i7u0HBGJER0LZDJT2VHIPAMZ/riPxqJceWMStH5+E61QxFra9kIS3AqdMg==}
 
-  date-fns@4.1.0:
-    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
-
   dayjs@1.11.20:
     resolution: {integrity: sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==}
 
@@ -5978,10 +5550,6 @@ packages:
       '@vue/compiler-sfc': ^3.3.0
       eslint: '>=9.0.0'
 
-  eslint-scope@5.1.1:
-    resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
-    engines: {node: '>=8.0.0'}
-
   eslint-scope@8.4.0:
     resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -6043,10 +5611,6 @@ packages:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
 
-  estraverse@4.3.0:
-    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
-    engines: {node: '>=4.0'}
-
   estraverse@5.3.0:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
@@ -6079,18 +5643,10 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
-  events@3.3.0:
-    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
-    engines: {node: '>=0.8.x'}
-
   expand-template@2.0.3:
     resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
     engines: {node: '>=6'}
 
-  expect-type@1.3.0:
-    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
-    engines: {node: '>=12.0.0'}
-
   exsolve@1.0.8:
     resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
 
@@ -6125,9 +5681,6 @@ packages:
   fast-string-width@1.1.0:
     resolution: {integrity: sha512-O3fwIVIH5gKB38QNbdg+3760ZmGz0SZMgvwJbA1b2TGXceKE6A2cOlfogh1iw8lr049zPyd7YADHy+B7U4W9bQ==}
 
-  fast-uri@3.1.0:
-    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
-
   fast-wrap-ansi@0.1.6:
     resolution: {integrity: sha512-HlUwET7a5gqjURj70D5jl7aC3Zmy4weA1SHUfM0JFI0Ptq987NH2TwbBFLoERhfwk+E+eaq4EK3jXoT+R3yp3w==}
 
@@ -6244,9 +5797,6 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
-  glob-to-regexp@0.4.1:
-    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
-
   glob@13.0.6:
     resolution: {integrity: sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==}
     engines: {node: 18 || 20 || >=22}
@@ -6414,9 +5964,6 @@ packages:
   immer@11.1.4:
     resolution: {integrity: sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==}
 
-  immutable@5.1.5:
-    resolution: {integrity: sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==}
-
   import-fresh@3.3.1:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
@@ -6526,9 +6073,6 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
-  isomorphic.js@0.2.5:
-    resolution: {integrity: sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==}
-
   istanbul-lib-coverage@3.2.2:
     resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
     engines: {node: '>=8'}
@@ -6541,10 +6085,6 @@ packages:
     resolution: {integrity: sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==}
     engines: {node: '>=8'}
 
-  jest-worker@27.5.1:
-    resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
-    engines: {node: '>= 10.13.0'}
-
   jiti@2.6.1:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
@@ -6606,15 +6146,9 @@ packages:
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
-  json-parse-even-better-errors@2.3.1:
-    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
-  json-schema-traverse@1.0.0:
-    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
-
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
@@ -6691,11 +6225,6 @@ packages:
   lexical@0.43.0:
     resolution: {integrity: sha512-waSeXyt1HxTFpU8KNRA3IQcvjvpw0lZNaSbGopfOi4bLV0FF9zYpqiScTnEUMP/b1W7qWmD4Z2Detw43XICxqQ==}
 
-  lib0@0.2.117:
-    resolution: {integrity: sha512-DeXj9X5xDCjgKLU/7RR+/HQEVzuuEUiwldwOGsHK/sfAfELGWEyTcf0x+uOvCvK3O2zPmZePXWL85vtia6GyZw==}
-    engines: {node: '>=16'}
-    hasBin: true
-
   lightningcss-android-arm64@1.32.0:
     resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
     engines: {node: '>= 12.0.0'}
@@ -6773,10 +6302,6 @@ packages:
   linebreak@1.1.0:
     resolution: {integrity: sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==}
 
-  loader-runner@4.3.1:
-    resolution: {integrity: sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==}
-    engines: {node: '>=6.11.5'}
-
   local-pkg@1.1.2:
     resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
     engines: {node: '>=14'}
@@ -6850,11 +6375,6 @@ packages:
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
-  marked@14.0.0:
-    resolution: {integrity: sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==}
-    engines: {node: '>= 18'}
-    hasBin: true
-
   marked@16.4.2:
     resolution: {integrity: sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==}
     engines: {node: '>= 20'}
@@ -6934,9 +6454,6 @@ packages:
   mdn-data@2.27.1:
     resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
 
-  merge-stream@2.0.0:
-    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
-
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -7062,14 +6579,6 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
-  mime-db@1.52.0:
-    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
-    engines: {node: '>= 0.6'}
-
-  mime-types@2.1.35:
-    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
-    engines: {node: '>= 0.6'}
-
   mime@3.0.0:
     resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
     engines: {node: '>=10.0.0'}
@@ -7126,9 +6635,6 @@ packages:
   module-replacements@2.11.0:
     resolution: {integrity: sha512-j5sNQm3VCpQQ7nTqGeOZtoJtV3uKERgCBm9QRhmGRiXiqkf7iRFOkfxdJRZWLkqYY8PNf4cDQF/WfXUYLENrRA==}
 
-  monaco-editor@0.55.1:
-    resolution: {integrity: sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==}
-
   moo-color@1.0.3:
     resolution: {integrity: sha512-i/+ZKXMDf6aqYtBhuOcej71YSlbjT3wCO/4H1j8rPvxDJEifdwgg5MaFyu6iYAT8GBZJg2z0dkgK4YMzvURALQ==}
 
@@ -7705,10 +7211,6 @@ packages:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
     engines: {node: '>= 6'}
 
-  readdirp@4.1.2:
-    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
-    engines: {node: '>= 14.18.0'}
-
   recast@0.23.11:
     resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
     engines: {node: '>= 4'}
@@ -7808,10 +7310,6 @@ packages:
     resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==}
     engines: {node: '>=0.10'}
 
-  require-from-string@2.0.2:
-    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
-    engines: {node: '>=0.10.0'}
-
   reselect@5.1.1:
     resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
 
@@ -7841,11 +7339,6 @@ packages:
   robust-predicates@3.0.3:
     resolution: {integrity: sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==}
 
-  rollup@4.59.0:
-    resolution: {integrity: sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==}
-    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
-    hasBin: true
-
   roughjs@4.6.6:
     resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==}
 
@@ -7865,11 +7358,6 @@ packages:
   safe-json-stringify@1.2.0:
     resolution: {integrity: sha512-gH8eh2nZudPQO6TytOvbxnuhYBOvDBBLW52tz5q6X58lJcd/tkmqFR+5Z9adS8aJtURSXWThWy/xJtJwixErvg==}
 
-  sass@1.98.0:
-    resolution: {integrity: sha512-+4N/u9dZ4PrgzGgPlKnaaRQx64RO0JBKs9sDhQ2pLgN6JQZ25uPQZKQYaBJU48Kd5BxgXoJ4e09Dq7nMcOUW3A==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
   satori@0.16.0:
     resolution: {integrity: sha512-ZvHN3ygzZ8FuxjSNB+mKBiF/NIoqHzlBGbD0MJiT+MvSsFOvotnWOhdTjxKzhHRT2wPC1QbhLzx2q/Y83VhfYQ==}
     engines: {node: '>=16'}
@@ -7881,10 +7369,6 @@ packages:
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
-  schema-utils@4.3.3:
-    resolution: {integrity: sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==}
-    engines: {node: '>= 10.13.0'}
-
   screenfull@5.2.0:
     resolution: {integrity: sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==}
     engines: {node: '>=0.10.0'}
@@ -7931,9 +7415,6 @@ packages:
     resolution: {integrity: sha512-eAVKTMedR5ckPo4xne/PjYQYrU3qx78gtJZ+sHlXEg5IHhhoQhMfZVzetTYuaJS0L2Ef3AcCRzCHV8T0WI6nIQ==}
     engines: {node: '>=20'}
 
-  siginfo@2.0.0:
-    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
-
   simple-concat@1.0.1:
     resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==}
 
@@ -8006,9 +7487,6 @@ packages:
     engines: {node: '>=20.16.0'}
     hasBin: true
 
-  stackback@0.0.2:
-    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
-
   stackframe@1.3.4:
     resolution: {integrity: sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==}
 
@@ -8171,27 +7649,6 @@ packages:
     resolution: {integrity: sha512-ChjMH33/KetonMTAtpYdgUFr0tbz69Fp2v7zWxQfYZX4g5ZN2nOBXm1R2xyA+lMIKrLKIoKAwFj93jE/avX9cQ==}
     engines: {node: '>=18'}
 
-  terser-webpack-plugin@5.4.0:
-    resolution: {integrity: sha512-Bn5vxm48flOIfkdl5CaD2+1CiUVbonWQ3KQPyP7/EuIl9Gbzq/gQFOzaMFUEgVjB1396tcK0SG8XcNJ/2kDH8g==}
-    engines: {node: '>= 10.13.0'}
-    peerDependencies:
-      '@swc/core': '*'
-      esbuild: '*'
-      uglify-js: '*'
-      webpack: ^5.1.0
-    peerDependenciesMeta:
-      '@swc/core':
-        optional: true
-      esbuild:
-        optional: true
-      uglify-js:
-        optional: true
-
-  terser@5.46.1:
-    resolution: {integrity: sha512-vzCjQO/rgUuK9sf8VJZvjqiqiHFaZLnOiimmUuOKODxWL8mm/xua7viT7aqX7dgPY60otQjUotzFMmCB4VdmqQ==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   thenify-all@1.6.0:
     resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
     engines: {node: '>=0.8'}
@@ -8601,52 +8058,24 @@ packages:
       vite:
         optional: true
 
+  vitest-browser-react@2.2.0:
+    resolution: {integrity: sha512-oY3KM6305kwJMa6nHo92vVtkOsih7mjEf12dLKuphaF+9ywWPEc+qanIBd394SZ6m5LadVEaG6dicvvizOzmjA==}
+    peerDependencies:
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   vitest-canvas-mock@1.1.4:
     resolution: {integrity: sha512-4boWHY+STwAxGl1+uwakNNoQky5EjPLC8HuponXNoAscYyT1h/F7RUvTkl4IyF/MiWr3V8Q626je3Iel3eArqA==}
     peerDependencies:
       vitest: ^3.0.0 || ^4.0.0
 
-  vitest@4.1.4:
-    resolution: {integrity: sha512-tFuJqTxKb8AvfyqMfnavXdzfy3h3sWZRWwfluGbkeR7n0HUev+FmNgZ8SDrRBTVrVCjgH5cA21qGbCffMNtWvg==}
-    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
-    hasBin: true
-    peerDependencies:
-      '@edge-runtime/vm': '*'
-      '@opentelemetry/api': ^1.9.0
-      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
-      '@vitest/browser-playwright': 4.1.4
-      '@vitest/browser-preview': 4.1.4
-      '@vitest/browser-webdriverio': 4.1.4
-      '@vitest/coverage-istanbul': 4.1.4
-      '@vitest/coverage-v8': 4.1.4
-      '@vitest/ui': 4.1.4
-      happy-dom: '*'
-      jsdom: '*'
-      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
-    peerDependenciesMeta:
-      '@edge-runtime/vm':
-        optional: true
-      '@opentelemetry/api':
-        optional: true
-      '@types/node':
-        optional: true
-      '@vitest/browser-playwright':
-        optional: true
-      '@vitest/browser-preview':
-        optional: true
-      '@vitest/browser-webdriverio':
-        optional: true
-      '@vitest/coverage-istanbul':
-        optional: true
-      '@vitest/coverage-v8':
-        optional: true
-      '@vitest/ui':
-        optional: true
-      happy-dom:
-        optional: true
-      jsdom:
-        optional: true
-
   void-elements@3.1.0:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}
@@ -8681,10 +8110,6 @@ packages:
     resolution: {integrity: sha512-3hu+tD8YzSLGuFYtPRb48vdhKMi0KQV5sn+uWr8+7dMEq/2G/dtLrdDinkLjqq5TIbIBjYJ4Ax/n3YiaW7QM8A==}
     engines: {node: 20 || >=22}
 
-  watchpack@2.5.1:
-    resolution: {integrity: sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==}
-    engines: {node: '>=10.13.0'}
-
   web-namespaces@2.0.1:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
 
@@ -8698,16 +8123,6 @@ packages:
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
-  webpack@5.105.4:
-    resolution: {integrity: sha512-jTywjboN9aHxFlToqb0K0Zs9SbBoW4zRUlGzI2tYNxVYcEi/IPpn+Xi4ye5jTLvX2YeLuic/IvxNot+Q1jMoOw==}
-    engines: {node: '>=10.13.0'}
-    hasBin: true
-    peerDependencies:
-      webpack-cli: '*'
-    peerDependenciesMeta:
-      webpack-cli:
-        optional: true
-
   whatwg-encoding@3.1.1:
     resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
     engines: {node: '>=18'}
@@ -8726,11 +8141,6 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
-  why-is-node-running@2.3.0:
-    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
-    engines: {node: '>=8'}
-    hasBin: true
-
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -8802,10 +8212,6 @@ packages:
     resolution: {integrity: sha512-k1isifdbpNSFEHFJ1ZY4YDewv0IH9FR61lDetaRMD3j2ae3bIXGV+7c+LHCqtQGofSd8PIyV4X6+dHMAnSr60A==}
     engines: {node: '>=12'}
 
-  yjs@13.6.30:
-    resolution: {integrity: sha512-vv/9h42eCMC81ZHDFswuu/MKzkl/vyq1BhaNGfHyOonwlG4CJbQF4oiBBJPvfdeCt/PlVDWh7Nov9D34YY09uQ==}
-    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
-
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
@@ -8935,14 +8341,14 @@ snapshots:
       '@amplitude/analytics-core': 2.45.0
       tslib: 2.8.1
 
-  '@amplitude/plugin-session-replay-browser@1.27.7(@amplitude/rrweb@2.0.0-alpha.37)(rollup@4.59.0)':
+  '@amplitude/plugin-session-replay-browser@1.27.7(@amplitude/rrweb@2.0.0-alpha.37)':
     dependencies:
       '@amplitude/analytics-client-common': 2.4.43
       '@amplitude/analytics-core': 2.45.0
       '@amplitude/analytics-types': 2.11.1
       '@amplitude/rrweb-plugin-console-record': 2.0.0-alpha.36(@amplitude/rrweb@2.0.0-alpha.37)
       '@amplitude/rrweb-record': 2.0.0-alpha.36
-      '@amplitude/session-replay-browser': 1.36.0(@amplitude/rrweb@2.0.0-alpha.37)(rollup@4.59.0)
+      '@amplitude/session-replay-browser': 1.36.0(@amplitude/rrweb@2.0.0-alpha.37)
       idb-keyval: 6.2.2
       tslib: 2.8.1
     transitivePeerDependencies:
@@ -8996,7 +8402,7 @@ snapshots:
       base64-arraybuffer: 1.0.2
       mitt: 3.0.1
 
-  '@amplitude/session-replay-browser@1.36.0(@amplitude/rrweb@2.0.0-alpha.37)(rollup@4.59.0)':
+  '@amplitude/session-replay-browser@1.36.0(@amplitude/rrweb@2.0.0-alpha.37)':
     dependencies:
       '@amplitude/analytics-client-common': 2.4.43
       '@amplitude/analytics-core': 2.45.0
@@ -9008,7 +8414,7 @@ snapshots:
       '@amplitude/rrweb-types': 2.0.0-alpha.36
       '@amplitude/rrweb-utils': 2.0.0-alpha.36
       '@amplitude/targeting': 0.2.0
-      '@rollup/plugin-replace': 6.0.3(rollup@4.59.0)
+      '@rollup/plugin-replace': 6.0.3
       idb: 8.0.0
       tslib: 2.8.1
     transitivePeerDependencies:
@@ -9024,7 +8430,7 @@ snapshots:
       idb: 8.0.0
       tslib: 2.8.1
 
-  '@antfu/eslint-config@8.2.0(@eslint-react/eslint-plugin@3.0.0(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@next/eslint-plugin-next@16.2.3)(@typescript-eslint/rule-tester@8.57.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@typescript-eslint/typescript-estree@8.58.2(typescript@6.0.2))(@typescript-eslint/utils@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@voidzero-dev/vite-plus-test@0.1.18)(@vue/compiler-sfc@3.5.31)(eslint-plugin-react-refresh@0.5.2(eslint@10.2.0(jiti@2.6.1)))(eslint@10.2.0(jiti@2.6.1))(oxlint@1.60.0(oxlint-tsgolint@0.20.0))(typescript@6.0.2)':
+  '@antfu/eslint-config@8.2.0(@eslint-react/eslint-plugin@3.0.0(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@next/eslint-plugin-next@16.2.3)(@types/node@25.6.0)(@typescript-eslint/typescript-estree@8.58.2(typescript@6.0.2))(@typescript-eslint/utils@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(eslint-plugin-react-refresh@0.5.2(eslint@10.2.0(jiti@2.6.1)))(eslint@10.2.0(jiti@2.6.1))(happy-dom@20.9.0)(jiti@2.6.1)(oxlint@1.60.0(oxlint-tsgolint@0.20.0))(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)':
     dependencies:
       '@antfu/install-pkg': 1.1.0
       '@clack/prompts': 1.2.0
@@ -9034,7 +8440,7 @@ snapshots:
       '@stylistic/eslint-plugin': 5.10.0(eslint@10.2.0(jiti@2.6.1))
       '@typescript-eslint/eslint-plugin': 8.58.2(@typescript-eslint/parser@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
       '@typescript-eslint/parser': 8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      '@vitest/eslint-plugin': 1.6.15(@typescript-eslint/eslint-plugin@8.58.2(@typescript-eslint/parser@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@voidzero-dev/vite-plus-test@0.1.18)(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
+      '@vitest/eslint-plugin': 1.6.15(@types/node@25.6.0)(@typescript-eslint/eslint-plugin@8.58.2(@typescript-eslint/parser@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(eslint@10.2.0(jiti@2.6.1))(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
       ansis: 4.2.0
       cac: 7.0.0
       eslint: 10.2.0(jiti@2.6.1)
@@ -9042,7 +8448,7 @@ snapshots:
       eslint-flat-config-utils: 3.1.0
       eslint-merge-processors: 2.0.0(eslint@10.2.0(jiti@2.6.1))
       eslint-plugin-antfu: 3.2.2(eslint@10.2.0(jiti@2.6.1))
-      eslint-plugin-command: 3.5.2(@typescript-eslint/rule-tester@8.57.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@typescript-eslint/typescript-estree@8.58.2(typescript@6.0.2))(@typescript-eslint/utils@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))
+      eslint-plugin-command: 3.5.2(@typescript-eslint/typescript-estree@8.58.2(typescript@6.0.2))(@typescript-eslint/utils@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))
       eslint-plugin-import-lite: 0.6.0(eslint@10.2.0(jiti@2.6.1))
       eslint-plugin-jsdoc: 62.9.0(eslint@10.2.0(jiti@2.6.1))
       eslint-plugin-jsonc: 3.1.2(eslint@10.2.0(jiti@2.6.1))
@@ -9056,7 +8462,7 @@ snapshots:
       eslint-plugin-unused-imports: 4.4.1(@typescript-eslint/eslint-plugin@8.58.2(@typescript-eslint/parser@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))
       eslint-plugin-vue: 10.8.0(@stylistic/eslint-plugin@5.10.0(eslint@10.2.0(jiti@2.6.1)))(@typescript-eslint/parser@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(vue-eslint-parser@10.4.0(eslint@10.2.0(jiti@2.6.1)))
       eslint-plugin-yml: 3.3.1(eslint@10.2.0(jiti@2.6.1))
-      eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.31)(eslint@10.2.0(jiti@2.6.1))
+      eslint-processor-vue-blocks: 2.0.0(eslint@10.2.0(jiti@2.6.1))
       globals: 17.5.0
       local-pkg: 1.1.2
       parse-gitignore: 2.0.0
@@ -9068,69 +8474,41 @@ snapshots:
       '@next/eslint-plugin-next': 16.2.3
       eslint-plugin-react-refresh: 0.5.2(eslint@10.2.0(jiti@2.6.1))
     transitivePeerDependencies:
+      - '@arethetypeswrong/core'
+      - '@edge-runtime/vm'
       - '@eslint/json'
+      - '@opentelemetry/api'
+      - '@tsdown/css'
+      - '@tsdown/exe'
+      - '@types/node'
       - '@typescript-eslint/rule-tester'
       - '@typescript-eslint/typescript-estree'
       - '@typescript-eslint/utils'
+      - '@vitejs/devtools'
+      - '@vitest/coverage-istanbul'
+      - '@vitest/coverage-v8'
+      - '@vitest/ui'
       - '@vue/compiler-sfc'
+      - bufferutil
+      - esbuild
+      - happy-dom
+      - jiti
+      - jsdom
+      - less
       - oxlint
+      - publint
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
       - supports-color
+      - terser
+      - tsx
       - typescript
-      - vitest
-
-  '@antfu/eslint-config@8.2.0(@eslint-react/eslint-plugin@3.0.0(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@next/eslint-plugin-next@16.2.3)(@typescript-eslint/rule-tester@8.57.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@typescript-eslint/typescript-estree@8.58.2(typescript@6.0.2))(@typescript-eslint/utils@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@vue/compiler-sfc@3.5.31)(eslint-plugin-react-refresh@0.5.2(eslint@10.2.0(jiti@2.6.1)))(eslint@10.2.0(jiti@2.6.1))(oxlint@1.60.0(oxlint-tsgolint@0.20.0))(typescript@6.0.2)(vitest@4.1.4)':
-    dependencies:
-      '@antfu/install-pkg': 1.1.0
-      '@clack/prompts': 1.2.0
-      '@e18e/eslint-plugin': 0.3.0(eslint@10.2.0(jiti@2.6.1))(oxlint@1.60.0(oxlint-tsgolint@0.20.0))
-      '@eslint-community/eslint-plugin-eslint-comments': 4.7.1(eslint@10.2.0(jiti@2.6.1))
-      '@eslint/markdown': 8.0.1
-      '@stylistic/eslint-plugin': 5.10.0(eslint@10.2.0(jiti@2.6.1))
-      '@typescript-eslint/eslint-plugin': 8.58.2(@typescript-eslint/parser@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      '@typescript-eslint/parser': 8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      '@vitest/eslint-plugin': 1.6.15(@typescript-eslint/eslint-plugin@8.58.2(@typescript-eslint/parser@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)(vitest@4.1.4)
-      ansis: 4.2.0
-      cac: 7.0.0
-      eslint: 10.2.0(jiti@2.6.1)
-      eslint-config-flat-gitignore: 2.3.0(eslint@10.2.0(jiti@2.6.1))
-      eslint-flat-config-utils: 3.1.0
-      eslint-merge-processors: 2.0.0(eslint@10.2.0(jiti@2.6.1))
-      eslint-plugin-antfu: 3.2.2(eslint@10.2.0(jiti@2.6.1))
-      eslint-plugin-command: 3.5.2(@typescript-eslint/rule-tester@8.57.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@typescript-eslint/typescript-estree@8.58.2(typescript@6.0.2))(@typescript-eslint/utils@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))
-      eslint-plugin-import-lite: 0.6.0(eslint@10.2.0(jiti@2.6.1))
-      eslint-plugin-jsdoc: 62.9.0(eslint@10.2.0(jiti@2.6.1))
-      eslint-plugin-jsonc: 3.1.2(eslint@10.2.0(jiti@2.6.1))
-      eslint-plugin-n: 17.24.0(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      eslint-plugin-no-only-tests: 3.3.0
-      eslint-plugin-perfectionist: 5.8.0(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      eslint-plugin-pnpm: 1.6.0(eslint@10.2.0(jiti@2.6.1))
-      eslint-plugin-regexp: 3.1.0(eslint@10.2.0(jiti@2.6.1))
-      eslint-plugin-toml: 1.3.1(eslint@10.2.0(jiti@2.6.1))
-      eslint-plugin-unicorn: 64.0.0(eslint@10.2.0(jiti@2.6.1))
-      eslint-plugin-unused-imports: 4.4.1(@typescript-eslint/eslint-plugin@8.58.2(@typescript-eslint/parser@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))
-      eslint-plugin-vue: 10.8.0(@stylistic/eslint-plugin@5.10.0(eslint@10.2.0(jiti@2.6.1)))(@typescript-eslint/parser@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(vue-eslint-parser@10.4.0(eslint@10.2.0(jiti@2.6.1)))
-      eslint-plugin-yml: 3.3.1(eslint@10.2.0(jiti@2.6.1))
-      eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.31)(eslint@10.2.0(jiti@2.6.1))
-      globals: 17.5.0
-      local-pkg: 1.1.2
-      parse-gitignore: 2.0.0
-      toml-eslint-parser: 1.0.3
-      vue-eslint-parser: 10.4.0(eslint@10.2.0(jiti@2.6.1))
-      yaml-eslint-parser: 2.0.0
-    optionalDependencies:
-      '@eslint-react/eslint-plugin': 3.0.0(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      '@next/eslint-plugin-next': 16.2.3
-      eslint-plugin-react-refresh: 0.5.2(eslint@10.2.0(jiti@2.6.1))
-    transitivePeerDependencies:
-      - '@eslint/json'
-      - '@typescript-eslint/rule-tester'
-      - '@typescript-eslint/typescript-estree'
-      - '@typescript-eslint/utils'
-      - '@vue/compiler-sfc'
-      - oxlint
-      - supports-color
-      - typescript
-      - vitest
+      - unplugin-unused
+      - utf-8-validate
+      - vite
+      - yaml
 
   '@antfu/install-pkg@1.1.0':
     dependencies:
@@ -9241,14 +8619,12 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
-  '@base-ui/react@1.4.0(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
+  '@base-ui/react@1.4.0(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
       '@babel/runtime': 7.29.2
       '@base-ui/utils': 0.2.7(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
-      '@date-fns/tz': 1.4.1
       '@floating-ui/react-dom': 2.1.8(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@floating-ui/utils': 0.2.11
-      date-fns: 4.1.0
       react: 19.2.5
       react-dom: 19.2.5(react@19.2.5)
       use-sync-external-store: 1.6.0(react@19.2.5)
@@ -9474,8 +8850,6 @@ snapshots:
 
   '@cucumber/tag-expressions@9.1.0': {}
 
-  '@date-fns/tz@1.4.1': {}
-
   '@e18e/eslint-plugin@0.3.0(eslint@10.2.0(jiti@2.6.1))(oxlint@1.60.0(oxlint-tsgolint@0.20.0))':
     dependencies:
       eslint-plugin-depend: 1.5.0(eslint@10.2.0(jiti@2.6.1))
@@ -9488,27 +8862,11 @@ snapshots:
       '@iconify/utils': 3.1.0
       tailwindcss: 4.2.2
 
-  '@emnapi/core@1.9.2':
-    dependencies:
-      '@emnapi/wasi-threads': 1.2.1
-      tslib: 2.8.1
-    optional: true
-
   '@emnapi/runtime@1.9.1':
     dependencies:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.9.2':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
-  '@emnapi/wasi-threads@1.2.1':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
   '@emoji-mart/data@1.2.1': {}
 
   '@es-joy/jsdoccomment@0.84.0':
@@ -10025,11 +9383,11 @@ snapshots:
     dependencies:
       minipass: 7.1.3
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2)':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2)':
     dependencies:
       glob: 13.0.6
       react-docgen-typescript: 2.4.0(typescript@6.0.2)
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
     optionalDependencies:
       typescript: 6.0.2
 
@@ -10045,11 +9403,6 @@ snapshots:
 
   '@jridgewell/resolve-uri@3.1.2': {}
 
-  '@jridgewell/source-map@0.3.11':
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
   '@jridgewell/trace-mapping@0.3.31':
@@ -10153,7 +9506,7 @@ snapshots:
       '@lexical/utils': 0.43.0
       lexical: 0.43.0
 
-  '@lexical/react@0.43.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(yjs@13.6.30)':
+  '@lexical/react@0.43.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
       '@floating-ui/react': 0.27.19(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@lexical/devtools-core': 0.43.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
@@ -10171,7 +9524,7 @@ snapshots:
       '@lexical/table': 0.43.0
       '@lexical/text': 0.43.0
       '@lexical/utils': 0.43.0
-      '@lexical/yjs': 0.43.0(yjs@13.6.30)
+      '@lexical/yjs': 0.43.0
       lexical: 0.43.0
       react: 19.2.5
       react-dom: 19.2.5(react@19.2.5)
@@ -10207,19 +9560,16 @@ snapshots:
       '@lexical/selection': 0.43.0
       lexical: 0.43.0
 
-  '@lexical/yjs@0.43.0(yjs@13.6.30)':
+  '@lexical/yjs@0.43.0':
     dependencies:
       '@lexical/offset': 0.43.0
       '@lexical/selection': 0.43.0
       lexical: 0.43.0
-      yjs: 13.6.30
 
-  '@mdx-js/loader@3.1.1(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))':
+  '@mdx-js/loader@3.1.1':
     dependencies:
       '@mdx-js/mdx': 3.1.1
       source-map: 0.7.6
-    optionalDependencies:
-      webpack: 5.105.4(esbuild@0.27.2)(uglify-js@3.19.3)
     transitivePeerDependencies:
       - supports-color
 
@@ -10259,11 +9609,10 @@ snapshots:
       '@types/react': 19.2.14
       react: 19.2.5
 
-  '@mdx-js/rollup@3.1.1(rollup@4.59.0)':
+  '@mdx-js/rollup@3.1.1':
     dependencies:
       '@mdx-js/mdx': 3.1.1
-      '@rollup/pluginutils': 5.3.0(rollup@4.59.0)
-      rollup: 4.59.0
+      '@rollup/pluginutils': 5.3.0
       source-map: 0.7.6
       vfile: 6.0.3
     transitivePeerDependencies:
@@ -10277,17 +9626,15 @@ snapshots:
     dependencies:
       state-local: 1.0.7
 
-  '@monaco-editor/react@4.7.0(monaco-editor@0.55.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
+  '@monaco-editor/react@4.7.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
       '@monaco-editor/loader': 1.7.0
-      monaco-editor: 0.55.1
       react: 19.2.5
       react-dom: 19.2.5(react@19.2.5)
 
-  '@napi-rs/wasm-runtime@1.1.2(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
+  '@napi-rs/wasm-runtime@1.1.2(@emnapi/runtime@1.9.1)':
     dependencies:
-      '@emnapi/core': 1.9.2
-      '@emnapi/runtime': 1.9.2
+      '@emnapi/runtime': 1.9.1
       '@tybys/wasm-util': 0.10.1
     optional: true
 
@@ -10301,11 +9648,11 @@ snapshots:
     dependencies:
       fast-glob: 3.3.1
 
-  '@next/mdx@16.2.3(@mdx-js/loader@3.1.1(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3)))(@mdx-js/react@3.1.1(@types/react@19.2.14)(react@19.2.5))':
+  '@next/mdx@16.2.3(@mdx-js/loader@3.1.1)(@mdx-js/react@3.1.1(@types/react@19.2.14)(react@19.2.5))':
     dependencies:
       source-map: 0.7.6
     optionalDependencies:
-      '@mdx-js/loader': 3.1.1(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))
+      '@mdx-js/loader': 3.1.1
       '@mdx-js/react': 3.1.1(@types/react@19.2.14)(react@19.2.5)
 
   '@next/swc-darwin-arm64@16.2.3':
@@ -10460,9 +9807,9 @@ snapshots:
   '@oxc-parser/binding-openharmony-arm64@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-wasm32-wasi@0.121.0(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
+  '@oxc-parser/binding-wasm32-wasi@0.121.0(@emnapi/runtime@1.9.1)':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.1.2(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+      '@napi-rs/wasm-runtime': 1.1.2(@emnapi/runtime@1.9.1)
     transitivePeerDependencies:
       - '@emnapi/core'
       - '@emnapi/runtime'
@@ -10531,9 +9878,9 @@ snapshots:
   '@oxc-resolver/binding-openharmony-arm64@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-wasm32-wasi@11.19.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
+  '@oxc-resolver/binding-wasm32-wasi@11.19.1(@emnapi/runtime@1.9.1)':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.1.2(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+      '@napi-rs/wasm-runtime': 1.1.2(@emnapi/runtime@1.9.1)
     transitivePeerDependencies:
       - '@emnapi/core'
       - '@emnapi/runtime'
@@ -10680,67 +10027,6 @@ snapshots:
   '@oxlint/binding-win32-x64-msvc@1.60.0':
     optional: true
 
-  '@parcel/watcher-android-arm64@2.5.6':
-    optional: true
-
-  '@parcel/watcher-darwin-arm64@2.5.6':
-    optional: true
-
-  '@parcel/watcher-darwin-x64@2.5.6':
-    optional: true
-
-  '@parcel/watcher-freebsd-x64@2.5.6':
-    optional: true
-
-  '@parcel/watcher-linux-arm-glibc@2.5.6':
-    optional: true
-
-  '@parcel/watcher-linux-arm-musl@2.5.6':
-    optional: true
-
-  '@parcel/watcher-linux-arm64-glibc@2.5.6':
-    optional: true
-
-  '@parcel/watcher-linux-arm64-musl@2.5.6':
-    optional: true
-
-  '@parcel/watcher-linux-x64-glibc@2.5.6':
-    optional: true
-
-  '@parcel/watcher-linux-x64-musl@2.5.6':
-    optional: true
-
-  '@parcel/watcher-win32-arm64@2.5.6':
-    optional: true
-
-  '@parcel/watcher-win32-ia32@2.5.6':
-    optional: true
-
-  '@parcel/watcher-win32-x64@2.5.6':
-    optional: true
-
-  '@parcel/watcher@2.5.6':
-    dependencies:
-      detect-libc: 2.1.2
-      is-glob: 4.0.3
-      node-addon-api: 7.1.1
-      picomatch: 4.0.4
-    optionalDependencies:
-      '@parcel/watcher-android-arm64': 2.5.6
-      '@parcel/watcher-darwin-arm64': 2.5.6
-      '@parcel/watcher-darwin-x64': 2.5.6
-      '@parcel/watcher-freebsd-x64': 2.5.6
-      '@parcel/watcher-linux-arm-glibc': 2.5.6
-      '@parcel/watcher-linux-arm-musl': 2.5.6
-      '@parcel/watcher-linux-arm64-glibc': 2.5.6
-      '@parcel/watcher-linux-arm64-musl': 2.5.6
-      '@parcel/watcher-linux-x64-glibc': 2.5.6
-      '@parcel/watcher-linux-x64-musl': 2.5.6
-      '@parcel/watcher-win32-arm64': 2.5.6
-      '@parcel/watcher-win32-ia32': 2.5.6
-      '@parcel/watcher-win32-x64': 2.5.6
-    optional: true
-
   '@pkgr/core@0.2.9': {}
 
   '@playwright/test@1.59.1':
@@ -11049,95 +10335,16 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.0-rc.7': {}
 
-  '@rollup/plugin-replace@6.0.3(rollup@4.59.0)':
+  '@rollup/plugin-replace@6.0.3':
     dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@4.59.0)
+      '@rollup/pluginutils': 5.3.0
       magic-string: 0.30.21
-    optionalDependencies:
-      rollup: 4.59.0
 
-  '@rollup/pluginutils@5.3.0(rollup@4.59.0)':
+  '@rollup/pluginutils@5.3.0':
     dependencies:
       '@types/estree': 1.0.8
       estree-walker: 2.0.2
       picomatch: 4.0.4
-    optionalDependencies:
-      rollup: 4.59.0
-
-  '@rollup/rollup-android-arm-eabi@4.59.0':
-    optional: true
-
-  '@rollup/rollup-android-arm64@4.59.0':
-    optional: true
-
-  '@rollup/rollup-darwin-arm64@4.59.0':
-    optional: true
-
-  '@rollup/rollup-darwin-x64@4.59.0':
-    optional: true
-
-  '@rollup/rollup-freebsd-arm64@4.59.0':
-    optional: true
-
-  '@rollup/rollup-freebsd-x64@4.59.0':
-    optional: true
-
-  '@rollup/rollup-linux-arm-gnueabihf@4.59.0':
-    optional: true
-
-  '@rollup/rollup-linux-arm-musleabihf@4.59.0':
-    optional: true
-
-  '@rollup/rollup-linux-arm64-gnu@4.59.0':
-    optional: true
-
-  '@rollup/rollup-linux-arm64-musl@4.59.0':
-    optional: true
-
-  '@rollup/rollup-linux-loong64-gnu@4.59.0':
-    optional: true
-
-  '@rollup/rollup-linux-loong64-musl@4.59.0':
-    optional: true
-
-  '@rollup/rollup-linux-ppc64-gnu@4.59.0':
-    optional: true
-
-  '@rollup/rollup-linux-ppc64-musl@4.59.0':
-    optional: true
-
-  '@rollup/rollup-linux-riscv64-gnu@4.59.0':
-    optional: true
-
-  '@rollup/rollup-linux-riscv64-musl@4.59.0':
-    optional: true
-
-  '@rollup/rollup-linux-s390x-gnu@4.59.0':
-    optional: true
-
-  '@rollup/rollup-linux-x64-gnu@4.59.0':
-    optional: true
-
-  '@rollup/rollup-linux-x64-musl@4.59.0':
-    optional: true
-
-  '@rollup/rollup-openbsd-x64@4.59.0':
-    optional: true
-
-  '@rollup/rollup-openharmony-arm64@4.59.0':
-    optional: true
-
-  '@rollup/rollup-win32-arm64-msvc@4.59.0':
-    optional: true
-
-  '@rollup/rollup-win32-ia32-msvc@4.59.0':
-    optional: true
-
-  '@rollup/rollup-win32-x64-gnu@4.59.0':
-    optional: true
-
-  '@rollup/rollup-win32-x64-msvc@4.59.0':
-    optional: true
 
   '@sentry-internal/browser-utils@10.48.0':
     dependencies:
@@ -11260,27 +10467,10 @@ snapshots:
 
   '@standard-schema/spec@1.1.0': {}
 
-  '@storybook/addon-docs@10.3.5(@types/react@19.2.14)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))':
+  '@storybook/addon-docs@10.3.5(@types/react@19.2.14)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))':
     dependencies:
       '@mdx-js/react': 3.1.1(@types/react@19.2.14)(react@19.2.5)
-      '@storybook/csf-plugin': 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))
-      '@storybook/icons': 2.0.1(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
-      '@storybook/react-dom-shim': 10.3.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
-      react: 19.2.5
-      react-dom: 19.2.5(react@19.2.5)
-      storybook: 10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
-      ts-dedent: 2.2.0
-    transitivePeerDependencies:
-      - '@types/react'
-      - esbuild
-      - rollup
-      - vite
-      - webpack
-
-  '@storybook/addon-docs@10.3.5(@types/react@19.2.14)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2))':
-    dependencies:
-      '@mdx-js/react': 3.1.1(@types/react@19.2.14)(react@19.2.5)
-      '@storybook/csf-plugin': 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2))
+      '@storybook/csf-plugin': 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
       '@storybook/icons': 2.0.1(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@storybook/react-dom-shim': 10.3.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
       react: 19.2.5
@@ -11310,47 +10500,24 @@ snapshots:
       storybook: 10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       ts-dedent: 2.2.0
 
-  '@storybook/builder-vite@10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))':
+  '@storybook/builder-vite@10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))':
     dependencies:
-      '@storybook/csf-plugin': 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))
+      '@storybook/csf-plugin': 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
       storybook: 10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       ts-dedent: 2.2.0
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
     transitivePeerDependencies:
       - esbuild
       - rollup
       - webpack
 
-  '@storybook/builder-vite@10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2))':
-    dependencies:
-      '@storybook/csf-plugin': 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2))
-      storybook: 10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
-      ts-dedent: 2.2.0
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
-    transitivePeerDependencies:
-      - esbuild
-      - rollup
-      - webpack
-
-  '@storybook/csf-plugin@10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))':
+  '@storybook/csf-plugin@10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))':
     dependencies:
       storybook: 10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       unplugin: 2.3.11
     optionalDependencies:
       esbuild: 0.27.2
-      rollup: 4.59.0
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
-      webpack: 5.105.4(esbuild@0.27.2)(uglify-js@3.19.3)
-
-  '@storybook/csf-plugin@10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2))':
-    dependencies:
-      storybook: 10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
-      unplugin: 2.3.11
-    optionalDependencies:
-      esbuild: 0.27.2
-      rollup: 4.59.0
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
-      webpack: 5.105.4(esbuild@0.27.2)
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
 
   '@storybook/global@5.0.0': {}
 
@@ -11359,18 +10526,18 @@ snapshots:
       react: 19.2.5
       react-dom: 19.2.5(react@19.2.5)
 
-  '@storybook/nextjs-vite@10.3.5(@babel/core@7.29.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(sass@1.98.0))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))':
+  '@storybook/nextjs-vite@10.3.5(@babel/core@7.29.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)':
     dependencies:
-      '@storybook/builder-vite': 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))
+      '@storybook/builder-vite': 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
       '@storybook/react': 10.3.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)
-      '@storybook/react-vite': 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))
-      next: 16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(sass@1.98.0)
+      '@storybook/react-vite': 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)
+      next: 16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       react: 19.2.5
       react-dom: 19.2.5(react@19.2.5)
       storybook: 10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       styled-jsx: 5.1.6(@babel/core@7.29.0)(react@19.2.5)
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
-      vite-plugin-storybook-nextjs: 3.2.4(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(sass@1.98.0))(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+      vite-plugin-storybook-nextjs: 3.2.4(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)
     optionalDependencies:
       typescript: 6.0.2
     transitivePeerDependencies:
@@ -11387,11 +10554,11 @@ snapshots:
       react-dom: 19.2.5(react@19.2.5)
       storybook: 10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
 
-  '@storybook/react-vite@10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))':
+  '@storybook/react-vite@10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2)
-      '@rollup/pluginutils': 5.3.0(rollup@4.59.0)
-      '@storybook/builder-vite': 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2)
+      '@rollup/pluginutils': 5.3.0
+      '@storybook/builder-vite': 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
       '@storybook/react': 10.3.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)
       empathic: 2.0.0
       magic-string: 0.30.21
@@ -11401,29 +10568,7 @@ snapshots:
       resolve: 1.22.11
       storybook: 10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       tsconfig-paths: 4.2.0
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
-    transitivePeerDependencies:
-      - esbuild
-      - rollup
-      - supports-color
-      - typescript
-      - webpack
-
-  '@storybook/react-vite@10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)(webpack@5.105.4(esbuild@0.27.2))':
-    dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2)
-      '@rollup/pluginutils': 5.3.0(rollup@4.59.0)
-      '@storybook/builder-vite': 10.3.5(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(rollup@4.59.0)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(webpack@5.105.4(esbuild@0.27.2))
-      '@storybook/react': 10.3.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2)
-      empathic: 2.0.0
-      magic-string: 0.30.21
-      react: 19.2.5
-      react-docgen: 8.0.3
-      react-dom: 19.2.5(react@19.2.5)
-      resolve: 1.22.11
-      storybook: 10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
-      tsconfig-paths: 4.2.0
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -11562,12 +10707,12 @@ snapshots:
       postcss-selector-parser: 6.0.10
       tailwindcss: 4.2.2
 
-  '@tailwindcss/vite@4.2.2(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))':
+  '@tailwindcss/vite@4.2.2(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))':
     dependencies:
       '@tailwindcss/node': 4.2.2
       '@tailwindcss/oxide': 4.2.2
       tailwindcss: 4.2.2
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
 
   '@tanstack/devtools-client@0.0.6':
     dependencies:
@@ -11582,7 +10727,7 @@ snapshots:
 
   '@tanstack/devtools-event-client@0.4.3': {}
 
-  '@tanstack/devtools-ui@0.5.1(csstype@3.2.3)(solid-js@1.9.11)':
+  '@tanstack/devtools-ui@0.5.1(csstype@3.2.3)':
     dependencies:
       clsx: 2.1.1
       dayjs: 1.11.20
@@ -11597,14 +10742,14 @@ snapshots:
       react: 19.2.5
       solid-js: 1.9.11
 
-  '@tanstack/devtools@0.11.2(csstype@3.2.3)(solid-js@1.9.11)':
+  '@tanstack/devtools@0.11.2(csstype@3.2.3)':
     dependencies:
       '@solid-primitives/event-listener': 2.4.5(solid-js@1.9.11)
       '@solid-primitives/keyboard': 1.3.5(solid-js@1.9.11)
       '@solid-primitives/resize-observer': 2.1.5(solid-js@1.9.11)
       '@tanstack/devtools-client': 0.0.6
       '@tanstack/devtools-event-bus': 0.4.1
-      '@tanstack/devtools-ui': 0.5.1(csstype@3.2.3)(solid-js@1.9.11)
+      '@tanstack/devtools-ui': 0.5.1(csstype@3.2.3)
       clsx: 2.1.1
       goober: 2.1.18(csstype@3.2.3)
       solid-js: 1.9.11
@@ -11630,7 +10775,7 @@ snapshots:
 
   '@tanstack/form-devtools@0.2.21(@types/react@19.2.14)(csstype@3.2.3)(react@19.2.5)(solid-js@1.9.11)':
     dependencies:
-      '@tanstack/devtools-ui': 0.5.1(csstype@3.2.3)(solid-js@1.9.11)
+      '@tanstack/devtools-ui': 0.5.1(csstype@3.2.3)
       '@tanstack/devtools-utils': 0.4.0(@types/react@19.2.14)(react@19.2.5)(solid-js@1.9.11)
       '@tanstack/form-core': 1.29.0
       clsx: 2.1.1
@@ -11650,9 +10795,9 @@ snapshots:
 
   '@tanstack/query-devtools@5.99.0': {}
 
-  '@tanstack/react-devtools@0.10.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(csstype@3.2.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(solid-js@1.9.11)':
+  '@tanstack/react-devtools@0.10.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(csstype@3.2.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
-      '@tanstack/devtools': 0.11.2(csstype@3.2.3)(solid-js@1.9.11)
+      '@tanstack/devtools': 0.11.2(csstype@3.2.3)
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
       react: 19.2.5
@@ -11660,7 +10805,6 @@ snapshots:
     transitivePeerDependencies:
       - bufferutil
       - csstype
-      - solid-js
       - utf-8-validate
 
   '@tanstack/react-form-devtools@0.2.21(@types/react@19.2.14)(csstype@3.2.3)(react@19.2.5)(solid-js@1.9.11)':
@@ -11948,16 +11092,6 @@ snapshots:
 
   '@types/doctrine@0.0.9': {}
 
-  '@types/eslint-scope@3.7.7':
-    dependencies:
-      '@types/eslint': 9.6.1
-      '@types/estree': 1.0.8
-
-  '@types/eslint@9.6.1':
-    dependencies:
-      '@types/estree': 1.0.8
-      '@types/json-schema': 7.0.15
-
   '@types/esrecurse@4.3.1': {}
 
   '@types/estree-jsx@1.0.5':
@@ -12050,18 +11184,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.57.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.57.2
-      '@typescript-eslint/types': 8.57.2
-      '@typescript-eslint/typescript-estree': 8.57.2(typescript@6.0.2)
-      '@typescript-eslint/visitor-keys': 8.57.2
-      debug: 4.4.3(supports-color@8.1.1)
-      eslint: 10.2.0(jiti@2.6.1)
-      typescript: 6.0.2
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/parser@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.58.2
@@ -12086,15 +11208,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.57.2(typescript@6.0.2)':
-    dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.58.2(typescript@6.0.2)
-      '@typescript-eslint/types': 8.58.2
-      debug: 4.4.3(supports-color@8.1.1)
-      typescript: 6.0.2
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/project-service@8.58.2(typescript@6.0.2)':
     dependencies:
       '@typescript-eslint/tsconfig-utils': 8.58.2(typescript@6.0.2)
@@ -12104,34 +11217,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/rule-tester@8.57.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)':
-    dependencies:
-      '@typescript-eslint/parser': 8.57.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      '@typescript-eslint/typescript-estree': 8.57.2(typescript@6.0.2)
-      '@typescript-eslint/utils': 8.57.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      ajv: 6.14.0
-      eslint: 10.2.0(jiti@2.6.1)
-      json-stable-stringify-without-jsonify: 1.0.1
-      lodash.merge: 4.6.2
-      semver: 7.7.4
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
-  '@typescript-eslint/scope-manager@8.57.2':
-    dependencies:
-      '@typescript-eslint/types': 8.57.2
-      '@typescript-eslint/visitor-keys': 8.57.2
-
   '@typescript-eslint/scope-manager@8.58.2':
     dependencies:
       '@typescript-eslint/types': 8.58.2
       '@typescript-eslint/visitor-keys': 8.58.2
 
-  '@typescript-eslint/tsconfig-utils@8.57.2(typescript@6.0.2)':
-    dependencies:
-      typescript: 6.0.2
-
   '@typescript-eslint/tsconfig-utils@8.58.2(typescript@6.0.2)':
     dependencies:
       typescript: 6.0.2
@@ -12148,25 +11238,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.57.2': {}
-
   '@typescript-eslint/types@8.58.2': {}
 
-  '@typescript-eslint/typescript-estree@8.57.2(typescript@6.0.2)':
-    dependencies:
-      '@typescript-eslint/project-service': 8.57.2(typescript@6.0.2)
-      '@typescript-eslint/tsconfig-utils': 8.57.2(typescript@6.0.2)
-      '@typescript-eslint/types': 8.57.2
-      '@typescript-eslint/visitor-keys': 8.57.2
-      debug: 4.4.3(supports-color@8.1.1)
-      minimatch: 10.2.4
-      semver: 7.7.4
-      tinyglobby: 0.2.16
-      ts-api-utils: 2.5.0(typescript@6.0.2)
-      typescript: 6.0.2
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/typescript-estree@8.58.2(typescript@6.0.2)':
     dependencies:
       '@typescript-eslint/project-service': 8.58.2(typescript@6.0.2)
@@ -12182,17 +11255,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.57.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@10.2.0(jiti@2.6.1))
-      '@typescript-eslint/scope-manager': 8.57.2
-      '@typescript-eslint/types': 8.57.2
-      '@typescript-eslint/typescript-estree': 8.57.2(typescript@6.0.2)
-      eslint: 10.2.0(jiti@2.6.1)
-      typescript: 6.0.2
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/utils@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@10.2.0(jiti@2.6.1))
@@ -12204,11 +11266,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.57.2':
-    dependencies:
-      '@typescript-eslint/types': 8.57.2
-      eslint-visitor-keys: 5.0.1
-
   '@typescript-eslint/visitor-keys@8.58.2':
     dependencies:
       '@typescript-eslint/types': 8.58.2
@@ -12251,13 +11308,13 @@ snapshots:
     dependencies:
       unpic: 4.2.2
 
-  '@unpic/react@1.0.2(next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(sass@1.98.0))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
+  '@unpic/react@1.0.2(next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
       '@unpic/core': 1.0.3
       react: 19.2.5
       react-dom: 19.2.5(react@19.2.5)
     optionalDependencies:
-      next: 16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(sass@1.98.0)
+      next: 16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
 
   '@upsetjs/venn.js@2.0.0':
     optionalDependencies:
@@ -12273,12 +11330,12 @@ snapshots:
       '@resvg/resvg-wasm': 2.4.0
       satori: 0.16.0
 
-  '@vitejs/devtools-kit@0.1.11(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2)(ws@8.20.0)':
+  '@vitejs/devtools-kit@0.1.11(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2)(ws@8.20.0)':
     dependencies:
       '@vitejs/devtools-rpc': 0.1.11(typescript@6.0.2)(ws@8.20.0)
       birpc: 4.0.0
       ohash: 2.0.11
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
     transitivePeerDependencies:
       - typescript
       - ws
@@ -12295,12 +11352,12 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  '@vitejs/plugin-react@6.0.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))':
+  '@vitejs/plugin-react@6.0.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-rc.7
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
 
-  '@vitejs/plugin-rsc@0.5.24(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(react-dom@19.2.5(react@19.2.5))(react-server-dom-webpack@19.2.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3)))(react@19.2.5)':
+  '@vitejs/plugin-rsc@0.5.24(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(react-dom@19.2.5(react@19.2.5))(react-server-dom-webpack@19.2.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react@19.2.5)':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-rc.15
       es-module-lexer: 2.0.0
@@ -12311,12 +11368,12 @@ snapshots:
       srvx: 0.11.15
       strip-literal: 3.1.0
       turbo-stream: 3.2.0
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
-      vitefu: 1.1.3(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+      vitefu: 1.1.3(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))
     optionalDependencies:
-      react-server-dom-webpack: 19.2.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))
+      react-server-dom-webpack: 19.2.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
 
-  '@vitest/coverage-v8@4.1.4(@voidzero-dev/vite-plus-test@0.1.18)':
+  '@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
       '@vitest/utils': 4.1.4
@@ -12328,46 +11385,74 @@ snapshots:
       obug: 2.1.1
       std-env: 4.0.0
       tinyrainbow: 3.1.0
-      vitest: '@voidzero-dev/vite-plus-test@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+      vitest: '@voidzero-dev/vite-plus-test@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+    transitivePeerDependencies:
+      - '@arethetypeswrong/core'
+      - '@edge-runtime/vm'
+      - '@opentelemetry/api'
+      - '@tsdown/css'
+      - '@tsdown/exe'
+      - '@types/node'
+      - '@vitejs/devtools'
+      - '@vitest/coverage-istanbul'
+      - '@vitest/ui'
+      - bufferutil
+      - esbuild
+      - happy-dom
+      - jiti
+      - jsdom
+      - less
+      - publint
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - terser
+      - tsx
+      - typescript
+      - unplugin-unused
+      - utf-8-validate
+      - vite
+      - yaml
 
-  '@vitest/coverage-v8@4.1.4(vitest@4.1.4)':
-    dependencies:
-      '@bcoe/v8-coverage': 1.0.2
-      '@vitest/utils': 4.1.4
-      ast-v8-to-istanbul: 1.0.0
-      istanbul-lib-coverage: 3.2.2
-      istanbul-lib-report: 3.0.1
-      istanbul-reports: 3.2.0
-      magicast: 0.5.2
-      obug: 2.1.1
-      std-env: 4.0.0
-      tinyrainbow: 3.1.0
-      vitest: 4.1.4(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(happy-dom@20.9.0)
-    optional: true
-
-  '@vitest/eslint-plugin@1.6.15(@typescript-eslint/eslint-plugin@8.58.2(@typescript-eslint/parser@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@voidzero-dev/vite-plus-test@0.1.18)(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)':
+  '@vitest/eslint-plugin@1.6.15(@types/node@25.6.0)(@typescript-eslint/eslint-plugin@8.58.2(@typescript-eslint/parser@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(eslint@10.2.0(jiti@2.6.1))(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.58.2
       '@typescript-eslint/utils': 8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
       eslint: 10.2.0(jiti@2.6.1)
+      vitest: '@voidzero-dev/vite-plus-test@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
     optionalDependencies:
       '@typescript-eslint/eslint-plugin': 8.58.2(@typescript-eslint/parser@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
       typescript: 6.0.2
-      vitest: '@voidzero-dev/vite-plus-test@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
-    transitivePeerDependencies:
-      - supports-color
-
-  '@vitest/eslint-plugin@1.6.15(@typescript-eslint/eslint-plugin@8.58.2(@typescript-eslint/parser@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)(vitest@4.1.4)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.58.2
-      '@typescript-eslint/utils': 8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      eslint: 10.2.0(jiti@2.6.1)
-    optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.58.2(@typescript-eslint/parser@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      typescript: 6.0.2
-      vitest: 4.1.4(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(happy-dom@20.9.0)
     transitivePeerDependencies:
+      - '@arethetypeswrong/core'
+      - '@edge-runtime/vm'
+      - '@opentelemetry/api'
+      - '@tsdown/css'
+      - '@tsdown/exe'
+      - '@types/node'
+      - '@vitejs/devtools'
+      - '@vitest/coverage-istanbul'
+      - '@vitest/coverage-v8'
+      - '@vitest/ui'
+      - bufferutil
+      - esbuild
+      - happy-dom
+      - jiti
+      - jsdom
+      - less
+      - publint
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
       - supports-color
+      - terser
+      - tsx
+      - unplugin-unused
+      - utf-8-validate
+      - vite
+      - yaml
 
   '@vitest/expect@3.2.4':
     dependencies:
@@ -12377,25 +11462,6 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
-  '@vitest/expect@4.1.4':
-    dependencies:
-      '@standard-schema/spec': 1.1.0
-      '@types/chai': 5.2.3
-      '@vitest/spy': 4.1.4
-      '@vitest/utils': 4.1.4
-      chai: 6.2.2
-      tinyrainbow: 3.1.0
-    optional: true
-
-  '@vitest/mocker@4.1.4(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))':
-    dependencies:
-      '@vitest/spy': 4.1.4
-      estree-walker: 3.0.3
-      magic-string: 0.30.21
-    optionalDependencies:
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
-    optional: true
-
   '@vitest/pretty-format@3.2.4':
     dependencies:
       tinyrainbow: 2.0.0
@@ -12404,27 +11470,10 @@ snapshots:
     dependencies:
       tinyrainbow: 3.1.0
 
-  '@vitest/runner@4.1.4':
-    dependencies:
-      '@vitest/utils': 4.1.4
-      pathe: 2.0.3
-    optional: true
-
-  '@vitest/snapshot@4.1.4':
-    dependencies:
-      '@vitest/pretty-format': 4.1.4
-      '@vitest/utils': 4.1.4
-      magic-string: 0.30.21
-      pathe: 2.0.3
-    optional: true
-
   '@vitest/spy@3.2.4':
     dependencies:
       tinyspy: 4.0.4
 
-  '@vitest/spy@4.1.4':
-    optional: true
-
   '@vitest/utils@3.2.4':
     dependencies:
       '@vitest/pretty-format': 3.2.4
@@ -12437,7 +11486,7 @@ snapshots:
       convert-source-map: 2.0.0
       tinyrainbow: 3.1.0
 
-  '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)':
+  '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)':
     dependencies:
       '@oxc-project/runtime': 0.124.0
       '@oxc-project/types': 0.124.0
@@ -12448,8 +11497,6 @@ snapshots:
       esbuild: 0.27.2
       fsevents: 2.3.3
       jiti: 2.6.1
-      sass: 1.98.0
-      terser: 5.46.1
       tsx: 4.21.0
       typescript: 6.0.2
       yaml: 2.8.3
@@ -12472,11 +11519,11 @@ snapshots:
   '@voidzero-dev/vite-plus-linux-x64-musl@0.1.18':
     optional: true
 
-  '@voidzero-dev/vite-plus-test@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)':
+  '@voidzero-dev/vite-plus-test@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@types/chai': 5.2.3
-      '@voidzero-dev/vite-plus-core': 0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
+      '@voidzero-dev/vite-plus-core': 0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
       es-module-lexer: 1.7.0
       obug: 2.1.1
       pixelmatch: 7.1.0
@@ -12486,11 +11533,11 @@ snapshots:
       tinybench: 2.9.0
       tinyexec: 1.0.4
       tinyglobby: 0.2.16
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
       ws: 8.20.0
     optionalDependencies:
       '@types/node': 25.6.0
-      '@vitest/coverage-v8': 4.1.4(@voidzero-dev/vite-plus-test@0.1.18)
+      '@vitest/coverage-v8': 4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
       happy-dom: 20.9.0
     transitivePeerDependencies:
       - '@arethetypeswrong/core'
@@ -12546,115 +11593,14 @@ snapshots:
       '@vue/compiler-core': 3.5.31
       '@vue/shared': 3.5.31
 
-  '@vue/compiler-sfc@3.5.31':
-    dependencies:
-      '@babel/parser': 7.29.2
-      '@vue/compiler-core': 3.5.31
-      '@vue/compiler-dom': 3.5.31
-      '@vue/compiler-ssr': 3.5.31
-      '@vue/shared': 3.5.31
-      estree-walker: 2.0.2
-      magic-string: 0.30.21
-      postcss: 8.5.9
-      source-map-js: 1.2.1
-
-  '@vue/compiler-ssr@3.5.31':
-    dependencies:
-      '@vue/compiler-dom': 3.5.31
-      '@vue/shared': 3.5.31
-
   '@vue/shared@3.5.31': {}
 
-  '@webassemblyjs/ast@1.14.1':
-    dependencies:
-      '@webassemblyjs/helper-numbers': 1.13.2
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-
-  '@webassemblyjs/floating-point-hex-parser@1.13.2': {}
-
-  '@webassemblyjs/helper-api-error@1.13.2': {}
-
-  '@webassemblyjs/helper-buffer@1.14.1': {}
-
-  '@webassemblyjs/helper-numbers@1.13.2':
-    dependencies:
-      '@webassemblyjs/floating-point-hex-parser': 1.13.2
-      '@webassemblyjs/helper-api-error': 1.13.2
-      '@xtuc/long': 4.2.2
-
-  '@webassemblyjs/helper-wasm-bytecode@1.13.2': {}
-
-  '@webassemblyjs/helper-wasm-section@1.14.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-buffer': 1.14.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-      '@webassemblyjs/wasm-gen': 1.14.1
-
-  '@webassemblyjs/ieee754@1.13.2':
-    dependencies:
-      '@xtuc/ieee754': 1.2.0
-
-  '@webassemblyjs/leb128@1.13.2':
-    dependencies:
-      '@xtuc/long': 4.2.2
-
-  '@webassemblyjs/utf8@1.13.2': {}
-
-  '@webassemblyjs/wasm-edit@1.14.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-buffer': 1.14.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-      '@webassemblyjs/helper-wasm-section': 1.14.1
-      '@webassemblyjs/wasm-gen': 1.14.1
-      '@webassemblyjs/wasm-opt': 1.14.1
-      '@webassemblyjs/wasm-parser': 1.14.1
-      '@webassemblyjs/wast-printer': 1.14.1
-
-  '@webassemblyjs/wasm-gen@1.14.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-      '@webassemblyjs/ieee754': 1.13.2
-      '@webassemblyjs/leb128': 1.13.2
-      '@webassemblyjs/utf8': 1.13.2
-
-  '@webassemblyjs/wasm-opt@1.14.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-buffer': 1.14.1
-      '@webassemblyjs/wasm-gen': 1.14.1
-      '@webassemblyjs/wasm-parser': 1.14.1
-
-  '@webassemblyjs/wasm-parser@1.14.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-api-error': 1.13.2
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-      '@webassemblyjs/ieee754': 1.13.2
-      '@webassemblyjs/leb128': 1.13.2
-      '@webassemblyjs/utf8': 1.13.2
-
-  '@webassemblyjs/wast-printer@1.14.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@xtuc/long': 4.2.2
-
   '@webcontainer/env@1.1.1': {}
 
   '@xstate/fsm@1.6.5': {}
 
-  '@xtuc/ieee754@1.2.0': {}
-
-  '@xtuc/long@4.2.2': {}
-
   abcjs@6.6.2: {}
 
-  acorn-import-phases@1.0.4(acorn@8.16.0):
-    dependencies:
-      acorn: 8.16.0
-
   acorn-jsx@5.3.2(acorn@8.16.0):
     dependencies:
       acorn: 8.16.0
@@ -12685,15 +11631,6 @@ snapshots:
       screenfull: 5.2.0
       tslib: 2.8.1
 
-  ajv-formats@2.1.1(ajv@8.18.0):
-    optionalDependencies:
-      ajv: 8.18.0
-
-  ajv-keywords@5.1.0(ajv@8.18.0):
-    dependencies:
-      ajv: 8.18.0
-      fast-deep-equal: 3.1.3
-
   ajv@6.14.0:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -12701,13 +11638,6 @@ snapshots:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
-  ajv@8.18.0:
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-uri: 3.1.0
-      json-schema-traverse: 1.0.0
-      require-from-string: 2.0.2
-
   ansi-regex@4.1.1: {}
 
   ansi-regex@5.0.1: {}
@@ -12859,9 +11789,6 @@ snapshots:
       loupe: 3.2.1
       pathval: 2.0.1
 
-  chai@6.2.2:
-    optional: true
-
   chalk@4.1.1:
     dependencies:
       ansi-styles: 4.3.0
@@ -12921,11 +11848,6 @@ snapshots:
       '@chevrotain/utils': 11.1.2
       lodash-es: 4.18.0
 
-  chokidar@4.0.3:
-    dependencies:
-      readdirp: 4.1.2
-    optional: true
-
   chownr@1.1.4:
     optional: true
 
@@ -12933,8 +11855,6 @@ snapshots:
 
   chromatic@13.3.5: {}
 
-  chrome-trace-event@1.0.4: {}
-
   ci-info@4.4.0: {}
 
   class-transformer@0.5.1: {}
@@ -13001,8 +11921,6 @@ snapshots:
 
   commander@14.0.3: {}
 
-  commander@2.20.3: {}
-
   commander@7.2.0: {}
 
   commander@8.3.0: {}
@@ -13277,8 +12195,6 @@ snapshots:
       d3: 7.9.0
       lodash-es: 4.18.0
 
-  date-fns@4.1.0: {}
-
   dayjs@1.11.20: {}
 
   debug@4.4.3(supports-color@8.1.1):
@@ -13562,10 +12478,9 @@ snapshots:
       - '@eslint/css'
       - typescript
 
-  eslint-plugin-command@3.5.2(@typescript-eslint/rule-tester@8.57.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(@typescript-eslint/typescript-estree@8.58.2(typescript@6.0.2))(@typescript-eslint/utils@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1)):
+  eslint-plugin-command@3.5.2(@typescript-eslint/typescript-estree@8.58.2(typescript@6.0.2))(@typescript-eslint/utils@8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2))(eslint@10.2.0(jiti@2.6.1)):
     dependencies:
       '@es-joy/jsdoccomment': 0.84.0
-      '@typescript-eslint/rule-tester': 8.57.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
       '@typescript-eslint/typescript-estree': 8.58.2(typescript@6.0.2)
       '@typescript-eslint/utils': 8.58.2(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
       eslint: 10.2.0(jiti@2.6.1)
@@ -13881,16 +12796,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-processor-vue-blocks@2.0.0(@vue/compiler-sfc@3.5.31)(eslint@10.2.0(jiti@2.6.1)):
+  eslint-processor-vue-blocks@2.0.0(eslint@10.2.0(jiti@2.6.1)):
     dependencies:
-      '@vue/compiler-sfc': 3.5.31
       eslint: 10.2.0(jiti@2.6.1)
 
-  eslint-scope@5.1.1:
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 4.3.0
-
   eslint-scope@8.4.0:
     dependencies:
       esrecurse: 4.3.0
@@ -14010,8 +12919,6 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
-  estraverse@4.3.0: {}
-
   estraverse@5.3.0: {}
 
   estree-util-attach-comments@3.0.0:
@@ -14051,14 +12958,9 @@ snapshots:
 
   esutils@2.0.3: {}
 
-  events@3.3.0: {}
-
   expand-template@2.0.3:
     optional: true
 
-  expect-type@1.3.0:
-    optional: true
-
   exsolve@1.0.8: {}
 
   extend@3.0.2: {}
@@ -14101,8 +13003,6 @@ snapshots:
     dependencies:
       fast-string-truncated-width: 1.2.1
 
-  fast-uri@3.1.0: {}
-
   fast-wrap-ansi@0.1.6:
     dependencies:
       fast-string-width: 1.1.0
@@ -14199,8 +13099,6 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob-to-regexp@0.4.1: {}
-
   glob@13.0.6:
     dependencies:
       minimatch: 10.2.4
@@ -14458,9 +13356,6 @@ snapshots:
 
   immer@11.1.4: {}
 
-  immutable@5.1.5:
-    optional: true
-
   import-fresh@3.3.1:
     dependencies:
       parent-module: 1.0.1
@@ -14538,8 +13433,6 @@ snapshots:
 
   isexe@2.0.0: {}
 
-  isomorphic.js@0.2.5: {}
-
   istanbul-lib-coverage@3.2.2: {}
 
   istanbul-lib-report@3.0.1:
@@ -14553,12 +13446,6 @@ snapshots:
       html-escaper: 2.0.2
       istanbul-lib-report: 3.0.1
 
-  jest-worker@27.5.1:
-    dependencies:
-      '@types/node': 25.6.0
-      merge-stream: 2.0.0
-      supports-color: 8.1.1
-
   jiti@2.6.1: {}
 
   jotai@2.19.1(@babel/core@7.29.0)(@babel/template@7.28.6)(@types/react@19.2.14)(react@19.2.5):
@@ -14592,12 +13479,8 @@ snapshots:
 
   json-buffer@3.0.1: {}
 
-  json-parse-even-better-errors@2.3.1: {}
-
   json-schema-traverse@0.4.1: {}
 
-  json-schema-traverse@1.0.0: {}
-
   json-stable-stringify-without-jsonify@1.0.1: {}
 
   json5@2.2.3: {}
@@ -14628,7 +13511,7 @@ snapshots:
 
   khroma@2.1.0: {}
 
-  knip@6.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2):
+  knip@6.4.1(@emnapi/runtime@1.9.1):
     dependencies:
       '@nodelib/fs.walk': 1.2.8
       fast-glob: 3.3.3
@@ -14636,8 +13519,8 @@ snapshots:
       get-tsconfig: 4.13.7
       jiti: 2.6.1
       minimist: 1.2.8
-      oxc-parser: 0.121.0(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
-      oxc-resolver: 11.19.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+      oxc-parser: 0.121.0(@emnapi/runtime@1.9.1)
+      oxc-resolver: 11.19.1(@emnapi/runtime@1.9.1)
       picocolors: 1.1.1
       picomatch: 4.0.4
       smol-toml: 1.6.1
@@ -14690,10 +13573,6 @@ snapshots:
 
   lexical@0.43.0: {}
 
-  lib0@0.2.117:
-    dependencies:
-      isomorphic.js: 0.2.5
-
   lightningcss-android-arm64@1.32.0:
     optional: true
 
@@ -14748,8 +13627,6 @@ snapshots:
       base64-js: 0.0.8
       unicode-trie: 2.0.0
 
-  loader-runner@4.3.1: {}
-
   local-pkg@1.1.2:
     dependencies:
       mlly: 1.8.2
@@ -14812,8 +13689,6 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
-  marked@14.0.0: {}
-
   marked@16.4.2: {}
 
   marked@17.0.5: {}
@@ -15029,8 +13904,6 @@ snapshots:
 
   mdn-data@2.27.1: {}
 
-  merge-stream@2.0.0: {}
-
   merge2@1.4.1: {}
 
   mermaid@11.14.0:
@@ -15353,12 +14226,6 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.2
 
-  mime-db@1.52.0: {}
-
-  mime-types@2.1.35:
-    dependencies:
-      mime-db: 1.52.0
-
   mime@3.0.0: {}
 
   mime@4.1.0: {}
@@ -15402,11 +14269,6 @@ snapshots:
 
   module-replacements@2.11.0: {}
 
-  monaco-editor@0.55.1:
-    dependencies:
-      dompurify: 3.3.2
-      marked: 14.0.0
-
   moo-color@1.0.3:
     dependencies:
       color-name: 1.1.4
@@ -15439,7 +14301,7 @@ snapshots:
       react: 19.2.5
       react-dom: 19.2.5(react@19.2.5)
 
-  next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(sass@1.98.0):
+  next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5):
     dependencies:
       '@next/env': 16.2.3
       '@swc/helpers': 0.5.15
@@ -15459,7 +14321,6 @@ snapshots:
       '@next/swc-win32-arm64-msvc': 16.2.3
       '@next/swc-win32-x64-msvc': 16.2.3
       '@playwright/test': 1.59.1
-      sass: 1.98.0
       sharp: 0.34.5
     transitivePeerDependencies:
       - '@babel/core'
@@ -15492,12 +14353,12 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  nuqs@2.8.9(next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(sass@1.98.0))(react@19.2.5):
+  nuqs@2.8.9(next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react@19.2.5):
     dependencies:
       '@standard-schema/spec': 1.0.0
       react: 19.2.5
     optionalDependencies:
-      next: 16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(sass@1.98.0)
+      next: 16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
 
   object-assign@4.1.1: {}
 
@@ -15546,7 +14407,7 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
-  oxc-parser@0.121.0(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2):
+  oxc-parser@0.121.0(@emnapi/runtime@1.9.1):
     dependencies:
       '@oxc-project/types': 0.121.0
     optionalDependencies:
@@ -15566,7 +14427,7 @@ snapshots:
       '@oxc-parser/binding-linux-x64-gnu': 0.121.0
       '@oxc-parser/binding-linux-x64-musl': 0.121.0
       '@oxc-parser/binding-openharmony-arm64': 0.121.0
-      '@oxc-parser/binding-wasm32-wasi': 0.121.0(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+      '@oxc-parser/binding-wasm32-wasi': 0.121.0(@emnapi/runtime@1.9.1)
       '@oxc-parser/binding-win32-arm64-msvc': 0.121.0
       '@oxc-parser/binding-win32-ia32-msvc': 0.121.0
       '@oxc-parser/binding-win32-x64-msvc': 0.121.0
@@ -15574,7 +14435,7 @@ snapshots:
       - '@emnapi/core'
       - '@emnapi/runtime'
 
-  oxc-resolver@11.19.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2):
+  oxc-resolver@11.19.1(@emnapi/runtime@1.9.1):
     optionalDependencies:
       '@oxc-resolver/binding-android-arm-eabi': 11.19.1
       '@oxc-resolver/binding-android-arm64': 11.19.1
@@ -15592,7 +14453,7 @@ snapshots:
       '@oxc-resolver/binding-linux-x64-gnu': 11.19.1
       '@oxc-resolver/binding-linux-x64-musl': 11.19.1
       '@oxc-resolver/binding-openharmony-arm64': 11.19.1
-      '@oxc-resolver/binding-wasm32-wasi': 11.19.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+      '@oxc-resolver/binding-wasm32-wasi': 11.19.1(@emnapi/runtime@1.9.1)
       '@oxc-resolver/binding-win32-arm64-msvc': 11.19.1
       '@oxc-resolver/binding-win32-ia32-msvc': 11.19.1
       '@oxc-resolver/binding-win32-x64-msvc': 11.19.1
@@ -16023,13 +14884,12 @@ snapshots:
       react-draggable: 4.5.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       tslib: 2.6.2
 
-  react-server-dom-webpack@19.2.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3)):
+  react-server-dom-webpack@19.2.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5):
     dependencies:
       acorn-loose: 8.5.2
       neo-async: 2.6.2
       react: 19.2.5
       react-dom: 19.2.5(react@19.2.5)
-      webpack: 5.105.4(esbuild@0.27.2)(uglify-js@3.19.3)
       webpack-sources: 3.3.4
 
   react-sortablejs@6.1.4(@types/sortablejs@1.15.9)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(sortablejs@1.15.7):
@@ -16095,9 +14955,6 @@ snapshots:
       util-deprecate: 1.0.2
     optional: true
 
-  readdirp@4.1.2:
-    optional: true
-
   recast@0.23.11:
     dependencies:
       ast-types: 0.16.1
@@ -16273,8 +15130,6 @@ snapshots:
 
   repeat-string@1.6.1: {}
 
-  require-from-string@2.0.2: {}
-
   reselect@5.1.1: {}
 
   reserved-identifiers@1.2.0: {}
@@ -16295,37 +15150,6 @@ snapshots:
 
   robust-predicates@3.0.3: {}
 
-  rollup@4.59.0:
-    dependencies:
-      '@types/estree': 1.0.8
-    optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.59.0
-      '@rollup/rollup-android-arm64': 4.59.0
-      '@rollup/rollup-darwin-arm64': 4.59.0
-      '@rollup/rollup-darwin-x64': 4.59.0
-      '@rollup/rollup-freebsd-arm64': 4.59.0
-      '@rollup/rollup-freebsd-x64': 4.59.0
-      '@rollup/rollup-linux-arm-gnueabihf': 4.59.0
-      '@rollup/rollup-linux-arm-musleabihf': 4.59.0
-      '@rollup/rollup-linux-arm64-gnu': 4.59.0
-      '@rollup/rollup-linux-arm64-musl': 4.59.0
-      '@rollup/rollup-linux-loong64-gnu': 4.59.0
-      '@rollup/rollup-linux-loong64-musl': 4.59.0
-      '@rollup/rollup-linux-ppc64-gnu': 4.59.0
-      '@rollup/rollup-linux-ppc64-musl': 4.59.0
-      '@rollup/rollup-linux-riscv64-gnu': 4.59.0
-      '@rollup/rollup-linux-riscv64-musl': 4.59.0
-      '@rollup/rollup-linux-s390x-gnu': 4.59.0
-      '@rollup/rollup-linux-x64-gnu': 4.59.0
-      '@rollup/rollup-linux-x64-musl': 4.59.0
-      '@rollup/rollup-openbsd-x64': 4.59.0
-      '@rollup/rollup-openharmony-arm64': 4.59.0
-      '@rollup/rollup-win32-arm64-msvc': 4.59.0
-      '@rollup/rollup-win32-ia32-msvc': 4.59.0
-      '@rollup/rollup-win32-x64-gnu': 4.59.0
-      '@rollup/rollup-win32-x64-msvc': 4.59.0
-      fsevents: 2.3.3
-
   roughjs@4.6.6:
     dependencies:
       hachure-fill: 0.5.2
@@ -16346,15 +15170,6 @@ snapshots:
 
   safe-json-stringify@1.2.0: {}
 
-  sass@1.98.0:
-    dependencies:
-      chokidar: 4.0.3
-      immutable: 5.1.5
-      source-map-js: 1.2.1
-    optionalDependencies:
-      '@parcel/watcher': 2.5.6
-    optional: true
-
   satori@0.16.0:
     dependencies:
       '@shuding/opentype.js': 1.4.0-beta.0
@@ -16373,13 +15188,6 @@ snapshots:
 
   scheduler@0.27.0: {}
 
-  schema-utils@4.3.3:
-    dependencies:
-      '@types/json-schema': 7.0.15
-      ajv: 8.18.0
-      ajv-formats: 2.1.1(ajv@8.18.0)
-      ajv-keywords: 5.1.0(ajv@8.18.0)
-
   screenfull@5.2.0: {}
 
   scslre@0.3.0:
@@ -16448,9 +15256,6 @@ snapshots:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
-  siginfo@2.0.0:
-    optional: true
-
   simple-concat@1.0.1:
     optional: true
 
@@ -16533,9 +15338,6 @@ snapshots:
 
   srvx@0.11.15: {}
 
-  stackback@0.0.2:
-    optional: true
-
   stackframe@1.3.4: {}
 
   state-local@1.0.7: {}
@@ -16713,35 +15515,6 @@ snapshots:
       minizlib: 3.1.0
       yallist: 5.0.0
 
-  terser-webpack-plugin@5.4.0(esbuild@0.27.2)(uglify-js@3.19.3)(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3)):
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.31
-      jest-worker: 27.5.1
-      schema-utils: 4.3.3
-      terser: 5.46.1
-      webpack: 5.105.4(esbuild@0.27.2)(uglify-js@3.19.3)
-    optionalDependencies:
-      esbuild: 0.27.2
-      uglify-js: 3.19.3
-
-  terser-webpack-plugin@5.4.0(esbuild@0.27.2)(webpack@5.105.4(esbuild@0.27.2)):
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.31
-      jest-worker: 27.5.1
-      schema-utils: 4.3.3
-      terser: 5.46.1
-      webpack: 5.105.4(esbuild@0.27.2)
-    optionalDependencies:
-      esbuild: 0.27.2
-    optional: true
-
-  terser@5.46.1:
-    dependencies:
-      '@jridgewell/source-map': 0.3.11
-      acorn: 8.16.0
-      commander: 2.20.3
-      source-map-support: 0.5.21
-
   thenify-all@1.6.0:
     dependencies:
       thenify: 3.3.1
@@ -17046,21 +15819,21 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vinext@0.0.41(453b4e184a832f83060410b31544dc36):
+  vinext@0.0.41(@mdx-js/rollup@3.1.1)(@vitejs/plugin-react@6.0.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)))(@vitejs/plugin-rsc@0.5.24(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(react-dom@19.2.5(react@19.2.5))(react-server-dom-webpack@19.2.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react@19.2.5))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react-server-dom-webpack@19.2.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react@19.2.5)(typescript@6.0.2):
     dependencies:
-      '@unpic/react': 1.0.2(next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(sass@1.98.0))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@unpic/react': 1.0.2(next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@vercel/og': 0.8.6
-      '@vitejs/plugin-react': 6.0.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))
+      '@vitejs/plugin-react': 6.0.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))
       magic-string: 0.30.21
       react: 19.2.5
       react-dom: 19.2.5(react@19.2.5)
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
       vite-plugin-commonjs: 0.10.4
-      vite-tsconfig-paths: 6.1.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2)
+      vite-tsconfig-paths: 6.1.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2)
     optionalDependencies:
-      '@mdx-js/rollup': 3.1.1(rollup@4.59.0)
-      '@vitejs/plugin-rsc': 0.5.24(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(react-dom@19.2.5(react@19.2.5))(react-server-dom-webpack@19.2.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3)))(react@19.2.5)
-      react-server-dom-webpack: 19.2.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))
+      '@mdx-js/rollup': 3.1.1
+      '@vitejs/plugin-rsc': 0.5.24(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(react-dom@19.2.5(react@19.2.5))(react-server-dom-webpack@19.2.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react@19.2.5)
+      react-server-dom-webpack: 19.2.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
     transitivePeerDependencies:
       - next
       - supports-color
@@ -17079,9 +15852,9 @@ snapshots:
       fast-glob: 3.3.3
       magic-string: 0.30.21
 
-  vite-plugin-inspect@12.0.0-beta.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2)(ws@8.20.0):
+  vite-plugin-inspect@12.0.0-beta.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2)(ws@8.20.0):
     dependencies:
-      '@vitejs/devtools-kit': 0.1.11(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2)(ws@8.20.0)
+      '@vitejs/devtools-kit': 0.1.11(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2)(ws@8.20.0)
       ansis: 4.2.0
       error-stack-parser-es: 1.0.5
       obug: 2.1.1
@@ -17090,31 +15863,31 @@ snapshots:
       perfect-debounce: 2.1.0
       sirv: 3.0.2
       unplugin-utils: 0.3.1
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
     transitivePeerDependencies:
       - typescript
       - ws
 
-  vite-plugin-storybook-nextjs@3.2.4(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(sass@1.98.0))(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2):
+  vite-plugin-storybook-nextjs@3.2.4(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(next@16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.2):
     dependencies:
       '@next/env': 16.0.0
       image-size: 2.0.2
       magic-string: 0.30.21
       module-alias: 2.3.4
-      next: 16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(sass@1.98.0)
+      next: 16.2.3(@babel/core@7.29.0)(@playwright/test@1.59.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       storybook: 10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       ts-dedent: 2.2.0
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
-      vite-tsconfig-paths: 5.1.4(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2)
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+      vite-tsconfig-paths: 5.1.4(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  vite-plus@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3):
+  vite-plus@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3):
     dependencies:
       '@oxc-project/types': 0.124.0
-      '@voidzero-dev/vite-plus-core': 0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
-      '@voidzero-dev/vite-plus-test': 0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
+      '@voidzero-dev/vite-plus-core': 0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
+      '@voidzero-dev/vite-plus-test': 0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
       oxfmt: 0.45.0
       oxlint: 1.60.0(oxlint-tsgolint@0.20.0)
       oxlint-tsgolint: 0.20.0
@@ -17157,66 +15930,74 @@ snapshots:
       - vite
       - yaml
 
-  vite-tsconfig-paths@5.1.4(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2):
+  vite-tsconfig-paths@5.1.4(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2):
     dependencies:
       debug: 4.4.3(supports-color@8.1.1)
       globrex: 0.1.2
       tsconfck: 3.1.6(typescript@6.0.2)
     optionalDependencies:
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  vite-tsconfig-paths@6.1.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2):
+  vite-tsconfig-paths@6.1.1(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(typescript@6.0.2):
     dependencies:
       debug: 4.4.3(supports-color@8.1.1)
       globrex: 0.1.2
       tsconfck: 3.1.6(typescript@6.0.2)
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  vitefu@1.1.3(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)):
+  vitefu@1.1.3(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)):
     optionalDependencies:
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
 
-  vitest-canvas-mock@1.1.4(@voidzero-dev/vite-plus-test@0.1.18):
+  vitest-browser-react@2.2.0(@types/node@25.6.0)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3):
+    dependencies:
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
+      vitest: '@voidzero-dev/vite-plus-test@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+    transitivePeerDependencies:
+      - '@arethetypeswrong/core'
+      - '@edge-runtime/vm'
+      - '@opentelemetry/api'
+      - '@tsdown/css'
+      - '@tsdown/exe'
+      - '@types/node'
+      - '@vitejs/devtools'
+      - '@vitest/coverage-istanbul'
+      - '@vitest/coverage-v8'
+      - '@vitest/ui'
+      - bufferutil
+      - esbuild
+      - happy-dom
+      - jiti
+      - jsdom
+      - less
+      - publint
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - terser
+      - tsx
+      - typescript
+      - unplugin-unused
+      - utf-8-validate
+      - vite
+      - yaml
+
+  vitest-canvas-mock@1.1.4(@voidzero-dev/vite-plus-test@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)):
     dependencies:
       cssfontparser: 1.2.1
       moo-color: 1.0.3
-      vitest: '@voidzero-dev/vite-plus-test@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
-
-  vitest@4.1.4(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(happy-dom@20.9.0):
-    dependencies:
-      '@vitest/expect': 4.1.4
-      '@vitest/mocker': 4.1.4(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))
-      '@vitest/pretty-format': 4.1.4
-      '@vitest/runner': 4.1.4
-      '@vitest/snapshot': 4.1.4
-      '@vitest/spy': 4.1.4
-      '@vitest/utils': 4.1.4
-      es-module-lexer: 2.0.0
-      expect-type: 1.3.0
-      magic-string: 0.30.21
-      obug: 2.1.1
-      pathe: 2.0.3
-      picomatch: 4.0.4
-      std-env: 4.0.0
-      tinybench: 2.9.0
-      tinyexec: 1.0.4
-      tinyglobby: 0.2.16
-      tinyrainbow: 3.1.0
-      vite: '@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
-      why-is-node-running: 2.3.0
-    optionalDependencies:
-      '@types/node': 25.6.0
-      '@vitest/coverage-v8': 4.1.4(vitest@4.1.4)
-      happy-dom: 20.9.0
-    transitivePeerDependencies:
-      - msw
-    optional: true
+      vitest: '@voidzero-dev/vite-plus-test@0.1.18(@types/node@25.6.0)(@vitest/coverage-v8@4.1.4(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(@voidzero-dev/vite-plus-core@0.1.18(@types/node@25.6.0)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.9.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
 
   void-elements@3.1.0: {}
 
@@ -17251,11 +16032,6 @@ snapshots:
 
   walk-up-path@4.0.0: {}
 
-  watchpack@2.5.1:
-    dependencies:
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-
   web-namespaces@2.0.1: {}
 
   web-vitals@5.1.0: {}
@@ -17264,71 +16040,6 @@ snapshots:
 
   webpack-virtual-modules@0.6.2: {}
 
-  webpack@5.105.4(esbuild@0.27.2):
-    dependencies:
-      '@types/eslint-scope': 3.7.7
-      '@types/estree': 1.0.8
-      '@types/json-schema': 7.0.15
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/wasm-edit': 1.14.1
-      '@webassemblyjs/wasm-parser': 1.14.1
-      acorn: 8.16.0
-      acorn-import-phases: 1.0.4(acorn@8.16.0)
-      browserslist: 4.28.1
-      chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.20.1
-      es-module-lexer: 2.0.0
-      eslint-scope: 5.1.1
-      events: 3.3.0
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-      json-parse-even-better-errors: 2.3.1
-      loader-runner: 4.3.1
-      mime-types: 2.1.35
-      neo-async: 2.6.2
-      schema-utils: 4.3.3
-      tapable: 2.3.2
-      terser-webpack-plugin: 5.4.0(esbuild@0.27.2)(webpack@5.105.4(esbuild@0.27.2))
-      watchpack: 2.5.1
-      webpack-sources: 3.3.4
-    transitivePeerDependencies:
-      - '@swc/core'
-      - esbuild
-      - uglify-js
-    optional: true
-
-  webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3):
-    dependencies:
-      '@types/eslint-scope': 3.7.7
-      '@types/estree': 1.0.8
-      '@types/json-schema': 7.0.15
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/wasm-edit': 1.14.1
-      '@webassemblyjs/wasm-parser': 1.14.1
-      acorn: 8.16.0
-      acorn-import-phases: 1.0.4(acorn@8.16.0)
-      browserslist: 4.28.1
-      chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.20.1
-      es-module-lexer: 2.0.0
-      eslint-scope: 5.1.1
-      events: 3.3.0
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-      json-parse-even-better-errors: 2.3.1
-      loader-runner: 4.3.1
-      mime-types: 2.1.35
-      neo-async: 2.6.2
-      schema-utils: 4.3.3
-      tapable: 2.3.2
-      terser-webpack-plugin: 5.4.0(esbuild@0.27.2)(uglify-js@3.19.3)(webpack@5.105.4(esbuild@0.27.2)(uglify-js@3.19.3))
-      watchpack: 2.5.1
-      webpack-sources: 3.3.4
-    transitivePeerDependencies:
-      - '@swc/core'
-      - esbuild
-      - uglify-js
-
   whatwg-encoding@3.1.1:
     dependencies:
       iconv-lite: 0.6.3
@@ -17341,12 +16052,6 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
-  why-is-node-running@2.3.0:
-    dependencies:
-      siginfo: 2.0.0
-      stackback: 0.0.2
-    optional: true
-
   word-wrap@1.2.5: {}
 
   wrappy@1.0.2: {}
@@ -17386,10 +16091,6 @@ snapshots:
       buffer-crc32: 0.2.13
       pend: 1.2.0
 
-  yjs@13.6.30:
-    dependencies:
-      lib0: 0.2.117
-
   yocto-queue@0.1.0: {}
 
   yocto-queue@1.2.2: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 12fea26d68..3dd5b403a3 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,14 +1,51 @@
-packages:
-  - web
-  - e2e
-  - sdks/nodejs-client
-  - packages/*
 allowBuilds:
   '@parcel/watcher': false
   canvas: false
   esbuild: false
   sharp: false
+autoInstallPeers: false
 blockExoticSubdeps: true
+catalogMode: prefer
+shellEmulator: true
+strictDepBuilds: true
+trustPolicy: no-downgrade
+trustPolicyExclude:
+  - chokidar@4.0.3
+  - reselect@5.1.1
+  - semver@6.3.1
+packages:
+  - web
+  - e2e
+  - sdks/nodejs-client
+  - packages/*
+overrides:
+  '@lexical/code': npm:lexical-code-no-prism@0.41.0
+  '@monaco-editor/loader': 1.7.0
+  brace-expansion@>=2.0.0 <2.0.3: 2.0.3
+  canvas: ^3.2.2
+  dompurify@>=3.1.3 <=3.3.1: 3.3.2
+  esbuild@<0.27.2: 0.27.2
+  flatted@<=3.4.1: 3.4.2
+  glob@>=10.2.0 <10.5.0: 11.1.0
+  is-core-module: npm:@nolyfill/is-core-module@^1.0.39
+  lodash-es@>=4.0.0 <= 4.17.23: 4.18.0
+  lodash@>=4.0.0 <= 4.17.23: 4.18.0
+  picomatch@<2.3.2: 2.3.2
+  picomatch@>=4.0.0 <4.0.4: 4.0.4
+  rollup@>=4.0.0 <4.59.0: 4.59.0
+  safe-buffer: ^5.2.1
+  safer-buffer: npm:@nolyfill/safer-buffer@^1.0.44
+  side-channel: npm:@nolyfill/side-channel@^1.0.44
+  smol-toml@<1.6.1: 1.6.1
+  solid-js: 1.9.11
+  string-width: ~8.2.0
+  svgo@>=3.0.0 <3.3.3: 3.3.3
+  tar@<=7.5.10: 7.5.11
+  undici@>=7.0.0 <7.24.0: 7.24.0
+  vite: npm:@voidzero-dev/vite-plus-core@0.1.18
+  vitest: npm:@voidzero-dev/vite-plus-test@0.1.18
+  yaml@>=2.0.0 <2.8.3: 2.8.3
+  yauzl@<3.2.1: 3.2.1
 catalog:
   '@amplitude/analytics-browser': 2.39.0
   '@amplitude/plugin-session-replay-browser': 1.27.7
@@ -16,7 +53,6 @@ catalog:
   '@base-ui/react': 1.4.0
   '@chromatic-com/storybook': 5.1.2
   '@cucumber/cucumber': 12.8.0
-  '@date-fns/tz': 1.4.1
   '@egoist/tailwindcss-icons': 1.9.2
   '@emoji-mart/data': 1.2.1
   '@eslint-react/eslint-plugin': 3.0.0
@@ -73,7 +109,6 @@ catalog:
   '@testing-library/jest-dom': 6.9.1
   '@testing-library/react': 16.3.2
   '@testing-library/user-event': 14.6.1
-  '@tsdown/css': 0.21.8
   '@tsslint/cli': 3.0.3
   '@tsslint/compat-eslint': 3.0.3
   '@tsslint/config': 3.0.3
@@ -81,7 +116,6 @@ catalog:
   '@types/js-yaml': 4.0.9
   '@types/negotiator': 0.6.4
   '@types/node': 25.6.0
-  '@types/postcss-js': 4.1.0
   '@types/qs': 6.15.0
   '@types/react': 19.2.14
   '@types/react-dom': 19.2.3
@@ -95,7 +129,6 @@ catalog:
   abcjs: 6.6.2
   agentation: 3.0.2
   ahooks: 3.9.7
-  autoprefixer: 10.5.0
   class-variance-authority: 0.7.1
   client-only: 0.0.1
   clsx: 2.1.1
@@ -103,7 +136,6 @@ catalog:
   code-inspector-plugin: 1.5.1
   copy-to-clipboard: 3.3.3
   cron-parser: 5.5.0
-  date-fns: 4.1.0
   dayjs: 1.11.20
   decimal.js: 10.6.0
   dompurify: 3.4.0
@@ -152,8 +184,8 @@ catalog:
   next-themes: 0.4.6
   nuqs: 2.8.9
   pinyin-pro: 3.28.1
+  playwright: 1.59.1
   postcss: 8.5.9
-  postcss-js: 5.1.0
   qrcode.react: 4.2.0
   qs: 6.15.1
   react: 19.2.5
@@ -183,7 +215,6 @@ catalog:
   tailwind-merge: 3.5.0
   tailwindcss: 4.2.2
   tldts: 7.0.28
-  tsdown: 0.21.8
   tsx: 4.21.0
   typescript: 6.0.2
   uglify-js: 3.19.3
@@ -195,42 +226,8 @@ catalog:
   vite-plugin-inspect: 12.0.0-beta.1
   vite-plus: 0.1.18
   vitest: npm:@voidzero-dev/vite-plus-test@0.1.18
+  vitest-browser-react: 2.2.0
   vitest-canvas-mock: 1.1.4
   zod: 4.3.6
   zundo: 2.3.0
   zustand: 5.0.12
-catalogMode: prefer
-overrides:
-  '@lexical/code': npm:lexical-code-no-prism@0.41.0
-  '@monaco-editor/loader': 1.7.0
-  brace-expansion@>=2.0.0 <2.0.3: 2.0.3
-  canvas: ^3.2.2
-  dompurify@>=3.1.3 <=3.3.1: 3.3.2
-  esbuild@<0.27.2: 0.27.2
-  flatted@<=3.4.1: 3.4.2
-  glob@>=10.2.0 <10.5.0: 11.1.0
-  is-core-module: npm:@nolyfill/is-core-module@^1.0.39
-  lodash-es@>=4.0.0 <= 4.17.23: 4.18.0
-  lodash@>=4.0.0 <= 4.17.23: 4.18.0
-  picomatch@<2.3.2: 2.3.2
-  picomatch@>=4.0.0 <4.0.4: 4.0.4
-  rollup@>=4.0.0 <4.59.0: 4.59.0
-  safe-buffer: ^5.2.1
-  safer-buffer: npm:@nolyfill/safer-buffer@^1.0.44
-  side-channel: npm:@nolyfill/side-channel@^1.0.44
-  smol-toml@<1.6.1: 1.6.1
-  solid-js: 1.9.11
-  string-width: ~8.2.0
-  svgo@>=3.0.0 <3.3.3: 3.3.3
-  tar@<=7.5.10: 7.5.11
-  undici@>=7.0.0 <7.24.0: 7.24.0
-  vite: npm:@voidzero-dev/vite-plus-core@0.1.18
-  vitest: npm:@voidzero-dev/vite-plus-test@0.1.18
-  yaml@>=2.0.0 <2.8.3: 2.8.3
-  yauzl@<3.2.1: 3.2.1
-strictDepBuilds: true
-trustPolicy: no-downgrade
-trustPolicyExclude:
-  - chokidar@4.0.3
-  - reselect@5.1.1
-  - semver@6.3.1

From ae9c4244d6230b628d286bb38a3223e521989bc8 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Sat, 18 Apr 2026 15:13:54 +0800
Subject: [PATCH 21/24] feat(dify-ui): Meter primitive and billing adoption
 (#35380)

---
 packages/dify-ui/package.json                 |   4 +
 packages/dify-ui/src/context-menu/index.tsx   |   1 -
 packages/dify-ui/src/dialog/index.tsx         |   1 -
 .../src/meter/__tests__/index.spec.tsx        | 128 ++++++++++++++++++
 packages/dify-ui/src/meter/index.stories.tsx  | 115 ++++++++++++++++
 packages/dify-ui/src/meter/index.tsx          |  88 ++++++++++++
 packages/dify-ui/src/popover/index.tsx        |   2 -
 packages/dify-ui/src/select/index.tsx         |   3 -
 packages/dify-ui/src/slider/index.tsx         |   5 -
 .../src/toast/__tests__/index.spec.tsx        |  18 ++-
 .../billing/billing-integration.test.tsx      |  24 ++--
 .../__tests__/index.spec.tsx                  |  21 ++-
 .../billing/apps-full-in-dialog/index.tsx     |  27 ++--
 .../progress-bar/__tests__/index.spec.tsx     |  58 --------
 .../components/billing/progress-bar/index.tsx |  40 ------
 .../usage-info/__tests__/index.spec.tsx       |  45 +++---
 .../__tests__/vector-space-info.spec.tsx      |  81 ++++++-----
 .../components/billing/usage-info/index.tsx   | 114 ++++++++--------
 .../credits-exhausted-alert.tsx               |  22 +--
 19 files changed, 505 insertions(+), 292 deletions(-)
 create mode 100644 packages/dify-ui/src/meter/__tests__/index.spec.tsx
 create mode 100644 packages/dify-ui/src/meter/index.stories.tsx
 create mode 100644 packages/dify-ui/src/meter/index.tsx
 delete mode 100644 web/app/components/billing/progress-bar/__tests__/index.spec.tsx
 delete mode 100644 web/app/components/billing/progress-bar/index.tsx

diff --git a/packages/dify-ui/package.json b/packages/dify-ui/package.json
index b3430ab4ee..e1b7a3c1ef 100644
--- a/packages/dify-ui/package.json
+++ b/packages/dify-ui/package.json
@@ -37,6 +37,10 @@
       "types": "./src/dropdown-menu/index.tsx",
       "import": "./src/dropdown-menu/index.tsx"
     },
+    "./meter": {
+      "types": "./src/meter/index.tsx",
+      "import": "./src/meter/index.tsx"
+    },
     "./number-field": {
       "types": "./src/number-field/index.tsx",
       "import": "./src/number-field/index.tsx"
diff --git a/packages/dify-ui/src/context-menu/index.tsx b/packages/dify-ui/src/context-menu/index.tsx
index fc2ae1d454..10b9f2c206 100644
--- a/packages/dify-ui/src/context-menu/index.tsx
+++ b/packages/dify-ui/src/context-menu/index.tsx
@@ -17,7 +17,6 @@ import {
 } from '../overlay-shared'
 import { parsePlacement } from '../placement'
 
-/** @public */
 export type { Placement }
 
 export const ContextMenu = BaseContextMenu.Root
diff --git a/packages/dify-ui/src/dialog/index.tsx b/packages/dify-ui/src/dialog/index.tsx
index c24acd5924..517d6cc9fc 100644
--- a/packages/dify-ui/src/dialog/index.tsx
+++ b/packages/dify-ui/src/dialog/index.tsx
@@ -12,7 +12,6 @@ import { Dialog as BaseDialog } from '@base-ui/react/dialog'
 import { cn } from '../cn'
 
 export const Dialog = BaseDialog.Root
-/** @public */
 export const DialogTrigger = BaseDialog.Trigger
 export const DialogTitle = BaseDialog.Title
 export const DialogDescription = BaseDialog.Description
diff --git a/packages/dify-ui/src/meter/__tests__/index.spec.tsx b/packages/dify-ui/src/meter/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..01dd0fa081
--- /dev/null
+++ b/packages/dify-ui/src/meter/__tests__/index.spec.tsx
@@ -0,0 +1,128 @@
+import { render } from 'vitest-browser-react'
+import {
+  MeterIndicator,
+  MeterLabel,
+  MeterRoot,
+  MeterTrack,
+  MeterValue,
+} from '../index'
+
+describe('Meter compound primitives', () => {
+  it('exposes role="meter" with ARIA value metadata', async () => {
+    const screen = await render(
+      <MeterRoot value={40} aria-label="Quota">
+        <MeterTrack>
+          <MeterIndicator />
+        </MeterTrack>
+      </MeterRoot>,
+    )
+
+    const meter = screen.getByLabelText('Quota')
+    await expect.element(meter).toHaveAttribute('role', 'meter')
+    await expect.element(meter).toHaveAttribute('aria-valuemin', '0')
+    await expect.element(meter).toHaveAttribute('aria-valuemax', '100')
+    await expect.element(meter).toHaveAttribute('aria-valuenow', '40')
+  })
+
+  it('respects custom min and max', async () => {
+    const screen = await render(
+      <MeterRoot value={3} min={1} max={5} aria-label="Quota">
+        <MeterTrack>
+          <MeterIndicator />
+        </MeterTrack>
+      </MeterRoot>,
+    )
+
+    const meter = screen.getByLabelText('Quota')
+    await expect.element(meter).toHaveAttribute('aria-valuemin', '1')
+    await expect.element(meter).toHaveAttribute('aria-valuemax', '5')
+    await expect.element(meter).toHaveAttribute('aria-valuenow', '3')
+  })
+
+  it('sets indicator width from value/min/max', async () => {
+    const screen = await render(
+      <MeterRoot value={42} aria-label="Quota">
+        <MeterTrack>
+          <MeterIndicator data-testid="indicator" />
+        </MeterTrack>
+      </MeterRoot>,
+    )
+
+    const indicator = screen.getByTestId('indicator').element() as HTMLElement
+    expect(indicator.getAttribute('style')).toContain('width: 42%')
+  })
+
+  it('applies tone="error" to the indicator', async () => {
+    const screen = await render(
+      <MeterRoot value={95} aria-label="Quota">
+        <MeterTrack>
+          <MeterIndicator tone="error" data-testid="indicator" />
+        </MeterTrack>
+      </MeterRoot>,
+    )
+
+    const indicator = screen.getByTestId('indicator').element() as HTMLElement
+    expect(indicator.className).toContain('bg-components-progress-error-progress')
+  })
+
+  it('applies tone="warning" to the indicator', async () => {
+    const screen = await render(
+      <MeterRoot value={85} aria-label="Quota">
+        <MeterTrack>
+          <MeterIndicator tone="warning" data-testid="indicator" />
+        </MeterTrack>
+      </MeterRoot>,
+    )
+
+    const indicator = screen.getByTestId('indicator').element() as HTMLElement
+    expect(indicator.className).toContain('bg-components-progress-warning-progress')
+  })
+
+  it('defaults to the neutral tone when none is supplied', async () => {
+    const screen = await render(
+      <MeterRoot value={25} aria-label="Quota">
+        <MeterTrack>
+          <MeterIndicator data-testid="indicator" />
+        </MeterTrack>
+      </MeterRoot>,
+    )
+
+    const indicator = screen.getByTestId('indicator').element() as HTMLElement
+    expect(indicator.className).toContain('bg-components-progress-bar-progress-solid')
+  })
+
+  it('forwards className to MeterTrack alongside the themed base classes', async () => {
+    const screen = await render(
+      <MeterRoot value={10} aria-label="Quota">
+        <MeterTrack className="custom-track" data-testid="track">
+          <MeterIndicator />
+        </MeterTrack>
+      </MeterRoot>,
+    )
+
+    const track = screen.getByTestId('track').element() as HTMLElement
+    expect(track.className).toContain('custom-track')
+    expect(track.className).toContain('bg-components-progress-bar-bg')
+  })
+
+  it('renders MeterLabel and MeterValue inside a compound layout', async () => {
+    const screen = await render(
+      <MeterRoot
+        value={0.42}
+        min={0}
+        max={1}
+        format={{ style: 'percent', maximumFractionDigits: 0 }}
+        aria-label="Score"
+      >
+        <MeterLabel>Score</MeterLabel>
+        <MeterTrack>
+          <MeterIndicator />
+        </MeterTrack>
+        <MeterValue />
+      </MeterRoot>,
+    )
+
+    await expect.element(screen.getByText('Score')).toBeInTheDocument()
+    await expect.element(screen.getByText('42%')).toBeInTheDocument()
+  })
+})
diff --git a/packages/dify-ui/src/meter/index.stories.tsx b/packages/dify-ui/src/meter/index.stories.tsx
new file mode 100644
index 0000000000..f1b8bb46f7
--- /dev/null
+++ b/packages/dify-ui/src/meter/index.stories.tsx
@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { MeterIndicator, MeterLabel, MeterRoot, MeterTrack, MeterValue } from '.'
+
+const meta = {
+  title: 'Base/UI/Meter',
+  component: MeterRoot,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A graphical display of a numeric value within a known range. '
+          + 'Use the compound primitives (`MeterRoot / MeterTrack / MeterIndicator / '
+          + 'MeterValue / MeterLabel`) for quota, capacity, or score indicators; do '
+          + 'not use for task-completion progress.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof MeterRoot>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    'value': 42,
+    'aria-label': 'Quota used',
+  },
+  render: args => (
+    <div className="w-[320px]">
+      <MeterRoot {...args}>
+        <MeterTrack>
+          <MeterIndicator />
+        </MeterTrack>
+      </MeterRoot>
+    </div>
+  ),
+}
+
+export const Warning: Story = {
+  args: {
+    'value': 85,
+    'aria-label': 'Quota used',
+  },
+  render: args => (
+    <div className="w-[320px]">
+      <MeterRoot {...args}>
+        <MeterTrack>
+          <MeterIndicator tone="warning" />
+        </MeterTrack>
+      </MeterRoot>
+    </div>
+  ),
+}
+
+export const Error: Story = {
+  args: {
+    'value': 100,
+    'aria-label': 'Quota used',
+  },
+  render: args => (
+    <div className="w-[320px]">
+      <MeterRoot {...args}>
+        <MeterTrack>
+          <MeterIndicator tone="error" />
+        </MeterTrack>
+      </MeterRoot>
+    </div>
+  ),
+}
+
+export const ComposedWithLabelAndValue: Story = {
+  args: {
+    'value': 62,
+    'aria-label': 'Storage used',
+  },
+  render: args => (
+    <div className="w-[320px] space-y-2 rounded-xl bg-components-panel-bg p-4">
+      <MeterRoot {...args}>
+        <div className="flex items-center justify-between">
+          <MeterLabel>Storage</MeterLabel>
+          <MeterValue />
+        </div>
+        <MeterTrack className="mt-2">
+          <MeterIndicator tone="warning" />
+        </MeterTrack>
+      </MeterRoot>
+    </div>
+  ),
+}
+
+export const PercentFormatted: Story = {
+  args: {
+    'value': 0.73,
+    'min': 0,
+    'max': 1,
+    'format': { style: 'percent', maximumFractionDigits: 0 },
+    'aria-label': 'Retrieval score',
+  },
+  render: args => (
+    <div className="w-[320px] space-y-2">
+      <MeterRoot {...args}>
+        <div className="flex items-center justify-between">
+          <MeterLabel>Score</MeterLabel>
+          <MeterValue />
+        </div>
+        <MeterTrack className="mt-2">
+          <MeterIndicator />
+        </MeterTrack>
+      </MeterRoot>
+    </div>
+  ),
+}
diff --git a/packages/dify-ui/src/meter/index.tsx b/packages/dify-ui/src/meter/index.tsx
new file mode 100644
index 0000000000..c7dd7a8b9c
--- /dev/null
+++ b/packages/dify-ui/src/meter/index.tsx
@@ -0,0 +1,88 @@
+'use client'
+
+/**
+ * Meter — a graphical display of a numeric value within a known range
+ * (quota usage, capacity, scores). For task-completion semantics use a
+ * Progress primitive instead; `role="meter"` and `role="progressbar"` are
+ * not interchangeable.
+ *
+ * Consumers import from `@langgenius/dify-ui/meter` and must NOT import
+ * `@base-ui/react/meter` directly.
+ */
+
+import type { VariantProps } from 'class-variance-authority'
+import { Meter as BaseMeter } from '@base-ui/react/meter'
+import { cva } from 'class-variance-authority'
+import { cn } from '../cn'
+
+export const MeterRoot = BaseMeter.Root
+export type MeterRootProps = BaseMeter.Root.Props
+
+const meterTrackClassName
+  = 'relative block h-1 w-full overflow-hidden rounded-md bg-components-progress-bar-bg'
+
+export type MeterTrackProps = BaseMeter.Track.Props
+
+export function MeterTrack({ className, ...props }: MeterTrackProps) {
+  return (
+    <BaseMeter.Track
+      className={cn(meterTrackClassName, className)}
+      {...props}
+    />
+  )
+}
+
+const meterIndicatorVariants = cva(
+  'block h-full rounded-md transition-[width] motion-reduce:transition-none',
+  {
+    variants: {
+      tone: {
+        neutral: 'bg-components-progress-bar-progress-solid',
+        warning: 'bg-components-progress-warning-progress',
+        error: 'bg-components-progress-error-progress',
+      },
+    },
+    defaultVariants: {
+      tone: 'neutral',
+    },
+  },
+)
+
+export type MeterTone = NonNullable<VariantProps<typeof meterIndicatorVariants>['tone']>
+
+export type MeterIndicatorProps = BaseMeter.Indicator.Props & {
+  tone?: MeterTone
+}
+
+export function MeterIndicator({ className, tone, ...props }: MeterIndicatorProps) {
+  return (
+    <BaseMeter.Indicator
+      className={cn(meterIndicatorVariants({ tone }), className)}
+      {...props}
+    />
+  )
+}
+
+const meterValueClassName = 'system-xs-regular text-text-tertiary tabular-nums'
+export type MeterValueProps = BaseMeter.Value.Props
+
+export function MeterValue({ className, ...props }: MeterValueProps) {
+  return (
+    <BaseMeter.Value
+      className={cn(meterValueClassName, className)}
+      {...props}
+    />
+  )
+}
+
+const meterLabelClassName = 'system-xs-medium text-text-tertiary'
+export type MeterLabelProps = BaseMeter.Label.Props
+
+export function MeterLabel({ className, ...props }: MeterLabelProps) {
+  return (
+    <BaseMeter.Label
+      className={cn(meterLabelClassName, className)}
+      {...props}
+    />
+  )
+}
diff --git a/packages/dify-ui/src/popover/index.tsx b/packages/dify-ui/src/popover/index.tsx
index 32d111a1b8..f6fcd5ed43 100644
--- a/packages/dify-ui/src/popover/index.tsx
+++ b/packages/dify-ui/src/popover/index.tsx
@@ -11,9 +11,7 @@ export type { Placement }
 export const Popover = BasePopover.Root
 export const PopoverTrigger = BasePopover.Trigger
 export const PopoverClose = BasePopover.Close
-/** @public */
 export const PopoverTitle = BasePopover.Title
-/** @public */
 export const PopoverDescription = BasePopover.Description
 
 type PopoverContentProps = {
diff --git a/packages/dify-ui/src/select/index.tsx b/packages/dify-ui/src/select/index.tsx
index 62478fad21..017093c584 100644
--- a/packages/dify-ui/src/select/index.tsx
+++ b/packages/dify-ui/src/select/index.tsx
@@ -12,12 +12,10 @@ import {
 } from '../overlay-shared'
 import { parsePlacement } from '../placement'
 
-/** @public */
 export type { Placement }
 
 export const Select = BaseSelect.Root
 export const SelectValue = BaseSelect.Value
-/** @public */
 export const SelectGroup = BaseSelect.Group
 
 const selectTriggerVariants = cva(
@@ -81,7 +79,6 @@ export function SelectLabel({
   )
 }
 
-/** @public */
 export function SelectSeparator({
   className,
   ...props
diff --git a/packages/dify-ui/src/slider/index.tsx b/packages/dify-ui/src/slider/index.tsx
index cfe1361598..eafcecf751 100644
--- a/packages/dify-ui/src/slider/index.tsx
+++ b/packages/dify-ui/src/slider/index.tsx
@@ -3,7 +3,6 @@
 import { Slider as BaseSlider } from '@base-ui/react/slider'
 import { cn } from '../cn'
 
-/** @public */
 export const SliderRoot = BaseSlider.Root
 
 type SliderRootProps = BaseSlider.Root.Props<number>
@@ -15,7 +14,6 @@ const sliderControlClassName = cn(
 
 type SliderControlProps = BaseSlider.Control.Props
 
-/** @public */
 export function SliderControl({ className, ...props }: SliderControlProps) {
   return (
     <BaseSlider.Control
@@ -32,7 +30,6 @@ const sliderTrackClassName = cn(
 
 type SliderTrackProps = BaseSlider.Track.Props
 
-/** @public */
 export function SliderTrack({ className, ...props }: SliderTrackProps) {
   return (
     <BaseSlider.Track
@@ -49,7 +46,6 @@ const sliderIndicatorClassName = cn(
 
 type SliderIndicatorProps = BaseSlider.Indicator.Props
 
-/** @public */
 export function SliderIndicator({ className, ...props }: SliderIndicatorProps) {
   return (
     <BaseSlider.Indicator
@@ -71,7 +67,6 @@ const sliderThumbClassName = cn(
 
 type SliderThumbProps = BaseSlider.Thumb.Props
 
-/** @public */
 export function SliderThumb({ className, ...props }: SliderThumbProps) {
   return (
     <BaseSlider.Thumb
diff --git a/packages/dify-ui/src/toast/__tests__/index.spec.tsx b/packages/dify-ui/src/toast/__tests__/index.spec.tsx
index a1191dff86..8bdf4417e0 100644
--- a/packages/dify-ui/src/toast/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/toast/__tests__/index.spec.tsx
@@ -3,10 +3,22 @@ import { toast, ToastHost } from '../index'
 
 const asHTMLElement = (element: HTMLElement | SVGElement) => element as HTMLElement
 
+declare global {
+  // eslint-disable-next-line vars-on-top
+  var BASE_UI_ANIMATIONS_DISABLED: boolean | undefined
+}
+
 describe('base/ui/toast', () => {
+  beforeAll(() => {
+    // Base UI waits for `requestAnimationFrame` + `getAnimations().finished`
+    // before unmounting a toast. Fake timers can't reliably drive that path,
+    // so short-circuit it to keep auto-dismiss assertions deterministic in CI.
+    globalThis.BASE_UI_ANIMATIONS_DISABLED = true
+  })
+
   beforeEach(() => {
     vi.clearAllMocks()
-    vi.useFakeTimers({ shouldAdvanceTime: true })
+    vi.useFakeTimers()
     toast.dismiss()
   })
 
@@ -16,6 +28,10 @@ describe('base/ui/toast', () => {
     vi.useRealTimers()
   })
 
+  afterAll(() => {
+    globalThis.BASE_UI_ANIMATIONS_DISABLED = undefined
+  })
+
   it('should render a success toast when called through the typed shortcut', async () => {
     const screen = await render(<ToastHost />)
 
diff --git a/web/__tests__/billing/billing-integration.test.tsx b/web/__tests__/billing/billing-integration.test.tsx
index 64d358cbe6..90589ae1e4 100644
--- a/web/__tests__/billing/billing-integration.test.tsx
+++ b/web/__tests__/billing/billing-integration.test.tsx
@@ -490,8 +490,8 @@ describe('Capacity Full Components Integration', () => {
       expect(screen.getByText(/upgradeBtn\.encourageShort/i)).toBeInTheDocument()
       // Should show usage/total fraction "5/5"
       expect(screen.getByText(/5\/5/)).toBeInTheDocument()
-      // Should have a progress bar rendered
-      expect(screen.getByTestId('billing-progress-bar')).toBeInTheDocument()
+      // Should have a meter rendered
+      expect(screen.getByRole('meter')).toBeInTheDocument()
     })
 
     it('should display upgrade tip and upgrade button for professional plan', () => {
@@ -531,10 +531,9 @@ describe('Capacity Full Components Integration', () => {
         total: { buildApps: 5 },
       })
 
-      render(<AppsFull loc="test" />)
+      const { container } = render(<AppsFull loc="test" />)
 
-      const progressBar = screen.getByTestId('billing-progress-bar')
-      expect(progressBar).toHaveClass('bg-components-progress-error-progress')
+      expect(container.querySelector('.bg-components-progress-error-progress')).toBeInTheDocument()
     })
   })
 
@@ -819,8 +818,8 @@ describe('Usage Display Edge Cases', () => {
 
       render(<PlanComp loc="test" />)
 
-      // Should have an indeterminate progress bar
-      expect(screen.getByTestId('billing-progress-bar-indeterminate')).toBeInTheDocument()
+      // Below-threshold storage renders the redacted placeholder instead of a Meter
+      expect(document.body.querySelector('[aria-hidden="true"]')).toBeInTheDocument()
     })
 
     it('should show actual usage for pro plan above threshold', () => {
@@ -846,15 +845,10 @@ describe('Usage Display Edge Cases', () => {
         total: { buildApps: 5 },
       })
 
-      render(<PlanComp loc="test" />)
+      const { container } = render(<PlanComp loc="test" />)
 
-      // 20% usage - normal color
-      const progressBars = screen.getAllByTestId('billing-progress-bar')
-      // At least one should have the normal progress color
-      const hasNormalColor = progressBars.some(bar =>
-        bar.classList.contains('bg-components-progress-bar-progress-solid'),
-      )
-      expect(hasNormalColor).toBe(true)
+      // 20% usage — at least one Meter indicator should carry the neutral tone
+      expect(container.querySelector('.bg-components-progress-bar-progress-solid')).toBeInTheDocument()
     })
   })
 
diff --git a/web/app/components/billing/apps-full-in-dialog/__tests__/index.spec.tsx b/web/app/components/billing/apps-full-in-dialog/__tests__/index.spec.tsx
index acee660f46..899908b32a 100644
--- a/web/app/components/billing/apps-full-in-dialog/__tests__/index.spec.tsx
+++ b/web/app/components/billing/apps-full-in-dialog/__tests__/index.spec.tsx
@@ -197,8 +197,8 @@ describe('AppsFull', () => {
   })
 
   describe('Edge Cases', () => {
-    it('should apply distinct progress bar styling at different usage levels', () => {
-      const renderWithUsage = (used: number, total: number) => {
+    it('applies neutral / warning / error tone at distinct usage levels', () => {
+      const findToneClass = (used: number, total: number) => {
         ;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
           plan: {
             ...baseProviderContextValue.plan,
@@ -208,19 +208,18 @@ describe('AppsFull', () => {
             reset: { apiRateLimit: null, triggerEvents: null },
           },
         }))
-        const { unmount } = render(<AppsFull loc="billing_dialog" />)
-        const className = screen.getByTestId('billing-progress-bar').className
+        const { container, unmount } = render(<AppsFull loc="billing_dialog" />)
+        const indicator = container.querySelector(
+          '[class*="bg-components-progress-"]:not([class*="progress-bar-bg"])',
+        )
+        const className = indicator?.className ?? ''
         unmount()
         return className
       }
 
-      const normalClass = renderWithUsage(2, 10)
-      const warningClass = renderWithUsage(6, 10)
-      const errorClass = renderWithUsage(8, 10)
-
-      expect(normalClass).not.toBe(warningClass)
-      expect(warningClass).not.toBe(errorClass)
-      expect(normalClass).not.toBe(errorClass)
+      expect(findToneClass(2, 10)).toContain('bg-components-progress-bar-progress-solid')
+      expect(findToneClass(6, 10)).toContain('bg-components-progress-warning-progress')
+      expect(findToneClass(8, 10)).toContain('bg-components-progress-error-progress')
     })
   })
 })
diff --git a/web/app/components/billing/apps-full-in-dialog/index.tsx b/web/app/components/billing/apps-full-in-dialog/index.tsx
index dc26c8e231..08036d055a 100644
--- a/web/app/components/billing/apps-full-in-dialog/index.tsx
+++ b/web/app/components/billing/apps-full-in-dialog/index.tsx
@@ -1,10 +1,11 @@
 'use client'
+import type { MeterTone } from '@langgenius/dify-ui/meter'
 import type { FC } from 'react'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { MeterIndicator, MeterRoot, MeterTrack } from '@langgenius/dify-ui/meter'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import ProgressBar from '@/app/components/billing/progress-bar'
 import { Plan } from '@/app/components/billing/type'
 import { mailToSupport } from '@/app/components/header/utils/util'
 import { useAppContext } from '@/context/app-context'
@@ -12,9 +13,6 @@ import { useProviderContext } from '@/context/provider-context'
 import UpgradeBtn from '../upgrade-btn'
 import s from './style.module.css'
 
-const LOW = 50
-const MIDDLE = 80
-
 const AppsFull: FC<{ loc: string, className?: string }> = ({
   loc,
   className,
@@ -25,16 +23,8 @@ const AppsFull: FC<{ loc: string, className?: string }> = ({
   const isTeam = plan.type === Plan.team
   const usage = plan.usage.buildApps
   const total = plan.total.buildApps
-  const percent = usage / total * 100
-  const color = (() => {
-    if (percent < LOW)
-      return 'bg-components-progress-bar-progress-solid'
-
-    if (percent < MIDDLE)
-      return 'bg-components-progress-warning-progress'
-
-    return 'bg-components-progress-error-progress'
-  })()
+  const percent = total > 0 ? (usage / total) * 100 : 0
+  const tone: MeterTone = percent >= 80 ? 'error' : percent >= 50 ? 'warning' : 'neutral'
   return (
     <div className={cn(
       'flex flex-col gap-3 rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg p-4 shadow-xs backdrop-blur-xs',
@@ -78,10 +68,11 @@ const AppsFull: FC<{ loc: string, className?: string }> = ({
             {total}
           </div>
         </div>
-        <ProgressBar
-          percent={percent}
-          color={color}
-        />
+        <MeterRoot value={Math.min(percent, 100)} max={100}>
+          <MeterTrack>
+            <MeterIndicator tone={tone} />
+          </MeterTrack>
+        </MeterRoot>
       </div>
     </div>
   )
diff --git a/web/app/components/billing/progress-bar/__tests__/index.spec.tsx b/web/app/components/billing/progress-bar/__tests__/index.spec.tsx
deleted file mode 100644
index 4310fab19d..0000000000
--- a/web/app/components/billing/progress-bar/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import ProgressBar from '../index'
-
-describe('ProgressBar', () => {
-  describe('Normal Mode (determinate)', () => {
-    it('renders with provided percent and color', () => {
-      render(<ProgressBar percent={42} color="bg-test-color" />)
-
-      const bar = screen.getByTestId('billing-progress-bar')
-      expect(bar.getAttribute('style')).toContain('width: 42%')
-    })
-
-    it('caps width at 100% when percent exceeds max', () => {
-      render(<ProgressBar percent={150} color="bg-test-color" />)
-
-      const bar = screen.getByTestId('billing-progress-bar')
-      expect(bar.getAttribute('style')).toContain('width: 100%')
-    })
-
-    it('renders with default color when no color prop is provided', () => {
-      render(<ProgressBar percent={20} color={undefined as unknown as string} />)
-
-      const bar = screen.getByTestId('billing-progress-bar')
-      expect(bar.getAttribute('style')).toContain('width: 20%')
-    })
-  })
-
-  describe('Indeterminate Mode', () => {
-    it('should render indeterminate progress bar when indeterminate is true', () => {
-      render(<ProgressBar percent={0} color="bg-test-color" indeterminate />)
-
-      expect(screen.getByTestId('billing-progress-bar-indeterminate')).toBeInTheDocument()
-    })
-
-    it('should not render normal progress bar when indeterminate is true', () => {
-      render(<ProgressBar percent={50} color="bg-test-color" indeterminate />)
-
-      expect(screen.queryByTestId('billing-progress-bar')).not.toBeInTheDocument()
-      expect(screen.getByTestId('billing-progress-bar-indeterminate')).toBeInTheDocument()
-    })
-
-    it('should render with different width based on indeterminateFull prop', () => {
-      const { rerender } = render(
-        <ProgressBar percent={0} color="bg-test-color" indeterminate indeterminateFull={false} />,
-      )
-
-      const bar = screen.getByTestId('billing-progress-bar-indeterminate')
-      const partialClassName = bar.className
-
-      rerender(
-        <ProgressBar percent={0} color="bg-test-color" indeterminate indeterminateFull />,
-      )
-
-      const fullClassName = screen.getByTestId('billing-progress-bar-indeterminate').className
-      expect(partialClassName).not.toBe(fullClassName)
-    })
-  })
-})
diff --git a/web/app/components/billing/progress-bar/index.tsx b/web/app/components/billing/progress-bar/index.tsx
deleted file mode 100644
index dfc2bf6fa9..0000000000
--- a/web/app/components/billing/progress-bar/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { cn } from '@langgenius/dify-ui/cn'
-
-type ProgressBarProps = {
-  percent: number
-  color: string
-  indeterminate?: boolean
-  indeterminateFull?: boolean // For Sandbox users: full width stripe
-}
-
-const ProgressBar = ({
-  percent = 0,
-  color = 'bg-components-progress-bar-progress-solid',
-  indeterminate = false,
-  indeterminateFull = false,
-}: ProgressBarProps) => {
-  if (indeterminate) {
-    return (
-      <div className="overflow-hidden rounded-md bg-components-progress-bar-bg">
-        <div
-          data-testid="billing-progress-bar-indeterminate"
-          className={cn('h-1 rounded-md bg-progress-bar-indeterminate-stripe', indeterminateFull ? 'w-full' : 'w-[30px]')}
-        />
-      </div>
-    )
-  }
-
-  return (
-    <div className="overflow-hidden rounded-md bg-components-progress-bar-bg">
-      <div
-        data-testid="billing-progress-bar"
-        className={cn('h-1 rounded-md', color)}
-        style={{
-          width: `${Math.min(percent, 100)}%`,
-        }}
-      />
-    </div>
-  )
-}
-
-export default ProgressBar
diff --git a/web/app/components/billing/usage-info/__tests__/index.spec.tsx b/web/app/components/billing/usage-info/__tests__/index.spec.tsx
index 3cbab5c662..073c2e7fe2 100644
--- a/web/app/components/billing/usage-info/__tests__/index.spec.tsx
+++ b/web/app/components/billing/usage-info/__tests__/index.spec.tsx
@@ -71,8 +71,8 @@ describe('UsageInfo', () => {
       expect(screen.getByText('billing.plansCommon.unlimited')).toBeInTheDocument()
     })
 
-    it('applies distinct styling when usage is close to or exceeds the limit', () => {
-      const { rerender } = render(
+    it('applies the neutral / warning / error tone as usage crosses thresholds', () => {
+      const { rerender, container } = render(
         <UsageInfo
           Icon={TestIcon}
           name="Storage"
@@ -81,7 +81,7 @@ describe('UsageInfo', () => {
         />,
       )
 
-      const normalBarClass = screen.getByTestId('billing-progress-bar').className
+      expect(container.querySelector('.bg-components-progress-bar-progress-solid')).toBeInTheDocument()
 
       rerender(
         <UsageInfo
@@ -92,8 +92,7 @@ describe('UsageInfo', () => {
         />,
       )
 
-      const warningBarClass = screen.getByTestId('billing-progress-bar').className
-      expect(warningBarClass).not.toBe(normalBarClass)
+      expect(container.querySelector('.bg-components-progress-warning-progress')).toBeInTheDocument()
 
       rerender(
         <UsageInfo
@@ -104,9 +103,7 @@ describe('UsageInfo', () => {
         />,
       )
 
-      const errorBarClass = screen.getByTestId('billing-progress-bar').className
-      expect(errorBarClass).not.toBe(normalBarClass)
-      expect(errorBarClass).not.toBe(warningBarClass)
+      expect(container.querySelector('.bg-components-progress-error-progress')).toBeInTheDocument()
     })
 
     it('does not render the icon when hideIcon is true', () => {
@@ -126,8 +123,8 @@ describe('UsageInfo', () => {
 
   describe('Storage Mode', () => {
     describe('Below Threshold', () => {
-      it('should render indeterminate progress bar when usage is below threshold', () => {
-        render(
+      it('should render the redacted placeholder when usage is below threshold', () => {
+        const { container } = render(
           <UsageInfo
             Icon={TestIcon}
             name="Storage"
@@ -139,8 +136,8 @@ describe('UsageInfo', () => {
           />,
         )
 
-        expect(screen.getByTestId('billing-progress-bar-indeterminate')).toBeInTheDocument()
-        expect(screen.queryByTestId('billing-progress-bar')).not.toBeInTheDocument()
+        expect(container.querySelector('[aria-hidden="true"]')).toBeInTheDocument()
+        expect(screen.queryByRole('meter')).not.toBeInTheDocument()
       })
 
       it('should display "< threshold" format when usage is below threshold (non-sandbox)', () => {
@@ -183,8 +180,8 @@ describe('UsageInfo', () => {
         expect(screen.getAllByText('MB').length).toBeGreaterThanOrEqual(1)
       })
 
-      it('should render different indeterminate bar widths for sandbox vs non-sandbox', () => {
-        const { rerender } = render(
+      it('should render different placeholder widths for sandbox vs non-sandbox', () => {
+        const { rerender, container } = render(
           <UsageInfo
             Icon={TestIcon}
             name="Storage"
@@ -197,7 +194,7 @@ describe('UsageInfo', () => {
           />,
         )
 
-        const sandboxBarClass = screen.getByTestId('billing-progress-bar-indeterminate').className
+        const sandboxBarClass = container.querySelector('.bg-progress-bar-indeterminate-stripe')!.className
 
         rerender(
           <UsageInfo
@@ -212,14 +209,14 @@ describe('UsageInfo', () => {
           />,
         )
 
-        const nonSandboxBarClass = screen.getByTestId('billing-progress-bar-indeterminate').className
+        const nonSandboxBarClass = container.querySelector('.bg-progress-bar-indeterminate-stripe')!.className
         expect(sandboxBarClass).not.toBe(nonSandboxBarClass)
       })
     })
 
     describe('Sandbox Full Capacity', () => {
-      it('should render determinate progress bar when sandbox usage >= threshold', () => {
-        render(
+      it('should render the Meter when sandbox usage >= threshold', () => {
+        const { container } = render(
           <UsageInfo
             Icon={TestIcon}
             name="Storage"
@@ -232,8 +229,8 @@ describe('UsageInfo', () => {
           />,
         )
 
-        expect(screen.getByTestId('billing-progress-bar')).toBeInTheDocument()
-        expect(screen.queryByTestId('billing-progress-bar-indeterminate')).not.toBeInTheDocument()
+        expect(screen.getByRole('meter')).toBeInTheDocument()
+        expect(container.querySelector('[aria-hidden="true"]')).toBeNull()
       })
 
       it('should display "threshold / threshold unit" format when sandbox is at full capacity', () => {
@@ -258,8 +255,8 @@ describe('UsageInfo', () => {
     })
 
     describe('Pro/Team Users Above Threshold', () => {
-      it('should render normal progress bar when usage >= threshold', () => {
-        render(
+      it('should render the Meter when usage >= threshold', () => {
+        const { container } = render(
           <UsageInfo
             Icon={TestIcon}
             name="Storage"
@@ -273,8 +270,8 @@ describe('UsageInfo', () => {
           />,
         )
 
-        expect(screen.getByTestId('billing-progress-bar')).toBeInTheDocument()
-        expect(screen.queryByTestId('billing-progress-bar-indeterminate')).not.toBeInTheDocument()
+        expect(screen.getByRole('meter')).toBeInTheDocument()
+        expect(container.querySelector('[aria-hidden="true"]')).toBeNull()
       })
 
       it('should display actual usage when usage >= threshold', () => {
diff --git a/web/app/components/billing/usage-info/__tests__/vector-space-info.spec.tsx b/web/app/components/billing/usage-info/__tests__/vector-space-info.spec.tsx
index 041845ab3b..43e132c00f 100644
--- a/web/app/components/billing/usage-info/__tests__/vector-space-info.spec.tsx
+++ b/web/app/components/billing/usage-info/__tests__/vector-space-info.spec.tsx
@@ -3,6 +3,8 @@ import { defaultPlan } from '../../config'
 import { Plan } from '../../type'
 import VectorSpaceInfo from '../vector-space-info'
 
+const queryPlaceholder = () => document.body.querySelector('[aria-hidden="true"]')
+
 // Mock provider context with configurable plan
 let mockPlanType = Plan.sandbox
 let mockVectorSpaceUsage = 30
@@ -55,16 +57,11 @@ describe('VectorSpaceInfo', () => {
       mockVectorSpaceUsage = 30
     })
 
-    it('should render indeterminate progress bar when usage is below threshold', () => {
+    it('should render the redacted placeholder when usage is below threshold', () => {
       render(<VectorSpaceInfo />)
 
-      expect(screen.getByTestId('billing-progress-bar-indeterminate')).toBeInTheDocument()
-    })
-
-    it('should render indeterminate bar for sandbox users', () => {
-      render(<VectorSpaceInfo />)
-
-      expect(screen.getByTestId('billing-progress-bar-indeterminate')).toBeInTheDocument()
+      expect(queryPlaceholder()).toBeInTheDocument()
+      expect(screen.queryByRole('meter')).not.toBeInTheDocument()
     })
 
     it('should display "< 50" format for sandbox below threshold', () => {
@@ -80,11 +77,11 @@ describe('VectorSpaceInfo', () => {
       mockVectorSpaceUsage = 50
     })
 
-    it('should render determinate progress bar when at full capacity', () => {
+    it('should render the Meter when at full capacity', () => {
       render(<VectorSpaceInfo />)
 
-      expect(screen.getByTestId('billing-progress-bar')).toBeInTheDocument()
-      expect(screen.queryByTestId('billing-progress-bar-indeterminate')).not.toBeInTheDocument()
+      expect(screen.getByRole('meter')).toBeInTheDocument()
+      expect(queryPlaceholder()).toBeNull()
     })
 
     it('should display "50 / 50 MB" format when at full capacity', () => {
@@ -101,10 +98,11 @@ describe('VectorSpaceInfo', () => {
       mockVectorSpaceUsage = 30
     })
 
-    it('should render indeterminate progress bar when usage is below threshold', () => {
+    it('should render the redacted placeholder when usage is below threshold', () => {
       render(<VectorSpaceInfo />)
 
-      expect(screen.getByTestId('billing-progress-bar-indeterminate')).toBeInTheDocument()
+      expect(queryPlaceholder()).toBeInTheDocument()
+      expect(screen.queryByRole('meter')).not.toBeInTheDocument()
     })
 
     it('should display "< 50 / total" format when below threshold', () => {
@@ -121,11 +119,11 @@ describe('VectorSpaceInfo', () => {
       mockVectorSpaceUsage = 100
     })
 
-    it('should render normal progress bar when usage >= threshold', () => {
+    it('should render the Meter when usage >= threshold', () => {
       render(<VectorSpaceInfo />)
 
-      expect(screen.getByTestId('billing-progress-bar')).toBeInTheDocument()
-      expect(screen.queryByTestId('billing-progress-bar-indeterminate')).not.toBeInTheDocument()
+      expect(screen.getByRole('meter')).toBeInTheDocument()
+      expect(queryPlaceholder()).toBeNull()
     })
 
     it('should display actual usage when above threshold', () => {
@@ -142,10 +140,11 @@ describe('VectorSpaceInfo', () => {
       mockVectorSpaceUsage = 30
     })
 
-    it('should render indeterminate progress bar when usage is below threshold', () => {
+    it('should render the redacted placeholder when usage is below threshold', () => {
       render(<VectorSpaceInfo />)
 
-      expect(screen.getByTestId('billing-progress-bar-indeterminate')).toBeInTheDocument()
+      expect(queryPlaceholder()).toBeInTheDocument()
+      expect(screen.queryByRole('meter')).not.toBeInTheDocument()
     })
 
     it('should display "< 50 / total" format when below threshold', () => {
@@ -163,11 +162,11 @@ describe('VectorSpaceInfo', () => {
       mockVectorSpaceUsage = 100
     })
 
-    it('should render normal progress bar when usage >= threshold', () => {
+    it('should render the Meter when usage >= threshold', () => {
       render(<VectorSpaceInfo />)
 
-      expect(screen.getByTestId('billing-progress-bar')).toBeInTheDocument()
-      expect(screen.queryByTestId('billing-progress-bar-indeterminate')).not.toBeInTheDocument()
+      expect(screen.getByRole('meter')).toBeInTheDocument()
+      expect(queryPlaceholder()).toBeNull()
     })
 
     it('should display actual usage when above threshold', () => {
@@ -179,23 +178,26 @@ describe('VectorSpaceInfo', () => {
   })
 
   describe('Pro/Team Plan Usage States', () => {
-    const renderAndGetBarClass = (usage: number) => {
+    const findToneClass = (usage: number) => {
       mockPlanType = Plan.professional
       mockVectorSpaceUsage = usage
-      const { unmount } = render(<VectorSpaceInfo />)
-      const className = screen.getByTestId('billing-progress-bar').className
+      const { container, unmount } = render(<VectorSpaceInfo />)
+      const indicator = container.querySelector(
+        '[class*="bg-components-progress-"]:not([class*="progress-bar-bg"])',
+      )
+      const className = indicator?.className ?? ''
       unmount()
       return className
     }
 
-    it('should show distinct progress bar styling at different usage levels', () => {
-      const normalClass = renderAndGetBarClass(100)
-      const warningClass = renderAndGetBarClass(4100)
-      const errorClass = renderAndGetBarClass(5200)
+    it('should apply neutral / warning / error tone at distinct usage levels', () => {
+      const normalClass = findToneClass(100)
+      const warningClass = findToneClass(4100)
+      const errorClass = findToneClass(5200)
 
-      expect(normalClass).not.toBe(warningClass)
-      expect(warningClass).not.toBe(errorClass)
-      expect(normalClass).not.toBe(errorClass)
+      expect(normalClass).toContain('bg-components-progress-bar-progress-solid')
+      expect(warningClass).toContain('bg-components-progress-warning-progress')
+      expect(errorClass).toContain('bg-components-progress-error-progress')
     })
   })
 
@@ -214,16 +216,11 @@ describe('VectorSpaceInfo', () => {
       expect(screen.getByText('102400MB')).toBeInTheDocument()
     })
 
-    it('should render indeterminate progress bar when usage is below threshold', () => {
+    it('should render the redacted placeholder when usage is below threshold', () => {
       render(<VectorSpaceInfo />)
 
-      expect(screen.getByTestId('billing-progress-bar-indeterminate')).toBeInTheDocument()
-    })
-
-    it('should render indeterminate bar for enterprise below threshold', () => {
-      render(<VectorSpaceInfo />)
-
-      expect(screen.getByTestId('billing-progress-bar-indeterminate')).toBeInTheDocument()
+      expect(queryPlaceholder()).toBeInTheDocument()
+      expect(screen.queryByRole('meter')).not.toBeInTheDocument()
     })
 
     it('should display "< 50 / total" format when below threshold', () => {
@@ -241,11 +238,11 @@ describe('VectorSpaceInfo', () => {
       mockVectorSpaceTotal = 102400 // 100 GB
     })
 
-    it('should render normal progress bar when usage >= threshold', () => {
+    it('should render the Meter when usage >= threshold', () => {
       render(<VectorSpaceInfo />)
 
-      expect(screen.getByTestId('billing-progress-bar')).toBeInTheDocument()
-      expect(screen.queryByTestId('billing-progress-bar-indeterminate')).not.toBeInTheDocument()
+      expect(screen.getByRole('meter')).toBeInTheDocument()
+      expect(queryPlaceholder()).toBeNull()
     })
 
     it('should display actual usage when above threshold', () => {
diff --git a/web/app/components/billing/usage-info/index.tsx b/web/app/components/billing/usage-info/index.tsx
index a88523c4a5..68e889f320 100644
--- a/web/app/components/billing/usage-info/index.tsx
+++ b/web/app/components/billing/usage-info/index.tsx
@@ -1,11 +1,12 @@
 'use client'
-import type { ComponentType, FC } from 'react'
+import type { MeterTone } from '@langgenius/dify-ui/meter'
+import type { ComponentType, FC, ReactNode } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import { MeterIndicator, MeterRoot, MeterTrack } from '@langgenius/dify-ui/meter'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
 import { NUM_INFINITE } from '../config'
-import ProgressBar from '../progress-bar'
 
 type Props = {
   className?: string
@@ -26,8 +27,6 @@ type Props = {
   isSandboxPlan?: boolean
 }
 
-const WARNING_THRESHOLD = 80
-
 const UsageInfo: FC<Props> = ({
   className,
   Icon,
@@ -47,20 +46,21 @@ const UsageInfo: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
 
-  // Special display logic for usage below threshold (only in storage mode)
   const isBelowThreshold = storageMode && usage < storageThreshold
-  // Sandbox at full capacity (usage >= threshold and it's sandbox plan)
   const isSandboxFull = storageMode && isSandboxPlan && usage >= storageThreshold
 
-  const percent = usage / total * 100
-  const getProgressColor = () => {
-    if (percent >= 100)
-      return 'bg-components-progress-error-progress'
-    if (percent >= WARNING_THRESHOLD)
-      return 'bg-components-progress-warning-progress'
-    return 'bg-components-progress-bar-progress-solid'
-  }
-  const color = getProgressColor()
+  // Single source of truth: sandbox full is visually clamped to 100%; all other
+  // determinate cases show the real percent capped at 100. Tone derives from
+  // this, so we never need a separate tone override.
+  const rawPercent = total > 0 ? (usage / total) * 100 : 0
+  const effectivePercent = isSandboxFull ? 100 : Math.min(rawPercent, 100)
+  const tone: MeterTone
+    = effectivePercent >= 100
+      ? 'error'
+      : effectivePercent >= 80
+        ? 'warning'
+        : 'neutral'
+
   const isUnlimited = total === NUM_INFINITE
   let totalDisplay: string | number = isUnlimited ? t('plansCommon.unlimited', { ns: 'billing' }) : total
   if (!isUnlimited && unit && unitPosition === 'inline')
@@ -68,35 +68,26 @@ const UsageInfo: FC<Props> = ({
   const showUnit = !!unit && !isUnlimited && unitPosition === 'suffix'
   const resetText = resetHint ?? (typeof resetInDays === 'number' ? t('usagePage.resetsIn', { ns: 'billing', count: resetInDays }) : undefined)
 
-  const renderRightInfo = () => {
-    if (resetText) {
-      return (
+  const rightInfo: ReactNode = resetText
+    ? (
         <div className="ml-auto flex-1 text-right system-xs-regular text-text-tertiary">
           {resetText}
         </div>
       )
-    }
-    if (showUnit) {
-      return (
-        <div className="ml-auto system-xs-medium text-text-tertiary">
-          {unit}
-        </div>
-      )
-    }
-    return null
-  }
+    : showUnit
+      ? (
+          <div className="ml-auto system-xs-medium text-text-tertiary">
+            {unit}
+          </div>
+        )
+      : null
 
-  // Render usage display
-  const renderUsageDisplay = () => {
-    // Storage mode: special display logic
+  const usageDisplay: ReactNode = (() => {
     if (storageMode) {
-      // Sandbox user at full capacity
       if (isSandboxFull) {
         return (
           <div className="flex items-center gap-1">
-            <span>
-              {storageThreshold}
-            </span>
+            <span>{storageThreshold}</span>
             <span className="system-md-regular text-text-quaternary">/</span>
             <span>
               {storageThreshold}
@@ -106,7 +97,6 @@ const UsageInfo: FC<Props> = ({
           </div>
         )
       }
-      // Usage below threshold - show "< 50 MB" or "< 50 / 5GB"
       if (isBelowThreshold) {
         return (
           <div className="flex items-center gap-1">
@@ -125,7 +115,6 @@ const UsageInfo: FC<Props> = ({
           </div>
         )
       }
-      // Pro/Team users with usage >= threshold - show actual usage
       return (
         <div className="flex items-center gap-1">
           <span>{usage}</span>
@@ -135,7 +124,6 @@ const UsageInfo: FC<Props> = ({
       )
     }
 
-    // Default display (storageMode = false)
     return (
       <div className="flex items-center gap-1">
         <span>{usage}</span>
@@ -143,9 +131,32 @@ const UsageInfo: FC<Props> = ({
         <span>{totalDisplay}</span>
       </div>
     )
-  }
+  })()
 
-  const renderWithTooltip = (children: React.ReactNode) => {
+  const bar: ReactNode = isBelowThreshold
+    ? (
+        // Decorative "< N MB" placeholder — not a meter, not a progressbar.
+        <div
+          aria-hidden="true"
+          className="overflow-hidden rounded-md bg-components-progress-bar-bg"
+        >
+          <div
+            className={cn(
+              'h-1 rounded-md bg-progress-bar-indeterminate-stripe',
+              isSandboxPlan ? 'w-full' : 'w-[30px]',
+            )}
+          />
+        </div>
+      )
+    : (
+        <MeterRoot value={effectivePercent} max={100}>
+          <MeterTrack>
+            <MeterIndicator tone={tone} />
+          </MeterTrack>
+        </MeterRoot>
+      )
+
+  const wrapWithStorageTooltip = (children: ReactNode) => {
     if (storageMode && storageTooltip) {
       return (
         <Tooltip
@@ -159,23 +170,6 @@ const UsageInfo: FC<Props> = ({
     return children
   }
 
-  // Render progress bar with optional tooltip wrapper
-  const renderProgressBar = () => {
-    const progressBar = (
-      <ProgressBar
-        percent={isBelowThreshold ? 0 : percent}
-        color={isSandboxFull ? 'bg-components-progress-error-progress' : color}
-        indeterminate={isBelowThreshold}
-        indeterminateFull={isBelowThreshold && isSandboxPlan}
-      />
-    )
-    return renderWithTooltip(progressBar)
-  }
-
-  const renderUsageWithTooltip = () => {
-    return renderWithTooltip(renderUsageDisplay())
-  }
-
   return (
     <div className={cn('flex flex-col gap-2 rounded-xl bg-components-panel-bg p-4', className)}>
       {!hideIcon && Icon && (
@@ -194,10 +188,10 @@ const UsageInfo: FC<Props> = ({
         )}
       </div>
       <div className="flex items-center gap-1 system-md-semibold text-text-primary">
-        {renderUsageWithTooltip()}
-        {renderRightInfo()}
+        {wrapWithStorageTooltip(usageDisplay)}
+        {rightInfo}
       </div>
-      {renderProgressBar()}
+      {wrapWithStorageTooltip(bar)}
     </div>
   )
 }
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-exhausted-alert.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-exhausted-alert.tsx
index 53abe1211d..69a7f488b3 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-exhausted-alert.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-exhausted-alert.tsx
@@ -1,3 +1,4 @@
+import { MeterIndicator, MeterLabel, MeterRoot, MeterTrack } from '@langgenius/dify-ui/meter'
 import { Trans, useTranslation } from 'react-i18next'
 import { CreditsCoin } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
 import { useModalContextSelector } from '@/context/modal-context'
@@ -21,7 +22,9 @@ export default function CreditsExhaustedAlert({ hasApiKeyFallback }: CreditsExha
     : 'modelProvider.card.creditsExhaustedDescription'
 
   const usedCredits = totalCredits - credits
-  const usagePercent = totalCredits > 0 ? Math.min((usedCredits / totalCredits) * 100, 100) : 100
+  const hasTotal = totalCredits > 0
+  const meterValue = hasTotal ? Math.min(usedCredits, totalCredits) : 1
+  const meterMax = hasTotal ? totalCredits : 1
 
   return (
     <div className="mx-2 mt-0.5 mb-1 rounded-lg bg-background-section-burn p-3">
@@ -45,11 +48,11 @@ export default function CreditsExhaustedAlert({ hasApiKeyFallback }: CreditsExha
           />
         </div>
       </div>
-      <div className="mt-3 flex flex-col gap-1">
+      <MeterRoot value={meterValue} max={meterMax} className="mt-3 flex flex-col gap-1">
         <div className="flex items-center justify-between">
-          <span className="system-xs-medium text-text-tertiary">
+          <MeterLabel className="system-xs-medium text-text-tertiary">
             {t('modelProvider.card.usageLabel', { ns: 'common' })}
-          </span>
+          </MeterLabel>
           <div className="flex items-center gap-0.5 system-xs-regular text-text-tertiary">
             <CreditsCoin className="h-3 w-3" />
             <span>
@@ -59,13 +62,10 @@ export default function CreditsExhaustedAlert({ hasApiKeyFallback }: CreditsExha
             </span>
           </div>
         </div>
-        <div className="h-1 overflow-hidden rounded-md bg-components-progress-error-bg">
-          <div
-            className="h-full rounded-l-[6px] bg-components-progress-error-progress"
-            style={{ width: `${usagePercent}%` }}
-          />
-        </div>
-      </div>
+        <MeterTrack className="bg-components-progress-error-bg">
+          <MeterIndicator tone="error" />
+        </MeterTrack>
+      </MeterRoot>
     </div>
   )
 }

From 3e876e173af5d61b48e1710c5f9e3fd327a526f1 Mon Sep 17 00:00:00 2001
From: 99 <wh2099@pm.me>
Date: Sat, 18 Apr 2026 19:16:24 +0800
Subject: [PATCH 22/24] chore(api): adapt Graphon 0.2.2 upgrade (#35377)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../console/app/conversation_variables.py     |   2 +-
 .../console/app/workflow_draft_variable.py    |   6 +-
 .../service_api/app/conversation.py           |   4 +-
 api/core/agent/base_agent_runner.py           |   2 +-
 .../model_config/converter.py                 |   2 +-
 api/core/app/apps/agent_chat/app_runner.py    |   2 +-
 .../easy_ui_based_generate_task_pipeline.py   |   2 +-
 api/core/app/workflow/file_runtime.py         |   7 +-
 api/core/app/workflow/layers/persistence.py   |   2 +-
 api/core/datasource/datasource_manager.py     |   4 +-
 api/core/entities/provider_configuration.py   |   6 +-
 .../code_executor/template_transformer.py     |   2 +-
 api/core/helper/moderation.py                 |   2 +-
 api/core/helper/ssrf_proxy.py                 |  44 +++
 api/core/model_manager.py                     |  38 +-
 api/core/plugin/impl/model_runtime.py         |   6 +-
 .../prompt/agent_history_prompt_transform.py  |   2 +-
 api/core/rag/embedding/cached_embedding.py    |   2 +-
 api/core/rag/extractor/word_extractor.py      |  26 +-
 .../processor/paragraph_index_processor.py    |   4 +-
 api/core/rag/retrieval/dataset_retrieval.py   |   6 +-
 api/core/rag/splitter/fixed_text_splitter.py  |   2 +-
 .../repositories/human_input_repository.py    |   2 +-
 api/core/tools/tool_file_manager.py           |   2 +-
 api/core/tools/tool_manager.py                |   7 +-
 .../tools/utils/model_invocation_utils.py     |   2 +-
 api/core/tools/workflow_as_tool/tool.py       |   5 +-
 ...input_compat.py => human_input_adapter.py} |  88 ++++-
 api/core/workflow/node_factory.py             |  30 +-
 api/core/workflow/node_runtime.py             |  50 ++-
 api/core/workflow/nodes/agent/agent_node.py   |   9 +-
 .../nodes/datasource/datasource_node.py       |  10 +-
 .../knowledge_index/knowledge_index_node.py   |  13 +-
 .../knowledge_retrieval_node.py               |  33 +-
 api/factories/file_factory/builders.py        |  20 +-
 api/fields/_value_type_serializer.py          |   4 +-
 api/fields/conversation_variable_fields.py    |   4 +-
 api/fields/workflow_fields.py                 |   2 +-
 api/models/human_input.py                     |   2 +-
 api/models/utils/file_input_compat.py         | 128 ++++++-
 api/models/workflow.py                        |  13 +-
 .../src/dify_trace_tencent/tencent_trace.py   |  36 +-
 .../tencent_trace/test_tencent_trace.py       |  37 +-
 api/pyproject.toml                            |   2 +-
 api/services/app_service.py                   |   2 +-
 api/services/dataset_service.py               |   2 +-
 .../human_input_delivery_test_service.py      |   2 +-
 api/services/rag_pipeline/rag_pipeline.py     |   2 +-
 api/services/variable_truncator.py            |   2 +-
 .../workflow_draft_variable_service.py        |   8 +-
 api/services/workflow_service.py              |  15 +-
 api/tasks/mail_human_input_delivery_task.py   |   2 +-
 .../test_datasource_node_integration.py       |  24 +-
 .../workflow/nodes/test_code.py               |   5 +-
 .../workflow/nodes/test_http.py               |  10 +-
 .../workflow/nodes/test_llm.py                |   5 +-
 .../nodes/test_parameter_extractor.py         |   5 +-
 .../workflow/nodes/test_template_transform.py |   5 +-
 .../workflow/nodes/test_tool.py               |   5 +-
 .../test_human_input_form_repository_impl.py  |   2 +-
 .../test_human_input_resume_node_execution.py |  12 +-
 .../factories/test_storage_key_loader.py      |   4 +-
 ...hemy_execution_extra_content_repository.py |   2 +-
 .../test_human_input_delivery_test.py         |   2 +-
 .../test_human_input_delivery_test_service.py |   2 +-
 .../test_mail_human_input_delivery_task.py    |   2 +-
 .../controllers/console/app/test_workflow.py  |   2 +-
 .../app/workflow_draft_variables_test.py      |   8 +-
 .../service_api/app/test_conversation.py      |  28 ++
 .../test_workflow_response_converter.py       |   4 +-
 .../core/app/apps/test_pause_resume.py        |  38 +-
 .../core/app/workflow/test_file_runtime.py    |   6 +-
 .../core/app/workflow/test_node_factory.py    |   4 +-
 .../datasource/test_datasource_manager.py     |   4 +-
 .../entities/test_entities_model_entities.py  |   2 +-
 api/tests/unit_tests/core/file/test_models.py |  40 +-
 .../unit_tests/core/helper/test_ssrf_proxy.py |  59 +++
 .../test_model_provider_factory.py            |  12 +-
 .../core/plugin/test_model_runtime_adapter.py |   2 +-
 .../core/plugin/utils/test_chunk_merger.py    |   6 +-
 .../prompt/test_advanced_prompt_transform.py  |  20 +-
 .../test_agent_history_prompt_transform.py    |   2 +-
 .../core/prompt/test_prompt_transform.py      |   2 +-
 .../core/rag/extractor/test_word_extractor.py |  39 +-
 .../test_human_input_form_repository_impl.py  |   2 +-
 .../test_human_input_repository.py            |   2 +-
 api/tests/unit_tests/core/test_file.py        |   4 +-
 .../unit_tests/core/variables/test_segment.py |  36 +-
 .../variables/test_segment_type_validation.py |   2 +-
 .../graph_engine/test_mock_factory.py         |  33 +-
 .../workflow/graph_engine/test_mock_nodes.py  |   9 +-
 .../test_parallel_human_input_join_resume.py  |  16 +-
 .../core/workflow/nodes/answer/test_answer.py |  18 +-
 .../nodes/datasource/test_datasource_node.py  |  24 +-
 .../http_request/test_http_request_node.py    |  10 +-
 .../human_input/test_email_delivery_config.py |   2 +-
 .../nodes/human_input/test_entities.py        |  54 ++-
 .../test_human_input_form_filled_event.py     |  35 +-
 .../test_iteration_child_engine_errors.py     |  20 +-
 .../test_knowledge_index_node.py              |  91 +++--
 .../test_knowledge_retrieval_node.py          |  64 ++--
 .../workflow/nodes/list_operator/node_spec.py | 152 +++-----
 .../core/workflow/nodes/llm/test_llm_utils.py |   8 +-
 .../core/workflow/nodes/llm/test_node.py      |  47 +--
 .../template_transform_node_spec.py           | 101 ++---
 .../test_template_transform_node.py           |  19 +-
 .../core/workflow/nodes/test_base_node.py     |  65 ++--
 .../nodes/test_document_extractor_node.py     | 116 +++++-
 .../core/workflow/nodes/test_if_else.py       |  76 ++--
 .../core/workflow/nodes/test_list_operator.py |  32 +-
 .../nodes/test_start_node_json_object.py      |  40 +-
 .../workflow/nodes/tool/test_tool_node.py     |  20 +-
 .../trigger_plugin/test_trigger_event_node.py |  31 +-
 .../webhook/test_webhook_file_conversion.py   |  13 +-
 .../nodes/webhook/test_webhook_node.py        |  48 ++-
 .../core/workflow/test_human_input_adapter.py | 350 ++++++++++++++++++
 .../core/workflow/test_human_input_compat.py  | 184 ---------
 .../core/workflow/test_node_factory.py        |  72 +++-
 .../core/workflow/test_node_runtime.py        |   2 +-
 .../core/workflow/test_system_variable.py     |   2 +-
 .../core/workflow/test_variable_pool.py       |  14 +-
 .../workflow/test_workflow_entry_helpers.py   |  18 +-
 .../factories/test_build_from_mapping.py      |   2 +-
 .../factories/test_variable_factory.py        |  52 +--
 .../test_conversation_variable_fields.py      |  47 +++
 .../unit_tests/fields/test_file_fields.py     |   2 +-
 .../models/test_file_input_compat.py          | 149 ++++++++
 api/tests/unit_tests/models/test_workflow.py  |  50 +--
 .../services/test_variable_truncator.py       |   4 +-
 .../services/test_workflow_service.py         |  21 +-
 .../workflow/test_draft_var_loader_simple.py  |   8 +-
 .../test_workflow_draft_variable_service.py   |   4 +-
 .../test_workflow_human_input_delivery.py     |  39 +-
 api/uv.lock                                   |   8 +-
 134 files changed, 2154 insertions(+), 1134 deletions(-)
 rename api/core/workflow/{human_input_compat.py => human_input_adapter.py} (74%)
 create mode 100644 api/tests/unit_tests/core/workflow/test_human_input_adapter.py
 delete mode 100644 api/tests/unit_tests/core/workflow/test_human_input_compat.py
 create mode 100644 api/tests/unit_tests/fields/test_conversation_variable_fields.py
 create mode 100644 api/tests/unit_tests/models/test_file_input_compat.py

diff --git a/api/controllers/console/app/conversation_variables.py b/api/controllers/console/app/conversation_variables.py
index cead33d14f..9c8b095b9f 100644
--- a/api/controllers/console/app/conversation_variables.py
+++ b/api/controllers/console/app/conversation_variables.py
@@ -45,7 +45,7 @@ class ConversationVariableResponse(ResponseModel):
     def _normalize_value_type(cls, value: Any) -> str:
         exposed_type = getattr(value, "exposed_type", None)
         if callable(exposed_type):
-            return str(exposed_type().value)
+            return str(exposed_type())
         if isinstance(value, str):
             return value
         try:
diff --git a/api/controllers/console/app/workflow_draft_variable.py b/api/controllers/console/app/workflow_draft_variable.py
index f6319573e0..e32ba5f66c 100644
--- a/api/controllers/console/app/workflow_draft_variable.py
+++ b/api/controllers/console/app/workflow_draft_variable.py
@@ -102,7 +102,7 @@ def _serialize_var_value(variable: WorkflowDraftVariable):
 
 def _serialize_variable_type(workflow_draft_var: WorkflowDraftVariable) -> str:
     value_type = workflow_draft_var.value_type
-    return value_type.exposed_type().value
+    return str(value_type.exposed_type())
 
 
 class FullContentDict(TypedDict):
@@ -122,7 +122,7 @@ def _serialize_full_content(variable: WorkflowDraftVariable) -> FullContentDict
 
     result: FullContentDict = {
         "size_bytes": variable_file.size,
-        "value_type": variable_file.value_type.exposed_type().value,
+        "value_type": str(variable_file.value_type.exposed_type()),
         "length": variable_file.length,
         "download_url": file_helpers.get_signed_file_url(variable_file.upload_file_id, as_attachment=True),
     }
@@ -598,7 +598,7 @@ class EnvironmentVariableCollectionApi(Resource):
                     "name": v.name,
                     "description": v.description,
                     "selector": v.selector,
-                    "value_type": v.value_type.exposed_type().value,
+                    "value_type": str(v.value_type.exposed_type()),
                     "value": v.value,
                     # Do not track edited for env vars.
                     "edited": False,
diff --git a/api/controllers/service_api/app/conversation.py b/api/controllers/service_api/app/conversation.py
index c4353ca7b8..ca4b18cb5e 100644
--- a/api/controllers/service_api/app/conversation.py
+++ b/api/controllers/service_api/app/conversation.py
@@ -84,10 +84,10 @@ class ConversationVariableResponse(ResponseModel):
     def normalize_value_type(cls, value: Any) -> str:
         exposed_type = getattr(value, "exposed_type", None)
         if callable(exposed_type):
-            return str(exposed_type().value)
+            return str(exposed_type())
         if isinstance(value, str):
             try:
-                return str(SegmentType(value).exposed_type().value)
+                return str(SegmentType(value).exposed_type())
             except ValueError:
                 return value
         try:
diff --git a/api/core/agent/base_agent_runner.py b/api/core/agent/base_agent_runner.py
index 790602ef5d..c22102c2ba 100644
--- a/api/core/agent/base_agent_runner.py
+++ b/api/core/agent/base_agent_runner.py
@@ -42,7 +42,7 @@ from graphon.model_runtime.entities import (
 )
 from graphon.model_runtime.entities.message_entities import ImagePromptMessageContent, PromptMessageContentUnionTypes
 from graphon.model_runtime.entities.model_entities import ModelFeature
-from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
+from graphon.model_runtime.model_providers.base.large_language_model import LargeLanguageModel
 from models.enums import CreatorUserRole
 from models.model import Conversation, Message, MessageAgentThought, MessageFile
 
diff --git a/api/core/app/app_config/easy_ui_based_app/model_config/converter.py b/api/core/app/app_config/easy_ui_based_app/model_config/converter.py
index dbd7527fc6..5df3df2b3e 100644
--- a/api/core/app/app_config/easy_ui_based_app/model_config/converter.py
+++ b/api/core/app/app_config/easy_ui_based_app/model_config/converter.py
@@ -7,7 +7,7 @@ from core.errors.error import ModelCurrentlyNotSupportError, ProviderTokenNotIni
 from core.plugin.impl.model_runtime_factory import create_plugin_provider_manager
 from graphon.model_runtime.entities.llm_entities import LLMMode
 from graphon.model_runtime.entities.model_entities import ModelPropertyKey, ModelType
-from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
+from graphon.model_runtime.model_providers.base.large_language_model import LargeLanguageModel
 
 
 class ModelConfigConverter:
diff --git a/api/core/app/apps/agent_chat/app_runner.py b/api/core/app/apps/agent_chat/app_runner.py
index 09ddce327e..cae0eee0df 100644
--- a/api/core/app/apps/agent_chat/app_runner.py
+++ b/api/core/app/apps/agent_chat/app_runner.py
@@ -18,7 +18,7 @@ from core.moderation.base import ModerationError
 from extensions.ext_database import db
 from graphon.model_runtime.entities.llm_entities import LLMMode
 from graphon.model_runtime.entities.model_entities import ModelFeature, ModelPropertyKey
-from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
+from graphon.model_runtime.model_providers.base.large_language_model import LargeLanguageModel
 from models.model import App, Conversation, Message
 
 logger = logging.getLogger(__name__)
diff --git a/api/core/app/task_pipeline/easy_ui_based_generate_task_pipeline.py b/api/core/app/task_pipeline/easy_ui_based_generate_task_pipeline.py
index dfe6133cb6..e2e07ebaff 100644
--- a/api/core/app/task_pipeline/easy_ui_based_generate_task_pipeline.py
+++ b/api/core/app/task_pipeline/easy_ui_based_generate_task_pipeline.py
@@ -59,7 +59,7 @@ from graphon.model_runtime.entities.message_entities import (
     AssistantPromptMessage,
     TextPromptMessageContent,
 )
-from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
+from graphon.model_runtime.model_providers.base.large_language_model import LargeLanguageModel
 from libs.datetime_utils import naive_utc_now
 from models.model import AppMode, Conversation, Message, MessageAgentThought, MessageFile, UploadFile
 
diff --git a/api/core/app/workflow/file_runtime.py b/api/core/app/workflow/file_runtime.py
index 68e5e5f0c8..3a6f9d575a 100644
--- a/api/core/app/workflow/file_runtime.py
+++ b/api/core/app/workflow/file_runtime.py
@@ -12,13 +12,14 @@ from typing import TYPE_CHECKING, Literal
 from configs import dify_config
 from core.app.file_access import DatabaseFileAccessController, FileAccessControllerProtocol
 from core.db.session_factory import session_factory
-from core.helper.ssrf_proxy import ssrf_proxy
+from core.helper.ssrf_proxy import graphon_ssrf_proxy
 from core.tools.signature import sign_tool_file
 from core.workflow.file_reference import parse_file_reference
 from extensions.ext_storage import storage
 from graphon.file import FileTransferMethod
-from graphon.file.protocols import HttpResponseProtocol, WorkflowFileRuntimeProtocol
+from graphon.file.protocols import WorkflowFileRuntimeProtocol
 from graphon.file.runtime import set_workflow_file_runtime
+from graphon.http.protocols import HttpResponseProtocol
 
 if TYPE_CHECKING:
     from graphon.file import File
@@ -43,7 +44,7 @@ class DifyWorkflowFileRuntime(WorkflowFileRuntimeProtocol):
         return dify_config.MULTIMODAL_SEND_FORMAT
 
     def http_get(self, url: str, *, follow_redirects: bool = True) -> HttpResponseProtocol:
-        return ssrf_proxy.get(url, follow_redirects=follow_redirects)
+        return graphon_ssrf_proxy.get(url, follow_redirects=follow_redirects)
 
     def storage_load(self, path: str, *, stream: bool = False) -> bytes | Generator:
         return storage.load(path, stream=stream)
diff --git a/api/core/app/workflow/layers/persistence.py b/api/core/app/workflow/layers/persistence.py
index 87f005a250..d521304615 100644
--- a/api/core/app/workflow/layers/persistence.py
+++ b/api/core/app/workflow/layers/persistence.py
@@ -349,7 +349,7 @@ class WorkflowPersistenceLayer(GraphEngineLayer):
         execution.total_tokens = runtime_state.total_tokens
         execution.total_steps = runtime_state.node_run_steps
         execution.outputs = execution.outputs or runtime_state.outputs
-        execution.exceptions_count = runtime_state.exceptions_count
+        execution.exceptions_count = max(execution.exceptions_count, runtime_state.exceptions_count)
 
     def _update_node_execution(
         self,
diff --git a/api/core/datasource/datasource_manager.py b/api/core/datasource/datasource_manager.py
index dc831e5cac..f0dcb13b62 100644
--- a/api/core/datasource/datasource_manager.py
+++ b/api/core/datasource/datasource_manager.py
@@ -352,11 +352,11 @@ class DatasourceManager:
                 raise ValueError(f"UploadFile not found for file_id={file_id}, tenant_id={tenant_id}")
 
         file_info = File(
-            id=upload_file.id,
+            file_id=upload_file.id,
             filename=upload_file.name,
             extension="." + upload_file.extension,
             mime_type=upload_file.mime_type,
-            type=FileType.CUSTOM,
+            file_type=FileType.CUSTOM,
             transfer_method=FileTransferMethod.LOCAL_FILE,
             remote_url=upload_file.source_url,
             reference=build_file_reference(record_id=str(upload_file.id)),
diff --git a/api/core/entities/provider_configuration.py b/api/core/entities/provider_configuration.py
index 6bbf163c9d..38b87e2cd1 100644
--- a/api/core/entities/provider_configuration.py
+++ b/api/core/entities/provider_configuration.py
@@ -31,7 +31,7 @@ from graphon.model_runtime.entities.provider_entities import (
     FormType,
     ProviderEntity,
 )
-from graphon.model_runtime.model_providers.__base.ai_model import AIModel
+from graphon.model_runtime.model_providers.base.ai_model import AIModel
 from graphon.model_runtime.model_providers.model_provider_factory import ModelProviderFactory
 from graphon.model_runtime.runtime import ModelRuntime
 from libs.datetime_utils import naive_utc_now
@@ -363,7 +363,7 @@ class ProviderConfiguration(BaseModel):
         )
 
         for key, value in validated_credentials.items():
-            if key in provider_credential_secret_variables:
+            if key in provider_credential_secret_variables and isinstance(value, str):
                 validated_credentials[key] = encrypter.encrypt_token(self.tenant_id, value)
 
         return validated_credentials
@@ -912,7 +912,7 @@ class ProviderConfiguration(BaseModel):
         )
 
         for key, value in validated_credentials.items():
-            if key in provider_credential_secret_variables:
+            if key in provider_credential_secret_variables and isinstance(value, str):
                 validated_credentials[key] = encrypter.encrypt_token(self.tenant_id, value)
 
         return validated_credentials
diff --git a/api/core/helper/code_executor/template_transformer.py b/api/core/helper/code_executor/template_transformer.py
index b96a9ce380..38864a1830 100644
--- a/api/core/helper/code_executor/template_transformer.py
+++ b/api/core/helper/code_executor/template_transformer.py
@@ -102,7 +102,7 @@ class TemplateTransformer(ABC):
 
     @classmethod
     def serialize_inputs(cls, inputs: Mapping[str, Any]) -> str:
-        inputs_json_str = dumps_with_segments(inputs, ensure_ascii=False).encode()
+        inputs_json_str = dumps_with_segments(inputs).encode()
         input_base64_encoded = b64encode(inputs_json_str).decode("utf-8")
         return input_base64_encoded
 
diff --git a/api/core/helper/moderation.py b/api/core/helper/moderation.py
index dc37a36943..f169f247cf 100644
--- a/api/core/helper/moderation.py
+++ b/api/core/helper/moderation.py
@@ -8,7 +8,7 @@ from core.plugin.impl.model_runtime_factory import create_plugin_model_provider_
 from extensions.ext_hosting_provider import hosting_configuration
 from graphon.model_runtime.entities.model_entities import ModelType
 from graphon.model_runtime.errors.invoke import InvokeBadRequestError
-from graphon.model_runtime.model_providers.__base.moderation_model import ModerationModel
+from graphon.model_runtime.model_providers.base.moderation_model import ModerationModel
 from models.provider import ProviderType
 
 logger = logging.getLogger(__name__)
diff --git a/api/core/helper/ssrf_proxy.py b/api/core/helper/ssrf_proxy.py
index e38592bb7b..91e92712b7 100644
--- a/api/core/helper/ssrf_proxy.py
+++ b/api/core/helper/ssrf_proxy.py
@@ -12,6 +12,7 @@ from pydantic import TypeAdapter, ValidationError
 from configs import dify_config
 from core.helper.http_client_pooling import get_pooled_http_client
 from core.tools.errors import ToolSSRFError
+from graphon.http.response import HttpResponse
 
 logger = logging.getLogger(__name__)
 
@@ -267,4 +268,47 @@ class SSRFProxy:
         return patch(url=url, max_retries=max_retries, **kwargs)
 
 
+def _to_graphon_http_response(response: httpx.Response) -> HttpResponse:
+    """Convert an ``httpx`` response into Graphon's transport-agnostic wrapper."""
+    return HttpResponse(
+        status_code=response.status_code,
+        headers=dict(response.headers),
+        content=response.content,
+        url=str(response.url) if response.url else None,
+        reason_phrase=response.reason_phrase,
+        fallback_text=response.text,
+    )
+
+
+class GraphonSSRFProxy:
+    """Adapter exposing SSRF helpers behind Graphon's ``HttpClientProtocol``."""
+
+    @property
+    def max_retries_exceeded_error(self) -> type[Exception]:
+        return max_retries_exceeded_error
+
+    @property
+    def request_error(self) -> type[Exception]:
+        return request_error
+
+    def get(self, url: str, max_retries: int = SSRF_DEFAULT_MAX_RETRIES, **kwargs: Any) -> HttpResponse:
+        return _to_graphon_http_response(get(url=url, max_retries=max_retries, **kwargs))
+
+    def head(self, url: str, max_retries: int = SSRF_DEFAULT_MAX_RETRIES, **kwargs: Any) -> HttpResponse:
+        return _to_graphon_http_response(head(url=url, max_retries=max_retries, **kwargs))
+
+    def post(self, url: str, max_retries: int = SSRF_DEFAULT_MAX_RETRIES, **kwargs: Any) -> HttpResponse:
+        return _to_graphon_http_response(post(url=url, max_retries=max_retries, **kwargs))
+
+    def put(self, url: str, max_retries: int = SSRF_DEFAULT_MAX_RETRIES, **kwargs: Any) -> HttpResponse:
+        return _to_graphon_http_response(put(url=url, max_retries=max_retries, **kwargs))
+
+    def delete(self, url: str, max_retries: int = SSRF_DEFAULT_MAX_RETRIES, **kwargs: Any) -> HttpResponse:
+        return _to_graphon_http_response(delete(url=url, max_retries=max_retries, **kwargs))
+
+    def patch(self, url: str, max_retries: int = SSRF_DEFAULT_MAX_RETRIES, **kwargs: Any) -> HttpResponse:
+        return _to_graphon_http_response(patch(url=url, max_retries=max_retries, **kwargs))
+
+
 ssrf_proxy = SSRFProxy()
+graphon_ssrf_proxy = GraphonSSRFProxy()
diff --git a/api/core/model_manager.py b/api/core/model_manager.py
index d8d8dfedd8..86d0e3baaa 100644
--- a/api/core/model_manager.py
+++ b/api/core/model_manager.py
@@ -1,6 +1,6 @@
 import logging
 from collections.abc import Callable, Generator, Iterable, Mapping, Sequence
-from typing import IO, Any, Literal, Optional, Union, cast, overload
+from typing import IO, Any, Literal, Optional, ParamSpec, TypeVar, Union, cast, overload
 
 from configs import dify_config
 from core.entities import PluginCredentialType
@@ -18,15 +18,17 @@ from graphon.model_runtime.entities.model_entities import AIModelEntity, ModelFe
 from graphon.model_runtime.entities.rerank_entities import MultimodalRerankInput, RerankResult
 from graphon.model_runtime.entities.text_embedding_entities import EmbeddingResult
 from graphon.model_runtime.errors.invoke import InvokeAuthorizationError, InvokeConnectionError, InvokeRateLimitError
-from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
-from graphon.model_runtime.model_providers.__base.moderation_model import ModerationModel
-from graphon.model_runtime.model_providers.__base.rerank_model import RerankModel
-from graphon.model_runtime.model_providers.__base.speech2text_model import Speech2TextModel
-from graphon.model_runtime.model_providers.__base.text_embedding_model import TextEmbeddingModel
-from graphon.model_runtime.model_providers.__base.tts_model import TTSModel
+from graphon.model_runtime.model_providers.base.large_language_model import LargeLanguageModel
+from graphon.model_runtime.model_providers.base.moderation_model import ModerationModel
+from graphon.model_runtime.model_providers.base.rerank_model import RerankModel
+from graphon.model_runtime.model_providers.base.speech2text_model import Speech2TextModel
+from graphon.model_runtime.model_providers.base.text_embedding_model import TextEmbeddingModel
+from graphon.model_runtime.model_providers.base.tts_model import TTSModel
 from models.provider import ProviderType
 
 logger = logging.getLogger(__name__)
+P = ParamSpec("P")
+R = TypeVar("R")
 
 
 class ModelInstance:
@@ -168,7 +170,7 @@ class ModelInstance:
         return cast(
             Union[LLMResult, Generator],
             self._round_robin_invoke(
-                function=self.model_type_instance.invoke,
+                self.model_type_instance.invoke,
                 model=self.model_name,
                 credentials=self.credentials,
                 prompt_messages=list(prompt_messages),
@@ -193,7 +195,7 @@ class ModelInstance:
         if not isinstance(self.model_type_instance, LargeLanguageModel):
             raise Exception("Model type instance is not LargeLanguageModel")
         return self._round_robin_invoke(
-            function=self.model_type_instance.get_num_tokens,
+            self.model_type_instance.get_num_tokens,
             model=self.model_name,
             credentials=self.credentials,
             prompt_messages=list(prompt_messages),
@@ -213,7 +215,7 @@ class ModelInstance:
         if not isinstance(self.model_type_instance, TextEmbeddingModel):
             raise Exception("Model type instance is not TextEmbeddingModel")
         return self._round_robin_invoke(
-            function=self.model_type_instance.invoke,
+            self.model_type_instance.invoke,
             model=self.model_name,
             credentials=self.credentials,
             texts=texts,
@@ -235,7 +237,7 @@ class ModelInstance:
         if not isinstance(self.model_type_instance, TextEmbeddingModel):
             raise Exception("Model type instance is not TextEmbeddingModel")
         return self._round_robin_invoke(
-            function=self.model_type_instance.invoke,
+            self.model_type_instance.invoke,
             model=self.model_name,
             credentials=self.credentials,
             multimodel_documents=multimodel_documents,
@@ -252,7 +254,7 @@ class ModelInstance:
         if not isinstance(self.model_type_instance, TextEmbeddingModel):
             raise Exception("Model type instance is not TextEmbeddingModel")
         return self._round_robin_invoke(
-            function=self.model_type_instance.get_num_tokens,
+            self.model_type_instance.get_num_tokens,
             model=self.model_name,
             credentials=self.credentials,
             texts=texts,
@@ -277,7 +279,7 @@ class ModelInstance:
         if not isinstance(self.model_type_instance, RerankModel):
             raise Exception("Model type instance is not RerankModel")
         return self._round_robin_invoke(
-            function=self.model_type_instance.invoke,
+            self.model_type_instance.invoke,
             model=self.model_name,
             credentials=self.credentials,
             query=query,
@@ -305,7 +307,7 @@ class ModelInstance:
         if not isinstance(self.model_type_instance, RerankModel):
             raise Exception("Model type instance is not RerankModel")
         return self._round_robin_invoke(
-            function=self.model_type_instance.invoke_multimodal_rerank,
+            self.model_type_instance.invoke_multimodal_rerank,
             model=self.model_name,
             credentials=self.credentials,
             query=query,
@@ -324,7 +326,7 @@ class ModelInstance:
         if not isinstance(self.model_type_instance, ModerationModel):
             raise Exception("Model type instance is not ModerationModel")
         return self._round_robin_invoke(
-            function=self.model_type_instance.invoke,
+            self.model_type_instance.invoke,
             model=self.model_name,
             credentials=self.credentials,
             text=text,
@@ -340,7 +342,7 @@ class ModelInstance:
         if not isinstance(self.model_type_instance, Speech2TextModel):
             raise Exception("Model type instance is not Speech2TextModel")
         return self._round_robin_invoke(
-            function=self.model_type_instance.invoke,
+            self.model_type_instance.invoke,
             model=self.model_name,
             credentials=self.credentials,
             file=file,
@@ -357,14 +359,14 @@ class ModelInstance:
         if not isinstance(self.model_type_instance, TTSModel):
             raise Exception("Model type instance is not TTSModel")
         return self._round_robin_invoke(
-            function=self.model_type_instance.invoke,
+            self.model_type_instance.invoke,
             model=self.model_name,
             credentials=self.credentials,
             content_text=content_text,
             voice=voice,
         )
 
-    def _round_robin_invoke[**P, R](self, function: Callable[P, R], *args: P.args, **kwargs: P.kwargs) -> R:
+    def _round_robin_invoke(self, function: Callable[P, R], *args: P.args, **kwargs: P.kwargs) -> R:
         """
         Round-robin invoke
         :param function: function to invoke
diff --git a/api/core/plugin/impl/model_runtime.py b/api/core/plugin/impl/model_runtime.py
index e3fba4ef3a..4e66d58b5e 100644
--- a/api/core/plugin/impl/model_runtime.py
+++ b/api/core/plugin/impl/model_runtime.py
@@ -66,15 +66,15 @@ class PluginModelRuntime(ModelRuntime):
             if not provider_schema.icon_small:
                 raise ValueError(f"Provider {provider} does not have small icon.")
             file_name = (
-                provider_schema.icon_small.zh_Hans if lang.lower() == "zh_hans" else provider_schema.icon_small.en_US
+                provider_schema.icon_small.zh_hans if lang.lower() == "zh_hans" else provider_schema.icon_small.en_us
             )
         elif icon_type.lower() == "icon_small_dark":
             if not provider_schema.icon_small_dark:
                 raise ValueError(f"Provider {provider} does not have small dark icon.")
             file_name = (
-                provider_schema.icon_small_dark.zh_Hans
+                provider_schema.icon_small_dark.zh_hans
                 if lang.lower() == "zh_hans"
-                else provider_schema.icon_small_dark.en_US
+                else provider_schema.icon_small_dark.en_us
             )
         else:
             raise ValueError(f"Unsupported icon type: {icon_type}.")
diff --git a/api/core/prompt/agent_history_prompt_transform.py b/api/core/prompt/agent_history_prompt_transform.py
index 8f1d51f08a..7c6280fe93 100644
--- a/api/core/prompt/agent_history_prompt_transform.py
+++ b/api/core/prompt/agent_history_prompt_transform.py
@@ -10,7 +10,7 @@ from graphon.model_runtime.entities.message_entities import (
     SystemPromptMessage,
     UserPromptMessage,
 )
-from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
+from graphon.model_runtime.model_providers.base.large_language_model import LargeLanguageModel
 
 
 class AgentHistoryPromptTransform(PromptTransform):
diff --git a/api/core/rag/embedding/cached_embedding.py b/api/core/rag/embedding/cached_embedding.py
index 4926f44f16..a9995778f7 100644
--- a/api/core/rag/embedding/cached_embedding.py
+++ b/api/core/rag/embedding/cached_embedding.py
@@ -14,7 +14,7 @@ from core.rag.embedding.embedding_base import Embeddings
 from extensions.ext_database import db
 from extensions.ext_redis import redis_client
 from graphon.model_runtime.entities.model_entities import ModelPropertyKey
-from graphon.model_runtime.model_providers.__base.text_embedding_model import TextEmbeddingModel
+from graphon.model_runtime.model_providers.base.text_embedding_model import TextEmbeddingModel
 from libs import helper
 from models.dataset import Embedding
 
diff --git a/api/core/rag/extractor/word_extractor.py b/api/core/rag/extractor/word_extractor.py
index 052fca930d..0330a43b28 100644
--- a/api/core/rag/extractor/word_extractor.py
+++ b/api/core/rag/extractor/word_extractor.py
@@ -3,6 +3,7 @@
 Supports local file paths and remote URLs (downloaded via `core.helper.ssrf_proxy`).
 """
 
+import inspect
 import logging
 import mimetypes
 import os
@@ -36,8 +37,11 @@ class WordExtractor(BaseExtractor):
         file_path: Path to the file to load.
     """
 
+    _closed: bool
+
     def __init__(self, file_path: str, tenant_id: str, user_id: str):
         """Initialize with file path."""
+        self._closed = False
         self.file_path = file_path
         self.tenant_id = tenant_id
         self.user_id = user_id
@@ -65,9 +69,27 @@ class WordExtractor(BaseExtractor):
         elif not os.path.isfile(self.file_path):
             raise ValueError(f"File path {self.file_path} is not a valid file or url")
 
+    def close(self) -> None:
+        """Best-effort cleanup for downloaded temporary files."""
+        if getattr(self, "_closed", False):
+            return
+
+        self._closed = True
+        temp_file = getattr(self, "temp_file", None)
+        if temp_file is None:
+            return
+
+        try:
+            close_result = temp_file.close()
+            if inspect.isawaitable(close_result):
+                close_awaitable = getattr(close_result, "close", None)
+                if callable(close_awaitable):
+                    close_awaitable()
+        except Exception:
+            logger.debug("Failed to cleanup downloaded word temp file", exc_info=True)
+
     def __del__(self):
-        if hasattr(self, "temp_file"):
-            self.temp_file.close()
+        self.close()
 
     def extract(self) -> list[Document]:
         """Load given path as single page."""
diff --git a/api/core/rag/index_processor/processor/paragraph_index_processor.py b/api/core/rag/index_processor/processor/paragraph_index_processor.py
index f8242efe31..7ffa9afafd 100644
--- a/api/core/rag/index_processor/processor/paragraph_index_processor.py
+++ b/api/core/rag/index_processor/processor/paragraph_index_processor.py
@@ -609,11 +609,11 @@ class ParagraphIndexProcessor(BaseIndexProcessor):
             try:
                 # Create File object directly (similar to DatasetRetrieval)
                 file_obj = File(
-                    id=upload_file.id,
+                    file_id=upload_file.id,
                     filename=upload_file.name,
                     extension="." + upload_file.extension,
                     mime_type=upload_file.mime_type,
-                    type=FileType.IMAGE,
+                    file_type=FileType.IMAGE,
                     transfer_method=FileTransferMethod.LOCAL_FILE,
                     remote_url=upload_file.source_url,
                     reference=build_file_reference(
diff --git a/api/core/rag/retrieval/dataset_retrieval.py b/api/core/rag/retrieval/dataset_retrieval.py
index 1453fe020b..5631b3a921 100644
--- a/api/core/rag/retrieval/dataset_retrieval.py
+++ b/api/core/rag/retrieval/dataset_retrieval.py
@@ -68,7 +68,7 @@ from graphon.file import File, FileTransferMethod, FileType
 from graphon.model_runtime.entities.llm_entities import LLMMode, LLMResult, LLMUsage
 from graphon.model_runtime.entities.message_entities import PromptMessage, PromptMessageRole, PromptMessageTool
 from graphon.model_runtime.entities.model_entities import ModelFeature, ModelType
-from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
+from graphon.model_runtime.model_providers.base.large_language_model import LargeLanguageModel
 from libs.helper import parse_uuid_str_or_none
 from libs.json_in_md_parser import parse_and_check_json_markdown
 from models import UploadFile
@@ -517,11 +517,11 @@ class DatasetRetrieval:
                         if attachments_with_bindings:
                             for _, upload_file in attachments_with_bindings:
                                 attachment_info = File(
-                                    id=upload_file.id,
+                                    file_id=upload_file.id,
                                     filename=upload_file.name,
                                     extension="." + upload_file.extension,
                                     mime_type=upload_file.mime_type,
-                                    type=FileType.IMAGE,
+                                    file_type=FileType.IMAGE,
                                     transfer_method=FileTransferMethod.LOCAL_FILE,
                                     remote_url=upload_file.source_url,
                                     reference=build_file_reference(
diff --git a/api/core/rag/splitter/fixed_text_splitter.py b/api/core/rag/splitter/fixed_text_splitter.py
index 2581c354dd..66b375dad1 100644
--- a/api/core/rag/splitter/fixed_text_splitter.py
+++ b/api/core/rag/splitter/fixed_text_splitter.py
@@ -9,7 +9,7 @@ from typing import Any, Literal
 
 from core.model_manager import ModelInstance
 from core.rag.splitter.text_splitter import RecursiveCharacterTextSplitter
-from graphon.model_runtime.model_providers.__base.tokenizers.gpt2_tokenizer import GPT2Tokenizer
+from graphon.model_runtime.model_providers.base.tokenizers.gpt2_tokenizer import GPT2Tokenizer
 
 
 class EnhanceRecursiveCharacterTextSplitter(RecursiveCharacterTextSplitter):
diff --git a/api/core/repositories/human_input_repository.py b/api/core/repositories/human_input_repository.py
index 02625e242f..740d727e26 100644
--- a/api/core/repositories/human_input_repository.py
+++ b/api/core/repositories/human_input_repository.py
@@ -8,7 +8,7 @@ from sqlalchemy import select
 from sqlalchemy.orm import Session, selectinload
 
 from core.db.session_factory import session_factory
-from core.workflow.human_input_compat import (
+from core.workflow.human_input_adapter import (
     BoundRecipient,
     DeliveryChannelConfig,
     EmailDeliveryMethod,
diff --git a/api/core/tools/tool_file_manager.py b/api/core/tools/tool_file_manager.py
index b3424cd9a5..c87e8a3ae0 100644
--- a/api/core/tools/tool_file_manager.py
+++ b/api/core/tools/tool_file_manager.py
@@ -28,7 +28,7 @@ class ToolFileManager:
     def _build_graph_file_reference(tool_file: ToolFile) -> File:
         extension = guess_extension(tool_file.mimetype) or ".bin"
         return File(
-            type=get_file_type_by_mime_type(tool_file.mimetype),
+            file_type=get_file_type_by_mime_type(tool_file.mimetype),
             transfer_method=FileTransferMethod.TOOL_FILE,
             remote_url=tool_file.original_url,
             reference=build_file_reference(record_id=str(tool_file.id)),
diff --git a/api/core/tools/tool_manager.py b/api/core/tools/tool_manager.py
index f4588904d3..87cf6d7085 100644
--- a/api/core/tools/tool_manager.py
+++ b/api/core/tools/tool_manager.py
@@ -1082,7 +1082,12 @@ class ToolManager:
                         continue
                     tool_input = ToolNodeData.ToolInput.model_validate(tool_configurations.get(parameter.name, {}))
                     if tool_input.type == "variable":
-                        variable = variable_pool.get(tool_input.value)
+                        variable_selector = tool_input.value
+                        if not isinstance(variable_selector, list) or not all(
+                            isinstance(selector_part, str) for selector_part in variable_selector
+                        ):
+                            raise ToolParameterError("Variable tool input must be a variable selector")
+                        variable = variable_pool.get(variable_selector)
                         if variable is None:
                             raise ToolParameterError(f"Variable {tool_input.value} does not exist")
                         parameter_value = variable.value
diff --git a/api/core/tools/utils/model_invocation_utils.py b/api/core/tools/utils/model_invocation_utils.py
index 9e1d41cb39..a3623d4ecd 100644
--- a/api/core/tools/utils/model_invocation_utils.py
+++ b/api/core/tools/utils/model_invocation_utils.py
@@ -21,7 +21,7 @@ from graphon.model_runtime.errors.invoke import (
     InvokeRateLimitError,
     InvokeServerUnavailableError,
 )
-from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
+from graphon.model_runtime.model_providers.base.large_language_model import LargeLanguageModel
 from graphon.model_runtime.utils.encoders import jsonable_encoder
 from models.tools import ToolModelInvoke
 
diff --git a/api/core/tools/workflow_as_tool/tool.py b/api/core/tools/workflow_as_tool/tool.py
index 52ab605963..cd8c6352b5 100644
--- a/api/core/tools/workflow_as_tool/tool.py
+++ b/api/core/tools/workflow_as_tool/tool.py
@@ -357,7 +357,10 @@ class WorkflowTool(Tool):
 
     def _update_file_mapping(self, file_dict: dict[str, Any]) -> dict[str, Any]:
         file_id = resolve_file_record_id(file_dict.get("reference") or file_dict.get("related_id"))
-        transfer_method = FileTransferMethod.value_of(file_dict.get("transfer_method"))
+        transfer_method_value = file_dict.get("transfer_method")
+        if not isinstance(transfer_method_value, str):
+            raise ValueError("Workflow file mapping is missing a valid transfer_method")
+        transfer_method = FileTransferMethod.value_of(transfer_method_value)
         match transfer_method:
             case FileTransferMethod.TOOL_FILE:
                 file_dict["tool_file_id"] = file_id
diff --git a/api/core/workflow/human_input_compat.py b/api/core/workflow/human_input_adapter.py
similarity index 74%
rename from api/core/workflow/human_input_compat.py
rename to api/core/workflow/human_input_adapter.py
index 75a0a0c202..4b765e6aea 100644
--- a/api/core/workflow/human_input_compat.py
+++ b/api/core/workflow/human_input_adapter.py
@@ -1,8 +1,8 @@
-"""Workflow-layer adapters for legacy human-input payload keys.
+"""Workflow-to-Graphon adapters for persisted node payloads.
 
-Stored workflow graphs and editor payloads may still use Dify-specific human
-input recipient keys. Normalize them here before handing configs to
-`graphon` so graph-owned models only see graph-neutral field names.
+Stored workflow graphs and editor payloads still contain a small set of
+Dify-owned field spellings and value shapes. Adapt them here before handing the
+payload to Graphon so Graphon-owned models only see current contracts.
 """
 
 from __future__ import annotations
@@ -185,7 +185,7 @@ def _copy_mapping(value: object) -> dict[str, Any] | None:
     return None
 
 
-def normalize_human_input_node_data_for_graph(node_data: Mapping[str, Any] | BaseModel) -> dict[str, Any]:
+def adapt_human_input_node_data_for_graph(node_data: Mapping[str, Any] | BaseModel) -> dict[str, Any]:
     normalized = _copy_mapping(node_data)
     if normalized is None:
         raise TypeError(f"human-input node data must be a mapping, got {type(node_data).__name__}")
@@ -215,7 +215,7 @@ def normalize_human_input_node_data_for_graph(node_data: Mapping[str, Any] | Bas
 
 
 def parse_human_input_delivery_methods(node_data: Mapping[str, Any] | BaseModel) -> list[DeliveryChannelConfig]:
-    normalized = normalize_human_input_node_data_for_graph(node_data)
+    normalized = adapt_human_input_node_data_for_graph(node_data)
     raw_delivery_methods = normalized.get("delivery_methods")
     if not isinstance(raw_delivery_methods, list):
         return []
@@ -229,17 +229,20 @@ def is_human_input_webapp_enabled(node_data: Mapping[str, Any] | BaseModel) -> b
     return False
 
 
-def normalize_node_data_for_graph(node_data: Mapping[str, Any] | BaseModel) -> dict[str, Any]:
+def adapt_node_data_for_graph(node_data: Mapping[str, Any] | BaseModel) -> dict[str, Any]:
     normalized = _copy_mapping(node_data)
     if normalized is None:
         raise TypeError(f"node data must be a mapping, got {type(node_data).__name__}")
 
-    if normalized.get("type") != BuiltinNodeTypes.HUMAN_INPUT:
-        return normalized
-    return normalize_human_input_node_data_for_graph(normalized)
+    node_type = normalized.get("type")
+    if node_type == BuiltinNodeTypes.HUMAN_INPUT:
+        return adapt_human_input_node_data_for_graph(normalized)
+    if node_type == BuiltinNodeTypes.TOOL:
+        return _adapt_tool_node_data_for_graph(normalized)
+    return normalized
 
 
-def normalize_node_config_for_graph(node_config: Mapping[str, Any] | BaseModel) -> dict[str, Any]:
+def adapt_node_config_for_graph(node_config: Mapping[str, Any] | BaseModel) -> dict[str, Any]:
     normalized = _copy_mapping(node_config)
     if normalized is None:
         raise TypeError(f"node config must be a mapping, got {type(node_config).__name__}")
@@ -248,10 +251,65 @@ def normalize_node_config_for_graph(node_config: Mapping[str, Any] | BaseModel)
     if data_mapping is None:
         return normalized
 
-    normalized["data"] = normalize_node_data_for_graph(data_mapping)
+    normalized["data"] = adapt_node_data_for_graph(data_mapping)
     return normalized
 
 
+def _adapt_tool_node_data_for_graph(node_data: Mapping[str, Any]) -> dict[str, Any]:
+    normalized = dict(node_data)
+
+    raw_tool_configurations = normalized.get("tool_configurations")
+    if not isinstance(raw_tool_configurations, Mapping):
+        return normalized
+
+    existing_tool_parameters = normalized.get("tool_parameters")
+    normalized_tool_parameters = dict(existing_tool_parameters) if isinstance(existing_tool_parameters, Mapping) else {}
+    normalized_tool_configurations: dict[str, Any] = {}
+    found_legacy_tool_inputs = False
+
+    for name, value in raw_tool_configurations.items():
+        if not isinstance(value, Mapping):
+            normalized_tool_configurations[name] = value
+            continue
+
+        input_type = value.get("type")
+        input_value = value.get("value")
+        if input_type not in {"mixed", "variable", "constant"}:
+            normalized_tool_configurations[name] = value
+            continue
+
+        found_legacy_tool_inputs = True
+        normalized_tool_parameters.setdefault(name, dict(value))
+
+        flattened_value = _flatten_legacy_tool_configuration_value(
+            input_type=input_type,
+            input_value=input_value,
+        )
+        if flattened_value is not None:
+            normalized_tool_configurations[name] = flattened_value
+
+    if not found_legacy_tool_inputs:
+        return normalized
+
+    normalized["tool_parameters"] = normalized_tool_parameters
+    normalized["tool_configurations"] = normalized_tool_configurations
+    return normalized
+
+
+def _flatten_legacy_tool_configuration_value(*, input_type: Any, input_value: Any) -> str | int | float | bool | None:
+    if input_type in {"mixed", "constant"} and isinstance(input_value, str | int | float | bool):
+        return input_value
+
+    if (
+        input_type == "variable"
+        and isinstance(input_value, list)
+        and all(isinstance(item, str) for item in input_value)
+    ):
+        return "{{#" + ".".join(input_value) + "#}}"
+
+    return None
+
+
 def _normalize_email_recipients(recipients: Mapping[str, Any]) -> dict[str, Any]:
     normalized = dict(recipients)
 
@@ -291,9 +349,9 @@ __all__ = [
     "MemberRecipient",
     "WebAppDeliveryMethod",
     "_WebAppDeliveryConfig",
+    "adapt_human_input_node_data_for_graph",
+    "adapt_node_config_for_graph",
+    "adapt_node_data_for_graph",
     "is_human_input_webapp_enabled",
-    "normalize_human_input_node_data_for_graph",
-    "normalize_node_config_for_graph",
-    "normalize_node_data_for_graph",
     "parse_human_input_delivery_methods",
 ]
diff --git a/api/core/workflow/node_factory.py b/api/core/workflow/node_factory.py
index 351da3444f..de4eae1b22 100644
--- a/api/core/workflow/node_factory.py
+++ b/api/core/workflow/node_factory.py
@@ -15,12 +15,12 @@ from core.helper.code_executor.code_executor import (
     CodeExecutionError,
     CodeExecutor,
 )
-from core.helper.ssrf_proxy import ssrf_proxy
+from core.helper.ssrf_proxy import graphon_ssrf_proxy
 from core.memory.token_buffer_memory import TokenBufferMemory
 from core.model_manager import ModelInstance
 from core.prompt.entities.advanced_prompt_entities import MemoryConfig
 from core.trigger.constants import TRIGGER_NODE_TYPES
-from core.workflow.human_input_compat import normalize_node_config_for_graph
+from core.workflow.human_input_adapter import adapt_node_config_for_graph
 from core.workflow.node_runtime import (
     DifyFileReferenceFactory,
     DifyHumanInputNodeRuntime,
@@ -46,7 +46,7 @@ from graphon.enums import BuiltinNodeTypes, NodeType
 from graphon.file.file_manager import file_manager
 from graphon.graph.graph import NodeFactory
 from graphon.model_runtime.memory import PromptMessageMemory
-from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
+from graphon.model_runtime.model_providers.base.large_language_model import LargeLanguageModel
 from graphon.nodes.base.node import Node
 from graphon.nodes.code.code_node import WorkflowCodeExecutor
 from graphon.nodes.code.entities import CodeLanguage
@@ -121,6 +121,7 @@ def get_node_type_classes_mapping() -> Mapping[NodeType, Mapping[str, type[Node]
 
 
 def resolve_workflow_node_class(*, node_type: NodeType, node_version: str) -> type[Node]:
+    """Resolve the production node class for the requested type/version."""
     node_mapping = get_node_type_classes_mapping().get(node_type)
     if not node_mapping:
         raise ValueError(f"No class mapping found for node type: {node_type}")
@@ -297,7 +298,7 @@ class DifyNodeFactory(NodeFactory):
         )
         self._jinja2_template_renderer = CodeExecutorJinja2TemplateRenderer()
         self._template_transform_max_output_length = dify_config.TEMPLATE_TRANSFORM_MAX_LENGTH
-        self._http_request_http_client = ssrf_proxy
+        self._http_request_http_client = graphon_ssrf_proxy
         self._bound_tool_file_manager_factory = lambda: DifyToolFileManager(
             self._dify_context,
             conversation_id_getter=self._conversation_id,
@@ -364,10 +365,14 @@ class DifyNodeFactory(NodeFactory):
             (including pydantic ValidationError, which subclasses ValueError),
             if node type is unknown, or if no implementation exists for the resolved version
         """
-        typed_node_config = NodeConfigDictAdapter.validate_python(normalize_node_config_for_graph(node_config))
+        typed_node_config = NodeConfigDictAdapter.validate_python(adapt_node_config_for_graph(node_config))
         node_id = typed_node_config["id"]
         node_data = typed_node_config["data"]
         node_class = self._resolve_node_class(node_type=node_data.type, node_version=str(node_data.version))
+        # Graph configs are initially validated against permissive shared node data.
+        # Re-validate using the resolved node class so workflow-local node schemas
+        # stay explicit and constructors receive the concrete typed payload.
+        resolved_node_data = self._validate_resolved_node_data(node_class, node_data)
         node_type = node_data.type
         node_init_kwargs_factories: Mapping[NodeType, Callable[[], dict[str, object]]] = {
             BuiltinNodeTypes.CODE: lambda: {
@@ -391,7 +396,7 @@ class DifyNodeFactory(NodeFactory):
             },
             BuiltinNodeTypes.LLM: lambda: self._build_llm_compatible_node_init_kwargs(
                 node_class=node_class,
-                node_data=node_data,
+                node_data=resolved_node_data,
                 wrap_model_instance=True,
                 include_http_client=True,
                 include_llm_file_saver=True,
@@ -405,7 +410,7 @@ class DifyNodeFactory(NodeFactory):
             },
             BuiltinNodeTypes.QUESTION_CLASSIFIER: lambda: self._build_llm_compatible_node_init_kwargs(
                 node_class=node_class,
-                node_data=node_data,
+                node_data=resolved_node_data,
                 wrap_model_instance=True,
                 include_http_client=True,
                 include_llm_file_saver=True,
@@ -415,7 +420,7 @@ class DifyNodeFactory(NodeFactory):
             ),
             BuiltinNodeTypes.PARAMETER_EXTRACTOR: lambda: self._build_llm_compatible_node_init_kwargs(
                 node_class=node_class,
-                node_data=node_data,
+                node_data=resolved_node_data,
                 wrap_model_instance=True,
                 include_http_client=False,
                 include_llm_file_saver=False,
@@ -436,8 +441,8 @@ class DifyNodeFactory(NodeFactory):
         }
         node_init_kwargs = node_init_kwargs_factories.get(node_type, lambda: {})()
         return node_class(
-            id=node_id,
-            config=typed_node_config,
+            node_id=node_id,
+            config=resolved_node_data,
             graph_init_params=self.graph_init_params,
             graph_runtime_state=self.graph_runtime_state,
             **node_init_kwargs,
@@ -448,7 +453,10 @@ class DifyNodeFactory(NodeFactory):
         """
         Re-validate the permissive graph payload with the concrete NodeData model declared by the resolved node class.
         """
-        return node_class.validate_node_data(node_data)
+        validate_node_data = getattr(node_class, "validate_node_data", None)
+        if callable(validate_node_data):
+            return cast("BaseNodeData", validate_node_data(node_data))
+        return node_data
 
     @staticmethod
     def _resolve_node_class(*, node_type: NodeType, node_version: str) -> type[Node]:
diff --git a/api/core/workflow/node_runtime.py b/api/core/workflow/node_runtime.py
index 2e632e56f0..b8725853c4 100644
--- a/api/core/workflow/node_runtime.py
+++ b/api/core/workflow/node_runtime.py
@@ -2,7 +2,7 @@ from __future__ import annotations
 
 from collections.abc import Callable, Generator, Mapping, Sequence
 from dataclasses import dataclass
-from typing import TYPE_CHECKING, Any, cast
+from typing import TYPE_CHECKING, Any, Literal, cast, overload
 
 from sqlalchemy import select
 from sqlalchemy.orm import Session
@@ -41,7 +41,7 @@ from graphon.model_runtime.entities.llm_entities import (
 )
 from graphon.model_runtime.entities.message_entities import PromptMessage, PromptMessageTool
 from graphon.model_runtime.entities.model_entities import AIModelEntity
-from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
+from graphon.model_runtime.model_providers.base.large_language_model import LargeLanguageModel
 from graphon.nodes.human_input.entities import HumanInputNodeData
 from graphon.nodes.llm.runtime_protocols import (
     PreparedLLMProtocol,
@@ -64,7 +64,7 @@ from models.dataset import SegmentAttachmentBinding
 from models.model import UploadFile
 from services.tools.builtin_tools_manage_service import BuiltinToolManageService
 
-from .human_input_compat import (
+from .human_input_adapter import (
     BoundRecipient,
     DeliveryChannelConfig,
     DeliveryMethodType,
@@ -173,6 +173,28 @@ class DifyPreparedLLM(PreparedLLMProtocol):
     def get_llm_num_tokens(self, prompt_messages: Sequence[PromptMessage]) -> int:
         return self._model_instance.get_llm_num_tokens(prompt_messages)
 
+    @overload
+    def invoke_llm(
+        self,
+        *,
+        prompt_messages: Sequence[PromptMessage],
+        model_parameters: Mapping[str, Any],
+        tools: Sequence[PromptMessageTool] | None,
+        stop: Sequence[str] | None,
+        stream: Literal[False],
+    ) -> LLMResult: ...
+
+    @overload
+    def invoke_llm(
+        self,
+        *,
+        prompt_messages: Sequence[PromptMessage],
+        model_parameters: Mapping[str, Any],
+        tools: Sequence[PromptMessageTool] | None,
+        stop: Sequence[str] | None,
+        stream: Literal[True],
+    ) -> Generator[LLMResultChunk, None, None]: ...
+
     def invoke_llm(
         self,
         *,
@@ -190,6 +212,28 @@ class DifyPreparedLLM(PreparedLLMProtocol):
             stream=stream,
         )
 
+    @overload
+    def invoke_llm_with_structured_output(
+        self,
+        *,
+        prompt_messages: Sequence[PromptMessage],
+        json_schema: Mapping[str, Any],
+        model_parameters: Mapping[str, Any],
+        stop: Sequence[str] | None,
+        stream: Literal[False],
+    ) -> LLMResultWithStructuredOutput: ...
+
+    @overload
+    def invoke_llm_with_structured_output(
+        self,
+        *,
+        prompt_messages: Sequence[PromptMessage],
+        json_schema: Mapping[str, Any],
+        model_parameters: Mapping[str, Any],
+        stop: Sequence[str] | None,
+        stream: Literal[True],
+    ) -> Generator[LLMResultChunkWithStructuredOutput, None, None]: ...
+
     def invoke_llm_with_structured_output(
         self,
         *,
diff --git a/api/core/workflow/nodes/agent/agent_node.py b/api/core/workflow/nodes/agent/agent_node.py
index 7b000101b0..68a24e86b1 100644
--- a/api/core/workflow/nodes/agent/agent_node.py
+++ b/api/core/workflow/nodes/agent/agent_node.py
@@ -5,7 +5,6 @@ from typing import TYPE_CHECKING, Any
 
 from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY, DifyRunContext
 from core.workflow.system_variables import SystemVariableKey, get_system_text
-from graphon.entities.graph_config import NodeConfigDict
 from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionStatus
 from graphon.node_events import NodeEventBase, NodeRunResult, StreamCompletedEvent
 from graphon.nodes.base.node import Node
@@ -35,18 +34,18 @@ class AgentNode(Node[AgentNodeData]):
 
     def __init__(
         self,
-        id: str,
-        config: NodeConfigDict,
+        node_id: str,
+        config: AgentNodeData,
+        *,
         graph_init_params: GraphInitParams,
         graph_runtime_state: GraphRuntimeState,
-        *,
         strategy_resolver: AgentStrategyResolver,
         presentation_provider: AgentStrategyPresentationProvider,
         runtime_support: AgentRuntimeSupport,
         message_transformer: AgentMessageTransformer,
     ) -> None:
         super().__init__(
-            id=id,
+            node_id=node_id,
             config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=graph_runtime_state,
diff --git a/api/core/workflow/nodes/datasource/datasource_node.py b/api/core/workflow/nodes/datasource/datasource_node.py
index e4f6b3b470..f3006c4242 100644
--- a/api/core/workflow/nodes/datasource/datasource_node.py
+++ b/api/core/workflow/nodes/datasource/datasource_node.py
@@ -7,7 +7,6 @@ from core.datasource.entities.datasource_entities import DatasourceProviderType
 from core.plugin.impl.exc import PluginDaemonClientSideError
 from core.workflow.file_reference import resolve_file_record_id
 from core.workflow.system_variables import SystemVariableKey, get_system_segment
-from graphon.entities.graph_config import NodeConfigDict
 from graphon.enums import (
     BuiltinNodeTypes,
     NodeExecutionType,
@@ -36,13 +35,14 @@ class DatasourceNode(Node[DatasourceNodeData]):
 
     def __init__(
         self,
-        id: str,
-        config: NodeConfigDict,
+        node_id: str,
+        config: DatasourceNodeData,
+        *,
         graph_init_params: "GraphInitParams",
         graph_runtime_state: "GraphRuntimeState",
-    ):
+    ) -> None:
         super().__init__(
-            id=id,
+            node_id=node_id,
             config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=graph_runtime_state,
diff --git a/api/core/workflow/nodes/knowledge_index/knowledge_index_node.py b/api/core/workflow/nodes/knowledge_index/knowledge_index_node.py
index d5cab05dbe..9c1b7ab2c4 100644
--- a/api/core/workflow/nodes/knowledge_index/knowledge_index_node.py
+++ b/api/core/workflow/nodes/knowledge_index/knowledge_index_node.py
@@ -7,7 +7,6 @@ from core.rag.index_processor.index_processor_base import SummaryIndexSettingDic
 from core.rag.summary_index.summary_index import SummaryIndex
 from core.workflow.nodes.knowledge_index import KNOWLEDGE_INDEX_NODE_TYPE
 from core.workflow.system_variables import SystemVariableKey, get_system_segment, get_system_text
-from graphon.entities.graph_config import NodeConfigDict
 from graphon.enums import NodeExecutionType, WorkflowNodeExecutionStatus
 from graphon.node_events import NodeRunResult
 from graphon.nodes.base.node import Node
@@ -32,12 +31,18 @@ class KnowledgeIndexNode(Node[KnowledgeIndexNodeData]):
 
     def __init__(
         self,
-        id: str,
-        config: NodeConfigDict,
+        node_id: str,
+        config: KnowledgeIndexNodeData,
+        *,
         graph_init_params: "GraphInitParams",
         graph_runtime_state: "GraphRuntimeState",
     ) -> None:
-        super().__init__(id, config, graph_init_params, graph_runtime_state)
+        super().__init__(
+            node_id=node_id,
+            config=config,
+            graph_init_params=graph_init_params,
+            graph_runtime_state=graph_runtime_state,
+        )
         self.index_processor = IndexProcessor()
         self.summary_index_service = SummaryIndex()
 
diff --git a/api/core/workflow/nodes/knowledge_retrieval/knowledge_retrieval_node.py b/api/core/workflow/nodes/knowledge_retrieval/knowledge_retrieval_node.py
index 47ad14b499..25f73e446d 100644
--- a/api/core/workflow/nodes/knowledge_retrieval/knowledge_retrieval_node.py
+++ b/api/core/workflow/nodes/knowledge_retrieval/knowledge_retrieval_node.py
@@ -14,7 +14,6 @@ from core.rag.data_post_processor.data_post_processor import RerankingModelDict,
 from core.rag.retrieval.dataset_retrieval import DatasetRetrieval
 from core.workflow.file_reference import parse_file_reference
 from graphon.entities import GraphInitParams
-from graphon.entities.graph_config import NodeConfigDict
 from graphon.enums import (
     BuiltinNodeTypes,
     WorkflowNodeExecutionMetadataKey,
@@ -50,6 +49,18 @@ if TYPE_CHECKING:
 logger = logging.getLogger(__name__)
 
 
+def _normalize_metadata_filter_scalar(value: object) -> str | int | float | None:
+    if value is None or isinstance(value, (str, float)):
+        return value
+    if isinstance(value, int) and not isinstance(value, bool):
+        return value
+    return str(value)
+
+
+def _normalize_metadata_filter_sequence_item(value: object) -> str:
+    return value if isinstance(value, str) else str(value)
+
+
 class KnowledgeRetrievalNode(LLMUsageTrackingMixin, Node[KnowledgeRetrievalNodeData]):
     node_type = BuiltinNodeTypes.KNOWLEDGE_RETRIEVAL
 
@@ -59,13 +70,14 @@ class KnowledgeRetrievalNode(LLMUsageTrackingMixin, Node[KnowledgeRetrievalNodeD
 
     def __init__(
         self,
-        id: str,
-        config: NodeConfigDict,
+        node_id: str,
+        config: KnowledgeRetrievalNodeData,
+        *,
         graph_init_params: "GraphInitParams",
         graph_runtime_state: "GraphRuntimeState",
-    ):
+    ) -> None:
         super().__init__(
-            id=id,
+            node_id=node_id,
             config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=graph_runtime_state,
@@ -282,18 +294,21 @@ class KnowledgeRetrievalNode(LLMUsageTrackingMixin, Node[KnowledgeRetrievalNodeD
         resolved_conditions: list[Condition] = []
         for cond in conditions.conditions or []:
             value = cond.value
+            resolved_value: str | Sequence[str] | int | float | None
             if isinstance(value, str):
                 segment_group = variable_pool.convert_template(value)
                 if len(segment_group.value) == 1:
-                    resolved_value = segment_group.value[0].to_object()
+                    resolved_value = _normalize_metadata_filter_scalar(segment_group.value[0].to_object())
                 else:
                     resolved_value = segment_group.text
             elif isinstance(value, Sequence) and all(isinstance(v, str) for v in value):
-                resolved_values = []
-                for v in value:  # type: ignore
+                resolved_values: list[str] = []
+                for v in value:
                     segment_group = variable_pool.convert_template(v)
                     if len(segment_group.value) == 1:
-                        resolved_values.append(segment_group.value[0].to_object())
+                        resolved_values.append(
+                            _normalize_metadata_filter_sequence_item(segment_group.value[0].to_object())
+                        )
                     else:
                         resolved_values.append(segment_group.text)
                 resolved_value = resolved_values
diff --git a/api/factories/file_factory/builders.py b/api/factories/file_factory/builders.py
index ce1fa441c2..1d2ad4d445 100644
--- a/api/factories/file_factory/builders.py
+++ b/api/factories/file_factory/builders.py
@@ -148,11 +148,11 @@ def _build_from_local_file(
         )
 
         return File(
-            id=mapping.get("id"),
+            file_id=mapping.get("id"),
             filename=row.name,
             extension="." + row.extension,
             mime_type=row.mime_type,
-            type=file_type,
+            file_type=file_type,
             transfer_method=transfer_method,
             remote_url=row.source_url,
             reference=build_file_reference(record_id=str(row.id)),
@@ -196,11 +196,11 @@ def _build_from_remote_url(
             )
 
             return File(
-                id=mapping.get("id"),
+                file_id=mapping.get("id"),
                 filename=upload_file.name,
                 extension="." + upload_file.extension,
                 mime_type=upload_file.mime_type,
-                type=file_type,
+                file_type=file_type,
                 transfer_method=transfer_method,
                 remote_url=helpers.get_signed_file_url(upload_file_id=str(upload_file_id)),
                 reference=build_file_reference(record_id=str(upload_file.id)),
@@ -222,9 +222,9 @@ def _build_from_remote_url(
     )
 
     return File(
-        id=mapping.get("id"),
+        file_id=mapping.get("id"),
         filename=filename,
-        type=file_type,
+        file_type=file_type,
         transfer_method=transfer_method,
         remote_url=url,
         mime_type=mime_type,
@@ -263,9 +263,9 @@ def _build_from_tool_file(
         )
 
         return File(
-            id=mapping.get("id"),
+            file_id=mapping.get("id"),
             filename=tool_file.name,
-            type=file_type,
+            file_type=file_type,
             transfer_method=transfer_method,
             remote_url=tool_file.original_url,
             reference=build_file_reference(record_id=str(tool_file.id)),
@@ -306,9 +306,9 @@ def _build_from_datasource_file(
         )
 
         return File(
-            id=mapping.get("datasource_file_id"),
+            file_id=mapping.get("datasource_file_id"),
             filename=datasource_file.name,
-            type=file_type,
+            file_type=file_type,
             transfer_method=FileTransferMethod.TOOL_FILE,
             remote_url=datasource_file.source_url,
             reference=build_file_reference(record_id=str(datasource_file.id)),
diff --git a/api/fields/_value_type_serializer.py b/api/fields/_value_type_serializer.py
index b5acbbbcb4..d518114777 100644
--- a/api/fields/_value_type_serializer.py
+++ b/api/fields/_value_type_serializer.py
@@ -10,9 +10,9 @@ class _VarTypedDict(TypedDict, total=False):
 
 def serialize_value_type(v: _VarTypedDict | Segment) -> str:
     if isinstance(v, Segment):
-        return v.value_type.exposed_type().value
+        return str(v.value_type.exposed_type())
     else:
         value_type = v.get("value_type")
         if value_type is None:
             raise ValueError("value_type is required but not provided")
-        return value_type.exposed_type().value
+        return str(value_type.exposed_type())
diff --git a/api/fields/conversation_variable_fields.py b/api/fields/conversation_variable_fields.py
index cf4a71d545..e4219ba1ee 100644
--- a/api/fields/conversation_variable_fields.py
+++ b/api/fields/conversation_variable_fields.py
@@ -57,10 +57,10 @@ class ConversationVariableResponse(ResponseModel):
     def _normalize_value_type(cls, value: Any) -> str:
         exposed_type = getattr(value, "exposed_type", None)
         if callable(exposed_type):
-            return str(exposed_type().value)
+            return str(exposed_type())
         if isinstance(value, str):
             try:
-                return str(SegmentType(value).exposed_type().value)
+                return str(SegmentType(value).exposed_type())
             except ValueError:
                 return value
         try:
diff --git a/api/fields/workflow_fields.py b/api/fields/workflow_fields.py
index f9b5e98936..6e947858ba 100644
--- a/api/fields/workflow_fields.py
+++ b/api/fields/workflow_fields.py
@@ -26,7 +26,7 @@ class EnvironmentVariableField(fields.Raw):
                 "id": value.id,
                 "name": value.name,
                 "value": value.value,
-                "value_type": value.value_type.exposed_type().value,
+                "value_type": str(value.value_type.exposed_type()),
                 "description": value.description,
             }
         if isinstance(value, dict):
diff --git a/api/models/human_input.py b/api/models/human_input.py
index b4c7a634b6..7447d3efcb 100644
--- a/api/models/human_input.py
+++ b/api/models/human_input.py
@@ -6,7 +6,7 @@ import sqlalchemy as sa
 from pydantic import BaseModel, Field
 from sqlalchemy.orm import Mapped, mapped_column, relationship
 
-from core.workflow.human_input_compat import DeliveryMethodType
+from core.workflow.human_input_adapter import DeliveryMethodType
 from graphon.nodes.human_input.enums import HumanInputFormKind, HumanInputFormStatus
 from libs.helper import generate_string
 
diff --git a/api/models/utils/file_input_compat.py b/api/models/utils/file_input_compat.py
index a2dc8f6157..77dcbd13d4 100644
--- a/api/models/utils/file_input_compat.py
+++ b/api/models/utils/file_input_compat.py
@@ -5,7 +5,8 @@ from functools import lru_cache
 from typing import Any
 
 from core.workflow.file_reference import parse_file_reference
-from graphon.file import File, FileTransferMethod
+from graphon.file import File, FileTransferMethod, FileType
+from graphon.file.constants import FILE_MODEL_IDENTITY, maybe_file_object
 
 
 @lru_cache(maxsize=1)
@@ -43,6 +44,124 @@ def resolve_file_mapping_tenant_id(
     return tenant_resolver()
 
 
+def build_file_from_mapping_without_lookup(*, file_mapping: Mapping[str, Any]) -> File:
+    """Build a graph `File` directly from serialized metadata."""
+
+    def _coerce_file_type(value: Any) -> FileType:
+        if isinstance(value, FileType):
+            return value
+        if isinstance(value, str):
+            return FileType.value_of(value)
+        raise ValueError("file type is required in file mapping")
+
+    mapping = dict(file_mapping)
+    transfer_method_value = mapping.get("transfer_method")
+    if isinstance(transfer_method_value, FileTransferMethod):
+        transfer_method = transfer_method_value
+    elif isinstance(transfer_method_value, str):
+        transfer_method = FileTransferMethod.value_of(transfer_method_value)
+    else:
+        raise ValueError("transfer_method is required in file mapping")
+
+    file_id = mapping.get("file_id")
+    if not isinstance(file_id, str) or not file_id:
+        legacy_id = mapping.get("id")
+        file_id = legacy_id if isinstance(legacy_id, str) and legacy_id else None
+
+    related_id = resolve_file_record_id(mapping)
+    if related_id is None:
+        raw_related_id = mapping.get("related_id")
+        related_id = raw_related_id if isinstance(raw_related_id, str) and raw_related_id else None
+
+    remote_url = mapping.get("remote_url")
+    if not isinstance(remote_url, str) or not remote_url:
+        url = mapping.get("url")
+        remote_url = url if isinstance(url, str) and url else None
+
+    reference = mapping.get("reference")
+    if not isinstance(reference, str) or not reference:
+        reference = None
+
+    filename = mapping.get("filename")
+    if not isinstance(filename, str):
+        filename = None
+
+    extension = mapping.get("extension")
+    if not isinstance(extension, str):
+        extension = None
+
+    mime_type = mapping.get("mime_type")
+    if not isinstance(mime_type, str):
+        mime_type = None
+
+    size = mapping.get("size", -1)
+    if not isinstance(size, int):
+        size = -1
+
+    storage_key = mapping.get("storage_key")
+    if not isinstance(storage_key, str):
+        storage_key = None
+
+    tenant_id = mapping.get("tenant_id")
+    if not isinstance(tenant_id, str):
+        tenant_id = None
+
+    dify_model_identity = mapping.get("dify_model_identity")
+    if not isinstance(dify_model_identity, str):
+        dify_model_identity = FILE_MODEL_IDENTITY
+
+    tool_file_id = mapping.get("tool_file_id")
+    if not isinstance(tool_file_id, str):
+        tool_file_id = None
+
+    upload_file_id = mapping.get("upload_file_id")
+    if not isinstance(upload_file_id, str):
+        upload_file_id = None
+
+    datasource_file_id = mapping.get("datasource_file_id")
+    if not isinstance(datasource_file_id, str):
+        datasource_file_id = None
+
+    return File(
+        file_id=file_id,
+        tenant_id=tenant_id,
+        file_type=_coerce_file_type(mapping.get("file_type", mapping.get("type"))),
+        transfer_method=transfer_method,
+        remote_url=remote_url,
+        reference=reference,
+        related_id=related_id,
+        filename=filename,
+        extension=extension,
+        mime_type=mime_type,
+        size=size,
+        storage_key=storage_key,
+        dify_model_identity=dify_model_identity,
+        url=remote_url,
+        tool_file_id=tool_file_id,
+        upload_file_id=upload_file_id,
+        datasource_file_id=datasource_file_id,
+    )
+
+
+def rebuild_serialized_graph_files_without_lookup(value: Any) -> Any:
+    """Recursively rebuild serialized graph file payloads into `File` objects.
+
+    `graphon` 0.2.2 no longer accepts legacy serialized file mappings via
+    `model_validate_json()`. Dify keeps this recovery path at the model boundary
+    so historical JSON blobs remain readable without reintroducing global graph
+    patches or test-local coercion.
+    """
+    if isinstance(value, list):
+        return [rebuild_serialized_graph_files_without_lookup(item) for item in value]
+
+    if isinstance(value, dict):
+        if maybe_file_object(value):
+            return build_file_from_mapping_without_lookup(file_mapping=value)
+        return {key: rebuild_serialized_graph_files_without_lookup(item) for key, item in value.items()}
+
+    return value
+
+
 def build_file_from_stored_mapping(
     *,
     file_mapping: Mapping[str, Any],
@@ -76,12 +195,7 @@ def build_file_from_stored_mapping(
             pass
 
     if transfer_method == FileTransferMethod.REMOTE_URL and record_id is None:
-        remote_url = mapping.get("remote_url")
-        if not isinstance(remote_url, str) or not remote_url:
-            url = mapping.get("url")
-            if isinstance(url, str) and url:
-                mapping["remote_url"] = url
-        return File.model_validate(mapping)
+        return build_file_from_mapping_without_lookup(file_mapping=mapping)
 
     return file_factory.build_from_mapping(
         mapping=mapping,
diff --git a/api/models/workflow.py b/api/models/workflow.py
index dfda03c2ee..d127244b0f 100644
--- a/api/models/workflow.py
+++ b/api/models/workflow.py
@@ -24,7 +24,7 @@ from sqlalchemy.orm import Mapped, mapped_column
 from typing_extensions import deprecated
 
 from core.trigger.constants import TRIGGER_PLUGIN_NODE_TYPE
-from core.workflow.human_input_compat import normalize_node_config_for_graph
+from core.workflow.human_input_adapter import adapt_node_config_for_graph
 from core.workflow.variable_prefixes import (
     CONVERSATION_VARIABLE_NODE_ID,
     SYSTEM_VARIABLE_NODE_ID,
@@ -64,7 +64,10 @@ from .base import Base, DefaultFieldsDCMixin, TypeBase
 from .engine import db
 from .enums import CreatorUserRole, DraftVariableType, ExecutionOffLoadType, WorkflowRunTriggeredFrom
 from .types import EnumText, LongText, StringUUID
-from .utils.file_input_compat import build_file_from_stored_mapping
+from .utils.file_input_compat import (
+    build_file_from_mapping_without_lookup,
+    build_file_from_stored_mapping,
+)
 
 logger = logging.getLogger(__name__)
 
@@ -290,7 +293,7 @@ class Workflow(Base):  # bug
             node_config: dict[str, Any] = next(filter(lambda node: node["id"] == node_id, nodes))
         except StopIteration:
             raise NodeNotFoundError(node_id)
-        return NodeConfigDictAdapter.validate_python(normalize_node_config_for_graph(node_config))
+        return NodeConfigDictAdapter.validate_python(adapt_node_config_for_graph(node_config))
 
     @staticmethod
     def get_node_type_from_node_config(node_config: NodeConfigDict) -> NodeType:
@@ -1688,7 +1691,7 @@ class WorkflowDraftVariable(Base):
                 return cast(Any, value)
             normalized_file = dict(value)
             normalized_file.pop("tenant_id", None)
-            return File.model_validate(normalized_file)
+            return build_file_from_mapping_without_lookup(file_mapping=normalized_file)
         elif isinstance(value, list) and value:
             value_list = cast(list[Any], value)
             first: Any = value_list[0]
@@ -1698,7 +1701,7 @@ class WorkflowDraftVariable(Base):
             for item in value_list:
                 normalized_file = dict(cast(dict[str, Any], item))
                 normalized_file.pop("tenant_id", None)
-                file_list.append(File.model_validate(normalized_file))
+                file_list.append(build_file_from_mapping_without_lookup(file_mapping=normalized_file))
             return cast(Any, file_list)
         else:
             return cast(Any, value)
diff --git a/api/providers/trace/trace-tencent/src/dify_trace_tencent/tencent_trace.py b/api/providers/trace/trace-tencent/src/dify_trace_tencent/tencent_trace.py
index cfcf6b307e..a8c480e4a5 100644
--- a/api/providers/trace/trace-tencent/src/dify_trace_tencent/tencent_trace.py
+++ b/api/providers/trace/trace-tencent/src/dify_trace_tencent/tencent_trace.py
@@ -1,7 +1,6 @@
-"""
-Tencent APM tracing implementation with separated concerns
-"""
+"""Tencent APM tracing with idempotent client cleanup."""
 
+import inspect
 import logging
 
 from sqlalchemy import select
@@ -38,10 +37,18 @@ class TencentDataTrace(BaseTraceInstance):
     """
     Tencent APM trace implementation with single responsibility principle.
     Acts as a coordinator that delegates specific tasks to specialized classes.
+
+    The instance owns a long-lived ``TencentTraceClient``. Cleanup may happen
+    explicitly in tests or implicitly during garbage collection, so shutdown
+    must be safe to call multiple times.
     """
 
+    trace_client: TencentTraceClient
+    _closed: bool
+
     def __init__(self, tencent_config: TencentConfig):
         super().__init__(tencent_config)
+        self._closed = False
         self.trace_client = TencentTraceClient(
             service_name=tencent_config.service_name,
             endpoint=tencent_config.endpoint,
@@ -513,10 +520,25 @@ class TencentDataTrace(BaseTraceInstance):
         except Exception:
             logger.debug("[Tencent APM] Failed to record message trace duration")
 
-    def __del__(self):
-        """Ensure proper cleanup on garbage collection."""
+    def close(self) -> None:
+        """Synchronously and idempotently shutdown the underlying trace client."""
+        if getattr(self, "_closed", False):
+            return
+
+        self._closed = True
+        trace_client = getattr(self, "trace_client", None)
+        if trace_client is None:
+            return
+
         try:
-            if hasattr(self, "trace_client"):
-                self.trace_client.shutdown()
+            shutdown_result = trace_client.shutdown()
+            if inspect.isawaitable(shutdown_result):
+                close_awaitable = getattr(shutdown_result, "close", None)
+                if callable(close_awaitable):
+                    close_awaitable()
         except Exception:
             logger.exception("[Tencent APM] Failed to shutdown trace client during cleanup")
+
+    def __del__(self):
+        """Ensure best-effort cleanup on garbage collection without retrying shutdown."""
+        self.close()
diff --git a/api/providers/trace/trace-tencent/tests/unit_tests/tencent_trace/test_tencent_trace.py b/api/providers/trace/trace-tencent/tests/unit_tests/tencent_trace/test_tencent_trace.py
index a91a0aa558..54524b09ca 100644
--- a/api/providers/trace/trace-tencent/tests/unit_tests/tencent_trace/test_tencent_trace.py
+++ b/api/providers/trace/trace-tencent/tests/unit_tests/tencent_trace/test_tencent_trace.py
@@ -1,5 +1,7 @@
+import gc
 import logging
-from unittest.mock import MagicMock, patch
+import warnings
+from unittest.mock import AsyncMock, MagicMock, patch
 
 import pytest
 from dify_trace_tencent.config import TencentConfig
@@ -632,13 +634,38 @@ class TestTencentDataTrace:
         with patch("dify_trace_tencent.tencent_trace.logger.debug") as mock_log:
             tencent_data_trace._record_message_trace_duration(trace_info)
 
-    def test_del(self, tencent_data_trace):
+    def test_close(self, tencent_data_trace):
         client = tencent_data_trace.trace_client
-        tencent_data_trace.__del__()
+        tencent_data_trace.close()
         client.shutdown.assert_called_once()
 
-    def test_del_exception(self, tencent_data_trace):
+    def test_close_is_idempotent(self, tencent_data_trace):
+        client = tencent_data_trace.trace_client
+
+        tencent_data_trace.close()
+        tencent_data_trace.close()
+
+        client.shutdown.assert_called_once()
+
+    def test_close_exception(self, tencent_data_trace):
         tencent_data_trace.trace_client.shutdown.side_effect = Exception("error")
         with patch("dify_trace_tencent.tencent_trace.logger.exception") as mock_log:
-            tencent_data_trace.__del__()
+            tencent_data_trace.close()
             mock_log.assert_called_once_with("[Tencent APM] Failed to shutdown trace client during cleanup")
+
+    def test_close_handles_async_shutdown_mock(self, tencent_data_trace):
+        shutdown = AsyncMock()
+        tencent_data_trace.trace_client.shutdown = shutdown
+
+        with warnings.catch_warnings(record=True) as caught:
+            warnings.simplefilter("always")
+            tencent_data_trace.close()
+            gc.collect()
+
+        shutdown.assert_called_once()
+        assert not [
+            warning
+            for warning in caught
+            if issubclass(warning.category, RuntimeWarning)
+            and "AsyncMockMixin._execute_mock_call" in str(warning.message)
+        ]
diff --git a/api/pyproject.toml b/api/pyproject.toml
index 12b8b3d782..8f6ee796ab 100644
--- a/api/pyproject.toml
+++ b/api/pyproject.toml
@@ -44,7 +44,7 @@ dependencies = [
 
     # Emerging: newer and fast-moving, use compatible pins
     "fastopenapi[flask]~=0.7.0",
-    "graphon~=0.1.2",
+    "graphon~=0.2.2",
     "httpx-sse~=0.4.0",
     "json-repair~=0.59.2",
 ]
diff --git a/api/services/app_service.py b/api/services/app_service.py
index afd98e2975..038c59633a 100644
--- a/api/services/app_service.py
+++ b/api/services/app_service.py
@@ -16,7 +16,7 @@ from core.tools.utils.configuration import ToolParameterConfigurationManager
 from events.app_event import app_was_created, app_was_deleted, app_was_updated
 from extensions.ext_database import db
 from graphon.model_runtime.entities.model_entities import ModelPropertyKey, ModelType
-from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
+from graphon.model_runtime.model_providers.base.large_language_model import LargeLanguageModel
 from libs.datetime_utils import naive_utc_now
 from libs.login import current_user
 from models import Account
diff --git a/api/services/dataset_service.py b/api/services/dataset_service.py
index e6f5f80a6d..894cb05687 100644
--- a/api/services/dataset_service.py
+++ b/api/services/dataset_service.py
@@ -30,7 +30,7 @@ from extensions.ext_database import db
 from extensions.ext_redis import redis_client
 from graphon.file import helpers as file_helpers
 from graphon.model_runtime.entities.model_entities import ModelFeature, ModelType
-from graphon.model_runtime.model_providers.__base.text_embedding_model import TextEmbeddingModel
+from graphon.model_runtime.model_providers.base.text_embedding_model import TextEmbeddingModel
 from libs import helper
 from libs.datetime_utils import naive_utc_now
 from libs.login import current_user
diff --git a/api/services/human_input_delivery_test_service.py b/api/services/human_input_delivery_test_service.py
index 68ef67dec1..8b4983e5f7 100644
--- a/api/services/human_input_delivery_test_service.py
+++ b/api/services/human_input_delivery_test_service.py
@@ -8,7 +8,7 @@ from sqlalchemy import Engine, select
 from sqlalchemy.orm import sessionmaker
 
 from configs import dify_config
-from core.workflow.human_input_compat import (
+from core.workflow.human_input_adapter import (
     DeliveryChannelConfig,
     EmailDeliveryConfig,
     EmailDeliveryMethod,
diff --git a/api/services/rag_pipeline/rag_pipeline.py b/api/services/rag_pipeline/rag_pipeline.py
index 968600d1bc..9db6682e10 100644
--- a/api/services/rag_pipeline/rag_pipeline.py
+++ b/api/services/rag_pipeline/rag_pipeline.py
@@ -476,7 +476,7 @@ class RagPipelineService:
         :param filters: filter by node config parameters.
         :return:
         """
-        node_type_enum = NodeType(node_type)
+        node_type_enum: NodeType = node_type
         node_mapping = get_node_type_classes_mapping()
 
         # return default block config
diff --git a/api/services/variable_truncator.py b/api/services/variable_truncator.py
index c96050ce13..1529c2b98f 100644
--- a/api/services/variable_truncator.py
+++ b/api/services/variable_truncator.py
@@ -169,7 +169,7 @@ class VariableTruncator(BaseTruncator):
                 return TruncationResult(StringSegment(value=fallback_result.value), True)
 
             # Apply final fallback - convert to JSON string and truncate
-            json_str = dumps_with_segments(result.value, ensure_ascii=False)
+            json_str = dumps_with_segments(result.value)
             if len(json_str) > self._max_size_bytes:
                 json_str = json_str[: self._max_size_bytes] + "..."
             return TruncationResult(result=StringSegment(value=json_str), truncated=True)
diff --git a/api/services/workflow_draft_variable_service.py b/api/services/workflow_draft_variable_service.py
index 5ec00ee336..96f936ff9b 100644
--- a/api/services/workflow_draft_variable_service.py
+++ b/api/services/workflow_draft_variable_service.py
@@ -146,7 +146,7 @@ class DraftVarLoader(VariableLoader):
             variable = segment_to_variable(
                 segment=segment,
                 selector=draft_var.get_selector(),
-                id=draft_var.id,
+                variable_id=draft_var.id,
                 name=draft_var.name,
                 description=draft_var.description,
             )
@@ -180,7 +180,7 @@ class DraftVarLoader(VariableLoader):
             variable = segment_to_variable(
                 segment=segment,
                 selector=draft_var.get_selector(),
-                id=draft_var.id,
+                variable_id=draft_var.id,
                 name=draft_var.name,
                 description=draft_var.description,
             )
@@ -191,7 +191,7 @@ class DraftVarLoader(VariableLoader):
         variable = segment_to_variable(
             segment=segment,
             selector=draft_var.get_selector(),
-            id=draft_var.id,
+            variable_id=draft_var.id,
             name=draft_var.name,
             description=draft_var.description,
         )
@@ -1067,7 +1067,7 @@ class DraftVariableSaver:
             filename = f"{self._generate_filename(name)}.txt"
         else:
             # For other types, store as JSON
-            original_content_serialized = dumps_with_segments(value_seg.value, ensure_ascii=False)
+            original_content_serialized = dumps_with_segments(value_seg.value)
             content_type = "application/json"
             filename = f"{self._generate_filename(name)}.json"
 
diff --git a/api/services/workflow_service.py b/api/services/workflow_service.py
index d71223314e..d4b9095ce5 100644
--- a/api/services/workflow_service.py
+++ b/api/services/workflow_service.py
@@ -18,9 +18,9 @@ from core.plugin.impl.model_runtime_factory import create_plugin_model_assembly,
 from core.repositories import DifyCoreRepositoryFactory
 from core.repositories.human_input_repository import FormCreateParams, HumanInputFormRepositoryImpl
 from core.trigger.constants import is_trigger_node_type
-from core.workflow.human_input_compat import (
+from core.workflow.human_input_adapter import (
     DeliveryChannelConfig,
-    normalize_human_input_node_data_for_graph,
+    adapt_human_input_node_data_for_graph,
     parse_human_input_delivery_methods,
 )
 from core.workflow.node_factory import (
@@ -791,7 +791,7 @@ class WorkflowService:
         :param filters: filter by node config parameters.
         :return:
         """
-        node_type_enum = NodeType(node_type)
+        node_type_enum: NodeType = node_type
         node_mapping = get_node_type_classes_mapping()
 
         # return default block config
@@ -1096,7 +1096,7 @@ class WorkflowService:
             raise ValueError("Node type must be human-input.")
 
         node_data = HumanInputNodeData.model_validate(
-            normalize_human_input_node_data_for_graph(node_config["data"]),
+            adapt_human_input_node_data_for_graph(node_config["data"]),
             from_attributes=True,
         )
         delivery_method = self._resolve_human_input_delivery_method(
@@ -1237,9 +1237,10 @@ class WorkflowService:
             variable_pool=variable_pool,
             start_at=time.perf_counter(),
         )
+        node_data = HumanInputNode.validate_node_data(adapt_human_input_node_data_for_graph(node_config["data"]))
         node = HumanInputNode(
-            id=node_config["id"],
-            config=node_config,
+            node_id=node_config["id"],
+            config=node_data,
             graph_init_params=graph_init_params,
             graph_runtime_state=graph_runtime_state,
             runtime=DifyHumanInputNodeRuntime(run_context),
@@ -1529,7 +1530,7 @@ class WorkflowService:
         from graphon.nodes.human_input.entities import HumanInputNodeData
 
         try:
-            HumanInputNodeData.model_validate(normalize_human_input_node_data_for_graph(node_data))
+            HumanInputNodeData.model_validate(adapt_human_input_node_data_for_graph(node_data))
         except Exception as e:
             raise ValueError(f"Invalid HumanInput node data: {str(e)}")
 
diff --git a/api/tasks/mail_human_input_delivery_task.py b/api/tasks/mail_human_input_delivery_task.py
index f8ae3f4b6e..2a60be7762 100644
--- a/api/tasks/mail_human_input_delivery_task.py
+++ b/api/tasks/mail_human_input_delivery_task.py
@@ -11,7 +11,7 @@ from sqlalchemy.orm import Session, sessionmaker
 
 from configs import dify_config
 from core.app.layers.pause_state_persist_layer import WorkflowResumptionContext
-from core.workflow.human_input_compat import EmailDeliveryConfig, EmailDeliveryMethod
+from core.workflow.human_input_adapter import EmailDeliveryConfig, EmailDeliveryMethod
 from extensions.ext_database import db
 from extensions.ext_mail import mail
 from graphon.runtime import GraphRuntimeState, VariablePool
diff --git a/api/tests/integration_tests/core/workflow/nodes/datasource/test_datasource_node_integration.py b/api/tests/integration_tests/core/workflow/nodes/datasource/test_datasource_node_integration.py
index b5318aaa2b..2392084c36 100644
--- a/api/tests/integration_tests/core/workflow/nodes/datasource/test_datasource_node_integration.py
+++ b/api/tests/integration_tests/core/workflow/nodes/datasource/test_datasource_node_integration.py
@@ -1,5 +1,6 @@
 from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY
 from core.workflow.nodes.datasource.datasource_node import DatasourceNode
+from core.workflow.nodes.datasource.entities import DatasourceNodeData
 from graphon.enums import WorkflowNodeExecutionStatus
 from graphon.node_events import NodeRunResult, StreamCompletedEvent
 
@@ -69,19 +70,16 @@ def test_node_integration_minimal_stream(mocker):
     mocker.patch("core.workflow.nodes.datasource.datasource_node.DatasourceManager", new=_Mgr)
 
     node = DatasourceNode(
-        id="n",
-        config={
-            "id": "n",
-            "data": {
-                "type": "datasource",
-                "version": "1",
-                "title": "Datasource",
-                "provider_type": "plugin",
-                "provider_name": "p",
-                "plugin_id": "plug",
-                "datasource_name": "ds",
-            },
-        },
+        node_id="n",
+        config=DatasourceNodeData(
+            type="datasource",
+            version="1",
+            title="Datasource",
+            provider_type="plugin",
+            provider_name="p",
+            plugin_id="plug",
+            datasource_name="ds",
+        ),
         graph_init_params=_GP(),
         graph_runtime_state=_GS(vp),
     )
diff --git a/api/tests/integration_tests/workflow/nodes/test_code.py b/api/tests/integration_tests/workflow/nodes/test_code.py
index e3476c292b..aaa6092993 100644
--- a/api/tests/integration_tests/workflow/nodes/test_code.py
+++ b/api/tests/integration_tests/workflow/nodes/test_code.py
@@ -11,6 +11,7 @@ from graphon.enums import WorkflowNodeExecutionStatus
 from graphon.graph import Graph
 from graphon.node_events import NodeRunResult
 from graphon.nodes.code.code_node import CodeNode
+from graphon.nodes.code.entities import CodeNodeData
 from graphon.nodes.code.limits import CodeNodeLimits
 from graphon.runtime import GraphRuntimeState, VariablePool
 from tests.workflow_test_utils import build_test_graph_init_params
@@ -64,8 +65,8 @@ def init_code_node(code_config: dict):
     graph = Graph.init(graph_config=graph_config, node_factory=node_factory, root_node_id="start")
 
     node = CodeNode(
-        id=str(uuid.uuid4()),
-        config=code_config,
+        node_id=str(uuid.uuid4()),
+        config=CodeNodeData.model_validate(code_config["data"]),
         graph_init_params=init_params,
         graph_runtime_state=graph_runtime_state,
         code_executor=node_factory._code_executor,
diff --git a/api/tests/integration_tests/workflow/nodes/test_http.py b/api/tests/integration_tests/workflow/nodes/test_http.py
index aa6cf1e021..b9f7b9575b 100644
--- a/api/tests/integration_tests/workflow/nodes/test_http.py
+++ b/api/tests/integration_tests/workflow/nodes/test_http.py
@@ -14,7 +14,7 @@ from core.workflow.system_variables import build_system_variables
 from graphon.enums import WorkflowNodeExecutionStatus
 from graphon.file.file_manager import file_manager
 from graphon.graph import Graph
-from graphon.nodes.http_request import HttpRequestNode, HttpRequestNodeConfig
+from graphon.nodes.http_request import HttpRequestNode, HttpRequestNodeConfig, HttpRequestNodeData
 from graphon.runtime import GraphRuntimeState, VariablePool
 from tests.workflow_test_utils import build_test_graph_init_params
 
@@ -75,8 +75,8 @@ def init_http_node(config: dict):
     graph = Graph.init(graph_config=graph_config, node_factory=node_factory, root_node_id="start")
 
     node = HttpRequestNode(
-        id=str(uuid.uuid4()),
-        config=config,
+        node_id=str(uuid.uuid4()),
+        config=HttpRequestNodeData.model_validate(config["data"]),
         graph_init_params=init_params,
         graph_runtime_state=graph_runtime_state,
         http_request_config=HTTP_REQUEST_CONFIG,
@@ -723,8 +723,8 @@ def test_nested_object_variable_selector(setup_http_mock):
     graph = Graph.init(graph_config=graph_config, node_factory=node_factory, root_node_id="start")
 
     node = HttpRequestNode(
-        id=str(uuid.uuid4()),
-        config=graph_config["nodes"][1],
+        node_id=str(uuid.uuid4()),
+        config=HttpRequestNodeData.model_validate(graph_config["nodes"][1]["data"]),
         graph_init_params=init_params,
         graph_runtime_state=graph_runtime_state,
         http_request_config=HTTP_REQUEST_CONFIG,
diff --git a/api/tests/integration_tests/workflow/nodes/test_llm.py b/api/tests/integration_tests/workflow/nodes/test_llm.py
index fa5d63cfbf..3eead70163 100644
--- a/api/tests/integration_tests/workflow/nodes/test_llm.py
+++ b/api/tests/integration_tests/workflow/nodes/test_llm.py
@@ -11,6 +11,7 @@ from core.workflow.system_variables import build_system_variables
 from extensions.ext_database import db
 from graphon.enums import WorkflowNodeExecutionStatus
 from graphon.node_events import StreamCompletedEvent
+from graphon.nodes.llm.entities import LLMNodeData
 from graphon.nodes.llm.file_saver import LLMFileSaver
 from graphon.nodes.llm.node import LLMNode
 from graphon.nodes.llm.protocols import CredentialsProvider, ModelFactory
@@ -75,8 +76,8 @@ def init_llm_node(config: dict) -> LLMNode:
     llm_file_saver = MagicMock(spec=LLMFileSaver)
 
     node = LLMNode(
-        id=str(uuid.uuid4()),
-        config=config,
+        node_id=str(uuid.uuid4()),
+        config=LLMNodeData.model_validate(config["data"]),
         graph_init_params=init_params,
         graph_runtime_state=graph_runtime_state,
         credentials_provider=MagicMock(spec=CredentialsProvider),
diff --git a/api/tests/integration_tests/workflow/nodes/test_parameter_extractor.py b/api/tests/integration_tests/workflow/nodes/test_parameter_extractor.py
index 52886855b8..f2eabb86c3 100644
--- a/api/tests/integration_tests/workflow/nodes/test_parameter_extractor.py
+++ b/api/tests/integration_tests/workflow/nodes/test_parameter_extractor.py
@@ -11,6 +11,7 @@ from extensions.ext_database import db
 from graphon.enums import WorkflowNodeExecutionStatus
 from graphon.model_runtime.entities import AssistantPromptMessage, UserPromptMessage
 from graphon.nodes.llm.protocols import CredentialsProvider, ModelFactory
+from graphon.nodes.parameter_extractor.entities import ParameterExtractorNodeData
 from graphon.nodes.parameter_extractor.parameter_extractor_node import ParameterExtractorNode
 from graphon.runtime import GraphRuntimeState, VariablePool
 from tests.integration_tests.workflow.nodes.__mock.model import get_mocked_fetch_model_instance
@@ -69,8 +70,8 @@ def init_parameter_extractor_node(config: dict, memory=None):
     graph_runtime_state = GraphRuntimeState(variable_pool=variable_pool, start_at=time.perf_counter())
 
     node = ParameterExtractorNode(
-        id=str(uuid.uuid4()),
-        config=config,
+        node_id=str(uuid.uuid4()),
+        config=ParameterExtractorNodeData.model_validate(config["data"]),
         graph_init_params=init_params,
         graph_runtime_state=graph_runtime_state,
         credentials_provider=MagicMock(spec=CredentialsProvider),
diff --git a/api/tests/integration_tests/workflow/nodes/test_template_transform.py b/api/tests/integration_tests/workflow/nodes/test_template_transform.py
index 9e3e1a47e3..e2e0723fb8 100644
--- a/api/tests/integration_tests/workflow/nodes/test_template_transform.py
+++ b/api/tests/integration_tests/workflow/nodes/test_template_transform.py
@@ -6,6 +6,7 @@ from core.workflow.node_factory import DifyNodeFactory
 from core.workflow.system_variables import build_system_variables
 from graphon.enums import WorkflowNodeExecutionStatus
 from graphon.graph import Graph
+from graphon.nodes.template_transform.entities import TemplateTransformNodeData
 from graphon.nodes.template_transform.template_transform_node import TemplateTransformNode
 from graphon.runtime import GraphRuntimeState, VariablePool
 from graphon.template_rendering import TemplateRenderError
@@ -86,8 +87,8 @@ def test_execute_template_transform():
     assert graph is not None
 
     node = TemplateTransformNode(
-        id=str(uuid.uuid4()),
-        config=config,
+        node_id=str(uuid.uuid4()),
+        config=TemplateTransformNodeData.model_validate(config["data"]),
         graph_init_params=init_params,
         graph_runtime_state=graph_runtime_state,
         jinja2_template_renderer=_SimpleJinja2Renderer(),
diff --git a/api/tests/integration_tests/workflow/nodes/test_tool.py b/api/tests/integration_tests/workflow/nodes/test_tool.py
index f9ec51ee10..a8e9422c1e 100644
--- a/api/tests/integration_tests/workflow/nodes/test_tool.py
+++ b/api/tests/integration_tests/workflow/nodes/test_tool.py
@@ -11,6 +11,7 @@ from graphon.enums import WorkflowNodeExecutionStatus
 from graphon.graph import Graph
 from graphon.node_events import StreamCompletedEvent
 from graphon.nodes.protocols import ToolFileManagerProtocol
+from graphon.nodes.tool.entities import ToolNodeData
 from graphon.nodes.tool.tool_node import ToolNode
 from graphon.runtime import GraphRuntimeState, VariablePool
 from tests.workflow_test_utils import build_test_graph_init_params
@@ -60,8 +61,8 @@ def init_tool_node(config: dict):
     tool_file_manager_factory = MagicMock(spec=ToolFileManagerProtocol)
 
     node = ToolNode(
-        id=str(uuid.uuid4()),
-        config=config,
+        node_id=str(uuid.uuid4()),
+        config=ToolNodeData.model_validate(config["data"]),
         graph_init_params=init_params,
         graph_runtime_state=graph_runtime_state,
         tool_file_manager_factory=tool_file_manager_factory,
diff --git a/api/tests/test_containers_integration_tests/core/repositories/test_human_input_form_repository_impl.py b/api/tests/test_containers_integration_tests/core/repositories/test_human_input_form_repository_impl.py
index 14d5740072..6524d6ce61 100644
--- a/api/tests/test_containers_integration_tests/core/repositories/test_human_input_form_repository_impl.py
+++ b/api/tests/test_containers_integration_tests/core/repositories/test_human_input_form_repository_impl.py
@@ -8,7 +8,7 @@ from sqlalchemy import Engine, select
 from sqlalchemy.orm import Session
 
 from core.repositories.human_input_repository import FormCreateParams, HumanInputFormRepositoryImpl
-from core.workflow.human_input_compat import (
+from core.workflow.human_input_adapter import (
     DeliveryChannelConfig,
     EmailDeliveryConfig,
     EmailDeliveryMethod,
diff --git a/api/tests/test_containers_integration_tests/core/workflow/test_human_input_resume_node_execution.py b/api/tests/test_containers_integration_tests/core/workflow/test_human_input_resume_node_execution.py
index da4f8847d6..5aed230cd4 100644
--- a/api/tests/test_containers_integration_tests/core/workflow/test_human_input_resume_node_execution.py
+++ b/api/tests/test_containers_integration_tests/core/workflow/test_human_input_resume_node_execution.py
@@ -101,8 +101,8 @@ def _build_graph(
 
     start_data = StartNodeData(title="start", variables=[])
     start_node = StartNode(
-        id="start",
-        config={"id": "start", "data": start_data.model_dump()},
+        node_id="start",
+        config=start_data,
         graph_init_params=params,
         graph_runtime_state=runtime_state,
     )
@@ -116,8 +116,8 @@ def _build_graph(
         ],
     )
     human_node = HumanInputNode(
-        id="human",
-        config={"id": "human", "data": human_data.model_dump()},
+        node_id="human",
+        config=human_data,
         graph_init_params=params,
         graph_runtime_state=runtime_state,
         form_repository=form_repository,
@@ -130,8 +130,8 @@ def _build_graph(
         desc=None,
     )
     end_node = EndNode(
-        id="end",
-        config={"id": "end", "data": end_data.model_dump()},
+        node_id="end",
+        config=end_data,
         graph_init_params=params,
         graph_runtime_state=runtime_state,
     )
diff --git a/api/tests/test_containers_integration_tests/factories/test_storage_key_loader.py b/api/tests/test_containers_integration_tests/factories/test_storage_key_loader.py
index 2e207ddc67..35e41035df 100644
--- a/api/tests/test_containers_integration_tests/factories/test_storage_key_loader.py
+++ b/api/tests/test_containers_integration_tests/factories/test_storage_key_loader.py
@@ -123,9 +123,9 @@ class TestStorageKeyLoader(unittest.TestCase):
             file_related_id = related_id
 
         return File(
-            id=str(uuid4()),  # Generate new UUID for File.id
+            file_id=str(uuid4()),  # Generate new UUID for File.id
             tenant_id=tenant_id,
-            type=FileType.DOCUMENT,
+            file_type=FileType.DOCUMENT,
             transfer_method=transfer_method,
             related_id=file_related_id,
             remote_url=remote_url,
diff --git a/api/tests/test_containers_integration_tests/repositories/test_sqlalchemy_execution_extra_content_repository.py b/api/tests/test_containers_integration_tests/repositories/test_sqlalchemy_execution_extra_content_repository.py
index aaf9a85d60..54b7afc018 100644
--- a/api/tests/test_containers_integration_tests/repositories/test_sqlalchemy_execution_extra_content_repository.py
+++ b/api/tests/test_containers_integration_tests/repositories/test_sqlalchemy_execution_extra_content_repository.py
@@ -271,7 +271,7 @@ def _create_recipient(
 
 
 def _create_delivery(session: Session, *, form_id: str) -> HumanInputDelivery:
-    from core.workflow.human_input_compat import DeliveryMethodType
+    from core.workflow.human_input_adapter import DeliveryMethodType
     from models.human_input import ConsoleDeliveryPayload
 
     delivery = HumanInputDelivery(
diff --git a/api/tests/test_containers_integration_tests/services/test_human_input_delivery_test.py b/api/tests/test_containers_integration_tests/services/test_human_input_delivery_test.py
index 18c5320d0a..80f9083e81 100644
--- a/api/tests/test_containers_integration_tests/services/test_human_input_delivery_test.py
+++ b/api/tests/test_containers_integration_tests/services/test_human_input_delivery_test.py
@@ -4,7 +4,7 @@ from unittest.mock import MagicMock
 
 import pytest
 
-from core.workflow.human_input_compat import (
+from core.workflow.human_input_adapter import (
     EmailDeliveryConfig,
     EmailDeliveryMethod,
     EmailRecipients,
diff --git a/api/tests/test_containers_integration_tests/services/test_human_input_delivery_test_service.py b/api/tests/test_containers_integration_tests/services/test_human_input_delivery_test_service.py
index 21a54e909e..ed75363f3b 100644
--- a/api/tests/test_containers_integration_tests/services/test_human_input_delivery_test_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_human_input_delivery_test_service.py
@@ -8,7 +8,7 @@ import pytest
 from sqlalchemy.engine import Engine
 
 from configs import dify_config
-from core.workflow.human_input_compat import (
+from core.workflow.human_input_adapter import (
     EmailDeliveryConfig,
     EmailDeliveryMethod,
     EmailRecipients,
diff --git a/api/tests/test_containers_integration_tests/tasks/test_mail_human_input_delivery_task.py b/api/tests/test_containers_integration_tests/tasks/test_mail_human_input_delivery_task.py
index 328bdbf055..95a867dbb5 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_mail_human_input_delivery_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_mail_human_input_delivery_task.py
@@ -10,7 +10,7 @@ from core.app.app_config.entities import WorkflowUIBasedAppConfig
 from core.app.entities.app_invoke_entities import InvokeFrom, WorkflowAppGenerateEntity
 from core.app.layers.pause_state_persist_layer import WorkflowResumptionContext
 from core.repositories.human_input_repository import FormCreateParams, HumanInputFormRepositoryImpl
-from core.workflow.human_input_compat import (
+from core.workflow.human_input_adapter import (
     EmailDeliveryConfig,
     EmailDeliveryMethod,
     EmailRecipients,
diff --git a/api/tests/unit_tests/controllers/console/app/test_workflow.py b/api/tests/unit_tests/controllers/console/app/test_workflow.py
index 6ff3b19362..e91c0a0597 100644
--- a/api/tests/unit_tests/controllers/console/app/test_workflow.py
+++ b/api/tests/unit_tests/controllers/console/app/test_workflow.py
@@ -31,7 +31,7 @@ def test_parse_file_with_config(monkeypatch: pytest.MonkeyPatch) -> None:
     file_list = [
         File(
             tenant_id="t1",
-            type=FileType.IMAGE,
+            file_type=FileType.IMAGE,
             transfer_method=FileTransferMethod.REMOTE_URL,
             remote_url="http://u",
         )
diff --git a/api/tests/unit_tests/controllers/console/app/workflow_draft_variables_test.py b/api/tests/unit_tests/controllers/console/app/workflow_draft_variables_test.py
index b19a1740eb..22b80b748e 100644
--- a/api/tests/unit_tests/controllers/console/app/workflow_draft_variables_test.py
+++ b/api/tests/unit_tests/controllers/console/app/workflow_draft_variables_test.py
@@ -314,8 +314,8 @@ def test_workflow_file_variable_with_signed_url():
 
     # Create a File object with LOCAL_FILE transfer method (which generates signed URLs)
     test_file = File(
-        id="test_file_id",
-        type=FileType.IMAGE,
+        file_id="test_file_id",
+        file_type=FileType.IMAGE,
         transfer_method=FileTransferMethod.LOCAL_FILE,
         related_id="test_upload_file_id",
         filename="test.jpg",
@@ -370,8 +370,8 @@ def test_workflow_file_variable_remote_url():
 
     # Create a File object with REMOTE_URL transfer method
     test_file = File(
-        id="test_file_id",
-        type=FileType.IMAGE,
+        file_id="test_file_id",
+        file_type=FileType.IMAGE,
         transfer_method=FileTransferMethod.REMOTE_URL,
         remote_url="https://example.com/test.jpg",
         filename="test.jpg",
diff --git a/api/tests/unit_tests/controllers/service_api/app/test_conversation.py b/api/tests/unit_tests/controllers/service_api/app/test_conversation.py
index 14c35a9ed5..4fb8ecf784 100644
--- a/api/tests/unit_tests/controllers/service_api/app/test_conversation.py
+++ b/api/tests/unit_tests/controllers/service_api/app/test_conversation.py
@@ -37,6 +37,8 @@ from controllers.service_api.app.conversation import (
     ConversationVariableUpdatePayload,
 )
 from controllers.service_api.app.error import NotChatAppError
+from fields._value_type_serializer import serialize_value_type
+from graphon.variables import StringSegment
 from graphon.variables.types import SegmentType
 from models.model import App, AppMode, EndUser
 from services.conversation_service import ConversationService
@@ -284,6 +286,32 @@ class TestConversationVariableResponseModels:
         assert response.created_at == int(created_at.timestamp())
         assert response.updated_at == int(created_at.timestamp())
 
+    def test_variable_response_normalizes_string_value_type_alias(self):
+        response = ConversationVariableResponse.model_validate(
+            {
+                "id": "550e8400-e29b-41d4-a716-446655440000",
+                "name": "foo",
+                "value_type": SegmentType.INTEGER.value,
+            }
+        )
+
+        assert response.value_type == "number"
+
+    def test_variable_response_normalizes_callable_exposed_type(self):
+        response = ConversationVariableResponse.model_validate(
+            {
+                "id": "550e8400-e29b-41d4-a716-446655440000",
+                "name": "foo",
+                "value_type": SimpleNamespace(exposed_type=lambda: SegmentType.STRING.exposed_type()),
+            }
+        )
+
+        assert response.value_type == "string"
+
+    def test_serialize_value_type_supports_segments_and_mappings(self):
+        assert serialize_value_type(StringSegment(value="hello")) == "string"
+        assert serialize_value_type({"value_type": SegmentType.INTEGER}) == "number"
+
     def test_variable_pagination_response(self):
         response = ConversationVariableInfiniteScrollPaginationResponse.model_validate(
             {
diff --git a/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter.py b/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter.py
index 3ab63aed25..dd6cd0e919 100644
--- a/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter.py
+++ b/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter.py
@@ -11,8 +11,8 @@ class TestWorkflowResponseConverterFetchFilesFromVariableValue:
     def create_test_file(self, file_id: str = "test_file_1") -> File:
         """Create a test File object"""
         return File(
-            id=file_id,
-            type=FileType.DOCUMENT,
+            file_id=file_id,
+            file_type=FileType.DOCUMENT,
             transfer_method=FileTransferMethod.LOCAL_FILE,
             related_id="related_123",
             filename=f"{file_id}.txt",
diff --git a/api/tests/unit_tests/core/app/apps/test_pause_resume.py b/api/tests/unit_tests/core/app/apps/test_pause_resume.py
index a04a7b7576..6104b8d6ca 100644
--- a/api/tests/unit_tests/core/app/apps/test_pause_resume.py
+++ b/api/tests/unit_tests/core/app/apps/test_pause_resume.py
@@ -7,11 +7,11 @@ import graphon.nodes.human_input.entities  # noqa: F401
 from core.app.apps.advanced_chat import app_generator as adv_app_gen_module
 from core.app.apps.workflow import app_generator as wf_app_gen_module
 from core.app.entities.app_invoke_entities import InvokeFrom
+from core.workflow import node_factory as node_factory_module
 from core.workflow.node_factory import DifyNodeFactory
 from core.workflow.system_variables import build_system_variables
 from graphon.entities import WorkflowStartReason
 from graphon.entities.base_node_data import BaseNodeData, RetryConfig
-from graphon.entities.graph_config import NodeConfigDict, NodeConfigDictAdapter
 from graphon.entities.pause_reason import SchedulingPause
 from graphon.enums import BuiltinNodeTypes, NodeType, WorkflowNodeExecutionStatus
 from graphon.graph import Graph
@@ -55,8 +55,21 @@ class _StubToolNode(Node[_StubToolNodeData]):
     def version(cls) -> str:
         return "1"
 
-    def init_node_data(self, data):
-        self._node_data = _StubToolNodeData.model_validate(data)
+    def __init__(
+        self,
+        node_id: str,
+        config: _StubToolNodeData,
+        *,
+        graph_init_params,
+        graph_runtime_state,
+        **_kwargs: Any,
+    ) -> None:
+        super().__init__(
+            node_id=node_id,
+            config=config,
+            graph_init_params=graph_init_params,
+            graph_runtime_state=graph_runtime_state,
+        )
 
     def _get_error_strategy(self):
         return self._node_data.error_strategy
@@ -89,21 +102,14 @@ class _StubToolNode(Node[_StubToolNodeData]):
 
 
 def _patch_tool_node(mocker):
-    original_create_node = DifyNodeFactory.create_node
+    original_resolve_node_class = node_factory_module.resolve_workflow_node_class
 
-    def _patched_create_node(self, node_config: dict[str, object] | NodeConfigDict) -> Node:
-        typed_node_config = NodeConfigDictAdapter.validate_python(node_config)
-        node_data = typed_node_config["data"]
-        if node_data.type == BuiltinNodeTypes.TOOL:
-            return _StubToolNode(
-                id=str(typed_node_config["id"]),
-                config=typed_node_config,
-                graph_init_params=self.graph_init_params,
-                graph_runtime_state=self.graph_runtime_state,
-            )
-        return original_create_node(self, typed_node_config)
+    def _patched_resolve_node_class(*, node_type: NodeType, node_version: str) -> type[Node]:
+        if node_type == BuiltinNodeTypes.TOOL:
+            return _StubToolNode
+        return original_resolve_node_class(node_type=node_type, node_version=node_version)
 
-    mocker.patch.object(DifyNodeFactory, "create_node", _patched_create_node)
+    mocker.patch.object(node_factory_module, "resolve_workflow_node_class", side_effect=_patched_resolve_node_class)
 
 
 def _node_data(node_type: NodeType, data: BaseNodeData) -> dict[str, object]:
diff --git a/api/tests/unit_tests/core/app/workflow/test_file_runtime.py b/api/tests/unit_tests/core/app/workflow/test_file_runtime.py
index cddd03f4b0..701863b927 100644
--- a/api/tests/unit_tests/core/app/workflow/test_file_runtime.py
+++ b/api/tests/unit_tests/core/app/workflow/test_file_runtime.py
@@ -26,8 +26,8 @@ def _build_file(
     extension: str | None = None,
 ) -> File:
     return File(
-        id="file-id",
-        type=FileType.IMAGE,
+        file_id="file-id",
+        file_type=FileType.IMAGE,
         transfer_method=transfer_method,
         reference=reference,
         remote_url=remote_url,
@@ -351,7 +351,7 @@ def test_runtime_helper_wrappers_delegate_to_config_and_io(monkeypatch: pytest.M
 
     assert runtime.multimodal_send_format == "url"
 
-    with patch.object(file_runtime.ssrf_proxy, "get", return_value="response") as mock_get:
+    with patch.object(file_runtime.graphon_ssrf_proxy, "get", return_value="response") as mock_get:
         assert runtime.http_get("http://example", follow_redirects=False) == "response"
         mock_get.assert_called_once_with("http://example", follow_redirects=False)
 
diff --git a/api/tests/unit_tests/core/app/workflow/test_node_factory.py b/api/tests/unit_tests/core/app/workflow/test_node_factory.py
index c4bfb23272..30a068f4c5 100644
--- a/api/tests/unit_tests/core/app/workflow/test_node_factory.py
+++ b/api/tests/unit_tests/core/app/workflow/test_node_factory.py
@@ -8,8 +8,8 @@ from graphon.enums import BuiltinNodeTypes
 
 
 class DummyNode:
-    def __init__(self, *, id, config, graph_init_params, graph_runtime_state, **kwargs):
-        self.id = id
+    def __init__(self, *, node_id, config, graph_init_params, graph_runtime_state, **kwargs):
+        self.id = node_id
         self.config = config
         self.graph_init_params = graph_init_params
         self.graph_runtime_state = graph_runtime_state
diff --git a/api/tests/unit_tests/core/datasource/test_datasource_manager.py b/api/tests/unit_tests/core/datasource/test_datasource_manager.py
index 81315d2508..deeac49bbc 100644
--- a/api/tests/unit_tests/core/datasource/test_datasource_manager.py
+++ b/api/tests/unit_tests/core/datasource/test_datasource_manager.py
@@ -430,7 +430,7 @@ def test_stream_node_events_builds_file_and_variables_from_messages(mocker):
     mocker.patch("core.datasource.datasource_manager.session_factory.create_session", return_value=_Session())
     mocker.patch("core.datasource.datasource_manager.get_file_type_by_mime_type", return_value=FileType.IMAGE)
     built = File(
-        type=FileType.IMAGE,
+        file_type=FileType.IMAGE,
         transfer_method=FileTransferMethod.TOOL_FILE,
         related_id="tool_file_1",
         extension=".png",
@@ -530,7 +530,7 @@ def test_stream_node_events_online_drive_sets_variable_pool_file_and_outputs(moc
     mocker.patch.object(DatasourceManager, "stream_online_results", return_value=_gen_messages_text_only("ignored"))
 
     file_in = File(
-        type=FileType.DOCUMENT,
+        file_type=FileType.DOCUMENT,
         transfer_method=FileTransferMethod.TOOL_FILE,
         related_id="tf",
         extension=".pdf",
diff --git a/api/tests/unit_tests/core/entities/test_entities_model_entities.py b/api/tests/unit_tests/core/entities/test_entities_model_entities.py
index a0b2820157..aeca2e3afd 100644
--- a/api/tests/unit_tests/core/entities/test_entities_model_entities.py
+++ b/api/tests/unit_tests/core/entities/test_entities_model_entities.py
@@ -46,7 +46,7 @@ def test_simple_model_provider_entity_maps_from_provider_entity() -> None:
 
     # Assert
     assert simple_provider.provider == "openai"
-    assert simple_provider.label.en_US == "OpenAI"
+    assert simple_provider.label.en_us == "OpenAI"
     assert simple_provider.supported_model_types == [ModelType.LLM]
 
 
diff --git a/api/tests/unit_tests/core/file/test_models.py b/api/tests/unit_tests/core/file/test_models.py
index bb6e40e224..8cb0938575 100644
--- a/api/tests/unit_tests/core/file/test_models.py
+++ b/api/tests/unit_tests/core/file/test_models.py
@@ -3,9 +3,9 @@ from graphon.file import File, FileTransferMethod, FileType
 
 def test_file():
     file = File(
-        id="test-file",
+        file_id="test-file",
         tenant_id="test-tenant-id",
-        type=FileType.IMAGE,
+        file_type=FileType.IMAGE,
         transfer_method=FileTransferMethod.TOOL_FILE,
         related_id="test-related-id",
         filename="image.png",
@@ -25,27 +25,21 @@ def test_file():
     assert file.size == 67
 
 
-def test_file_model_validate_accepts_legacy_tenant_id():
-    data = {
-        "id": "test-file",
-        "tenant_id": "test-tenant-id",
-        "type": "image",
-        "transfer_method": "tool_file",
-        "related_id": "test-related-id",
-        "filename": "image.png",
-        "extension": ".png",
-        "mime_type": "image/png",
-        "size": 67,
-        "storage_key": "test-storage-key",
-        "url": "https://example.com/image.png",
-        # Extra legacy fields
-        "tool_file_id": "tool-file-123",
-        "upload_file_id": "upload-file-456",
-        "datasource_file_id": "datasource-file-789",
-    }
+def test_file_constructor_accepts_legacy_tenant_id():
+    file = File(
+        file_id="test-file",
+        tenant_id="test-tenant-id",
+        file_type=FileType.IMAGE,
+        transfer_method=FileTransferMethod.TOOL_FILE,
+        tool_file_id="tool-file-123",
+        filename="image.png",
+        extension=".png",
+        mime_type="image/png",
+        size=67,
+        storage_key="test-storage-key",
+        url="https://example.com/image.png",
+    )
 
-    file = File.model_validate(data)
-
-    assert file.related_id == "test-related-id"
+    assert file.related_id == "tool-file-123"
     assert file.storage_key == "test-storage-key"
     assert "tenant_id" not in file.model_dump()
diff --git a/api/tests/unit_tests/core/helper/test_ssrf_proxy.py b/api/tests/unit_tests/core/helper/test_ssrf_proxy.py
index 3b5c5e6597..d9fed9ae2a 100644
--- a/api/tests/unit_tests/core/helper/test_ssrf_proxy.py
+++ b/api/tests/unit_tests/core/helper/test_ssrf_proxy.py
@@ -1,11 +1,17 @@
 from unittest.mock import MagicMock, patch
 
+import httpx
 import pytest
 
 from core.helper.ssrf_proxy import (
     SSRF_DEFAULT_MAX_RETRIES,
+    SSRFProxy,
     _get_user_provided_host_header,
+    _to_graphon_http_response,
+    graphon_ssrf_proxy,
     make_request,
+    max_retries_exceeded_error,
+    request_error,
 )
 
 
@@ -174,3 +180,56 @@ class TestFollowRedirectsParameter:
 
         call_kwargs = mock_client.request.call_args.kwargs
         assert call_kwargs.get("follow_redirects") is True
+
+
+def test_to_graphon_http_response_preserves_httpx_response_fields() -> None:
+    response = httpx.Response(
+        201,
+        headers={"X-Test": "1"},
+        content=b"payload",
+        request=httpx.Request("GET", "https://example.com/resource"),
+    )
+
+    wrapped = _to_graphon_http_response(response)
+
+    assert wrapped.status_code == 201
+    assert wrapped.headers == {"x-test": "1", "content-length": "7"}
+    assert wrapped.content == b"payload"
+    assert wrapped.url == "https://example.com/resource"
+    assert wrapped.reason_phrase == "Created"
+    assert wrapped.text == "payload"
+
+
+def test_ssrf_proxy_exposes_expected_error_types() -> None:
+    proxy = SSRFProxy()
+
+    assert proxy.max_retries_exceeded_error is max_retries_exceeded_error
+    assert proxy.request_error is request_error
+    assert graphon_ssrf_proxy.max_retries_exceeded_error is max_retries_exceeded_error
+    assert graphon_ssrf_proxy.request_error is request_error
+
+
+@pytest.mark.parametrize("method_name", ["get", "head", "post", "put", "delete", "patch"])
+def test_graphon_ssrf_proxy_wraps_module_requests(method_name: str) -> None:
+    response = httpx.Response(
+        200,
+        headers={"X-Test": "1"},
+        content=b"ok",
+        request=httpx.Request("GET", "https://example.com/resource"),
+    )
+
+    with patch(f"core.helper.ssrf_proxy.{method_name}", return_value=response) as mock_method:
+        wrapped = getattr(graphon_ssrf_proxy, method_name)(
+            "https://example.com/resource",
+            max_retries=3,
+            headers={"X-Test": "1"},
+        )
+
+    mock_method.assert_called_once_with(
+        url="https://example.com/resource",
+        max_retries=3,
+        headers={"X-Test": "1"},
+    )
+    assert wrapped.status_code == 200
+    assert wrapped.url == "https://example.com/resource"
+    assert wrapped.content == b"ok"
diff --git a/api/tests/unit_tests/core/model_runtime/test_model_provider_factory.py b/api/tests/unit_tests/core/model_runtime/test_model_provider_factory.py
index 249ecb5006..c4fd970562 100644
--- a/api/tests/unit_tests/core/model_runtime/test_model_provider_factory.py
+++ b/api/tests/unit_tests/core/model_runtime/test_model_provider_factory.py
@@ -13,12 +13,12 @@ from graphon.model_runtime.entities.provider_entities import (
     ProviderCredentialSchema,
     ProviderEntity,
 )
-from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
-from graphon.model_runtime.model_providers.__base.moderation_model import ModerationModel
-from graphon.model_runtime.model_providers.__base.rerank_model import RerankModel
-from graphon.model_runtime.model_providers.__base.speech2text_model import Speech2TextModel
-from graphon.model_runtime.model_providers.__base.text_embedding_model import TextEmbeddingModel
-from graphon.model_runtime.model_providers.__base.tts_model import TTSModel
+from graphon.model_runtime.model_providers.base.large_language_model import LargeLanguageModel
+from graphon.model_runtime.model_providers.base.moderation_model import ModerationModel
+from graphon.model_runtime.model_providers.base.rerank_model import RerankModel
+from graphon.model_runtime.model_providers.base.speech2text_model import Speech2TextModel
+from graphon.model_runtime.model_providers.base.text_embedding_model import TextEmbeddingModel
+from graphon.model_runtime.model_providers.base.tts_model import TTSModel
 from graphon.model_runtime.model_providers.model_provider_factory import ModelProviderFactory
 
 
diff --git a/api/tests/unit_tests/core/plugin/test_model_runtime_adapter.py b/api/tests/unit_tests/core/plugin/test_model_runtime_adapter.py
index 68aa130518..88bf555594 100644
--- a/api/tests/unit_tests/core/plugin/test_model_runtime_adapter.py
+++ b/api/tests/unit_tests/core/plugin/test_model_runtime_adapter.py
@@ -56,7 +56,7 @@ class TestPluginModelRuntime:
         assert len(providers) == 1
         assert providers[0].provider == "langgenius/openai/openai"
         assert providers[0].provider_name == "openai"
-        assert providers[0].label.en_US == "OpenAI"
+        assert providers[0].label.en_us == "OpenAI"
         client.fetch_model_providers.assert_called_once_with("tenant")
 
     def test_fetch_model_providers_only_exposes_short_name_for_canonical_provider(self) -> None:
diff --git a/api/tests/unit_tests/core/plugin/utils/test_chunk_merger.py b/api/tests/unit_tests/core/plugin/utils/test_chunk_merger.py
index d49b6e4b71..00a4207786 100644
--- a/api/tests/unit_tests/core/plugin/utils/test_chunk_merger.py
+++ b/api/tests/unit_tests/core/plugin/utils/test_chunk_merger.py
@@ -466,7 +466,7 @@ class TestConverter:
     def test_convert_parameters_to_plugin_format_with_single_file_and_selector(self):
         file_param = File(
             tenant_id="tenant-1",
-            type=FileType.IMAGE,
+            file_type=FileType.IMAGE,
             transfer_method=FileTransferMethod.REMOTE_URL,
             remote_url="https://example.com/file.png",
             storage_key="",
@@ -499,14 +499,14 @@ class TestConverter:
     def test_convert_parameters_to_plugin_format_with_lists_and_passthrough_values(self):
         file_one = File(
             tenant_id="tenant-1",
-            type=FileType.DOCUMENT,
+            file_type=FileType.DOCUMENT,
             transfer_method=FileTransferMethod.REMOTE_URL,
             remote_url="https://example.com/a.txt",
             storage_key="",
         )
         file_two = File(
             tenant_id="tenant-1",
-            type=FileType.DOCUMENT,
+            file_type=FileType.DOCUMENT,
             transfer_method=FileTransferMethod.REMOTE_URL,
             remote_url="https://example.com/b.txt",
             storage_key="",
diff --git a/api/tests/unit_tests/core/prompt/test_advanced_prompt_transform.py b/api/tests/unit_tests/core/prompt/test_advanced_prompt_transform.py
index 395d392127..e536c0831f 100644
--- a/api/tests/unit_tests/core/prompt/test_advanced_prompt_transform.py
+++ b/api/tests/unit_tests/core/prompt/test_advanced_prompt_transform.py
@@ -134,9 +134,9 @@ def test__get_chat_model_prompt_messages_with_files_no_memory(get_chat_model_arg
 
     files = [
         File(
-            id="file1",
+            file_id="file1",
             tenant_id="tenant1",
-            type=FileType.IMAGE,
+            file_type=FileType.IMAGE,
             transfer_method=FileTransferMethod.REMOTE_URL,
             remote_url="https://example.com/image1.jpg",
             storage_key="",
@@ -245,9 +245,9 @@ def test_completion_prompt_jinja2_with_files():
     completion_template = CompletionModelPromptTemplate(text="Hi {{name}}", edition_type="jinja2")
 
     file = File(
-        id="file1",
+        file_id="file1",
         tenant_id="tenant1",
-        type=FileType.IMAGE,
+        file_type=FileType.IMAGE,
         transfer_method=FileTransferMethod.REMOTE_URL,
         remote_url="https://example.com/image.jpg",
         storage_key="",
@@ -379,9 +379,9 @@ def test_chat_prompt_memory_with_files_and_query():
     memory = MagicMock(spec=TokenBufferMemory)
     prompt_template = [ChatModelMessage(text="sys", role=PromptMessageRole.SYSTEM)]
     file = File(
-        id="file1",
+        file_id="file1",
         tenant_id="tenant1",
-        type=FileType.IMAGE,
+        file_type=FileType.IMAGE,
         transfer_method=FileTransferMethod.REMOTE_URL,
         remote_url="https://example.com/image.jpg",
         storage_key="",
@@ -413,9 +413,9 @@ def test_chat_prompt_files_without_query_updates_last_user_or_appends_new():
     transform = AdvancedPromptTransform()
     model_config_mock = MagicMock(spec=ModelConfigEntity)
     file = File(
-        id="file1",
+        file_id="file1",
         tenant_id="tenant1",
-        type=FileType.IMAGE,
+        file_type=FileType.IMAGE,
         transfer_method=FileTransferMethod.REMOTE_URL,
         remote_url="https://example.com/image.jpg",
         storage_key="",
@@ -463,9 +463,9 @@ def test_chat_prompt_files_with_query_branch():
     transform = AdvancedPromptTransform()
     model_config_mock = MagicMock(spec=ModelConfigEntity)
     file = File(
-        id="file1",
+        file_id="file1",
         tenant_id="tenant1",
-        type=FileType.IMAGE,
+        file_type=FileType.IMAGE,
         transfer_method=FileTransferMethod.REMOTE_URL,
         remote_url="https://example.com/image.jpg",
         storage_key="",
diff --git a/api/tests/unit_tests/core/prompt/test_agent_history_prompt_transform.py b/api/tests/unit_tests/core/prompt/test_agent_history_prompt_transform.py
index 803afa54d7..28966242d8 100644
--- a/api/tests/unit_tests/core/prompt/test_agent_history_prompt_transform.py
+++ b/api/tests/unit_tests/core/prompt/test_agent_history_prompt_transform.py
@@ -12,7 +12,7 @@ from graphon.model_runtime.entities.message_entities import (
     ToolPromptMessage,
     UserPromptMessage,
 )
-from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
+from graphon.model_runtime.model_providers.base.large_language_model import LargeLanguageModel
 from models.model import Conversation
 
 
diff --git a/api/tests/unit_tests/core/prompt/test_prompt_transform.py b/api/tests/unit_tests/core/prompt/test_prompt_transform.py
index 9f9ea33695..5308c8e7b3 100644
--- a/api/tests/unit_tests/core/prompt/test_prompt_transform.py
+++ b/api/tests/unit_tests/core/prompt/test_prompt_transform.py
@@ -11,7 +11,7 @@ from graphon.model_runtime.entities.model_entities import ModelPropertyKey
 # from graphon.model_runtime.entities.message_entities import UserPromptMessage
 # from graphon.model_runtime.entities.model_entities import AIModelEntity, ModelPropertyKey, ParameterRule
 # from graphon.model_runtime.entities.provider_entities import ProviderEntity
-# from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
+# from graphon.model_runtime.model_providers.base.large_language_model import LargeLanguageModel
 # from core.prompt.prompt_transform import PromptTransform
 
 
diff --git a/api/tests/unit_tests/core/rag/extractor/test_word_extractor.py b/api/tests/unit_tests/core/rag/extractor/test_word_extractor.py
index 64eb89590a..0220fb6d4a 100644
--- a/api/tests/unit_tests/core/rag/extractor/test_word_extractor.py
+++ b/api/tests/unit_tests/core/rag/extractor/test_word_extractor.py
@@ -1,12 +1,14 @@
 """Primarily used for testing merged cell scenarios"""
 
+import gc
 import io
 import os
 import tempfile
+import warnings
 from collections import UserDict
 from pathlib import Path
 from types import SimpleNamespace
-from unittest.mock import MagicMock
+from unittest.mock import AsyncMock, MagicMock
 
 import pytest
 from docx import Document
@@ -354,15 +356,46 @@ def test_init_expands_home_path_and_invalid_local_path(monkeypatch, tmp_path):
         WordExtractor("not-a-file", "tenant", "user")
 
 
-def test_del_closes_temp_file():
+def test_close_closes_temp_file():
     extractor = object.__new__(WordExtractor)
+    extractor._closed = False
     extractor.temp_file = MagicMock()
 
-    WordExtractor.__del__(extractor)
+    extractor.close()
 
     extractor.temp_file.close.assert_called_once()
 
 
+def test_close_is_idempotent():
+    extractor = object.__new__(WordExtractor)
+    extractor._closed = False
+    extractor.temp_file = MagicMock()
+
+    extractor.close()
+    extractor.close()
+
+    extractor.temp_file.close.assert_called_once()
+
+
+def test_close_handles_async_close_mock():
+    extractor = object.__new__(WordExtractor)
+    extractor._closed = False
+    extractor.temp_file = MagicMock()
+    extractor.temp_file.close = AsyncMock()
+
+    with warnings.catch_warnings(record=True) as caught:
+        warnings.simplefilter("always")
+        extractor.close()
+        gc.collect()
+
+    extractor.temp_file.close.assert_called_once()
+    assert not [
+        warning
+        for warning in caught
+        if issubclass(warning.category, RuntimeWarning) and "AsyncMockMixin._execute_mock_call" in str(warning.message)
+    ]
+
+
 def test_extract_images_handles_invalid_external_cases(monkeypatch):
     class FakeTargetRef:
         def __contains__(self, item):
diff --git a/api/tests/unit_tests/core/repositories/test_human_input_form_repository_impl.py b/api/tests/unit_tests/core/repositories/test_human_input_form_repository_impl.py
index 8be1ac318c..18ae9fafc8 100644
--- a/api/tests/unit_tests/core/repositories/test_human_input_form_repository_impl.py
+++ b/api/tests/unit_tests/core/repositories/test_human_input_form_repository_impl.py
@@ -14,7 +14,7 @@ from core.repositories.human_input_repository import (
     HumanInputFormSubmissionRepository,
     _WorkspaceMemberInfo,
 )
-from core.workflow.human_input_compat import (
+from core.workflow.human_input_adapter import (
     EmailDeliveryConfig,
     EmailDeliveryMethod,
     EmailRecipients,
diff --git a/api/tests/unit_tests/core/repositories/test_human_input_repository.py b/api/tests/unit_tests/core/repositories/test_human_input_repository.py
index 1297a95df1..4248782d93 100644
--- a/api/tests/unit_tests/core/repositories/test_human_input_repository.py
+++ b/api/tests/unit_tests/core/repositories/test_human_input_repository.py
@@ -21,7 +21,7 @@ from core.repositories.human_input_repository import (
     _InvalidTimeoutStatusError,
     _WorkspaceMemberInfo,
 )
-from core.workflow.human_input_compat import (
+from core.workflow.human_input_adapter import (
     EmailDeliveryConfig,
     EmailDeliveryMethod,
     EmailRecipients,
diff --git a/api/tests/unit_tests/core/test_file.py b/api/tests/unit_tests/core/test_file.py
index f17927f16b..eab0176f41 100644
--- a/api/tests/unit_tests/core/test_file.py
+++ b/api/tests/unit_tests/core/test_file.py
@@ -6,9 +6,9 @@ from models.workflow import Workflow
 
 def test_file_to_dict():
     file = File(
-        id="file1",
+        file_id="file1",
         tenant_id="tenant1",
-        type=FileType.IMAGE,
+        file_type=FileType.IMAGE,
         transfer_method=FileTransferMethod.REMOTE_URL,
         remote_url="https://example.com/image1.jpg",
         storage_key="storage_key",
diff --git a/api/tests/unit_tests/core/variables/test_segment.py b/api/tests/unit_tests/core/variables/test_segment.py
index 72052c8c05..9e07ea1b6d 100644
--- a/api/tests/unit_tests/core/variables/test_segment.py
+++ b/api/tests/unit_tests/core/variables/test_segment.py
@@ -1,8 +1,9 @@
 import dataclasses
+from typing import Annotated
 
 import orjson
 import pytest
-from pydantic import BaseModel
+from pydantic import BaseModel, Discriminator, Tag
 
 from core.helper import encrypter
 from core.workflow.system_variables import build_bootstrap_variables, build_system_variables
@@ -12,17 +13,18 @@ from graphon.runtime import VariablePool
 from graphon.variables.segment_group import SegmentGroup
 from graphon.variables.segments import (
     ArrayAnySegment,
+    ArrayBooleanSegment,
     ArrayFileSegment,
     ArrayNumberSegment,
     ArrayObjectSegment,
     ArrayStringSegment,
+    BooleanSegment,
     FileSegment,
     FloatSegment,
     IntegerSegment,
     NoneSegment,
     ObjectSegment,
     Segment,
-    SegmentUnion,
     StringSegment,
     get_segment_discriminator,
 )
@@ -47,6 +49,26 @@ from graphon.variables.variables import (
     StringVariable,
     Variable,
 )
+from models.utils.file_input_compat import rebuild_serialized_graph_files_without_lookup
+
+type SegmentUnion = Annotated[
+    (
+        Annotated[NoneSegment, Tag(SegmentType.NONE)]
+        | Annotated[StringSegment, Tag(SegmentType.STRING)]
+        | Annotated[FloatSegment, Tag(SegmentType.FLOAT)]
+        | Annotated[IntegerSegment, Tag(SegmentType.INTEGER)]
+        | Annotated[ObjectSegment, Tag(SegmentType.OBJECT)]
+        | Annotated[FileSegment, Tag(SegmentType.FILE)]
+        | Annotated[BooleanSegment, Tag(SegmentType.BOOLEAN)]
+        | Annotated[ArrayAnySegment, Tag(SegmentType.ARRAY_ANY)]
+        | Annotated[ArrayStringSegment, Tag(SegmentType.ARRAY_STRING)]
+        | Annotated[ArrayNumberSegment, Tag(SegmentType.ARRAY_NUMBER)]
+        | Annotated[ArrayObjectSegment, Tag(SegmentType.ARRAY_OBJECT)]
+        | Annotated[ArrayFileSegment, Tag(SegmentType.ARRAY_FILE)]
+        | Annotated[ArrayBooleanSegment, Tag(SegmentType.ARRAY_BOOLEAN)]
+    ),
+    Discriminator(get_segment_discriminator),
+]
 
 
 def _build_variable_pool(
@@ -123,7 +145,7 @@ def create_test_file(
 ) -> File:
     """Factory function to create File objects for testing"""
     return File(
-        type=file_type,
+        file_type=file_type,
         transfer_method=transfer_method,
         filename=filename,
         extension=extension,
@@ -160,7 +182,7 @@ class TestSegmentDumpAndLoad:
         assert restored == model
 
     def test_all_segments_serialization(self):
-        """Test serialization/deserialization of all segment types"""
+        """Test file-aware segment serialization through Dify's model boundary."""
         # Create one instance of each segment type
         test_file = create_test_file()
 
@@ -181,7 +203,7 @@ class TestSegmentDumpAndLoad:
         # Test serialization and deserialization
         model = _Segments(segments=all_segments)
         json_str = model.model_dump_json()
-        loaded = _Segments.model_validate_json(json_str)
+        loaded = _Segments.model_validate(rebuild_serialized_graph_files_without_lookup(orjson.loads(json_str)))
 
         # Verify all segments are preserved
         assert len(loaded.segments) == len(all_segments)
@@ -202,7 +224,7 @@ class TestSegmentDumpAndLoad:
                 assert loaded_segment.value == original.value
 
     def test_all_variables_serialization(self):
-        """Test serialization/deserialization of all variable types"""
+        """Test file-aware variable serialization through Dify's model boundary."""
         # Create one instance of each variable type
         test_file = create_test_file()
 
@@ -223,7 +245,7 @@ class TestSegmentDumpAndLoad:
         # Test serialization and deserialization
         model = _Variables(variables=all_variables)
         json_str = model.model_dump_json()
-        loaded = _Variables.model_validate_json(json_str)
+        loaded = _Variables.model_validate(rebuild_serialized_graph_files_without_lookup(orjson.loads(json_str)))
 
         # Verify all variables are preserved
         assert len(loaded.variables) == len(all_variables)
diff --git a/api/tests/unit_tests/core/variables/test_segment_type_validation.py b/api/tests/unit_tests/core/variables/test_segment_type_validation.py
index 94e788edb2..317fe99d37 100644
--- a/api/tests/unit_tests/core/variables/test_segment_type_validation.py
+++ b/api/tests/unit_tests/core/variables/test_segment_type_validation.py
@@ -35,7 +35,7 @@ def create_test_file(
     """Factory function to create File objects for testing."""
     return File(
         tenant_id="test-tenant",
-        type=file_type,
+        file_type=file_type,
         transfer_method=transfer_method,
         filename=filename,
         extension=extension,
diff --git a/api/tests/unit_tests/core/workflow/graph_engine/test_mock_factory.py b/api/tests/unit_tests/core/workflow/graph_engine/test_mock_factory.py
index 76b2984a4b..9f3e3b00b9 100644
--- a/api/tests/unit_tests/core/workflow/graph_engine/test_mock_factory.py
+++ b/api/tests/unit_tests/core/workflow/graph_engine/test_mock_factory.py
@@ -1,12 +1,13 @@
-"""
-Mock node factory for testing workflows with third-party service dependencies.
+"""Mock node factory for third-party-service workflow tests.
 
-This module provides a MockNodeFactory that automatically detects and mocks nodes
-requiring external services (LLM, Agent, Tool, Knowledge Retrieval, HTTP Request).
+The factory follows the same config adaptation path as production
+`DifyNodeFactory.create_node()`, but swaps selected node classes for mock
+implementations before instantiation.
 """
 
 from typing import TYPE_CHECKING, Any
 
+from core.workflow.human_input_adapter import adapt_node_config_for_graph
 from core.workflow.node_factory import DifyNodeFactory
 from graphon.entities.graph_config import NodeConfigDict, NodeConfigDictAdapter
 from graphon.enums import BuiltinNodeTypes, NodeType
@@ -82,20 +83,20 @@ class MockNodeFactory(DifyNodeFactory):
         :param node_config: Node configuration dictionary
         :return: Node instance (real or mocked)
         """
-        typed_node_config = NodeConfigDictAdapter.validate_python(node_config)
+        typed_node_config = NodeConfigDictAdapter.validate_python(adapt_node_config_for_graph(node_config))
+        node_id = typed_node_config["id"]
         node_data = typed_node_config["data"]
         node_type = node_data.type
 
         # Check if this node type should be mocked
         if node_type in self._mock_node_types:
-            node_id = typed_node_config["id"]
-
             # Create mock node instance
             mock_class = self._mock_node_types[node_type]
+            resolved_node_data = self._validate_resolved_node_data(mock_class, node_data)
             if node_type == BuiltinNodeTypes.CODE:
                 mock_instance = mock_class(
-                    id=node_id,
-                    config=typed_node_config,
+                    node_id=node_id,
+                    config=resolved_node_data,
                     graph_init_params=self.graph_init_params,
                     graph_runtime_state=self.graph_runtime_state,
                     mock_config=self.mock_config,
@@ -104,8 +105,8 @@ class MockNodeFactory(DifyNodeFactory):
                 )
             elif node_type == BuiltinNodeTypes.HTTP_REQUEST:
                 mock_instance = mock_class(
-                    id=node_id,
-                    config=typed_node_config,
+                    node_id=node_id,
+                    config=resolved_node_data,
                     graph_init_params=self.graph_init_params,
                     graph_runtime_state=self.graph_runtime_state,
                     mock_config=self.mock_config,
@@ -120,8 +121,8 @@ class MockNodeFactory(DifyNodeFactory):
                 BuiltinNodeTypes.PARAMETER_EXTRACTOR,
             }:
                 mock_instance = mock_class(
-                    id=node_id,
-                    config=typed_node_config,
+                    node_id=node_id,
+                    config=resolved_node_data,
                     graph_init_params=self.graph_init_params,
                     graph_runtime_state=self.graph_runtime_state,
                     mock_config=self.mock_config,
@@ -130,8 +131,8 @@ class MockNodeFactory(DifyNodeFactory):
                 )
             else:
                 mock_instance = mock_class(
-                    id=node_id,
-                    config=typed_node_config,
+                    node_id=node_id,
+                    config=resolved_node_data,
                     graph_init_params=self.graph_init_params,
                     graph_runtime_state=self.graph_runtime_state,
                     mock_config=self.mock_config,
@@ -140,7 +141,7 @@ class MockNodeFactory(DifyNodeFactory):
             return mock_instance
 
         # For non-mocked node types, use parent implementation
-        return super().create_node(typed_node_config)
+        return super().create_node(node_config)
 
     def should_mock_node(self, node_type: NodeType) -> bool:
         """
diff --git a/api/tests/unit_tests/core/workflow/graph_engine/test_mock_nodes.py b/api/tests/unit_tests/core/workflow/graph_engine/test_mock_nodes.py
index 971b9b2bbf..f9819c47ec 100644
--- a/api/tests/unit_tests/core/workflow/graph_engine/test_mock_nodes.py
+++ b/api/tests/unit_tests/core/workflow/graph_engine/test_mock_nodes.py
@@ -55,13 +55,14 @@ class MockNodeMixin:
 
     def __init__(
         self,
-        id: str,
-        config: Mapping[str, Any],
+        node_id: str,
+        config: Any,
+        *,
         graph_init_params: "GraphInitParams",
         graph_runtime_state: "GraphRuntimeState",
         mock_config: Optional["MockConfig"] = None,
         **kwargs: Any,
-    ):
+    ) -> None:
         if isinstance(self, (LLMNode, QuestionClassifierNode, ParameterExtractorNode)):
             kwargs.setdefault("credentials_provider", MagicMock(spec=CredentialsProvider))
             kwargs.setdefault("model_factory", MagicMock(spec=ModelFactory))
@@ -96,7 +97,7 @@ class MockNodeMixin:
             kwargs.setdefault("message_transformer", MagicMock())
 
         super().__init__(
-            id=id,
+            node_id=node_id,
             config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=graph_runtime_state,
diff --git a/api/tests/unit_tests/core/workflow/graph_engine/test_parallel_human_input_join_resume.py b/api/tests/unit_tests/core/workflow/graph_engine/test_parallel_human_input_join_resume.py
index 55a329eba9..75bc6d05f7 100644
--- a/api/tests/unit_tests/core/workflow/graph_engine/test_parallel_human_input_join_resume.py
+++ b/api/tests/unit_tests/core/workflow/graph_engine/test_parallel_human_input_join_resume.py
@@ -139,8 +139,8 @@ def _build_graph(runtime_state: GraphRuntimeState, repo: HumanInputFormRepositor
 
     start_config = {"id": "start", "data": StartNodeData(title="Start", variables=[]).model_dump()}
     start_node = StartNode(
-        id=start_config["id"],
-        config=start_config,
+        node_id=start_config["id"],
+        config=StartNodeData(title="Start", variables=[]),
         graph_init_params=graph_init_params,
         graph_runtime_state=runtime_state,
     )
@@ -154,8 +154,8 @@ def _build_graph(runtime_state: GraphRuntimeState, repo: HumanInputFormRepositor
 
     human_a_config = {"id": "human_a", "data": human_data.model_dump()}
     human_a = HumanInputNode(
-        id=human_a_config["id"],
-        config=human_a_config,
+        node_id=human_a_config["id"],
+        config=human_data,
         graph_init_params=graph_init_params,
         graph_runtime_state=runtime_state,
         form_repository=repo,
@@ -164,8 +164,8 @@ def _build_graph(runtime_state: GraphRuntimeState, repo: HumanInputFormRepositor
 
     human_b_config = {"id": "human_b", "data": human_data.model_dump()}
     human_b = HumanInputNode(
-        id=human_b_config["id"],
-        config=human_b_config,
+        node_id=human_b_config["id"],
+        config=human_data,
         graph_init_params=graph_init_params,
         graph_runtime_state=runtime_state,
         form_repository=repo,
@@ -182,8 +182,8 @@ def _build_graph(runtime_state: GraphRuntimeState, repo: HumanInputFormRepositor
     )
     end_config = {"id": "end", "data": end_data.model_dump()}
     end_node = EndNode(
-        id=end_config["id"],
-        config=end_config,
+        node_id=end_config["id"],
+        config=end_data,
         graph_init_params=graph_init_params,
         graph_runtime_state=runtime_state,
     )
diff --git a/api/tests/unit_tests/core/workflow/nodes/answer/test_answer.py b/api/tests/unit_tests/core/workflow/nodes/answer/test_answer.py
index 9c0ad25b58..76b4cd1ef4 100644
--- a/api/tests/unit_tests/core/workflow/nodes/answer/test_answer.py
+++ b/api/tests/unit_tests/core/workflow/nodes/answer/test_answer.py
@@ -9,6 +9,7 @@ from extensions.ext_database import db
 from graphon.enums import WorkflowNodeExecutionStatus
 from graphon.graph import Graph
 from graphon.nodes.answer.answer_node import AnswerNode
+from graphon.nodes.answer.entities import AnswerNodeData
 from graphon.runtime import GraphRuntimeState, VariablePool
 from tests.workflow_test_utils import build_test_graph_init_params
 
@@ -66,20 +67,15 @@ def test_execute_answer():
 
     graph = Graph.init(graph_config=graph_config, node_factory=node_factory, root_node_id="start")
 
-    node_config = {
-        "id": "answer",
-        "data": {
-            "title": "123",
-            "type": "answer",
-            "answer": "Today's weather is {{#start.weather#}}\n{{#llm.text#}}\n{{img}}\nFin.",
-        },
-    }
-
     node = AnswerNode(
-        id=str(uuid.uuid4()),
+        node_id=str(uuid.uuid4()),
         graph_init_params=init_params,
         graph_runtime_state=graph_runtime_state,
-        config=node_config,
+        config=AnswerNodeData(
+            title="123",
+            type="answer",
+            answer="Today's weather is {{#start.weather#}}\n{{#llm.text#}}\n{{img}}\nFin.",
+        ),
     )
 
     # Mock db.session.close()
diff --git a/api/tests/unit_tests/core/workflow/nodes/datasource/test_datasource_node.py b/api/tests/unit_tests/core/workflow/nodes/datasource/test_datasource_node.py
index 9cceadde49..d7ef781732 100644
--- a/api/tests/unit_tests/core/workflow/nodes/datasource/test_datasource_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/datasource/test_datasource_node.py
@@ -1,5 +1,6 @@
 from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY
 from core.workflow.nodes.datasource.datasource_node import DatasourceNode
+from core.workflow.nodes.datasource.entities import DatasourceNodeData
 from graphon.enums import WorkflowNodeExecutionStatus
 from graphon.node_events import NodeRunResult, StreamChunkEvent, StreamCompletedEvent
 
@@ -77,19 +78,16 @@ def test_datasource_node_delegates_to_manager_stream(mocker):
     mocker.patch("core.workflow.nodes.datasource.datasource_node.DatasourceManager", new=_Mgr)
 
     node = DatasourceNode(
-        id="n",
-        config={
-            "id": "n",
-            "data": {
-                "type": "datasource",
-                "version": "1",
-                "title": "Datasource",
-                "provider_type": "plugin",
-                "provider_name": "p",
-                "plugin_id": "plug",
-                "datasource_name": "ds",
-            },
-        },
+        node_id="n",
+        config=DatasourceNodeData(
+            type="datasource",
+            version="1",
+            title="Datasource",
+            provider_type="plugin",
+            provider_name="p",
+            plugin_id="plug",
+            datasource_name="ds",
+        ),
         graph_init_params=gp,
         graph_runtime_state=gs,
     )
diff --git a/api/tests/unit_tests/core/workflow/nodes/http_request/test_http_request_node.py b/api/tests/unit_tests/core/workflow/nodes/http_request/test_http_request_node.py
index a3cadc0681..2e89a2da3c 100644
--- a/api/tests/unit_tests/core/workflow/nodes/http_request/test_http_request_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/http_request/test_http_request_node.py
@@ -12,7 +12,7 @@ from core.workflow.system_variables import build_system_variables
 from graphon.enums import WorkflowNodeExecutionStatus
 from graphon.file.file_manager import file_manager
 from graphon.nodes.http_request import HTTP_REQUEST_CONFIG_FILTER_KEY, HttpRequestNode, HttpRequestNodeConfig
-from graphon.nodes.http_request.entities import HttpRequestNodeTimeout, Response
+from graphon.nodes.http_request.entities import HttpRequestNodeData, HttpRequestNodeTimeout, Response
 from graphon.runtime import GraphRuntimeState, VariablePool
 from tests.workflow_test_utils import build_test_graph_init_params
 
@@ -66,8 +66,8 @@ def test_get_default_config_uses_injected_http_request_config():
     assert default_config["retry_config"]["max_retries"] == 7
 
 
-def test_get_default_config_with_malformed_http_request_config_raises_value_error():
-    with pytest.raises(ValueError, match="http_request_config must be an HttpRequestNodeConfig instance"):
+def test_get_default_config_with_malformed_http_request_config_raises_type_error():
+    with pytest.raises(TypeError, match="http_request_config must be an HttpRequestNodeConfig instance"):
         HttpRequestNode.get_default_config(filters={HTTP_REQUEST_CONFIG_FILTER_KEY: "invalid"})
 
 
@@ -114,8 +114,8 @@ def _build_http_node(
         start_at=time.perf_counter(),
     )
     return HttpRequestNode(
-        id="http-node",
-        config=node_config,
+        node_id="http-node",
+        config=HttpRequestNodeData.model_validate(node_data),
         graph_init_params=graph_init_params,
         graph_runtime_state=graph_runtime_state,
         http_request_config=HTTP_REQUEST_CONFIG,
diff --git a/api/tests/unit_tests/core/workflow/nodes/human_input/test_email_delivery_config.py b/api/tests/unit_tests/core/workflow/nodes/human_input/test_email_delivery_config.py
index 1d6a4da7c4..07430498e5 100644
--- a/api/tests/unit_tests/core/workflow/nodes/human_input/test_email_delivery_config.py
+++ b/api/tests/unit_tests/core/workflow/nodes/human_input/test_email_delivery_config.py
@@ -1,4 +1,4 @@
-from core.workflow.human_input_compat import EmailDeliveryConfig, EmailRecipients
+from core.workflow.human_input_adapter import EmailDeliveryConfig, EmailRecipients
 from graphon.runtime import VariablePool
 
 
diff --git a/api/tests/unit_tests/core/workflow/nodes/human_input/test_entities.py b/api/tests/unit_tests/core/workflow/nodes/human_input/test_entities.py
index c0e21d0bf7..0659984c76 100644
--- a/api/tests/unit_tests/core/workflow/nodes/human_input/test_entities.py
+++ b/api/tests/unit_tests/core/workflow/nodes/human_input/test_entities.py
@@ -19,7 +19,7 @@ from core.repositories.human_input_repository import (
     HumanInputFormRecipientEntity,
     HumanInputFormRepository,
 )
-from core.workflow.human_input_compat import (
+from core.workflow.human_input_adapter import (
     DeliveryMethodType,
     EmailDeliveryConfig,
     EmailDeliveryMethod,
@@ -136,6 +136,26 @@ class InMemoryHumanInputFormRepository(HumanInputFormRepository):
         entity.status_value = HumanInputFormStatus.SUBMITTED
 
 
+def _build_human_input_node(
+    *,
+    node_id: str,
+    node_data: HumanInputNodeData | Mapping[str, Any],
+    graph_init_params: GraphInitParams,
+    graph_runtime_state: GraphRuntimeState,
+    runtime: DifyHumanInputNodeRuntime,
+) -> HumanInputNode:
+    typed_node_data = (
+        node_data if isinstance(node_data, HumanInputNodeData) else HumanInputNodeData.model_validate(node_data)
+    )
+    return HumanInputNode(
+        node_id=node_id,
+        config=typed_node_data,
+        graph_init_params=graph_init_params,
+        graph_runtime_state=graph_runtime_state,
+        runtime=runtime,
+    )
+
+
 class TestDeliveryMethod:
     """Test DeliveryMethod entity."""
 
@@ -239,7 +259,7 @@ class TestUserAction:
         data[field_name] = value
 
         with pytest.raises(ValidationError) as exc_info:
-            UserAction(**data)
+            UserAction.model_validate(data)
 
         errors = exc_info.value.errors()
         assert any(error["loc"] == (field_name,) and error["type"] == "string_too_long" for error in errors)
@@ -465,9 +485,9 @@ class TestHumanInputNodeVariableResolution:
 
         runtime = DifyHumanInputNodeRuntime(graph_init_params.run_context)
         runtime._build_form_repository = MagicMock(return_value=mock_repo)  # type: ignore[attr-defined]
-        node = HumanInputNode(
-            id=config["id"],
-            config=config,
+        node = _build_human_input_node(
+            node_id=config["id"],
+            node_data=config["data"],
             graph_init_params=graph_init_params,
             graph_runtime_state=runtime_state,
             runtime=runtime,
@@ -530,9 +550,9 @@ class TestHumanInputNodeVariableResolution:
 
         runtime = DifyHumanInputNodeRuntime(graph_init_params.run_context)
         runtime._build_form_repository = MagicMock(return_value=mock_repo)  # type: ignore[attr-defined]
-        node = HumanInputNode(
-            id=config["id"],
-            config=config,
+        node = _build_human_input_node(
+            node_id=config["id"],
+            node_data=config["data"],
             graph_init_params=graph_init_params,
             graph_runtime_state=runtime_state,
             runtime=runtime,
@@ -595,9 +615,9 @@ class TestHumanInputNodeVariableResolution:
 
         runtime = DifyHumanInputNodeRuntime(graph_init_params.run_context)
         runtime._build_form_repository = MagicMock(return_value=mock_repo)  # type: ignore[attr-defined]
-        node = HumanInputNode(
-            id=config["id"],
-            config=config,
+        node = _build_human_input_node(
+            node_id=config["id"],
+            node_data=config["data"],
             graph_init_params=graph_init_params,
             graph_runtime_state=runtime_state,
             runtime=runtime,
@@ -671,9 +691,9 @@ class TestHumanInputNodeVariableResolution:
 
         runtime = DifyHumanInputNodeRuntime(graph_init_params.run_context)
         runtime._build_form_repository = MagicMock(return_value=mock_repo)  # type: ignore[attr-defined]
-        node = HumanInputNode(
-            id=config["id"],
-            config=config,
+        node = _build_human_input_node(
+            node_id=config["id"],
+            node_data=config["data"],
             graph_init_params=graph_init_params,
             graph_runtime_state=runtime_state,
             runtime=runtime,
@@ -770,9 +790,9 @@ class TestHumanInputNodeRenderedContent:
         form_repository = InMemoryHumanInputFormRepository()
         runtime = DifyHumanInputNodeRuntime(graph_init_params.run_context)
         runtime._build_form_repository = MagicMock(return_value=form_repository)  # type: ignore[attr-defined]
-        node = HumanInputNode(
-            id=config["id"],
-            config=config,
+        node = _build_human_input_node(
+            node_id=config["id"],
+            node_data=config["data"],
             graph_init_params=graph_init_params,
             graph_runtime_state=runtime_state,
             runtime=runtime,
diff --git a/api/tests/unit_tests/core/workflow/nodes/human_input/test_human_input_form_filled_event.py b/api/tests/unit_tests/core/workflow/nodes/human_input/test_human_input_form_filled_event.py
index bc98028d5b..4a9438b14f 100644
--- a/api/tests/unit_tests/core/workflow/nodes/human_input/test_human_input_form_filled_event.py
+++ b/api/tests/unit_tests/core/workflow/nodes/human_input/test_human_input_form_filled_event.py
@@ -11,6 +11,7 @@ from graphon.graph_events import (
     NodeRunHumanInputFormTimeoutEvent,
     NodeRunStartedEvent,
 )
+from graphon.nodes.human_input.entities import HumanInputNodeData
 from graphon.nodes.human_input.enums import HumanInputFormStatus
 from graphon.nodes.human_input.human_input_node import HumanInputNode
 from graphon.runtime import GraphRuntimeState, VariablePool
@@ -25,6 +26,28 @@ class _FakeFormRepository:
         return self._form
 
 
+def _create_human_input_node(
+    *,
+    config: dict,
+    graph_init_params: GraphInitParams,
+    graph_runtime_state: GraphRuntimeState,
+    repo: _FakeFormRepository,
+) -> HumanInputNode:
+    node_data = (
+        config["data"]
+        if isinstance(config["data"], HumanInputNodeData)
+        else HumanInputNodeData.model_validate(config["data"])
+    )
+    return HumanInputNode(
+        node_id=config["id"],
+        config=node_data,
+        graph_init_params=graph_init_params,
+        graph_runtime_state=graph_runtime_state,
+        form_repository=repo,
+        runtime=DifyHumanInputNodeRuntime(graph_init_params.run_context),
+    )
+
+
 def _build_node(form_content: str = "Please enter your name:\n\n{{#$output.name#}}") -> HumanInputNode:
     system_variables = default_system_variables()
     graph_runtime_state = GraphRuntimeState(
@@ -80,13 +103,11 @@ def _build_node(form_content: str = "Please enter your name:\n\n{{#$output.name#
     )
 
     repo = _FakeFormRepository(fake_form)
-    return HumanInputNode(
-        id="node-1",
+    return _create_human_input_node(
         config=config,
         graph_init_params=graph_init_params,
         graph_runtime_state=graph_runtime_state,
-        form_repository=repo,
-        runtime=DifyHumanInputNodeRuntime(graph_init_params.run_context),
+        repo=repo,
     )
 
 
@@ -145,13 +166,11 @@ def _build_timeout_node() -> HumanInputNode:
     )
 
     repo = _FakeFormRepository(fake_form)
-    return HumanInputNode(
-        id="node-1",
+    return _create_human_input_node(
         config=config,
         graph_init_params=graph_init_params,
         graph_runtime_state=graph_runtime_state,
-        form_repository=repo,
-        runtime=DifyHumanInputNodeRuntime(graph_init_params.run_context),
+        repo=repo,
     )
 
 
diff --git a/api/tests/unit_tests/core/workflow/nodes/iteration/test_iteration_child_engine_errors.py b/api/tests/unit_tests/core/workflow/nodes/iteration/test_iteration_child_engine_errors.py
index 82cc734274..8ffce39cd6 100644
--- a/api/tests/unit_tests/core/workflow/nodes/iteration/test_iteration_child_engine_errors.py
+++ b/api/tests/unit_tests/core/workflow/nodes/iteration/test_iteration_child_engine_errors.py
@@ -5,6 +5,7 @@ import pytest
 
 from core.workflow.system_variables import default_system_variables
 from graphon.entities import GraphInitParams
+from graphon.nodes.iteration.entities import IterationNodeData
 from graphon.nodes.iteration.exc import IterationGraphNotFoundError
 from graphon.nodes.iteration.iteration_node import IterationNode
 from graphon.runtime import (
@@ -44,17 +45,14 @@ def _build_iteration_node(
 ) -> IterationNode:
     init_params = build_test_graph_init_params(graph_config=graph_config)
     return IterationNode(
-        id="iteration-node",
-        config={
-            "id": "iteration-node",
-            "data": {
-                "type": "iteration",
-                "title": "Iteration",
-                "iterator_selector": ["start", "items"],
-                "output_selector": ["iteration-node", "output"],
-                "start_node_id": start_node_id,
-            },
-        },
+        node_id="iteration-node",
+        config=IterationNodeData(
+            type="iteration",
+            title="Iteration",
+            iterator_selector=["start", "items"],
+            output_selector=["iteration-node", "output"],
+            start_node_id=start_node_id,
+        ),
         graph_init_params=init_params,
         graph_runtime_state=runtime_state,
     )
diff --git a/api/tests/unit_tests/core/workflow/nodes/knowledge_index/test_knowledge_index_node.py b/api/tests/unit_tests/core/workflow/nodes/knowledge_index/test_knowledge_index_node.py
index a6fca1bfb4..f254fc3d09 100644
--- a/api/tests/unit_tests/core/workflow/nodes/knowledge_index/test_knowledge_index_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/knowledge_index/test_knowledge_index_node.py
@@ -93,6 +93,25 @@ def sample_chunks():
     }
 
 
+def _build_node(
+    *,
+    node_id: str,
+    node_data: KnowledgeIndexNodeData | dict[str, object],
+    graph_init_params,
+    graph_runtime_state,
+) -> KnowledgeIndexNode:
+    return KnowledgeIndexNode(
+        node_id=node_id,
+        config=(
+            node_data
+            if isinstance(node_data, KnowledgeIndexNodeData)
+            else KnowledgeIndexNodeData.model_validate(node_data)
+        ),
+        graph_init_params=graph_init_params,
+        graph_runtime_state=graph_runtime_state,
+    )
+
+
 class TestKnowledgeIndexNode:
     """
     Test suite for KnowledgeIndexNode.
@@ -115,9 +134,9 @@ class TestKnowledgeIndexNode:
         }
 
         # Act
-        node = KnowledgeIndexNode(
-            id=node_id,
-            config=config,
+        node = _build_node(
+            node_id=node_id,
+            node_data=config["data"],
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -143,9 +162,9 @@ class TestKnowledgeIndexNode:
             "data": sample_node_data.model_dump(),
         }
 
-        node = KnowledgeIndexNode(
-            id=node_id,
-            config=config,
+        node = _build_node(
+            node_id=node_id,
+            node_data=config["data"],
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -176,9 +195,9 @@ class TestKnowledgeIndexNode:
             "data": sample_node_data.model_dump(),
         }
 
-        node = KnowledgeIndexNode(
-            id=node_id,
-            config=config,
+        node = _build_node(
+            node_id=node_id,
+            node_data=config["data"],
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -212,9 +231,9 @@ class TestKnowledgeIndexNode:
             "data": sample_node_data.model_dump(),
         }
 
-        node = KnowledgeIndexNode(
-            id=node_id,
-            config=config,
+        node = _build_node(
+            node_id=node_id,
+            node_data=config["data"],
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -269,9 +288,9 @@ class TestKnowledgeIndexNode:
             "data": sample_node_data.model_dump(),
         }
 
-        node = KnowledgeIndexNode(
-            id=node_id,
-            config=config,
+        node = _build_node(
+            node_id=node_id,
+            node_data=config["data"],
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -332,9 +351,9 @@ class TestKnowledgeIndexNode:
             "data": sample_node_data.model_dump(),
         }
 
-        node = KnowledgeIndexNode(
-            id=node_id,
-            config=config,
+        node = _build_node(
+            node_id=node_id,
+            node_data=config["data"],
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -383,9 +402,9 @@ class TestKnowledgeIndexNode:
             "data": sample_node_data.model_dump(),
         }
 
-        node = KnowledgeIndexNode(
-            id=node_id,
-            config=config,
+        node = _build_node(
+            node_id=node_id,
+            node_data=config["data"],
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -440,9 +459,9 @@ class TestKnowledgeIndexNode:
             "data": sample_node_data.model_dump(),
         }
 
-        node = KnowledgeIndexNode(
-            id=node_id,
-            config=config,
+        node = _build_node(
+            node_id=node_id,
+            node_data=config["data"],
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -498,9 +517,9 @@ class TestKnowledgeIndexNode:
             "data": sample_node_data.model_dump(),
         }
 
-        node = KnowledgeIndexNode(
-            id=node_id,
-            config=config,
+        node = _build_node(
+            node_id=node_id,
+            node_data=config["data"],
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -536,9 +555,9 @@ class TestKnowledgeIndexNode:
             "data": sample_node_data.model_dump(),
         }
 
-        node = KnowledgeIndexNode(
-            id=node_id,
-            config=config,
+        node = _build_node(
+            node_id=node_id,
+            node_data=config["data"],
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -583,9 +602,9 @@ class TestKnowledgeIndexNode:
             "data": sample_node_data.model_dump(),
         }
 
-        node = KnowledgeIndexNode(
-            id=node_id,
-            config=config,
+        node = _build_node(
+            node_id=node_id,
+            node_data=config["data"],
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -623,9 +642,9 @@ class TestInvokeKnowledgeIndex:
             "data": sample_node_data.model_dump(),
         }
 
-        node = KnowledgeIndexNode(
-            id=node_id,
-            config=config,
+        node = _build_node(
+            node_id=node_id,
+            node_data=config["data"],
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
diff --git a/api/tests/unit_tests/core/workflow/nodes/knowledge_retrieval/test_knowledge_retrieval_node.py b/api/tests/unit_tests/core/workflow/nodes/knowledge_retrieval/test_knowledge_retrieval_node.py
index 45e8ae7d20..e923ee761b 100644
--- a/api/tests/unit_tests/core/workflow/nodes/knowledge_retrieval/test_knowledge_retrieval_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/knowledge_retrieval/test_knowledge_retrieval_node.py
@@ -14,7 +14,11 @@ from core.workflow.nodes.knowledge_retrieval.entities import (
     SingleRetrievalConfig,
 )
 from core.workflow.nodes.knowledge_retrieval.exc import RateLimitExceededError
-from core.workflow.nodes.knowledge_retrieval.knowledge_retrieval_node import KnowledgeRetrievalNode
+from core.workflow.nodes.knowledge_retrieval.knowledge_retrieval_node import (
+    KnowledgeRetrievalNode,
+    _normalize_metadata_filter_scalar,
+    _normalize_metadata_filter_sequence_item,
+)
 from core.workflow.nodes.knowledge_retrieval.retrieval import RAGRetrievalProtocol, Source
 from core.workflow.system_variables import build_system_variables
 from graphon.enums import WorkflowNodeExecutionStatus
@@ -85,6 +89,12 @@ def sample_node_data():
     )
 
 
+def test_metadata_filter_normalizers_preserve_numeric_scalars_and_stringify_other_values() -> None:
+    assert _normalize_metadata_filter_scalar(3) == 3
+    assert _normalize_metadata_filter_scalar(True) == "True"
+    assert _normalize_metadata_filter_sequence_item(4) == "4"
+
+
 class TestKnowledgeRetrievalNode:
     """
     Test suite for KnowledgeRetrievalNode.
@@ -106,8 +116,8 @@ class TestKnowledgeRetrievalNode:
 
         # Act
         node = KnowledgeRetrievalNode(
-            id=node_id,
-            config=config,
+            node_id=node_id,
+            config=KnowledgeRetrievalNodeData.model_validate(config["data"]),
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -135,8 +145,8 @@ class TestKnowledgeRetrievalNode:
         }
 
         node = KnowledgeRetrievalNode(
-            id=node_id,
-            config=config,
+            node_id=node_id,
+            config=KnowledgeRetrievalNodeData.model_validate(config["data"]),
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -194,8 +204,8 @@ class TestKnowledgeRetrievalNode:
         mock_rag_retrieval.llm_usage = LLMUsage.empty_usage()
 
         node = KnowledgeRetrievalNode(
-            id=node_id,
-            config=config,
+            node_id=node_id,
+            config=KnowledgeRetrievalNodeData.model_validate(config["data"]),
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -238,8 +248,8 @@ class TestKnowledgeRetrievalNode:
         mock_rag_retrieval.llm_usage = LLMUsage.empty_usage()
 
         node = KnowledgeRetrievalNode(
-            id=node_id,
-            config=config,
+            node_id=node_id,
+            config=KnowledgeRetrievalNodeData.model_validate(config["data"]),
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -274,8 +284,8 @@ class TestKnowledgeRetrievalNode:
         }
 
         node = KnowledgeRetrievalNode(
-            id=node_id,
-            config=config,
+            node_id=node_id,
+            config=KnowledgeRetrievalNodeData.model_validate(config["data"]),
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -309,8 +319,8 @@ class TestKnowledgeRetrievalNode:
         }
 
         node = KnowledgeRetrievalNode(
-            id=node_id,
-            config=config,
+            node_id=node_id,
+            config=KnowledgeRetrievalNodeData.model_validate(config["data"]),
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -350,8 +360,8 @@ class TestKnowledgeRetrievalNode:
         mock_rag_retrieval.llm_usage = LLMUsage.empty_usage()
 
         node = KnowledgeRetrievalNode(
-            id=node_id,
-            config=config,
+            node_id=node_id,
+            config=KnowledgeRetrievalNodeData.model_validate(config["data"]),
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -389,8 +399,8 @@ class TestKnowledgeRetrievalNode:
         mock_rag_retrieval.llm_usage = LLMUsage.empty_usage()
 
         node = KnowledgeRetrievalNode(
-            id=node_id,
-            config=config,
+            node_id=node_id,
+            config=KnowledgeRetrievalNodeData.model_validate(config["data"]),
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -470,8 +480,8 @@ class TestFetchDatasetRetriever:
         config = {"id": node_id, "data": node_data.model_dump()}
 
         node = KnowledgeRetrievalNode(
-            id=node_id,
-            config=config,
+            node_id=node_id,
+            config=KnowledgeRetrievalNodeData.model_validate(config["data"]),
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -507,8 +517,8 @@ class TestFetchDatasetRetriever:
         }
 
         node = KnowledgeRetrievalNode(
-            id=node_id,
-            config=config,
+            node_id=node_id,
+            config=KnowledgeRetrievalNodeData.model_validate(config["data"]),
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -562,8 +572,8 @@ class TestFetchDatasetRetriever:
         }
 
         node = KnowledgeRetrievalNode(
-            id=node_id,
-            config=config,
+            node_id=node_id,
+            config=KnowledgeRetrievalNodeData.model_validate(config["data"]),
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -610,8 +620,8 @@ class TestFetchDatasetRetriever:
         mock_graph_runtime_state.variable_pool.add(["start", "query"], StringSegment(value="readme"))
 
         node = KnowledgeRetrievalNode(
-            id=node_id,
-            config=config,
+            node_id=node_id,
+            config=KnowledgeRetrievalNodeData.model_validate(config["data"]),
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -671,8 +681,8 @@ class TestFetchDatasetRetriever:
         node_id = str(uuid.uuid4())
         config = {"id": node_id, "data": node_data.model_dump()}
         node = KnowledgeRetrievalNode(
-            id=node_id,
-            config=config,
+            node_id=node_id,
+            config=KnowledgeRetrievalNodeData.model_validate(config["data"]),
             graph_init_params=mock_graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
diff --git a/api/tests/unit_tests/core/workflow/nodes/list_operator/node_spec.py b/api/tests/unit_tests/core/workflow/nodes/list_operator/node_spec.py
index eca34f05be..388654f279 100644
--- a/api/tests/unit_tests/core/workflow/nodes/list_operator/node_spec.py
+++ b/api/tests/unit_tests/core/workflow/nodes/list_operator/node_spec.py
@@ -1,3 +1,4 @@
+from types import SimpleNamespace
 from unittest.mock import MagicMock
 
 import pytest
@@ -5,6 +6,7 @@ import pytest
 from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY
 from graphon.entities import GraphInitParams
 from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionStatus
+from graphon.nodes.list_operator.entities import ListOperatorNodeData
 from graphon.nodes.list_operator.node import ListOperatorNode
 from graphon.runtime import GraphRuntimeState
 from graphon.variables import ArrayNumberSegment, ArrayStringSegment
@@ -13,11 +15,28 @@ from graphon.variables import ArrayNumberSegment, ArrayStringSegment
 class TestListOperatorNode:
     """Comprehensive tests for ListOperatorNode."""
 
+    @staticmethod
+    def _build_node(*, config, graph_init_params, graph_runtime_state):
+        return ListOperatorNode(
+            node_id="test",
+            config=config if isinstance(config, ListOperatorNodeData) else ListOperatorNodeData.model_validate(config),
+            graph_init_params=graph_init_params,
+            graph_runtime_state=graph_runtime_state,
+        )
+
+    @staticmethod
+    def _filter_by(comparison_operator: str, value: str) -> dict[str, object]:
+        return {
+            "enabled": True,
+            "conditions": [{"comparison_operator": comparison_operator, "value": value}],
+        }
+
     @pytest.fixture
     def mock_graph_runtime_state(self):
         """Create mock GraphRuntimeState."""
         mock_state = MagicMock(spec=GraphRuntimeState)
         mock_variable_pool = MagicMock()
+        mock_variable_pool.convert_template.side_effect = lambda value: SimpleNamespace(text=value)
         mock_state.variable_pool = mock_variable_pool
         return mock_state
 
@@ -45,9 +64,8 @@ class TestListOperatorNode:
 
         def _create_node(config, mock_variable):
             mock_graph_runtime_state.variable_pool.get.return_value = mock_variable
-            return ListOperatorNode(
-                id="test",
-                config={"id": "test", "data": config},
+            return self._build_node(
+                config=config,
                 graph_init_params=graph_init_params,
                 graph_runtime_state=mock_graph_runtime_state,
             )
@@ -64,9 +82,8 @@ class TestListOperatorNode:
             "limit": {"enabled": False},
         }
 
-        node = ListOperatorNode(
-            id="test",
-            config={"id": "test", "data": config},
+        node = self._build_node(
+            config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -109,9 +126,8 @@ class TestListOperatorNode:
         mock_var = ArrayStringSegment(value=[])
         mock_graph_runtime_state.variable_pool.get.return_value = mock_var
 
-        node = ListOperatorNode(
-            id="test",
-            config={"id": "test", "data": config},
+        node = self._build_node(
+            config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -128,11 +144,7 @@ class TestListOperatorNode:
         config = {
             "title": "Test",
             "variable": ["sys", "items"],
-            "filter_by": {
-                "enabled": True,
-                "condition": "contains",
-                "value": "app",
-            },
+            "filter_by": self._filter_by("contains", "app"),
             "order_by": {"enabled": False},
             "limit": {"enabled": False},
         }
@@ -140,9 +152,8 @@ class TestListOperatorNode:
         mock_var = ArrayStringSegment(value=["apple", "banana", "pineapple", "cherry"])
         mock_graph_runtime_state.variable_pool.get.return_value = mock_var
 
-        node = ListOperatorNode(
-            id="test",
-            config={"id": "test", "data": config},
+        node = self._build_node(
+            config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -157,11 +168,7 @@ class TestListOperatorNode:
         config = {
             "title": "Test",
             "variable": ["sys", "items"],
-            "filter_by": {
-                "enabled": True,
-                "condition": "not contains",
-                "value": "app",
-            },
+            "filter_by": self._filter_by("not contains", "app"),
             "order_by": {"enabled": False},
             "limit": {"enabled": False},
         }
@@ -169,9 +176,8 @@ class TestListOperatorNode:
         mock_var = ArrayStringSegment(value=["apple", "banana", "pineapple", "cherry"])
         mock_graph_runtime_state.variable_pool.get.return_value = mock_var
 
-        node = ListOperatorNode(
-            id="test",
-            config={"id": "test", "data": config},
+        node = self._build_node(
+            config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -186,11 +192,7 @@ class TestListOperatorNode:
         config = {
             "title": "Test",
             "variable": ["sys", "numbers"],
-            "filter_by": {
-                "enabled": True,
-                "condition": ">",
-                "value": "5",
-            },
+            "filter_by": self._filter_by(">", "5"),
             "order_by": {"enabled": False},
             "limit": {"enabled": False},
         }
@@ -198,9 +200,8 @@ class TestListOperatorNode:
         mock_var = ArrayNumberSegment(value=[1, 3, 5, 7, 9, 11])
         mock_graph_runtime_state.variable_pool.get.return_value = mock_var
 
-        node = ListOperatorNode(
-            id="test",
-            config={"id": "test", "data": config},
+        node = self._build_node(
+            config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -226,9 +227,8 @@ class TestListOperatorNode:
         mock_var = ArrayStringSegment(value=["cherry", "apple", "banana"])
         mock_graph_runtime_state.variable_pool.get.return_value = mock_var
 
-        node = ListOperatorNode(
-            id="test",
-            config={"id": "test", "data": config},
+        node = self._build_node(
+            config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -254,9 +254,8 @@ class TestListOperatorNode:
         mock_var = ArrayStringSegment(value=["cherry", "apple", "banana"])
         mock_graph_runtime_state.variable_pool.get.return_value = mock_var
 
-        node = ListOperatorNode(
-            id="test",
-            config={"id": "test", "data": config},
+        node = self._build_node(
+            config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -282,9 +281,8 @@ class TestListOperatorNode:
         mock_var = ArrayStringSegment(value=["apple", "banana", "cherry", "date"])
         mock_graph_runtime_state.variable_pool.get.return_value = mock_var
 
-        node = ListOperatorNode(
-            id="test",
-            config={"id": "test", "data": config},
+        node = self._build_node(
+            config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -299,11 +297,7 @@ class TestListOperatorNode:
         config = {
             "title": "Test",
             "variable": ["sys", "numbers"],
-            "filter_by": {
-                "enabled": True,
-                "condition": ">",
-                "value": "3",
-            },
+            "filter_by": self._filter_by(">", "3"),
             "order_by": {
                 "enabled": True,
                 "value": "desc",
@@ -317,9 +311,8 @@ class TestListOperatorNode:
         mock_var = ArrayNumberSegment(value=[1, 2, 3, 4, 5, 6, 7, 8, 9])
         mock_graph_runtime_state.variable_pool.get.return_value = mock_var
 
-        node = ListOperatorNode(
-            id="test",
-            config={"id": "test", "data": config},
+        node = self._build_node(
+            config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -341,9 +334,8 @@ class TestListOperatorNode:
 
         mock_graph_runtime_state.variable_pool.get.return_value = None
 
-        node = ListOperatorNode(
-            id="test",
-            config={"id": "test", "data": config},
+        node = self._build_node(
+            config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -366,9 +358,8 @@ class TestListOperatorNode:
         mock_var = ArrayStringSegment(value=["first", "middle", "last"])
         mock_graph_runtime_state.variable_pool.get.return_value = mock_var
 
-        node = ListOperatorNode(
-            id="test",
-            config={"id": "test", "data": config},
+        node = self._build_node(
+            config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -384,11 +375,7 @@ class TestListOperatorNode:
         config = {
             "title": "Test",
             "variable": ["sys", "items"],
-            "filter_by": {
-                "enabled": True,
-                "condition": "start with",
-                "value": "app",
-            },
+            "filter_by": self._filter_by("start with", "app"),
             "order_by": {"enabled": False},
             "limit": {"enabled": False},
         }
@@ -396,9 +383,8 @@ class TestListOperatorNode:
         mock_var = ArrayStringSegment(value=["apple", "application", "banana", "apricot"])
         mock_graph_runtime_state.variable_pool.get.return_value = mock_var
 
-        node = ListOperatorNode(
-            id="test",
-            config={"id": "test", "data": config},
+        node = self._build_node(
+            config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -413,11 +399,7 @@ class TestListOperatorNode:
         config = {
             "title": "Test",
             "variable": ["sys", "items"],
-            "filter_by": {
-                "enabled": True,
-                "condition": "end with",
-                "value": "le",
-            },
+            "filter_by": self._filter_by("end with", "le"),
             "order_by": {"enabled": False},
             "limit": {"enabled": False},
         }
@@ -425,9 +407,8 @@ class TestListOperatorNode:
         mock_var = ArrayStringSegment(value=["apple", "banana", "pineapple", "table"])
         mock_graph_runtime_state.variable_pool.get.return_value = mock_var
 
-        node = ListOperatorNode(
-            id="test",
-            config={"id": "test", "data": config},
+        node = self._build_node(
+            config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -442,11 +423,7 @@ class TestListOperatorNode:
         config = {
             "title": "Test",
             "variable": ["sys", "numbers"],
-            "filter_by": {
-                "enabled": True,
-                "condition": "=",
-                "value": "5",
-            },
+            "filter_by": self._filter_by("=", "5"),
             "order_by": {"enabled": False},
             "limit": {"enabled": False},
         }
@@ -454,9 +431,8 @@ class TestListOperatorNode:
         mock_var = ArrayNumberSegment(value=[1, 3, 5, 5, 7, 9])
         mock_graph_runtime_state.variable_pool.get.return_value = mock_var
 
-        node = ListOperatorNode(
-            id="test",
-            config={"id": "test", "data": config},
+        node = self._build_node(
+            config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -471,11 +447,7 @@ class TestListOperatorNode:
         config = {
             "title": "Test",
             "variable": ["sys", "numbers"],
-            "filter_by": {
-                "enabled": True,
-                "condition": "≠",
-                "value": "5",
-            },
+            "filter_by": self._filter_by("≠", "5"),
             "order_by": {"enabled": False},
             "limit": {"enabled": False},
         }
@@ -483,9 +455,8 @@ class TestListOperatorNode:
         mock_var = ArrayNumberSegment(value=[1, 3, 5, 7, 9])
         mock_graph_runtime_state.variable_pool.get.return_value = mock_var
 
-        node = ListOperatorNode(
-            id="test",
-            config={"id": "test", "data": config},
+        node = self._build_node(
+            config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
@@ -511,9 +482,8 @@ class TestListOperatorNode:
         mock_var = ArrayNumberSegment(value=[9, 3, 7, 1, 5])
         mock_graph_runtime_state.variable_pool.get.return_value = mock_var
 
-        node = ListOperatorNode(
-            id="test",
-            config={"id": "test", "data": config},
+        node = self._build_node(
+            config=config,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
         )
diff --git a/api/tests/unit_tests/core/workflow/nodes/llm/test_llm_utils.py b/api/tests/unit_tests/core/workflow/nodes/llm/test_llm_utils.py
index 4186bbdc93..212ad07bd3 100644
--- a/api/tests/unit_tests/core/workflow/nodes/llm/test_llm_utils.py
+++ b/api/tests/unit_tests/core/workflow/nodes/llm/test_llm_utils.py
@@ -71,8 +71,8 @@ def _build_image_file(
     mime_type: str = "image/png",
 ) -> File:
     return File(
-        id=file_id,
-        type=FileType.IMAGE,
+        file_id=file_id,
+        file_type=FileType.IMAGE,
         filename=f"{file_id}{extension}",
         transfer_method=FileTransferMethod.REMOTE_URL,
         remote_url=remote_url,
@@ -95,6 +95,8 @@ def variable_pool() -> VariablePool:
 def _fetch_prompt_messages_with_mocked_content(content):
     variable_pool = VariablePool.empty()
     model_instance = mock.MagicMock(spec=ModelInstance)
+    model_schema = mock.MagicMock()
+    model_schema.supports_prompt_content_type.side_effect = lambda content_type: content_type == "text"
     prompt_template = [
         LLMNodeChatModelMessage(
             text="You are a classifier.",
@@ -106,7 +108,7 @@ def _fetch_prompt_messages_with_mocked_content(content):
     with (
         mock.patch(
             "graphon.nodes.llm.llm_utils.fetch_model_schema",
-            return_value=mock.MagicMock(features=[]),
+            return_value=model_schema,
         ),
         mock.patch(
             "graphon.nodes.llm.llm_utils.handle_list_messages",
diff --git a/api/tests/unit_tests/core/workflow/nodes/llm/test_node.py b/api/tests/unit_tests/core/workflow/nodes/llm/test_node.py
index b1f81b6c48..c707cf28cd 100644
--- a/api/tests/unit_tests/core/workflow/nodes/llm/test_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/llm/test_node.py
@@ -140,8 +140,8 @@ def _build_image_file(
     mime_type: str = "image/png",
 ) -> File:
     return File(
-        id=file_id,
-        type=FileType.IMAGE,
+        file_id=file_id,
+        file_type=FileType.IMAGE,
         filename=f"{file_id}{extension}",
         transfer_method=FileTransferMethod.REMOTE_URL,
         remote_url=remote_url,
@@ -205,14 +205,10 @@ def llm_node(
     mock_credentials_provider = mock.MagicMock(spec=CredentialsProvider)
     mock_model_factory = mock.MagicMock(spec=ModelFactory)
     mock_prompt_message_serializer = mock.MagicMock(spec=PromptMessageSerializerProtocol)
-    node_config = {
-        "id": "1",
-        "data": llm_node_data.model_dump(),
-    }
     http_client = mock.MagicMock()
     node = LLMNode(
-        id="1",
-        config=node_config,
+        node_id="1",
+        config=llm_node_data,
         graph_init_params=graph_init_params,
         graph_runtime_state=graph_runtime_state,
         credentials_provider=mock_credentials_provider,
@@ -403,8 +399,8 @@ def test_dify_model_access_adapters_call_managers():
 
 def test_fetch_files_with_file_segment():
     file = File(
-        id="1",
-        type=FileType.IMAGE,
+        file_id="1",
+        file_type=FileType.IMAGE,
         filename="test.jpg",
         transfer_method=FileTransferMethod.LOCAL_FILE,
         related_id="1",
@@ -420,16 +416,16 @@ def test_fetch_files_with_file_segment():
 def test_fetch_files_with_array_file_segment():
     files = [
         File(
-            id="1",
-            type=FileType.IMAGE,
+            file_id="1",
+            file_type=FileType.IMAGE,
             filename="test1.jpg",
             transfer_method=FileTransferMethod.LOCAL_FILE,
             related_id="1",
             storage_key="",
         ),
         File(
-            id="2",
-            type=FileType.IMAGE,
+            file_id="2",
+            file_type=FileType.IMAGE,
             filename="test2.jpg",
             transfer_method=FileTransferMethod.LOCAL_FILE,
             related_id="2",
@@ -1174,14 +1170,10 @@ def llm_node_for_multimodal(llm_node_data, graph_init_params, graph_runtime_stat
     mock_credentials_provider = mock.MagicMock(spec=CredentialsProvider)
     mock_model_factory = mock.MagicMock(spec=ModelFactory)
     mock_prompt_message_serializer = mock.MagicMock(spec=PromptMessageSerializerProtocol)
-    node_config = {
-        "id": "1",
-        "data": llm_node_data.model_dump(),
-    }
     http_client = mock.MagicMock()
     node = LLMNode(
-        id="1",
-        config=node_config,
+        node_id="1",
+        config=llm_node_data,
         graph_init_params=graph_init_params,
         graph_runtime_state=graph_runtime_state,
         credentials_provider=mock_credentials_provider,
@@ -1203,8 +1195,8 @@ class TestLLMNodeSaveMultiModalImageOutput:
             mime_type="image/png",
         )
         mock_file = File(
-            id=str(uuid.uuid4()),
-            type=FileType.IMAGE,
+            file_id=str(uuid.uuid4()),
+            file_type=FileType.IMAGE,
             transfer_method=FileTransferMethod.TOOL_FILE,
             related_id=str(uuid.uuid4()),
             filename="test-file.png",
@@ -1233,8 +1225,8 @@ class TestLLMNodeSaveMultiModalImageOutput:
             mime_type="image/jpg",
         )
         mock_file = File(
-            id=str(uuid.uuid4()),
-            type=FileType.IMAGE,
+            file_id=str(uuid.uuid4()),
+            file_type=FileType.IMAGE,
             transfer_method=FileTransferMethod.TOOL_FILE,
             related_id=str(uuid.uuid4()),
             filename="test-file.png",
@@ -1291,8 +1283,8 @@ class TestSaveMultimodalOutputAndConvertResultToMarkdown:
         image_b64_data = base64.b64encode(image_raw_data).decode()
 
         mock_saved_file = File(
-            id=str(uuid.uuid4()),
-            type=FileType.IMAGE,
+            file_id=str(uuid.uuid4()),
+            file_type=FileType.IMAGE,
             transfer_method=FileTransferMethod.TOOL_FILE,
             filename="test.png",
             extension=".png",
@@ -1457,7 +1449,6 @@ def test_invoke_llm_dispatches_to_expected_model_method(structured_output_enable
                 file_saver=file_saver,
                 file_outputs=[],
                 node_id="node-1",
-                node_type=LLMNode.node_type,
                 reasoning_format="separated",
             )
         )
@@ -1514,7 +1505,6 @@ def test_handle_invoke_result_streaming_collects_text_metrics_and_structured_out
                 file_saver=mock.MagicMock(spec=LLMFileSaver),
                 file_outputs=[],
                 node_id="node-1",
-                node_type=LLMNode.node_type,
                 model_instance=_build_prepared_llm_mock(),
                 reasoning_format="separated",
                 request_start_time=1.0,
@@ -1552,7 +1542,6 @@ def test_handle_invoke_result_wraps_structured_output_parse_errors():
                 file_saver=mock.MagicMock(spec=LLMFileSaver),
                 file_outputs=[],
                 node_id="node-1",
-                node_type=LLMNode.node_type,
                 model_instance=model_instance,
             )
         )
diff --git a/api/tests/unit_tests/core/workflow/nodes/template_transform/template_transform_node_spec.py b/api/tests/unit_tests/core/workflow/nodes/template_transform/template_transform_node_spec.py
index bc44ececd8..892f6cc586 100644
--- a/api/tests/unit_tests/core/workflow/nodes/template_transform/template_transform_node_spec.py
+++ b/api/tests/unit_tests/core/workflow/nodes/template_transform/template_transform_node_spec.py
@@ -13,6 +13,28 @@ from graphon.template_rendering import TemplateRenderError
 from tests.workflow_test_utils import build_test_graph_init_params
 
 
+def _build_template_transform_node(
+    *,
+    node_data,
+    graph_init_params,
+    graph_runtime_state,
+    node_id: str = "test_node",
+    **kwargs,
+) -> TemplateTransformNode:
+    typed_node_data = (
+        node_data
+        if isinstance(node_data, TemplateTransformNodeData)
+        else TemplateTransformNodeData.model_validate(node_data)
+    )
+    return TemplateTransformNode(
+        node_id=node_id,
+        config=typed_node_data,
+        graph_init_params=graph_init_params,
+        graph_runtime_state=graph_runtime_state,
+        **kwargs,
+    )
+
+
 class TestTemplateTransformNode:
     """Comprehensive test suite for TemplateTransformNode."""
 
@@ -59,9 +81,8 @@ class TestTemplateTransformNode:
     def test_node_initialization(self, basic_node_data, mock_graph_runtime_state, graph_init_params):
         """Test that TemplateTransformNode initializes correctly."""
         mock_renderer = MagicMock()
-        node = TemplateTransformNode(
-            id="test_node",
-            config={"id": "test_node", "data": basic_node_data},
+        node = _build_template_transform_node(
+            node_data=basic_node_data,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
             jinja2_template_renderer=mock_renderer,
@@ -75,9 +96,8 @@ class TestTemplateTransformNode:
     def test_get_title(self, basic_node_data, mock_graph_runtime_state, graph_init_params):
         """Test _get_title method."""
         mock_renderer = MagicMock()
-        node = TemplateTransformNode(
-            id="test_node",
-            config={"id": "test_node", "data": basic_node_data},
+        node = _build_template_transform_node(
+            node_data=basic_node_data,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
             jinja2_template_renderer=mock_renderer,
@@ -88,9 +108,8 @@ class TestTemplateTransformNode:
     def test_get_description(self, basic_node_data, mock_graph_runtime_state, graph_init_params):
         """Test _get_description method."""
         mock_renderer = MagicMock()
-        node = TemplateTransformNode(
-            id="test_node",
-            config={"id": "test_node", "data": basic_node_data},
+        node = _build_template_transform_node(
+            node_data=basic_node_data,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
             jinja2_template_renderer=mock_renderer,
@@ -108,9 +127,8 @@ class TestTemplateTransformNode:
         }
 
         mock_renderer = MagicMock()
-        node = TemplateTransformNode(
-            id="test_node",
-            config={"id": "test_node", "data": node_data},
+        node = _build_template_transform_node(
+            node_data=node_data,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
             jinja2_template_renderer=mock_renderer,
@@ -143,9 +161,8 @@ class TestTemplateTransformNode:
         mock_renderer = MagicMock()
 
         with pytest.raises(ValueError, match="max_output_length must be a positive integer"):
-            TemplateTransformNode(
-                id="test_node",
-                config={"id": "test_node", "data": basic_node_data},
+            _build_template_transform_node(
+                node_data=basic_node_data,
                 graph_init_params=graph_init_params,
                 graph_runtime_state=mock_graph_runtime_state,
                 jinja2_template_renderer=mock_renderer,
@@ -170,9 +187,8 @@ class TestTemplateTransformNode:
         mock_renderer = MagicMock()
         mock_renderer.render_template.return_value = "Hello Alice, you are 30 years old!"
 
-        node = TemplateTransformNode(
-            id="test_node",
-            config={"id": "test_node", "data": basic_node_data},
+        node = _build_template_transform_node(
+            node_data=basic_node_data,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
             jinja2_template_renderer=mock_renderer,
@@ -198,9 +214,8 @@ class TestTemplateTransformNode:
         mock_renderer = MagicMock()
         mock_renderer.render_template.return_value = "Value: "
 
-        node = TemplateTransformNode(
-            id="test_node",
-            config={"id": "test_node", "data": node_data},
+        node = _build_template_transform_node(
+            node_data=node_data,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
             jinja2_template_renderer=mock_renderer,
@@ -218,9 +233,8 @@ class TestTemplateTransformNode:
         mock_renderer = MagicMock()
         mock_renderer.render_template.side_effect = TemplateRenderError("Template syntax error")
 
-        node = TemplateTransformNode(
-            id="test_node",
-            config={"id": "test_node", "data": basic_node_data},
+        node = _build_template_transform_node(
+            node_data=basic_node_data,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
             jinja2_template_renderer=mock_renderer,
@@ -238,9 +252,8 @@ class TestTemplateTransformNode:
         mock_renderer = MagicMock()
         mock_renderer.render_template.return_value = "This is a very long output that exceeds the limit"
 
-        node = TemplateTransformNode(
-            id="test_node",
-            config={"id": "test_node", "data": basic_node_data},
+        node = _build_template_transform_node(
+            node_data=basic_node_data,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
             jinja2_template_renderer=mock_renderer,
@@ -260,9 +273,8 @@ class TestTemplateTransformNode:
         mock_renderer = MagicMock()
         mock_renderer.render_template.return_value = "1234567890"
 
-        node = TemplateTransformNode(
-            id="test_node",
-            config={"id": "test_node", "data": basic_node_data},
+        node = _build_template_transform_node(
+            node_data=basic_node_data,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
             jinja2_template_renderer=mock_renderer,
@@ -302,9 +314,8 @@ class TestTemplateTransformNode:
         mock_renderer = MagicMock()
         mock_renderer.render_template.return_value = "apple, banana, orange (Total: 3)"
 
-        node = TemplateTransformNode(
-            id="test_node",
-            config={"id": "test_node", "data": node_data},
+        node = _build_template_transform_node(
+            node_data=node_data,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
             jinja2_template_renderer=mock_renderer,
@@ -375,8 +386,8 @@ class TestTemplateTransformNode:
         )
 
         assert mapping == {
-            "node_123.var1": ["sys", "input1"],
-            "node_123.empty_selector": [],
+            "node_123.var1": ("sys", "input1"),
+            "node_123.empty_selector": (),
         }
 
     def test_extract_variable_selector_to_variable_mapping_ignores_invalid_entries(self):
@@ -409,9 +420,8 @@ class TestTemplateTransformNode:
         mock_renderer = MagicMock()
         mock_renderer.render_template.return_value = "This is a static message."
 
-        node = TemplateTransformNode(
-            id="test_node",
-            config={"id": "test_node", "data": node_data},
+        node = _build_template_transform_node(
+            node_data=node_data,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
             jinja2_template_renderer=mock_renderer,
@@ -448,9 +458,8 @@ class TestTemplateTransformNode:
         mock_renderer = MagicMock()
         mock_renderer.render_template.return_value = "Total: $31.5"
 
-        node = TemplateTransformNode(
-            id="test_node",
-            config={"id": "test_node", "data": node_data},
+        node = _build_template_transform_node(
+            node_data=node_data,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
             jinja2_template_renderer=mock_renderer,
@@ -477,9 +486,8 @@ class TestTemplateTransformNode:
         mock_renderer = MagicMock()
         mock_renderer.render_template.return_value = "Name: John Doe, Email: john@example.com"
 
-        node = TemplateTransformNode(
-            id="test_node",
-            config={"id": "test_node", "data": node_data},
+        node = _build_template_transform_node(
+            node_data=node_data,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
             jinja2_template_renderer=mock_renderer,
@@ -507,9 +515,8 @@ class TestTemplateTransformNode:
         mock_renderer = MagicMock()
         mock_renderer.render_template.return_value = "Tags: #python #ai #workflow "
 
-        node = TemplateTransformNode(
-            id="test_node",
-            config={"id": "test_node", "data": node_data},
+        node = _build_template_transform_node(
+            node_data=node_data,
             graph_init_params=graph_init_params,
             graph_runtime_state=mock_graph_runtime_state,
             jinja2_template_renderer=mock_renderer,
diff --git a/api/tests/unit_tests/core/workflow/nodes/template_transform/test_template_transform_node.py b/api/tests/unit_tests/core/workflow/nodes/template_transform/test_template_transform_node.py
index 636237e56e..a846efbb43 100644
--- a/api/tests/unit_tests/core/workflow/nodes/template_transform/test_template_transform_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/template_transform/test_template_transform_node.py
@@ -4,6 +4,7 @@ import pytest
 
 from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
 from graphon.nodes.base.entities import VariableSelector
+from graphon.nodes.template_transform.entities import TemplateTransformNodeData
 from graphon.nodes.template_transform.template_transform_node import (
     DEFAULT_TEMPLATE_TRANSFORM_MAX_OUTPUT_LENGTH,
     TemplateTransformNode,
@@ -37,15 +38,13 @@ def mock_graph_runtime_state():
 
 def test_node_uses_default_max_output_length_when_not_overridden(graph_init_params, mock_graph_runtime_state):
     node = TemplateTransformNode(
-        id="test_node",
-        config={
-            "id": "test_node",
-            "data": {
-                "title": "Template Transform",
-                "variables": [],
-                "template": "hello",
-            },
-        },
+        node_id="test_node",
+        config=TemplateTransformNodeData(
+            title="Template Transform",
+            type="template-transform",
+            variables=[],
+            template="hello",
+        ),
         graph_init_params=graph_init_params,
         graph_runtime_state=mock_graph_runtime_state,
         jinja2_template_renderer=MagicMock(),
@@ -70,5 +69,5 @@ def test_extract_variable_selector_to_variable_mapping_accepts_mixed_valid_entri
 
     assert mapping == {
         "node_123.validated": ["sys", "input1"],
-        "node_123.raw": ["sys", "input2"],
+        "node_123.raw": ("sys", "input2"),
     }
diff --git a/api/tests/unit_tests/core/workflow/nodes/test_base_node.py b/api/tests/unit_tests/core/workflow/nodes/test_base_node.py
index 0522dd9d14..364408ead6 100644
--- a/api/tests/unit_tests/core/workflow/nodes/test_base_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/test_base_node.py
@@ -7,7 +7,6 @@ from core.workflow.node_runtime import resolve_dify_run_context
 from core.workflow.system_variables import build_system_variables
 from graphon.entities import GraphInitParams
 from graphon.entities.base_node_data import BaseNodeData
-from graphon.entities.graph_config import NodeConfigDict, NodeConfigDictAdapter
 from graphon.enums import BuiltinNodeTypes
 from graphon.nodes.base.node import Node
 from graphon.runtime import GraphRuntimeState, VariablePool
@@ -42,17 +41,19 @@ def _build_context(graph_config: Mapping[str, object]) -> tuple[GraphInitParams,
     return init_params, runtime_state
 
 
-def _build_node_config() -> NodeConfigDict:
-    return NodeConfigDictAdapter.validate_python(
-        {
-            "id": "node-1",
-            "data": {
-                "type": BuiltinNodeTypes.ANSWER,
-                "title": "Sample",
-                "foo": "bar",
-            },
-        }
-    )
+def _build_node_config() -> dict[str, object]:
+    return {
+        "id": "node-1",
+        "data": _SampleNodeData(
+            type=BuiltinNodeTypes.ANSWER,
+            title="Sample",
+            foo="bar",
+        ),
+    }
+
+
+def _build_node_data() -> _SampleNodeData:
+    return _build_node_config()["data"]  # type: ignore[return-value]
 
 
 def test_node_hydrates_data_during_initialization():
@@ -60,8 +61,8 @@ def test_node_hydrates_data_during_initialization():
     init_params, runtime_state = _build_context(graph_config)
 
     node = _SampleNode(
-        id="node-1",
-        config=_build_node_config(),
+        node_id="node-1",
+        config=_build_node_data(),
         graph_init_params=init_params,
         graph_runtime_state=runtime_state,
     )
@@ -86,8 +87,8 @@ def test_node_accepts_invoke_from_enum():
     )
 
     node = _SampleNode(
-        id="node-1",
-        config=_build_node_config(),
+        node_id="node-1",
+        config=_build_node_data(),
         graph_init_params=init_params,
         graph_runtime_state=runtime_state,
     )
@@ -117,13 +118,7 @@ def test_missing_generic_argument_raises_type_error():
 
 
 def test_base_node_data_keeps_dict_style_access_compatibility():
-    node_data = _SampleNodeData.model_validate(
-        {
-            "type": BuiltinNodeTypes.ANSWER,
-            "title": "Sample",
-            "foo": "bar",
-        }
-    )
+    node_data = _SampleNodeData(type=BuiltinNodeTypes.ANSWER, title="Sample", foo="bar")
 
     assert node_data["foo"] == "bar"
     assert node_data.get("foo") == "bar"
@@ -133,21 +128,19 @@ def test_base_node_data_keeps_dict_style_access_compatibility():
 def test_node_hydration_preserves_compatibility_extra_fields():
     graph_config: dict[str, object] = {}
     init_params, runtime_state = _build_context(graph_config)
-    node_config = NodeConfigDictAdapter.validate_python(
-        {
-            "id": "node-1",
-            "data": {
-                "type": BuiltinNodeTypes.ANSWER,
-                "title": "Sample",
-                "foo": "bar",
-                "compat_flag": True,
-            },
-        }
-    )
+    node_config = {
+        "id": "node-1",
+        "data": _SampleNodeData(
+            type=BuiltinNodeTypes.ANSWER,
+            title="Sample",
+            foo="bar",
+            compat_flag=True,
+        ),
+    }
 
     node = _SampleNode(
-        id="node-1",
-        config=node_config,
+        node_id="node-1",
+        config=node_config["data"],
         graph_init_params=init_params,
         graph_runtime_state=runtime_state,
     )
diff --git a/api/tests/unit_tests/core/workflow/nodes/test_document_extractor_node.py b/api/tests/unit_tests/core/workflow/nodes/test_document_extractor_node.py
index 87ec2d5bce..dd75b32593 100644
--- a/api/tests/unit_tests/core/workflow/nodes/test_document_extractor_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/test_document_extractor_node.py
@@ -11,14 +11,16 @@ from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionStatus
 from graphon.file import File, FileTransferMethod
 from graphon.node_events import NodeRunResult
 from graphon.nodes.document_extractor import DocumentExtractorNode, DocumentExtractorNodeData
+from graphon.nodes.document_extractor.exc import TextExtractionError, UnsupportedFileTypeError
 from graphon.nodes.document_extractor.node import (
     _extract_text_from_docx,
     _extract_text_from_excel,
+    _extract_text_from_file,
     _extract_text_from_pdf,
     _extract_text_from_plain_text,
     _normalize_docx_zip,
 )
-from graphon.variables import ArrayFileSegment
+from graphon.variables import ArrayFileSegment, FileSegment
 from graphon.variables.segments import ArrayStringSegment
 from graphon.variables.variables import StringVariable
 from tests.workflow_test_utils import build_test_graph_init_params
@@ -44,11 +46,10 @@ def document_extractor_node(graph_init_params):
         title="Test Document Extractor",
         variable_selector=["node_id", "variable_name"],
     )
-    node_config = {"id": "test_node_id", "data": node_data.model_dump()}
     http_client = Mock()
     node = DocumentExtractorNode(
-        id="test_node_id",
-        config=node_config,
+        node_id="test_node_id",
+        config=node_data,
         graph_init_params=graph_init_params,
         graph_runtime_state=Mock(),
         http_client=http_client,
@@ -341,7 +342,7 @@ def test_extract_text_from_excel_sheet_parse_error(mock_excel_file):
     # Mock ExcelFile
     mock_excel_instance = Mock()
     mock_excel_instance.sheet_names = ["GoodSheet", "BadSheet"]
-    mock_excel_instance.parse.side_effect = [df, Exception("Parse error")]
+    mock_excel_instance.parse.side_effect = [df, TypeError("Parse error")]
     mock_excel_file.return_value = mock_excel_instance
 
     file_content = b"fake_excel_mixed_content"
@@ -386,7 +387,7 @@ def test_extract_text_from_excel_all_sheets_fail(mock_excel_file):
     # Mock ExcelFile
     mock_excel_instance = Mock()
     mock_excel_instance.sheet_names = ["BadSheet1", "BadSheet2"]
-    mock_excel_instance.parse.side_effect = [Exception("Error 1"), Exception("Error 2")]
+    mock_excel_instance.parse.side_effect = [TypeError("Error 1"), TypeError("Error 2")]
     mock_excel_file.return_value = mock_excel_instance
 
     file_content = b"fake_excel_all_bad_sheets"
@@ -397,6 +398,12 @@ def test_extract_text_from_excel_all_sheets_fail(mock_excel_file):
     assert mock_excel_instance.parse.call_count == 2
 
 
+@patch("pandas.ExcelFile", side_effect=RuntimeError("broken workbook"))
+def test_extract_text_from_excel_wraps_workbook_open_errors(mock_excel_file):
+    with pytest.raises(TextExtractionError, match="Failed to extract text from Excel file: broken workbook"):
+        _extract_text_from_excel(b"broken")
+
+
 @patch("pandas.ExcelFile")
 def test_extract_text_from_excel_numeric_type_column(mock_excel_file):
     """Test extracting text from Excel file with numeric column names."""
@@ -420,6 +427,103 @@ def test_extract_text_from_excel_numeric_type_column(mock_excel_file):
     assert expected_manual == result
 
 
+@pytest.mark.parametrize(
+    ("extension", "mime_type"),
+    [
+        (".xlsx", "text/plain"),
+        (None, "application/vnd.ms-excel"),
+    ],
+)
+def test_extract_text_from_file_routes_excel_inputs(document_extractor_node, extension, mime_type):
+    file = Mock(spec=File)
+    file.extension = extension
+    file.mime_type = mime_type
+
+    with (
+        patch(
+            "graphon.nodes.document_extractor.node._download_file_content",
+            return_value=b"excel",
+        ),
+        patch(
+            "graphon.nodes.document_extractor.node._extract_text_from_excel",
+            return_value="excel text",
+        ) as mock_extract,
+    ):
+        result = _extract_text_from_file(
+            document_extractor_node.http_client,
+            file,
+            unstructured_api_config=document_extractor_node._unstructured_api_config,
+        )
+
+    assert result == "excel text"
+    mock_extract.assert_called_once_with(b"excel")
+
+
+def test_extract_text_from_file_rejects_missing_extension_and_mime_type(document_extractor_node):
+    file = Mock(spec=File)
+    file.extension = None
+    file.mime_type = None
+
+    with patch(
+        "graphon.nodes.document_extractor.node._download_file_content",
+        return_value=b"unknown",
+    ):
+        with pytest.raises(UnsupportedFileTypeError, match="Unable to determine file type"):
+            _extract_text_from_file(
+                document_extractor_node.http_client,
+                file,
+                unstructured_api_config=document_extractor_node._unstructured_api_config,
+            )
+
+
+def test_run_list_file_extraction_error_returns_failed(document_extractor_node, mock_graph_runtime_state):
+    document_extractor_node.graph_runtime_state = mock_graph_runtime_state
+    file_list = Mock(spec=ArrayFileSegment)
+    file_list.value = [Mock(spec=File)]
+    mock_graph_runtime_state.variable_pool.get.return_value = file_list
+
+    with patch(
+        "graphon.nodes.document_extractor.node._extract_text_from_file",
+        side_effect=TextExtractionError("bad file"),
+    ):
+        result = document_extractor_node._run()
+
+    assert result.status == WorkflowNodeExecutionStatus.FAILED
+    assert result.error == "bad file"
+
+
+def test_run_single_file_segment_extraction_error_returns_failed(document_extractor_node, mock_graph_runtime_state):
+    document_extractor_node.graph_runtime_state = mock_graph_runtime_state
+    file_segment = Mock(spec=FileSegment)
+    file_segment.value = Mock(spec=File)
+    mock_graph_runtime_state.variable_pool.get.return_value = file_segment
+
+    with patch(
+        "graphon.nodes.document_extractor.node._extract_text_from_file",
+        side_effect=TextExtractionError("single file failed"),
+    ):
+        result = document_extractor_node._run()
+
+    assert result.status == WorkflowNodeExecutionStatus.FAILED
+    assert result.error == "single file failed"
+
+
+def test_run_single_file_segment_returns_string_output(document_extractor_node, mock_graph_runtime_state):
+    document_extractor_node.graph_runtime_state = mock_graph_runtime_state
+    file_segment = Mock(spec=FileSegment)
+    file_segment.value = Mock(spec=File)
+    mock_graph_runtime_state.variable_pool.get.return_value = file_segment
+
+    with patch(
+        "graphon.nodes.document_extractor.node._extract_text_from_file",
+        return_value="single file text",
+    ):
+        result = document_extractor_node._run()
+
+    assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
+    assert result.outputs == {"text": "single file text"}
+
+
 def _make_docx_zip(use_backslash: bool) -> bytes:
     """Helper to build a minimal in-memory DOCX zip.
 
diff --git a/api/tests/unit_tests/core/workflow/nodes/test_if_else.py b/api/tests/unit_tests/core/workflow/nodes/test_if_else.py
index 782750e02e..aa9a1360b0 100644
--- a/api/tests/unit_tests/core/workflow/nodes/test_if_else.py
+++ b/api/tests/unit_tests/core/workflow/nodes/test_if_else.py
@@ -19,6 +19,20 @@ from graphon.variables import ArrayFileSegment
 from tests.workflow_test_utils import build_test_graph_init_params
 
 
+def _build_if_else_node(
+    *,
+    node_data: IfElseNodeData | dict[str, object],
+    init_params,
+    graph_runtime_state,
+) -> IfElseNode:
+    return IfElseNode(
+        node_id=str(uuid.uuid4()),
+        graph_init_params=init_params,
+        graph_runtime_state=graph_runtime_state,
+        config=node_data if isinstance(node_data, IfElseNodeData) else IfElseNodeData.model_validate(node_data),
+    )
+
+
 def test_execute_if_else_result_true():
     graph_config = {"edges": [], "nodes": [{"data": {"type": "start", "title": "Start"}, "id": "start"}]}
 
@@ -61,9 +75,8 @@ def test_execute_if_else_result_true():
     )
     graph = Graph.init(graph_config=graph_config, node_factory=node_factory, root_node_id="start")
 
-    node_config = {
-        "id": "if-else",
-        "data": {
+    node = _build_if_else_node(
+        node_data={
             "title": "123",
             "type": "if-else",
             "logical_operator": "and",
@@ -104,13 +117,8 @@ def test_execute_if_else_result_true():
                 {"comparison_operator": "not null", "variable_selector": ["start", "not_null"]},
             ],
         },
-    }
-
-    node = IfElseNode(
-        id=str(uuid.uuid4()),
-        graph_init_params=init_params,
+        init_params=init_params,
         graph_runtime_state=graph_runtime_state,
-        config=node_config,
     )
 
     # Mock db.session.close()
@@ -155,9 +163,8 @@ def test_execute_if_else_result_false():
     )
     graph = Graph.init(graph_config=graph_config, node_factory=node_factory, root_node_id="start")
 
-    node_config = {
-        "id": "if-else",
-        "data": {
+    node = _build_if_else_node(
+        node_data={
             "title": "123",
             "type": "if-else",
             "logical_operator": "or",
@@ -174,13 +181,8 @@ def test_execute_if_else_result_false():
                 },
             ],
         },
-    }
-
-    node = IfElseNode(
-        id=str(uuid.uuid4()),
-        graph_init_params=init_params,
+        init_params=init_params,
         graph_runtime_state=graph_runtime_state,
-        config=node_config,
     )
 
     # Mock db.session.close()
@@ -222,11 +224,6 @@ def test_array_file_contains_file_name():
         ],
     )
 
-    node_config = {
-        "id": "if-else",
-        "data": node_data.model_dump(),
-    }
-
     # Create properly configured mock for graph_init_params
     graph_init_params = Mock()
     graph_init_params.workflow_id = "test_workflow"
@@ -242,17 +239,12 @@ def test_array_file_contains_file_name():
         }
     }
 
-    node = IfElseNode(
-        id=str(uuid.uuid4()),
-        graph_init_params=graph_init_params,
-        graph_runtime_state=Mock(),
-        config=node_config,
-    )
+    node = _build_if_else_node(node_data=node_data, init_params=graph_init_params, graph_runtime_state=Mock())
 
     node.graph_runtime_state.variable_pool.get.return_value = ArrayFileSegment(
         value=[
             File(
-                type=FileType.IMAGE,
+                file_type=FileType.IMAGE,
                 transfer_method=FileTransferMethod.LOCAL_FILE,
                 related_id="1",
                 filename="ab",
@@ -334,11 +326,10 @@ def test_execute_if_else_boolean_conditions(condition: Condition):
         "logical_operator": "and",
         "conditions": [condition.model_dump()],
     }
-    node = IfElseNode(
-        id=str(uuid.uuid4()),
-        graph_init_params=init_params,
+    node = _build_if_else_node(
+        node_data=node_data,
+        init_params=init_params,
         graph_runtime_state=graph_runtime_state,
-        config={"id": "if-else", "data": node_data},
     )
 
     # Mock db.session.close()
@@ -400,14 +391,10 @@ def test_execute_if_else_boolean_false_conditions():
         ],
     }
 
-    node = IfElseNode(
-        id=str(uuid.uuid4()),
-        graph_init_params=init_params,
+    node = _build_if_else_node(
+        node_data=node_data,
+        init_params=init_params,
         graph_runtime_state=graph_runtime_state,
-        config={
-            "id": "if-else",
-            "data": node_data,
-        },
     )
 
     # Mock db.session.close()
@@ -472,11 +459,10 @@ def test_execute_if_else_boolean_cases_structure():
             }
         ],
     }
-    node = IfElseNode(
-        id=str(uuid.uuid4()),
-        graph_init_params=init_params,
+    node = _build_if_else_node(
+        node_data=node_data,
+        init_params=init_params,
         graph_runtime_state=graph_runtime_state,
-        config={"id": "if-else", "data": node_data},
     )
 
     # Mock db.session.close()
diff --git a/api/tests/unit_tests/core/workflow/nodes/test_list_operator.py b/api/tests/unit_tests/core/workflow/nodes/test_list_operator.py
index b217e4e8e7..465a4c0ff4 100644
--- a/api/tests/unit_tests/core/workflow/nodes/test_list_operator.py
+++ b/api/tests/unit_tests/core/workflow/nodes/test_list_operator.py
@@ -19,6 +19,15 @@ from graphon.nodes.list_operator.node import ListOperatorNode, _get_file_extract
 from graphon.variables import ArrayFileSegment
 
 
+def _build_list_operator_node(node_data: ListOperatorNodeData, graph_init_params) -> ListOperatorNode:
+    return ListOperatorNode(
+        node_id="test_node_id",
+        config=node_data,
+        graph_init_params=graph_init_params,
+        graph_runtime_state=MagicMock(),
+    )
+
+
 @pytest.fixture
 def list_operator_node():
     config = {
@@ -35,10 +44,6 @@ def list_operator_node():
         "title": "Test Title",
     }
     node_data = ListOperatorNodeData.model_validate(config)
-    node_config = {
-        "id": "test_node_id",
-        "data": node_data.model_dump(),
-    }
     # Create properly configured mock for graph_init_params
     graph_init_params = MagicMock()
     graph_init_params.workflow_id = "test_workflow"
@@ -54,12 +59,7 @@ def list_operator_node():
         }
     }
 
-    node = ListOperatorNode(
-        id="test_node_id",
-        config=node_config,
-        graph_init_params=graph_init_params,
-        graph_runtime_state=MagicMock(),
-    )
+    node = _build_list_operator_node(node_data, graph_init_params)
     node.graph_runtime_state = MagicMock()
     node.graph_runtime_state.variable_pool = MagicMock()
     return node
@@ -70,28 +70,28 @@ def test_filter_files_by_type(list_operator_node):
     files = [
         File(
             filename="image1.jpg",
-            type=FileType.IMAGE,
+            file_type=FileType.IMAGE,
             transfer_method=FileTransferMethod.LOCAL_FILE,
             related_id="related1",
             storage_key="",
         ),
         File(
             filename="document1.pdf",
-            type=FileType.DOCUMENT,
+            file_type=FileType.DOCUMENT,
             transfer_method=FileTransferMethod.LOCAL_FILE,
             related_id="related2",
             storage_key="",
         ),
         File(
             filename="image2.png",
-            type=FileType.IMAGE,
+            file_type=FileType.IMAGE,
             transfer_method=FileTransferMethod.LOCAL_FILE,
             related_id="related3",
             storage_key="",
         ),
         File(
             filename="audio1.mp3",
-            type=FileType.AUDIO,
+            file_type=FileType.AUDIO,
             transfer_method=FileTransferMethod.LOCAL_FILE,
             related_id="related4",
             storage_key="",
@@ -136,7 +136,7 @@ def test_filter_files_by_type(list_operator_node):
 def test_get_file_extract_string_func():
     # Create a File object
     file = File(
-        type=FileType.DOCUMENT,
+        file_type=FileType.DOCUMENT,
         transfer_method=FileTransferMethod.LOCAL_FILE,
         filename="test_file.txt",
         extension=".txt",
@@ -156,7 +156,7 @@ def test_get_file_extract_string_func():
 
     # Test with empty values
     empty_file = File(
-        type=FileType.DOCUMENT,
+        file_type=FileType.DOCUMENT,
         transfer_method=FileTransferMethod.LOCAL_FILE,
         filename=None,
         extension=None,
diff --git a/api/tests/unit_tests/core/workflow/nodes/test_start_node_json_object.py b/api/tests/unit_tests/core/workflow/nodes/test_start_node_json_object.py
index 543f9878de..5655f80737 100644
--- a/api/tests/unit_tests/core/workflow/nodes/test_start_node_json_object.py
+++ b/api/tests/unit_tests/core/workflow/nodes/test_start_node_json_object.py
@@ -22,10 +22,7 @@ def make_start_node(user_inputs, variables):
         inputs=user_inputs,
     )
 
-    config = {
-        "id": "start",
-        "data": StartNodeData(title="Start", variables=variables).model_dump(),
-    }
+    node_data = StartNodeData(title="Start", variables=variables)
 
     graph_runtime_state = GraphRuntimeState(
         variable_pool=variable_pool,
@@ -33,8 +30,8 @@ def make_start_node(user_inputs, variables):
     )
 
     return StartNode(
-        id="start",
-        config=config,
+        node_id="start",
+        config=node_data,
         graph_init_params=build_test_graph_init_params(
             workflow_id="wf",
             graph_config={},
@@ -109,7 +106,7 @@ def test_json_object_invalid_json_string():
 
     node = make_start_node(user_inputs, variables)
 
-    with pytest.raises(ValueError, match="JSON object for 'profile' must be an object"):
+    with pytest.raises(TypeError, match="JSON object for 'profile' must be an object"):
         node._run()
 
 
@@ -248,25 +245,22 @@ def test_start_node_outputs_full_variable_pool_snapshot():
         inputs={"profile": {"age": 20, "name": "Tom"}},
     )
 
-    config = {
-        "id": "start",
-        "data": StartNodeData(
-            title="Start",
-            variables=[
-                VariableEntity(
-                    variable="profile",
-                    label="profile",
-                    type=VariableEntityType.JSON_OBJECT,
-                    required=True,
-                )
-            ],
-        ).model_dump(),
-    }
+    node_data = StartNodeData(
+        title="Start",
+        variables=[
+            VariableEntity(
+                variable="profile",
+                label="profile",
+                type=VariableEntityType.JSON_OBJECT,
+                required=True,
+            )
+        ],
+    )
 
     graph_runtime_state = GraphRuntimeState(variable_pool=variable_pool, start_at=time.perf_counter())
     node = StartNode(
-        id="start",
-        config=config,
+        node_id="start",
+        config=node_data,
         graph_init_params=build_test_graph_init_params(
             workflow_id="wf",
             graph_config={},
diff --git a/api/tests/unit_tests/core/workflow/nodes/tool/test_tool_node.py b/api/tests/unit_tests/core/workflow/nodes/tool/test_tool_node.py
index c806181340..284af68319 100644
--- a/api/tests/unit_tests/core/workflow/nodes/tool/test_tool_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/tool/test_tool_node.py
@@ -13,6 +13,7 @@ from core.workflow.system_variables import build_system_variables
 from graphon.file import File, FileTransferMethod, FileType
 from graphon.model_runtime.entities.llm_entities import LLMUsage
 from graphon.node_events import StreamChunkEvent, StreamCompletedEvent
+from graphon.nodes.tool.entities import ToolNodeData
 from graphon.nodes.tool_runtime_entities import ToolRuntimeHandle, ToolRuntimeMessage
 from graphon.runtime import GraphRuntimeState, VariablePool
 from graphon.variables.segments import ArrayFileSegment
@@ -108,8 +109,8 @@ def tool_node(monkeypatch) -> ToolNode:
     runtime = _StubToolRuntime()
 
     node = ToolNode(
-        id="node-instance",
-        config=config,
+        node_id="node-instance",
+        config=ToolNodeData.model_validate(config["data"]),
         graph_init_params=init_params,
         graph_runtime_state=graph_runtime_state,
         tool_file_manager_factory=tool_file_manager_factory,
@@ -118,13 +119,13 @@ def tool_node(monkeypatch) -> ToolNode:
     return node
 
 
-def _collect_events(generator: Generator) -> tuple[list[Any], LLMUsage]:
+def _collect_events(generator: Generator) -> list[Any]:
     events: list[Any] = []
     try:
         while True:
             events.append(next(generator))
-    except StopIteration as stop:
-        return events, stop.value
+    except StopIteration:
+        return events
 
 
 def _run_transform(tool_node: ToolNode, message: ToolRuntimeMessage) -> tuple[list[Any], LLMUsage]:
@@ -135,12 +136,15 @@ def _run_transform(tool_node: ToolNode, message: ToolRuntimeMessage) -> tuple[li
         node_id=tool_node._node_id,
         tool_runtime=ToolRuntimeHandle(raw=object()),
     )
-    return _collect_events(generator)
+    events = _collect_events(generator)
+    completed_events = [event for event in events if isinstance(event, StreamCompletedEvent)]
+    assert completed_events
+    return events, completed_events[-1].node_run_result.llm_usage
 
 
 def test_link_messages_with_file_populate_files_output(tool_node: ToolNode):
     file_obj = File(
-        type=FileType.DOCUMENT,
+        file_type=FileType.DOCUMENT,
         transfer_method=FileTransferMethod.TOOL_FILE,
         related_id="file-id",
         filename="demo.pdf",
@@ -195,7 +199,7 @@ def test_plain_link_messages_remain_links(tool_node: ToolNode):
 
 def test_image_link_messages_use_tool_file_id_metadata(tool_node: ToolNode):
     file_obj = File(
-        type=FileType.DOCUMENT,
+        file_type=FileType.DOCUMENT,
         transfer_method=FileTransferMethod.TOOL_FILE,
         related_id="file-id",
         filename="demo.pdf",
diff --git a/api/tests/unit_tests/core/workflow/nodes/trigger_plugin/test_trigger_event_node.py b/api/tests/unit_tests/core/workflow/nodes/trigger_plugin/test_trigger_event_node.py
index c8ddc53284..e3b5e3b591 100644
--- a/api/tests/unit_tests/core/workflow/nodes/trigger_plugin/test_trigger_event_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/trigger_plugin/test_trigger_event_node.py
@@ -1,10 +1,10 @@
 from collections.abc import Mapping
 
 from core.trigger.constants import TRIGGER_PLUGIN_NODE_TYPE
+from core.workflow.nodes.trigger_plugin.entities import TriggerEventNodeData
 from core.workflow.nodes.trigger_plugin.trigger_event_node import TriggerEventNode
 from core.workflow.system_variables import build_system_variables
 from graphon.entities import GraphInitParams
-from graphon.entities.graph_config import NodeConfigDict, NodeConfigDictAdapter
 from graphon.enums import WorkflowNodeExecutionMetadataKey, WorkflowNodeExecutionStatus
 from graphon.runtime import GraphRuntimeState
 from tests.workflow_test_utils import build_test_graph_init_params, build_test_variable_pool
@@ -27,29 +27,24 @@ def _build_context(graph_config: Mapping[str, object]) -> tuple[GraphInitParams,
     return init_params, runtime_state
 
 
-def _build_node_config() -> NodeConfigDict:
-    return NodeConfigDictAdapter.validate_python(
-        {
-            "id": "node-1",
-            "data": {
-                "type": TRIGGER_PLUGIN_NODE_TYPE,
-                "title": "Trigger Event",
-                "plugin_id": "plugin-id",
-                "provider_id": "provider-id",
-                "event_name": "event-name",
-                "subscription_id": "subscription-id",
-                "plugin_unique_identifier": "plugin-unique-identifier",
-                "event_parameters": {},
-            },
-        }
+def _build_node_data() -> TriggerEventNodeData:
+    return TriggerEventNodeData(
+        type=TRIGGER_PLUGIN_NODE_TYPE,
+        title="Trigger Event",
+        plugin_id="plugin-id",
+        provider_id="provider-id",
+        event_name="event-name",
+        subscription_id="subscription-id",
+        plugin_unique_identifier="plugin-unique-identifier",
+        event_parameters={},
     )
 
 
 def test_trigger_event_node_run_populates_trigger_info_metadata() -> None:
     init_params, runtime_state = _build_context(graph_config={})
     node = TriggerEventNode(
-        id="node-1",
-        config=_build_node_config(),
+        node_id="node-1",
+        config=_build_node_data(),
         graph_init_params=init_params,
         graph_runtime_state=runtime_state,
     )
diff --git a/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_file_conversion.py b/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_file_conversion.py
index 1bbc12b23f..07d03bec05 100644
--- a/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_file_conversion.py
+++ b/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_file_conversion.py
@@ -30,11 +30,6 @@ def create_webhook_node(
     tenant_id: str = "test-tenant",
 ) -> TriggerWebhookNode:
     """Helper function to create a webhook node with proper initialization."""
-    node_config = {
-        "id": "webhook-node-1",
-        "data": webhook_data.model_dump(),
-    }
-
     graph_init_params = GraphInitParams(
         workflow_id="test-workflow",
         graph_config={},
@@ -56,8 +51,8 @@ def create_webhook_node(
     )
 
     node = TriggerWebhookNode(
-        id="webhook-node-1",
-        config=node_config,
+        node_id="webhook-node-1",
+        config=webhook_data,
         graph_init_params=graph_init_params,
         graph_runtime_state=runtime_state,
     )
@@ -66,10 +61,6 @@ def create_webhook_node(
     runtime_state.app_config = Mock()
     runtime_state.app_config.tenant_id = tenant_id
 
-    # Provide compatibility alias expected by node implementation
-    # Some nodes reference `self.node_id`; expose it as an alias to `self.id` for tests
-    node.node_id = node.id
-
     return node
 
 
diff --git a/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_node.py b/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_node.py
index 427afa96ec..b839490d3c 100644
--- a/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_node.py
@@ -24,11 +24,6 @@ from tests.workflow_test_utils import build_test_variable_pool
 
 def create_webhook_node(webhook_data: WebhookData, variable_pool: VariablePool) -> TriggerWebhookNode:
     """Helper function to create a webhook node with proper initialization."""
-    node_config = {
-        "id": "1",
-        "data": webhook_data.model_dump(),
-    }
-
     graph_init_params = GraphInitParams(
         workflow_id="1",
         graph_config={},
@@ -48,8 +43,8 @@ def create_webhook_node(webhook_data: WebhookData, variable_pool: VariablePool)
         start_at=0,
     )
     node = TriggerWebhookNode(
-        id="1",
-        config=node_config,
+        node_id="1",
+        config=webhook_data,
         graph_init_params=graph_init_params,
         graph_runtime_state=runtime_state,
     )
@@ -57,9 +52,6 @@ def create_webhook_node(webhook_data: WebhookData, variable_pool: VariablePool)
     # Provide tenant_id for conversion path
     runtime_state.app_config = type("_AppCfg", (), {"tenant_id": "1"})()
 
-    # Compatibility alias for some nodes referencing `self.node_id`
-    node.node_id = node.id
-
     return node
 
 
@@ -225,7 +217,7 @@ def test_webhook_node_run_with_file_params():
     """Test webhook node execution with file parameter extraction."""
     # Create mock file objects
     file1 = File(
-        type=FileType.IMAGE,
+        file_type=FileType.IMAGE,
         transfer_method=FileTransferMethod.LOCAL_FILE,
         related_id="file1",
         filename="image.jpg",
@@ -234,7 +226,7 @@ def test_webhook_node_run_with_file_params():
     )
 
     file2 = File(
-        type=FileType.DOCUMENT,
+        file_type=FileType.DOCUMENT,
         transfer_method=FileTransferMethod.LOCAL_FILE,
         related_id="file2",
         filename="document.pdf",
@@ -269,8 +261,19 @@ def test_webhook_node_run_with_file_params():
     # Mock the node's file reference boundary to avoid DB-dependent validation on upload_file_id
     with patch.object(node._file_reference_factory, "build_from_mapping") as mock_file_factory:
 
-        def _to_file(*, mapping):
-            return File.model_validate(mapping)
+        def _to_file(*, mapping: dict[str, Any]) -> File:
+            return File(
+                file_id=mapping.get("id"),
+                file_type=FileType(mapping["type"]),
+                transfer_method=FileTransferMethod(mapping["transfer_method"]),
+                related_id=mapping.get("related_id"),
+                filename=mapping.get("filename"),
+                extension=mapping.get("extension"),
+                mime_type=mapping.get("mime_type"),
+                size=mapping.get("size", -1),
+                storage_key=mapping.get("storage_key", ""),
+                remote_url=mapping.get("url"),
+            )
 
         mock_file_factory.side_effect = _to_file
         result = node._run()
@@ -284,7 +287,7 @@ def test_webhook_node_run_with_file_params():
 def test_webhook_node_run_mixed_parameters():
     """Test webhook node execution with mixed parameter types."""
     file_obj = File(
-        type=FileType.IMAGE,
+        file_type=FileType.IMAGE,
         transfer_method=FileTransferMethod.LOCAL_FILE,
         related_id="file1",
         filename="test.jpg",
@@ -317,8 +320,19 @@ def test_webhook_node_run_mixed_parameters():
     # Mock the node's file reference boundary to avoid DB-dependent validation on upload_file_id
     with patch.object(node._file_reference_factory, "build_from_mapping") as mock_file_factory:
 
-        def _to_file(*, mapping):
-            return File.model_validate(mapping)
+        def _to_file(*, mapping: dict[str, Any]) -> File:
+            return File(
+                file_id=mapping.get("id"),
+                file_type=FileType(mapping["type"]),
+                transfer_method=FileTransferMethod(mapping["transfer_method"]),
+                related_id=mapping.get("related_id"),
+                filename=mapping.get("filename"),
+                extension=mapping.get("extension"),
+                mime_type=mapping.get("mime_type"),
+                size=mapping.get("size", -1),
+                storage_key=mapping.get("storage_key", ""),
+                remote_url=mapping.get("url"),
+            )
 
         mock_file_factory.side_effect = _to_file
         result = node._run()
diff --git a/api/tests/unit_tests/core/workflow/test_human_input_adapter.py b/api/tests/unit_tests/core/workflow/test_human_input_adapter.py
new file mode 100644
index 0000000000..8b5fceeb37
--- /dev/null
+++ b/api/tests/unit_tests/core/workflow/test_human_input_adapter.py
@@ -0,0 +1,350 @@
+from types import SimpleNamespace
+
+import pytest
+from pydantic import BaseModel
+
+from core.workflow.human_input_adapter import (
+    DeliveryMethodType,
+    EmailDeliveryConfig,
+    EmailDeliveryMethod,
+    EmailRecipients,
+    WebAppDeliveryMethod,
+    _WebAppDeliveryConfig,
+    adapt_human_input_node_data_for_graph,
+    adapt_node_config_for_graph,
+    adapt_node_data_for_graph,
+    is_human_input_webapp_enabled,
+    parse_human_input_delivery_methods,
+)
+from graphon.enums import BuiltinNodeTypes
+from graphon.nodes.base.variable_template_parser import VariableTemplateParser
+
+
+def test_email_delivery_config_helpers_render_and_sanitize_text() -> None:
+    variable_pool = SimpleNamespace(
+        convert_template=lambda body: SimpleNamespace(text=body.replace("{{#node.value#}}", "42"))
+    )
+
+    rendered = EmailDeliveryConfig.render_body_template(
+        body="Open {{#url#}} and use {{#node.value#}}",
+        url="https://example.com",
+        variable_pool=variable_pool,
+    )
+    sanitized = EmailDeliveryConfig.sanitize_subject("Hello\r\n<script>alert(1)</script> Team")
+    html = EmailDeliveryConfig.render_markdown_body(
+        "**Hello** <script>alert(1)</script> [mail](mailto:test@example.com)"
+    )
+
+    assert rendered == "Open https://example.com and use 42"
+    assert sanitized == "Hello alert(1) Team"
+    assert "<strong>Hello</strong>" in html
+    assert "<script>" not in html
+    assert "mailto:test@example.com" in html
+
+
+def test_email_delivery_config_helpers_with_recipients_and_without_variable_pool() -> None:
+    recipients = EmailRecipients(include_bound_group=True, items=[])
+    config = EmailDeliveryConfig(
+        recipients=EmailRecipients(include_bound_group=False, items=[]),
+        subject="Subject",
+        body="Open {{#url#}}",
+    )
+
+    updated = config.with_recipients(recipients)
+
+    assert updated.recipients == recipients
+    assert (
+        EmailDeliveryConfig.render_body_template(body="Open {{#url#}}", url="https://example.com")
+        == "Open https://example.com"
+    )
+
+
+def test_parse_human_input_delivery_methods_normalizes_legacy_recipient_keys() -> None:
+    methods = parse_human_input_delivery_methods(
+        {
+            "delivery_methods": [
+                {
+                    "type": DeliveryMethodType.EMAIL,
+                    "config": {
+                        "recipients": {
+                            "whole_workspace": True,
+                            "items": [
+                                {"type": "member", "user_id": "user-1"},
+                                {"type": "external", "email": "external@example.com"},
+                            ],
+                        },
+                        "subject": "Subject",
+                        "body": "Body",
+                    },
+                }
+            ]
+        }
+    )
+
+    assert len(methods) == 1
+    assert methods[0].config.recipients.include_bound_group is True
+    assert methods[0].config.recipients.items[0].reference_id == "user-1"
+    assert methods[0].config.recipients.items[1].email == "external@example.com"
+
+
+def test_parse_human_input_delivery_methods_returns_empty_for_non_lists() -> None:
+    assert parse_human_input_delivery_methods({"delivery_methods": None}) == []
+
+
+def test_is_human_input_webapp_enabled_checks_enabled_delivery_methods() -> None:
+    assert (
+        is_human_input_webapp_enabled(
+            {
+                "delivery_methods": [
+                    {"type": DeliveryMethodType.WEBAPP, "enabled": True, "config": {}},
+                    {
+                        "type": DeliveryMethodType.EMAIL,
+                        "enabled": True,
+                        "config": {
+                            "recipients": {"include_bound_group": False, "items": []},
+                            "subject": "Subject",
+                            "body": "Body",
+                        },
+                    },
+                ]
+            }
+        )
+        is True
+    )
+    assert (
+        is_human_input_webapp_enabled(
+            {"delivery_methods": [{"type": DeliveryMethodType.WEBAPP, "enabled": False, "config": {}}]}
+        )
+        is False
+    )
+
+
+def test_adapt_node_data_for_graph_only_rewrites_human_input_nodes() -> None:
+    human_input = adapt_node_data_for_graph(
+        {
+            "type": BuiltinNodeTypes.HUMAN_INPUT,
+            "delivery_methods": [
+                {
+                    "type": DeliveryMethodType.EMAIL,
+                    "config": {
+                        "recipients": {"whole_workspace": True, "items": [{"type": "member", "user_id": "user-1"}]},
+                        "subject": "Subject",
+                        "body": "Body",
+                    },
+                }
+            ],
+        }
+    )
+    other_node = adapt_node_data_for_graph({"type": "answer", "delivery_methods": "unchanged"})
+
+    assert human_input["delivery_methods"][0]["config"]["recipients"]["include_bound_group"] is True
+    assert other_node == {"type": "answer", "delivery_methods": "unchanged"}
+
+
+def test_adapt_node_data_for_graph_migrates_legacy_tool_configurations() -> None:
+    normalized = adapt_node_data_for_graph(
+        {
+            "type": BuiltinNodeTypes.TOOL,
+            "tool_configurations": {
+                "format": {"type": "mixed", "value": "%Y-%m-%d %H:%M:%S"},
+                "timezone": {"type": "constant", "value": "UTC"},
+                "query": {"type": "variable", "value": ["sys", "query"]},
+            },
+            "tool_parameters": {},
+        }
+    )
+
+    assert normalized["tool_configurations"] == {
+        "format": "%Y-%m-%d %H:%M:%S",
+        "timezone": "UTC",
+        "query": "{{#sys.query#}}",
+    }
+    assert normalized["tool_parameters"] == {
+        "format": {"type": "mixed", "value": "%Y-%m-%d %H:%M:%S"},
+        "timezone": {"type": "constant", "value": "UTC"},
+        "query": {"type": "variable", "value": ["sys", "query"]},
+    }
+
+
+def test_adapt_node_config_for_graph_rewrites_nested_node_data() -> None:
+    normalized = adapt_node_config_for_graph(
+        {
+            "data": {
+                "type": BuiltinNodeTypes.HUMAN_INPUT,
+                "delivery_methods": [
+                    {
+                        "type": DeliveryMethodType.EMAIL,
+                        "config": {
+                            "recipients": {"whole_workspace": True, "items": [{"type": "member", "user_id": "user-1"}]},
+                            "subject": "Subject",
+                            "body": "Body",
+                        },
+                    }
+                ],
+            }
+        }
+    )
+
+    recipients = normalized["data"]["delivery_methods"][0]["config"]["recipients"]
+    assert recipients["include_bound_group"] is True
+    assert recipients["items"][0]["reference_id"] == "user-1"
+
+
+def test_adapt_human_input_node_data_for_graph_accepts_models() -> None:
+    class _NodeModel(BaseModel):
+        delivery_methods: list[dict]
+
+    normalized = adapt_human_input_node_data_for_graph(
+        _NodeModel(
+            delivery_methods=[
+                {
+                    "type": DeliveryMethodType.WEBAPP,
+                    "enabled": True,
+                    "config": _WebAppDeliveryConfig().model_dump(mode="python"),
+                }
+            ]
+        )
+    )
+
+    assert normalized["delivery_methods"][0]["type"] == DeliveryMethodType.WEBAPP
+
+
+def test_adapt_human_input_node_data_for_graph_rejects_non_mappings() -> None:
+    with pytest.raises(TypeError, match="human-input node data must be a mapping"):
+        adapt_human_input_node_data_for_graph(123)
+
+
+def test_adapt_human_input_node_data_for_graph_preserves_non_mapping_methods() -> None:
+    normalized = adapt_human_input_node_data_for_graph(
+        {
+            "delivery_methods": [
+                "raw-method",
+                {
+                    "type": DeliveryMethodType.EMAIL,
+                    "config": {
+                        "recipients": {"items": "raw-items"},
+                        "subject": "Subject",
+                        "body": "Body",
+                    },
+                },
+            ]
+        }
+    )
+
+    assert normalized["delivery_methods"][0] == "raw-method"
+    assert normalized["delivery_methods"][1]["config"]["recipients"]["items"] == "raw-items"
+
+
+def test_adapt_human_input_node_data_for_graph_preserves_non_mapping_recipient_items() -> None:
+    normalized = adapt_human_input_node_data_for_graph(
+        {
+            "delivery_methods": [
+                {
+                    "type": DeliveryMethodType.EMAIL,
+                    "config": {
+                        "recipients": {"items": ["raw-item"]},
+                        "subject": "Subject",
+                        "body": "Body",
+                    },
+                }
+            ]
+        }
+    )
+
+    assert normalized["delivery_methods"][0]["config"]["recipients"]["items"] == ["raw-item"]
+
+
+def test_email_delivery_method_extracts_variable_selectors() -> None:
+    method = EmailDeliveryMethod(
+        enabled=True,
+        config=EmailDeliveryConfig(
+            recipients=EmailRecipients(include_bound_group=False, items=[]),
+            subject="Subject",
+            body="Hello {{#start.name#}} and ignore {{#single#}}",
+        ),
+    )
+
+    assert method.extract_variable_selectors() == [["start", "name"]]
+
+
+def test_email_delivery_method_extracts_variable_selectors_skips_short_selectors(monkeypatch) -> None:
+    method = EmailDeliveryMethod(
+        enabled=True,
+        config=EmailDeliveryConfig(
+            recipients=EmailRecipients(include_bound_group=False, items=[]),
+            subject="Subject",
+            body="Body",
+        ),
+    )
+
+    monkeypatch.setattr(
+        VariableTemplateParser,
+        "extract_variable_selectors",
+        lambda self: [
+            SimpleNamespace(value_selector=("single",)),
+            SimpleNamespace(value_selector=("start", "name")),
+        ],
+    )
+
+    assert method.extract_variable_selectors() == [["start", "name"]]
+
+
+def test_webapp_delivery_method_uses_empty_selector_set() -> None:
+    method = WebAppDeliveryMethod(enabled=True, config=_WebAppDeliveryConfig())
+
+    assert method.extract_variable_selectors() == ()
+
+
+def test_adapt_node_data_for_graph_rejects_non_mappings() -> None:
+    with pytest.raises(TypeError, match="node data must be a mapping"):
+        adapt_node_data_for_graph(123)
+
+
+def test_adapt_node_config_for_graph_rejects_non_mapping_and_preserves_raw_data() -> None:
+    with pytest.raises(TypeError, match="node config must be a mapping"):
+        adapt_node_config_for_graph(123)
+
+    assert adapt_node_config_for_graph({"data": "raw"}) == {"data": "raw"}
+
+
+def test_adapt_node_data_for_graph_preserves_non_legacy_tool_configurations() -> None:
+    normalized = adapt_node_data_for_graph(
+        {
+            "type": BuiltinNodeTypes.TOOL,
+            "tool_configurations": {
+                "raw": 1,
+                "unsupported": {"type": "expression", "value": "{{#sys.query#}}"},
+            },
+        }
+    )
+
+    assert normalized["tool_configurations"] == {
+        "raw": 1,
+        "unsupported": {"type": "expression", "value": "{{#sys.query#}}"},
+    }
+    assert "tool_parameters" not in normalized
+
+
+def test_adapt_node_data_for_graph_keeps_unflattenable_legacy_tool_values_in_parameters() -> None:
+    normalized = adapt_node_data_for_graph(
+        {
+            "type": BuiltinNodeTypes.TOOL,
+            "tool_configurations": {
+                "query": {"type": "variable", "value": ["sys", 1]},
+            },
+        }
+    )
+
+    assert normalized["tool_parameters"] == {"query": {"type": "variable", "value": ["sys", 1]}}
+    assert normalized["tool_configurations"] == {}
+
+
+def test_adapt_node_data_for_graph_preserves_nodes_without_mapping_tool_configurations() -> None:
+    normalized = adapt_node_data_for_graph(
+        {
+            "type": BuiltinNodeTypes.TOOL,
+            "tool_configurations": "raw-tool-configurations",
+        }
+    )
+
+    assert normalized["tool_configurations"] == "raw-tool-configurations"
diff --git a/api/tests/unit_tests/core/workflow/test_human_input_compat.py b/api/tests/unit_tests/core/workflow/test_human_input_compat.py
deleted file mode 100644
index 0623800b30..0000000000
--- a/api/tests/unit_tests/core/workflow/test_human_input_compat.py
+++ /dev/null
@@ -1,184 +0,0 @@
-from types import SimpleNamespace
-
-from pydantic import BaseModel
-
-from core.workflow.human_input_compat import (
-    DeliveryMethodType,
-    EmailDeliveryConfig,
-    EmailDeliveryMethod,
-    EmailRecipients,
-    WebAppDeliveryMethod,
-    _WebAppDeliveryConfig,
-    is_human_input_webapp_enabled,
-    normalize_human_input_node_data_for_graph,
-    normalize_node_config_for_graph,
-    normalize_node_data_for_graph,
-    parse_human_input_delivery_methods,
-)
-from graphon.enums import BuiltinNodeTypes
-
-
-def test_email_delivery_config_helpers_render_and_sanitize_text() -> None:
-    variable_pool = SimpleNamespace(
-        convert_template=lambda body: SimpleNamespace(text=body.replace("{{#node.value#}}", "42"))
-    )
-
-    rendered = EmailDeliveryConfig.render_body_template(
-        body="Open {{#url#}} and use {{#node.value#}}",
-        url="https://example.com",
-        variable_pool=variable_pool,
-    )
-    sanitized = EmailDeliveryConfig.sanitize_subject("Hello\r\n<script>alert(1)</script> Team")
-    html = EmailDeliveryConfig.render_markdown_body(
-        "**Hello** <script>alert(1)</script> [mail](mailto:test@example.com)"
-    )
-
-    assert rendered == "Open https://example.com and use 42"
-    assert sanitized == "Hello alert(1) Team"
-    assert "<strong>Hello</strong>" in html
-    assert "<script>" not in html
-    assert "mailto:test@example.com" in html
-
-
-def test_parse_human_input_delivery_methods_normalizes_legacy_recipient_keys() -> None:
-    methods = parse_human_input_delivery_methods(
-        {
-            "delivery_methods": [
-                {
-                    "type": DeliveryMethodType.EMAIL,
-                    "config": {
-                        "recipients": {
-                            "whole_workspace": True,
-                            "items": [
-                                {"type": "member", "user_id": "user-1"},
-                                {"type": "external", "email": "external@example.com"},
-                            ],
-                        },
-                        "subject": "Subject",
-                        "body": "Body",
-                    },
-                }
-            ]
-        }
-    )
-
-    assert len(methods) == 1
-    assert methods[0].config.recipients.include_bound_group is True
-    assert methods[0].config.recipients.items[0].reference_id == "user-1"
-    assert methods[0].config.recipients.items[1].email == "external@example.com"
-
-
-def test_parse_human_input_delivery_methods_returns_empty_for_non_lists() -> None:
-    assert parse_human_input_delivery_methods({"delivery_methods": None}) == []
-
-
-def test_is_human_input_webapp_enabled_checks_enabled_delivery_methods() -> None:
-    assert (
-        is_human_input_webapp_enabled(
-            {
-                "delivery_methods": [
-                    {"type": DeliveryMethodType.WEBAPP, "enabled": True, "config": {}},
-                    {
-                        "type": DeliveryMethodType.EMAIL,
-                        "enabled": True,
-                        "config": {
-                            "recipients": {"include_bound_group": False, "items": []},
-                            "subject": "Subject",
-                            "body": "Body",
-                        },
-                    },
-                ]
-            }
-        )
-        is True
-    )
-    assert (
-        is_human_input_webapp_enabled(
-            {"delivery_methods": [{"type": DeliveryMethodType.WEBAPP, "enabled": False, "config": {}}]}
-        )
-        is False
-    )
-
-
-def test_normalize_node_data_for_graph_only_rewrites_human_input_nodes() -> None:
-    human_input = normalize_node_data_for_graph(
-        {
-            "type": BuiltinNodeTypes.HUMAN_INPUT,
-            "delivery_methods": [
-                {
-                    "type": DeliveryMethodType.EMAIL,
-                    "config": {
-                        "recipients": {"whole_workspace": True, "items": [{"type": "member", "user_id": "user-1"}]},
-                        "subject": "Subject",
-                        "body": "Body",
-                    },
-                }
-            ],
-        }
-    )
-    other_node = normalize_node_data_for_graph({"type": "answer", "delivery_methods": "unchanged"})
-
-    assert human_input["delivery_methods"][0]["config"]["recipients"]["include_bound_group"] is True
-    assert other_node == {"type": "answer", "delivery_methods": "unchanged"}
-
-
-def test_normalize_node_config_for_graph_rewrites_nested_node_data() -> None:
-    normalized = normalize_node_config_for_graph(
-        {
-            "data": {
-                "type": BuiltinNodeTypes.HUMAN_INPUT,
-                "delivery_methods": [
-                    {
-                        "type": DeliveryMethodType.EMAIL,
-                        "config": {
-                            "recipients": {"whole_workspace": True, "items": [{"type": "member", "user_id": "user-1"}]},
-                            "subject": "Subject",
-                            "body": "Body",
-                        },
-                    }
-                ],
-            }
-        }
-    )
-
-    recipients = normalized["data"]["delivery_methods"][0]["config"]["recipients"]
-    assert recipients["include_bound_group"] is True
-    assert recipients["items"][0]["reference_id"] == "user-1"
-
-
-def test_normalize_human_input_node_data_for_graph_accepts_models() -> None:
-    class _NodeModel(BaseModel):
-        delivery_methods: list[dict]
-
-    normalized = normalize_human_input_node_data_for_graph(
-        _NodeModel(
-            delivery_methods=[
-                {
-                    "type": DeliveryMethodType.WEBAPP,
-                    "enabled": True,
-                    "config": _WebAppDeliveryConfig().model_dump(mode="python"),
-                }
-            ]
-        )
-    )
-
-    assert normalized["delivery_methods"][0]["type"] == DeliveryMethodType.WEBAPP
-
-
-def test_email_delivery_method_extracts_variable_selectors() -> None:
-    method = EmailDeliveryMethod(
-        enabled=True,
-        config=EmailDeliveryConfig(
-            recipients=EmailRecipients(include_bound_group=False, items=[]),
-            subject="Subject",
-            body="Hello {{#start.name#}} and ignore {{#single#}}",
-        ),
-    )
-
-    assert method.extract_variable_selectors() == [["start", "name"]]
-
-
-def test_webapp_delivery_method_uses_empty_selector_set() -> None:
-    method = WebAppDeliveryMethod(enabled=True, config=_WebAppDeliveryConfig())
-
-    assert method.extract_variable_selectors() == ()
diff --git a/api/tests/unit_tests/core/workflow/test_node_factory.py b/api/tests/unit_tests/core/workflow/test_node_factory.py
index 424c50eb26..1418cdd87c 100644
--- a/api/tests/unit_tests/core/workflow/test_node_factory.py
+++ b/api/tests/unit_tests/core/workflow/test_node_factory.py
@@ -14,10 +14,54 @@ from graphon.variables.segments import StringSegment
 
 
 def _assert_typed_node_config(config, *, node_id: str, node_type: NodeType, version: str = "1") -> None:
-    assert config["id"] == node_id
-    assert isinstance(config["data"], BaseNodeData)
-    assert config["data"].type == node_type
-    assert config["data"].version == version
+    _ = node_id
+    assert isinstance(config, BaseNodeData)
+    assert config.type == node_type
+    assert config.version == version
+
+
+def _node_constructor(*, return_value):
+    constructor = MagicMock(return_value=return_value)
+    constructor.validate_node_data.side_effect = lambda node_data: node_data
+    return constructor
+
+
+class TestResolveWorkflowNodeClass:
+    def test_matching_version_uses_registry_mapping(self, monkeypatch) -> None:
+        document_extractor_class = sentinel.document_extractor_class
+        latest_node_class = sentinel.latest_document_extractor_class
+        monkeypatch.setattr(
+            node_factory,
+            "get_node_type_classes_mapping",
+            lambda: {
+                BuiltinNodeTypes.DOCUMENT_EXTRACTOR: {
+                    "1": document_extractor_class,
+                    node_factory.LATEST_VERSION: latest_node_class,
+                }
+            },
+        )
+
+        resolved = node_factory.resolve_workflow_node_class(
+            node_type=BuiltinNodeTypes.DOCUMENT_EXTRACTOR,
+            node_version="1",
+        )
+
+        assert resolved is document_extractor_class
+
+    def test_document_extractor_latest_falls_back_to_registry_mapping(self, monkeypatch) -> None:
+        latest_node_class = sentinel.latest_document_extractor_class
+        monkeypatch.setattr(
+            node_factory,
+            "get_node_type_classes_mapping",
+            lambda: {BuiltinNodeTypes.DOCUMENT_EXTRACTOR: {node_factory.LATEST_VERSION: latest_node_class}},
+        )
+
+        resolved = node_factory.resolve_workflow_node_class(
+            node_type=BuiltinNodeTypes.DOCUMENT_EXTRACTOR,
+            node_version=node_factory.LATEST_VERSION,
+        )
+
+        assert resolved is latest_node_class
 
 
 class TestFetchMemory:
@@ -406,8 +450,8 @@ class TestDifyNodeFactoryCreateNode:
 
     def test_uses_version_specific_class_when_available(self, monkeypatch, factory):
         matched_node = sentinel.matched_node
-        latest_node_class = MagicMock(return_value=sentinel.latest_node)
-        matched_node_class = MagicMock(return_value=matched_node)
+        latest_node_class = _node_constructor(return_value=sentinel.latest_node)
+        matched_node_class = _node_constructor(return_value=matched_node)
         monkeypatch.setattr(
             factory,
             "_resolve_node_class",
@@ -419,7 +463,7 @@ class TestDifyNodeFactoryCreateNode:
         assert result is matched_node
         matched_node_class.assert_called_once()
         kwargs = matched_node_class.call_args.kwargs
-        assert kwargs["id"] == "node-id"
+        assert kwargs["node_id"] == "node-id"
         _assert_typed_node_config(kwargs["config"], node_id="node-id", node_type=BuiltinNodeTypes.START, version="9")
         assert kwargs["graph_init_params"] is sentinel.graph_init_params
         assert kwargs["graph_runtime_state"] is factory.graph_runtime_state
@@ -427,7 +471,7 @@ class TestDifyNodeFactoryCreateNode:
 
     def test_falls_back_to_latest_class_when_version_specific_mapping_is_missing(self, monkeypatch, factory):
         latest_node = sentinel.latest_node
-        latest_node_class = MagicMock(return_value=latest_node)
+        latest_node_class = _node_constructor(return_value=latest_node)
         monkeypatch.setattr(
             factory,
             "_resolve_node_class",
@@ -439,7 +483,7 @@ class TestDifyNodeFactoryCreateNode:
         assert result is latest_node
         latest_node_class.assert_called_once()
         kwargs = latest_node_class.call_args.kwargs
-        assert kwargs["id"] == "node-id"
+        assert kwargs["node_id"] == "node-id"
         _assert_typed_node_config(kwargs["config"], node_id="node-id", node_type=BuiltinNodeTypes.START, version="9")
         assert kwargs["graph_init_params"] is sentinel.graph_init_params
         assert kwargs["graph_runtime_state"] is factory.graph_runtime_state
@@ -459,7 +503,8 @@ class TestDifyNodeFactoryCreateNode:
     )
     def test_creates_specialized_nodes(self, monkeypatch, factory, node_type, constructor_name):
         created_node = object()
-        constructor = MagicMock(name=constructor_name, return_value=created_node)
+        constructor = _node_constructor(return_value=created_node)
+        constructor._mock_name = constructor_name
         monkeypatch.setattr(
             factory,
             "_resolve_node_class",
@@ -476,7 +521,7 @@ class TestDifyNodeFactoryCreateNode:
 
         assert result is created_node
         kwargs = constructor.call_args.kwargs
-        assert kwargs["id"] == "node-id"
+        assert kwargs["node_id"] == "node-id"
         _assert_typed_node_config(kwargs["config"], node_id="node-id", node_type=node_type)
         assert kwargs["graph_init_params"] is sentinel.graph_init_params
         assert kwargs["graph_runtime_state"] is factory.graph_runtime_state
@@ -543,7 +588,8 @@ class TestDifyNodeFactoryCreateNode:
         expected_extra_kwargs,
     ):
         created_node = object()
-        constructor = MagicMock(name=constructor_name, return_value=created_node)
+        constructor = _node_constructor(return_value=created_node)
+        constructor._mock_name = constructor_name
         monkeypatch.setattr(
             factory,
             "_resolve_node_class",
@@ -576,7 +622,7 @@ class TestDifyNodeFactoryCreateNode:
         assert helper_kwargs["include_jinja2_template_renderer"] is (node_type == BuiltinNodeTypes.LLM)
 
         constructor_kwargs = constructor.call_args.kwargs
-        assert constructor_kwargs["id"] == "node-id"
+        assert constructor_kwargs["node_id"] == "node-id"
         _assert_typed_node_config(constructor_kwargs["config"], node_id="node-id", node_type=node_type)
         assert constructor_kwargs["graph_init_params"] is sentinel.graph_init_params
         assert constructor_kwargs["graph_runtime_state"] is factory.graph_runtime_state
diff --git a/api/tests/unit_tests/core/workflow/test_node_runtime.py b/api/tests/unit_tests/core/workflow/test_node_runtime.py
index 71a2afb28a..5a43369a1a 100644
--- a/api/tests/unit_tests/core/workflow/test_node_runtime.py
+++ b/api/tests/unit_tests/core/workflow/test_node_runtime.py
@@ -7,7 +7,7 @@ from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY, DifyRunC
 from core.llm_generator.output_parser.errors import OutputParserError
 from core.workflow import node_runtime
 from core.workflow.file_reference import parse_file_reference
-from core.workflow.human_input_compat import (
+from core.workflow.human_input_adapter import (
     DeliveryMethodType,
     EmailDeliveryConfig,
     EmailDeliveryMethod,
diff --git a/api/tests/unit_tests/core/workflow/test_system_variable.py b/api/tests/unit_tests/core/workflow/test_system_variable.py
index bdeab1eda8..8ee11e4894 100644
--- a/api/tests/unit_tests/core/workflow/test_system_variable.py
+++ b/api/tests/unit_tests/core/workflow/test_system_variable.py
@@ -40,7 +40,7 @@ def test_build_system_variables_preserves_explicit_workflow_run_id():
 
 def test_build_system_variables_preserves_file_values():
     file = File(
-        type=FileType.DOCUMENT,
+        file_type=FileType.DOCUMENT,
         transfer_method=FileTransferMethod.LOCAL_FILE,
         related_id="file-id",
         filename="test.txt",
diff --git a/api/tests/unit_tests/core/workflow/test_variable_pool.py b/api/tests/unit_tests/core/workflow/test_variable_pool.py
index dddd6eb00c..9dab38ed8e 100644
--- a/api/tests/unit_tests/core/workflow/test_variable_pool.py
+++ b/api/tests/unit_tests/core/workflow/test_variable_pool.py
@@ -1,3 +1,4 @@
+import json
 import uuid
 from collections import defaultdict
 
@@ -35,6 +36,7 @@ from graphon.variables.variables import (
     StringVariable,
     Variable,
 )
+from models.utils.file_input_compat import rebuild_serialized_graph_files_without_lookup
 
 
 @pytest.fixture
@@ -54,7 +56,7 @@ def pool():
 @pytest.fixture
 def file():
     return File(
-        type=FileType.DOCUMENT,
+        file_type=FileType.DOCUMENT,
         transfer_method=FileTransferMethod.LOCAL_FILE,
         related_id="test_related_id",
         remote_url="test_url",
@@ -265,7 +267,7 @@ class TestVariablePoolSerialization:
 
     def _add_node_data_to_pool(self, pool: VariablePool, with_file=False):
         test_file = File(
-            type=FileType.DOCUMENT,
+            file_type=FileType.DOCUMENT,
             transfer_method=FileTransferMethod.LOCAL_FILE,
             related_id="test_related_id",
             remote_url="test_url",
@@ -357,17 +359,19 @@ class TestVariablePoolSerialization:
         self._assert_pools_equal(original_pool, reconstructed_pool)
 
     def test_complex_data_serialization(self):
-        """Test serialization of complex data structures including ArrayFileVariable"""
+        """Test file-aware VariablePool round-trips through Dify's model boundary."""
         original_pool = self._create_pool_without_file()
         self._add_node_data_to_pool(original_pool, with_file=True)
 
         # Test dictionary round-trip
         dict_data = original_pool.model_dump()
-        reconstructed_dict = VariablePool.model_validate(dict_data)
+        reconstructed_dict = VariablePool.model_validate(rebuild_serialized_graph_files_without_lookup(dict_data))
 
         # Test JSON round-trip
         json_data = original_pool.model_dump_json()
-        reconstructed_json = VariablePool.model_validate_json(json_data)
+        reconstructed_json = VariablePool.model_validate(
+            rebuild_serialized_graph_files_without_lookup(json.loads(json_data))
+        )
 
         # Verify both reconstructed pools are equivalent
         self._assert_pools_equal(reconstructed_dict, reconstructed_json)
diff --git a/api/tests/unit_tests/core/workflow/test_workflow_entry_helpers.py b/api/tests/unit_tests/core/workflow/test_workflow_entry_helpers.py
index 55800ffc03..270d0bf90d 100644
--- a/api/tests/unit_tests/core/workflow/test_workflow_entry_helpers.py
+++ b/api/tests/unit_tests/core/workflow/test_workflow_entry_helpers.py
@@ -11,7 +11,6 @@ from core.model_manager import ModelInstance
 from core.workflow import workflow_entry
 from core.workflow.system_variables import default_system_variables
 from graphon.entities.base_node_data import BaseNodeData
-from graphon.entities.graph_config import NodeConfigDictAdapter
 from graphon.enums import NodeType, WorkflowNodeExecutionStatus
 from graphon.errors import WorkflowNodeRunFailedError
 from graphon.file import File, FileTransferMethod, FileType
@@ -27,7 +26,7 @@ from tests.workflow_test_utils import build_test_graph_init_params, build_test_v
 
 
 def _build_typed_node_config(node_type: NodeType):
-    return NodeConfigDictAdapter.validate_python({"id": "node-id", "data": {"type": node_type}})
+    return {"id": "node-id", "data": BaseNodeData(type=node_type)}
 
 
 def _build_wrapped_model_instance() -> tuple[SimpleNamespace, ModelInstance]:
@@ -165,14 +164,11 @@ class TestWorkflowChildEngineBuilder:
         def build_graph(*, graph_config, node_factory, root_node_id):
             _ = graph_config
             node = node_cls(
-                id=root_node_id,
-                config={
-                    "id": root_node_id,
-                    "data": {
-                        "type": node_cls.node_type,
-                        "title": "Child Model",
-                    },
-                },
+                node_id=root_node_id,
+                config=BaseNodeData(
+                    type=node_cls.node_type,
+                    title="Child Model",
+                ),
                 graph_init_params=node_factory.graph_init_params,
                 graph_runtime_state=node_factory.graph_runtime_state,
             )
@@ -764,7 +760,7 @@ class TestWorkflowEntryHelpers:
 
     def test_handle_special_values_serializes_nested_files(self):
         file = File(
-            type=FileType.IMAGE,
+            file_type=FileType.IMAGE,
             transfer_method=FileTransferMethod.REMOTE_URL,
             remote_url="https://example.com/image.png",
             filename="image.png",
diff --git a/api/tests/unit_tests/factories/test_build_from_mapping.py b/api/tests/unit_tests/factories/test_build_from_mapping.py
index efafc8aa79..ffb151fbf4 100644
--- a/api/tests/unit_tests/factories/test_build_from_mapping.py
+++ b/api/tests/unit_tests/factories/test_build_from_mapping.py
@@ -306,7 +306,7 @@ def test_invalid_transfer_method():
         "upload_file_id": TEST_UPLOAD_FILE_ID,
         "type": "image",
     }
-    with pytest.raises(ValueError, match="No matching enum found for value 'invalid_method'"):
+    with pytest.raises(ValueError, match="'invalid_method' is not a valid FileTransferMethod"):
         build_from_mapping(mapping=mapping, tenant_id=TEST_TENANT_ID)
 
 
diff --git a/api/tests/unit_tests/factories/test_variable_factory.py b/api/tests/unit_tests/factories/test_variable_factory.py
index c35e80a826..2439409e80 100644
--- a/api/tests/unit_tests/factories/test_variable_factory.py
+++ b/api/tests/unit_tests/factories/test_variable_factory.py
@@ -226,9 +226,9 @@ def test_build_segment_none_type_properties():
 def test_build_segment_array_file_single_file():
     """Test building ArrayFileSegment from list with single file."""
     file = File(
-        id="test_file_id",
+        file_id="test_file_id",
         tenant_id="test_tenant_id",
-        type=FileType.IMAGE,
+        file_type=FileType.IMAGE,
         transfer_method=FileTransferMethod.REMOTE_URL,
         remote_url="https://test.example.com/test-file.png",
         filename="test-file",
@@ -246,9 +246,9 @@ def test_build_segment_array_file_single_file():
 def test_build_segment_array_file_multiple_files():
     """Test building ArrayFileSegment from list with multiple files."""
     file1 = File(
-        id="test_file_id_1",
+        file_id="test_file_id_1",
         tenant_id="test_tenant_id",
-        type=FileType.IMAGE,
+        file_type=FileType.IMAGE,
         transfer_method=FileTransferMethod.REMOTE_URL,
         remote_url="https://test.example.com/test-file1.png",
         filename="test-file1",
@@ -257,9 +257,9 @@ def test_build_segment_array_file_multiple_files():
         size=1000,
     )
     file2 = File(
-        id="test_file_id_2",
+        file_id="test_file_id_2",
         tenant_id="test_tenant_id",
-        type=FileType.DOCUMENT,
+        file_type=FileType.DOCUMENT,
         transfer_method=FileTransferMethod.LOCAL_FILE,
         related_id="test_relation_id",
         filename="test-file2",
@@ -304,9 +304,9 @@ def test_build_segment_array_any_with_nested_arrays():
 def test_build_segment_array_any_mixed_with_files():
     """Test building ArrayAnySegment from list with files and other types."""
     file = File(
-        id="test_file_id",
+        file_id="test_file_id",
         tenant_id="test_tenant_id",
-        type=FileType.IMAGE,
+        file_type=FileType.IMAGE,
         transfer_method=FileTransferMethod.REMOTE_URL,
         remote_url="https://test.example.com/test-file.png",
         filename="test-file",
@@ -333,9 +333,9 @@ def test_build_segment_array_any_all_none_values():
 def test_build_segment_array_file_properties():
     """Test ArrayFileSegment properties and methods."""
     file1 = File(
-        id="test_file_id_1",
+        file_id="test_file_id_1",
         tenant_id="test_tenant_id",
-        type=FileType.IMAGE,
+        file_type=FileType.IMAGE,
         transfer_method=FileTransferMethod.REMOTE_URL,
         remote_url="https://test.example.com/test-file1.png",
         filename="test-file1",
@@ -344,9 +344,9 @@ def test_build_segment_array_file_properties():
         size=1000,
     )
     file2 = File(
-        id="test_file_id_2",
+        file_id="test_file_id_2",
         tenant_id="test_tenant_id",
-        type=FileType.DOCUMENT,
+        file_type=FileType.DOCUMENT,
         transfer_method=FileTransferMethod.REMOTE_URL,
         remote_url="https://test.example.com/test-file2.txt",
         filename="test-file2",
@@ -393,9 +393,9 @@ def test_build_segment_edge_cases():
 def test_build_segment_file_array_with_different_file_types():
     """Test ArrayFileSegment with different file types."""
     image_file = File(
-        id="image_id",
+        file_id="image_id",
         tenant_id="test_tenant_id",
-        type=FileType.IMAGE,
+        file_type=FileType.IMAGE,
         transfer_method=FileTransferMethod.REMOTE_URL,
         remote_url="https://test.example.com/image.png",
         filename="image",
@@ -405,9 +405,9 @@ def test_build_segment_file_array_with_different_file_types():
     )
 
     video_file = File(
-        id="video_id",
+        file_id="video_id",
         tenant_id="test_tenant_id",
-        type=FileType.VIDEO,
+        file_type=FileType.VIDEO,
         transfer_method=FileTransferMethod.LOCAL_FILE,
         related_id="video_relation_id",
         filename="video",
@@ -417,9 +417,9 @@ def test_build_segment_file_array_with_different_file_types():
     )
 
     audio_file = File(
-        id="audio_id",
+        file_id="audio_id",
         tenant_id="test_tenant_id",
-        type=FileType.AUDIO,
+        file_type=FileType.AUDIO,
         transfer_method=FileTransferMethod.LOCAL_FILE,
         related_id="audio_relation_id",
         filename="audio",
@@ -455,9 +455,9 @@ def _generate_file(draw) -> File:
     if transfer_method == FileTransferMethod.REMOTE_URL:
         url = "https://test.example.com/test-file"
         file = File(
-            id="test_file_id",
+            file_id="test_file_id",
             tenant_id="test_tenant_id",
-            type=file_type,
+            file_type=file_type,
             transfer_method=transfer_method,
             remote_url=url,
             related_id=None,
@@ -470,9 +470,9 @@ def _generate_file(draw) -> File:
         relation_id = draw(st.uuids(version=4))
 
         file = File(
-            id="test_file_id",
+            file_id="test_file_id",
             tenant_id="test_tenant_id",
-            type=file_type,
+            file_type=file_type,
             transfer_method=transfer_method,
             related_id=str(relation_id),
             filename=filename,
@@ -518,9 +518,9 @@ def test_build_segment_type_for_scalar():
         expected_type: SegmentType
 
     file = File(
-        id="test_file_id",
+        file_id="test_file_id",
         tenant_id="test_tenant_id",
-        type=FileType.IMAGE,
+        file_type=FileType.IMAGE,
         transfer_method=FileTransferMethod.REMOTE_URL,
         remote_url="https://test.example.com/test-file.png",
         filename="test-file",
@@ -575,9 +575,9 @@ class TestBuildSegmentWithType:
     def test_file_type(self):
         """Test building a file segment with correct type."""
         test_file = File(
-            id="test_file_id",
+            file_id="test_file_id",
             tenant_id="test_tenant_id",
-            type=FileType.IMAGE,
+            file_type=FileType.IMAGE,
             transfer_method=FileTransferMethod.REMOTE_URL,
             remote_url="https://test.example.com/test-file.png",
             filename="test-file",
diff --git a/api/tests/unit_tests/fields/test_conversation_variable_fields.py b/api/tests/unit_tests/fields/test_conversation_variable_fields.py
new file mode 100644
index 0000000000..813aa8e44c
--- /dev/null
+++ b/api/tests/unit_tests/fields/test_conversation_variable_fields.py
@@ -0,0 +1,47 @@
+from __future__ import annotations
+
+from datetime import UTC, datetime
+from types import SimpleNamespace
+
+import pytest
+
+from fields._value_type_serializer import serialize_value_type
+from fields.conversation_variable_fields import ConversationVariableResponse
+from graphon.variables import StringSegment
+from graphon.variables.types import SegmentType
+
+
+def test_conversation_variable_response_normalizes_string_value_type_alias() -> None:
+    response = ConversationVariableResponse.model_validate(
+        {
+            "id": "550e8400-e29b-41d4-a716-446655440000",
+            "name": "foo",
+            "value_type": SegmentType.INTEGER.value,
+            "created_at": datetime(2026, 1, 2, 3, 4, 5, tzinfo=UTC),
+        }
+    )
+
+    assert response.value_type == "number"
+    assert response.created_at == int(datetime(2026, 1, 2, 3, 4, 5, tzinfo=UTC).timestamp())
+
+
+def test_conversation_variable_response_normalizes_callable_exposed_type() -> None:
+    response = ConversationVariableResponse.model_validate(
+        {
+            "id": "550e8400-e29b-41d4-a716-446655440000",
+            "name": "foo",
+            "value_type": SimpleNamespace(exposed_type=lambda: SegmentType.STRING.exposed_type()),
+        }
+    )
+
+    assert response.value_type == "string"
+
+
+def test_serialize_value_type_supports_segments_and_mappings() -> None:
+    assert serialize_value_type(StringSegment(value="hello")) == "string"
+    assert serialize_value_type({"value_type": SegmentType.INTEGER}) == "number"
+
+
+def test_serialize_value_type_requires_mapping_value_type() -> None:
+    with pytest.raises(ValueError, match="value_type is required but not provided"):
+        serialize_value_type({})
diff --git a/api/tests/unit_tests/fields/test_file_fields.py b/api/tests/unit_tests/fields/test_file_fields.py
index 9d9f626b9e..2e33172aed 100644
--- a/api/tests/unit_tests/fields/test_file_fields.py
+++ b/api/tests/unit_tests/fields/test_file_fields.py
@@ -95,7 +95,7 @@ def test_file_formatters_preserve_legacy_file_keys(monkeypatch: pytest.MonkeyPat
     reference = build_file_reference(record_id="upload-1", storage_key="files/source.pdf")
 
     file = File(
-        type=FileType.DOCUMENT,
+        file_type=FileType.DOCUMENT,
         transfer_method=FileTransferMethod.LOCAL_FILE,
         remote_url="https://storage.example/source.pdf",
         reference=reference,
diff --git a/api/tests/unit_tests/models/test_file_input_compat.py b/api/tests/unit_tests/models/test_file_input_compat.py
new file mode 100644
index 0000000000..1a41ccec9e
--- /dev/null
+++ b/api/tests/unit_tests/models/test_file_input_compat.py
@@ -0,0 +1,149 @@
+from unittest.mock import MagicMock
+
+import pytest
+
+from graphon.file import File, FileTransferMethod, FileType
+from models.utils.file_input_compat import (
+    build_file_from_mapping_without_lookup,
+    build_file_from_stored_mapping,
+    rebuild_serialized_graph_files_without_lookup,
+)
+
+
+def test_build_file_from_mapping_without_lookup_accepts_legacy_payload() -> None:
+    file = build_file_from_mapping_without_lookup(
+        file_mapping={
+            "id": "test-file",
+            "tenant_id": "test-tenant-id",
+            "type": "image",
+            "transfer_method": "tool_file",
+            "related_id": "test-related-id",
+            "filename": "image.png",
+            "extension": ".png",
+            "mime_type": "image/png",
+            "size": 67,
+            "storage_key": "test-storage-key",
+            "url": "https://example.com/image.png",
+            "tool_file_id": "tool-file-123",
+            "upload_file_id": "upload-file-456",
+            "datasource_file_id": "datasource-file-789",
+        }
+    )
+
+    assert file.related_id == "test-related-id"
+    assert file.storage_key == "test-storage-key"
+    assert file.type == FileType.IMAGE
+
+
+@pytest.mark.parametrize(
+    ("file_mapping", "expected_message"),
+    [
+        (
+            {
+                "id": "test-file",
+                "transfer_method": "local_file",
+            },
+            "file type is required in file mapping",
+        ),
+        (
+            {
+                "id": "test-file",
+                "type": "image",
+            },
+            "transfer_method is required in file mapping",
+        ),
+    ],
+)
+def test_build_file_from_mapping_without_lookup_requires_required_fields(
+    file_mapping: dict[str, object],
+    expected_message: str,
+) -> None:
+    with pytest.raises(ValueError, match=expected_message):
+        build_file_from_mapping_without_lookup(file_mapping=file_mapping)
+
+
+def test_build_file_from_mapping_without_lookup_normalizes_invalid_metadata_types() -> None:
+    file = build_file_from_mapping_without_lookup(
+        file_mapping={
+            "id": "test-file",
+            "type": "image",
+            "transfer_method": "local_file",
+            "reference": "upload-file-1",
+            "filename": 123,
+            "size": "large",
+        }
+    )
+
+    assert file.filename is None
+    assert file.size == -1
+
+
+def test_build_file_from_mapping_without_lookup_accepts_enum_inputs() -> None:
+    file = build_file_from_mapping_without_lookup(
+        file_mapping={
+            "id": "test-file",
+            "type": FileType.IMAGE,
+            "transfer_method": FileTransferMethod.REMOTE_URL,
+            "url": "https://example.com/image.png",
+        }
+    )
+
+    assert file.type == FileType.IMAGE
+    assert file.transfer_method == FileTransferMethod.REMOTE_URL
+
+
+def test_rebuild_serialized_graph_files_without_lookup_rehydrates_nested_files() -> None:
+    rebuilt = rebuild_serialized_graph_files_without_lookup(
+        {
+            "file": {
+                "dify_model_identity": "__dify__file__",
+                "id": "test-file",
+                "type": "document",
+                "transfer_method": "local_file",
+                "reference": "upload-file-123",
+                "filename": "doc.txt",
+            },
+            "items": [
+                {
+                    "dify_model_identity": "__dify__file__",
+                    "type": "image",
+                    "transfer_method": "remote_url",
+                    "url": "https://example.com/image.png",
+                    "filename": "image.png",
+                }
+            ],
+        }
+    )
+
+    assert isinstance(rebuilt["file"], File)
+    assert rebuilt["file"].related_id == "upload-file-123"
+    assert isinstance(rebuilt["items"][0], File)
+    assert rebuilt["items"][0].transfer_method == FileTransferMethod.REMOTE_URL
+
+
+def test_rebuild_serialized_graph_files_without_lookup_preserves_scalar_values() -> None:
+    assert rebuild_serialized_graph_files_without_lookup("plain-text") == "plain-text"
+
+
+def test_build_file_from_stored_mapping_rebuilds_remote_urls_without_record_lookup(monkeypatch) -> None:
+    rebuilt_file = File(
+        file_type=FileType.IMAGE,
+        transfer_method=FileTransferMethod.REMOTE_URL,
+        remote_url="https://example.com/image.png",
+        filename="image.png",
+    )
+    build_without_lookup = MagicMock(return_value=rebuilt_file)
+    monkeypatch.setattr("models.utils.file_input_compat.build_file_from_mapping_without_lookup", build_without_lookup)
+
+    result = build_file_from_stored_mapping(
+        file_mapping={
+            "type": "image",
+            "transfer_method": "remote_url",
+            "url": "https://example.com/image.png",
+            "filename": "image.png",
+        },
+        tenant_id="tenant-1",
+    )
+
+    build_without_lookup.assert_called_once()
+    assert result is rebuilt_file
diff --git a/api/tests/unit_tests/models/test_workflow.py b/api/tests/unit_tests/models/test_workflow.py
index f7bdc97eb5..d80c0f45ff 100644
--- a/api/tests/unit_tests/models/test_workflow.py
+++ b/api/tests/unit_tests/models/test_workflow.py
@@ -35,18 +35,10 @@ def test_environment_variables():
     )
 
     # Create some EnvironmentVariable instances
-    variable1 = StringVariable.model_validate(
-        {"name": "var1", "value": "value1", "id": str(uuid4()), "selector": ["env", "var1"]}
-    )
-    variable2 = IntegerVariable.model_validate(
-        {"name": "var2", "value": 123, "id": str(uuid4()), "selector": ["env", "var2"]}
-    )
-    variable3 = SecretVariable.model_validate(
-        {"name": "var3", "value": "secret", "id": str(uuid4()), "selector": ["env", "var3"]}
-    )
-    variable4 = FloatVariable.model_validate(
-        {"name": "var4", "value": 3.14, "id": str(uuid4()), "selector": ["env", "var4"]}
-    )
+    variable1 = StringVariable(name="var1", value="value1", id=str(uuid4()), selector=["env", "var1"])
+    variable2 = IntegerVariable(name="var2", value=123, id=str(uuid4()), selector=["env", "var2"])
+    variable3 = SecretVariable(name="var3", value="secret", id=str(uuid4()), selector=["env", "var3"])
+    variable4 = FloatVariable(name="var4", value=3.14, id=str(uuid4()), selector=["env", "var4"])
 
     with (
         mock.patch("core.helper.encrypter.encrypt_token", return_value="encrypted_token"),
@@ -77,18 +69,10 @@ def test_update_environment_variables():
     )
 
     # Create some EnvironmentVariable instances
-    variable1 = StringVariable.model_validate(
-        {"name": "var1", "value": "value1", "id": str(uuid4()), "selector": ["env", "var1"]}
-    )
-    variable2 = IntegerVariable.model_validate(
-        {"name": "var2", "value": 123, "id": str(uuid4()), "selector": ["env", "var2"]}
-    )
-    variable3 = SecretVariable.model_validate(
-        {"name": "var3", "value": "secret", "id": str(uuid4()), "selector": ["env", "var3"]}
-    )
-    variable4 = FloatVariable.model_validate(
-        {"name": "var4", "value": 3.14, "id": str(uuid4()), "selector": ["env", "var4"]}
-    )
+    variable1 = StringVariable(name="var1", value="value1", id=str(uuid4()), selector=["env", "var1"])
+    variable2 = IntegerVariable(name="var2", value=123, id=str(uuid4()), selector=["env", "var2"])
+    variable3 = SecretVariable(name="var3", value="secret", id=str(uuid4()), selector=["env", "var3"])
+    variable4 = FloatVariable(name="var4", value=3.14, id=str(uuid4()), selector=["env", "var4"])
 
     with (
         mock.patch("core.helper.encrypter.encrypt_token", return_value="encrypted_token"),
@@ -137,8 +121,8 @@ def test_to_dict():
     ):
         # Set the environment_variables property of the Workflow instance
         workflow.environment_variables = [
-            SecretVariable.model_validate({"name": "secret", "value": "secret", "id": str(uuid4())}),
-            StringVariable.model_validate({"name": "text", "value": "text", "id": str(uuid4())}),
+            SecretVariable(name="secret", value="secret", id=str(uuid4())),
+            StringVariable(name="text", value="text", id=str(uuid4())),
         ]
 
         workflow_dict = workflow.to_dict()
@@ -219,7 +203,7 @@ class TestWorkflowDraftVariableGetValue:
         tenant_id = "test_tenant_id"
 
         test_file = File(
-            type=FileType.IMAGE,
+            file_type=FileType.IMAGE,
             transfer_method=FileTransferMethod.REMOTE_URL,
             remote_url="https://example.com/example.jpg",
             filename="example.jpg",
@@ -290,8 +274,8 @@ class TestWorkflowDraftVariableGetValue:
 
         # Create a File with specific field values
         test_file = File(
-            id="test_file_id",
-            type=FileType.IMAGE,
+            file_id="test_file_id",
+            file_type=FileType.IMAGE,
             transfer_method=FileTransferMethod.REMOTE_URL,
             remote_url="https://example.com/test.jpg",
             filename="test.jpg",
@@ -326,8 +310,8 @@ class TestWorkflowDraftVariableGetValue:
 
     def test_file_variable_rebuilds_storage_backed_payloads_with_app_tenant(self):
         persisted_file = File(
-            id="test_file_id",
-            type=FileType.DOCUMENT,
+            file_id="test_file_id",
+            file_type=FileType.DOCUMENT,
             transfer_method=FileTransferMethod.LOCAL_FILE,
             reference=build_file_reference(record_id="upload-1", storage_key="legacy-storage-key"),
             filename="test.txt",
@@ -336,8 +320,8 @@ class TestWorkflowDraftVariableGetValue:
             size=12,
         )
         rebuilt_file = File(
-            id="test_file_id",
-            type=FileType.DOCUMENT,
+            file_id="test_file_id",
+            file_type=FileType.DOCUMENT,
             transfer_method=FileTransferMethod.LOCAL_FILE,
             reference=build_file_reference(record_id="upload-1"),
             filename="test.txt",
diff --git a/api/tests/unit_tests/services/test_variable_truncator.py b/api/tests/unit_tests/services/test_variable_truncator.py
index 4b864dd221..931e96ef3a 100644
--- a/api/tests/unit_tests/services/test_variable_truncator.py
+++ b/api/tests/unit_tests/services/test_variable_truncator.py
@@ -41,9 +41,9 @@ from services.variable_truncator import (
 @pytest.fixture
 def file() -> File:
     return File(
-        id=str(uuid4()),  # Generate new UUID for File.id
+        file_id=str(uuid4()),  # Generate new UUID for File.id
         tenant_id=str(uuid.uuid4()),
-        type=FileType.DOCUMENT,
+        file_type=FileType.DOCUMENT,
         transfer_method=FileTransferMethod.LOCAL_FILE,
         related_id=str(uuid.uuid4()),
         filename="test_file.txt",
diff --git a/api/tests/unit_tests/services/test_workflow_service.py b/api/tests/unit_tests/services/test_workflow_service.py
index 287f5f2e5e..0015e8b908 100644
--- a/api/tests/unit_tests/services/test_workflow_service.py
+++ b/api/tests/unit_tests/services/test_workflow_service.py
@@ -12,7 +12,7 @@ This test suite covers:
 import json
 import uuid
 from typing import Any, cast
-from unittest.mock import ANY, MagicMock, Mock, patch
+from unittest.mock import ANY, MagicMock, Mock, patch, sentinel
 
 import pytest
 
@@ -1301,7 +1301,7 @@ class TestWorkflowService:
             passed_filters = mock_node_class.get_default_config.call_args.kwargs["filters"]
             assert passed_filters[HTTP_REQUEST_CONFIG_FILTER_KEY] is provided_config
 
-    def test_get_default_block_config_http_request_malformed_config_raises_value_error(self, workflow_service):
+    def test_get_default_block_config_http_request_malformed_config_raises_type_error(self, workflow_service):
         with (
             patch(
                 "services.workflow_service.get_node_type_classes_mapping",
@@ -1309,7 +1309,7 @@ class TestWorkflowService:
             ),
             patch("services.workflow_service.LATEST_VERSION", "latest"),
         ):
-            with pytest.raises(ValueError, match="http_request_config must be an HttpRequestNodeConfig instance"):
+            with pytest.raises(TypeError, match="http_request_config must be an HttpRequestNodeConfig instance"):
                 workflow_service.get_default_block_config(
                     BuiltinNodeTypes.HTTP_REQUEST,
                     filters={HTTP_REQUEST_CONFIG_FILTER_KEY: "invalid"},
@@ -2615,7 +2615,7 @@ class TestWorkflowServiceHumanInputOperations:
         draft.graph_dict = {"nodes": []}
         draft.get_node_config_by_id.return_value = {
             "id": "node-1",
-            "data": MagicMock(type=BuiltinNodeTypes.HUMAN_INPUT),
+            "data": {"type": BuiltinNodeTypes.HUMAN_INPUT, "title": "Human Input"},
         }
         service.get_draft_workflow = MagicMock(return_value=draft)
 
@@ -2820,16 +2820,21 @@ class TestWorkflowServiceFreeNodeExecution:
         workflow.app_id = "app-1"
         account = MagicMock()
         account.id = "u-1"
-        node_config = {"id": "n-1"}
+        node_config = {"id": "n-1", "data": {"type": BuiltinNodeTypes.HUMAN_INPUT, "title": "Human Input"}}
         variable_pool = MagicMock()
 
         with (
             patch("services.workflow_service.DifyGraphInitContext") as mock_graph_init_context_cls,
             patch("services.workflow_service.GraphRuntimeState"),
+            patch(
+                "services.workflow_service.adapt_human_input_node_data_for_graph",
+                return_value=sentinel.adapted_node_data,
+            ) as mock_adapt_node_data,
             patch("services.workflow_service.build_dify_run_context") as mock_build_dify_run_context,
             patch("services.workflow_service.DifyHumanInputNodeRuntime") as mock_runtime_cls,
             patch("services.workflow_service.HumanInputNode") as mock_node_cls,
         ):
+            mock_node_cls.validate_node_data.return_value = sentinel.node_data
             node = service._build_human_input_node(
                 workflow=workflow, account=account, node_config=node_config, variable_pool=variable_pool
             )
@@ -2842,9 +2847,11 @@ class TestWorkflowServiceFreeNodeExecution:
                 call_depth=0,
             )
             mock_runtime_cls.assert_called_once_with(mock_build_dify_run_context.return_value)
+            mock_adapt_node_data.assert_called_once_with(node_config["data"])
+            mock_node_cls.validate_node_data.assert_called_once_with(sentinel.adapted_node_data)
             mock_node_cls.assert_called_once_with(
-                id="n-1",
-                config=node_config,
+                node_id="n-1",
+                config=sentinel.node_data,
                 graph_init_params=mock_graph_init_context_cls.return_value.to_graph_init_params.return_value,
                 graph_runtime_state=ANY,
                 runtime=mock_runtime_cls.return_value,
diff --git a/api/tests/unit_tests/services/workflow/test_draft_var_loader_simple.py b/api/tests/unit_tests/services/workflow/test_draft_var_loader_simple.py
index 60beec7964..497c26a9b3 100644
--- a/api/tests/unit_tests/services/workflow/test_draft_var_loader_simple.py
+++ b/api/tests/unit_tests/services/workflow/test_draft_var_loader_simple.py
@@ -239,8 +239,8 @@ class TestDraftVarLoaderSimple:
         draft_var.variable_file = variable_file
 
         persisted_file = File(
-            id="file-1",
-            type=FileType.DOCUMENT,
+            file_id="file-1",
+            file_type=FileType.DOCUMENT,
             transfer_method=FileTransferMethod.LOCAL_FILE,
             reference=build_file_reference(record_id="upload-1", storage_key="legacy-storage-key"),
             filename="test.txt",
@@ -249,8 +249,8 @@ class TestDraftVarLoaderSimple:
             size=12,
         )
         rebuilt_file = File(
-            id="file-1",
-            type=FileType.DOCUMENT,
+            file_id="file-1",
+            file_type=FileType.DOCUMENT,
             transfer_method=FileTransferMethod.LOCAL_FILE,
             reference=build_file_reference(record_id="upload-1"),
             filename="test.txt",
diff --git a/api/tests/unit_tests/services/workflow/test_workflow_draft_variable_service.py b/api/tests/unit_tests/services/workflow/test_workflow_draft_variable_service.py
index f6bdb6a60e..b14d767568 100644
--- a/api/tests/unit_tests/services/workflow/test_workflow_draft_variable_service.py
+++ b/api/tests/unit_tests/services/workflow/test_workflow_draft_variable_service.py
@@ -145,8 +145,8 @@ class TestDraftVariableSaver:
             user=mock_user,
         )
         rebuilt_file = File(
-            id="file-1",
-            type=FileType.DOCUMENT,
+            file_id="file-1",
+            file_type=FileType.DOCUMENT,
             transfer_method=FileTransferMethod.LOCAL_FILE,
             reference="upload-1",
             filename="test.txt",
diff --git a/api/tests/unit_tests/services/workflow/test_workflow_human_input_delivery.py b/api/tests/unit_tests/services/workflow/test_workflow_human_input_delivery.py
index d7192994b2..170bb24b8a 100644
--- a/api/tests/unit_tests/services/workflow/test_workflow_human_input_delivery.py
+++ b/api/tests/unit_tests/services/workflow/test_workflow_human_input_delivery.py
@@ -5,14 +5,13 @@ from unittest.mock import MagicMock
 import pytest
 from sqlalchemy.orm import sessionmaker
 
-from core.workflow.human_input_compat import (
+from core.workflow.human_input_adapter import (
     EmailDeliveryConfig,
     EmailDeliveryMethod,
     EmailRecipients,
     ExternalRecipient,
     MemberRecipient,
 )
-from graphon.entities.graph_config import NodeConfigDict, NodeConfigDictAdapter
 from graphon.enums import BuiltinNodeTypes
 from graphon.nodes.human_input.entities import HumanInputNodeData
 from services import workflow_service as workflow_service_module
@@ -23,24 +22,18 @@ def _make_service() -> WorkflowService:
     return WorkflowService(session_maker=sessionmaker())
 
 
-def _build_node_config(delivery_methods: list[EmailDeliveryMethod], *, legacy: bool = False) -> NodeConfigDict:
-    node_data = HumanInputNodeData(
-        title="Human Input",
-        delivery_methods=delivery_methods,
-        form_content="Test content",
-        inputs=[],
-        user_actions=[],
-    ).model_dump(mode="json")
-    if legacy:
-        for delivery_method in node_data["delivery_methods"]:
-            recipients = delivery_method.get("config", {}).get("recipients", {})
-            if "include_bound_group" in recipients:
-                recipients["whole_workspace"] = recipients.pop("include_bound_group")
-            for recipient in recipients.get("items", []):
-                if "reference_id" in recipient:
-                    recipient["user_id"] = recipient.pop("reference_id")
-    node_data["type"] = BuiltinNodeTypes.HUMAN_INPUT
-    return NodeConfigDictAdapter.validate_python({"id": "node-1", "data": node_data})
+def _build_node_config(delivery_methods: list[EmailDeliveryMethod]) -> dict[str, object]:
+    return {
+        "id": "node-1",
+        "data": HumanInputNodeData(
+            title="Human Input",
+            type=BuiltinNodeTypes.HUMAN_INPUT,
+            delivery_methods=delivery_methods,
+            form_content="Test content",
+            inputs=[],
+            user_actions=[],
+        ),
+    }
 
 
 def _make_email_method(enabled: bool = True, debug_mode: bool = False) -> EmailDeliveryMethod:
@@ -77,7 +70,7 @@ def test_human_input_delivery_requires_draft_workflow():
 def test_human_input_delivery_allows_disabled_method(monkeypatch: pytest.MonkeyPatch):
     service = _make_service()
     delivery_method = _make_email_method(enabled=False)
-    node_config = _build_node_config([delivery_method], legacy=True)
+    node_config = _build_node_config([delivery_method])
     workflow = MagicMock()
     workflow.get_node_config_by_id.return_value = node_config
     service.get_draft_workflow = MagicMock(return_value=workflow)  # type: ignore[method-assign]
@@ -113,7 +106,7 @@ def test_human_input_delivery_allows_disabled_method(monkeypatch: pytest.MonkeyP
 def test_human_input_delivery_dispatches_to_test_service(monkeypatch: pytest.MonkeyPatch):
     service = _make_service()
     delivery_method = _make_email_method(enabled=True)
-    node_config = _build_node_config([delivery_method], legacy=True)
+    node_config = _build_node_config([delivery_method])
     workflow = MagicMock()
     workflow.get_node_config_by_id.return_value = node_config
     service.get_draft_workflow = MagicMock(return_value=workflow)  # type: ignore[method-assign]
@@ -152,7 +145,7 @@ def test_human_input_delivery_dispatches_to_test_service(monkeypatch: pytest.Mon
 def test_human_input_delivery_debug_mode_overrides_recipients(monkeypatch: pytest.MonkeyPatch):
     service = _make_service()
     delivery_method = _make_email_method(enabled=True, debug_mode=True)
-    node_config = _build_node_config([delivery_method], legacy=True)
+    node_config = _build_node_config([delivery_method])
     workflow = MagicMock()
     workflow.get_node_config_by_id.return_value = node_config
     service.get_draft_workflow = MagicMock(return_value=workflow)  # type: ignore[method-assign]
diff --git a/api/uv.lock b/api/uv.lock
index 6d507a2d15..2e2f87f229 100644
--- a/api/uv.lock
+++ b/api/uv.lock
@@ -1592,7 +1592,7 @@ requires-dist = [
     { name = "gmpy2", specifier = ">=2.3.0" },
     { name = "google-api-python-client", specifier = ">=2.194.0" },
     { name = "google-cloud-aiplatform", specifier = ">=1.147.0,<2.0.0" },
-    { name = "graphon", specifier = "~=0.1.2" },
+    { name = "graphon", specifier = "~=0.2.2" },
     { name = "gunicorn", specifier = ">=25.3.0" },
     { name = "httpx", extras = ["socks"], specifier = ">=0.28.1,<1.0.0" },
     { name = "httpx-sse", specifier = "~=0.4.0" },
@@ -2935,7 +2935,7 @@ httpx = [
 
 [[package]]
 name = "graphon"
-version = "0.1.2"
+version = "0.2.2"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "charset-normalizer" },
@@ -2956,9 +2956,9 @@ dependencies = [
     { name = "unstructured", extra = ["docx", "epub", "md", "ppt", "pptx"] },
     { name = "webvtt-py" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/33/fc/0a5342a1c29bc367c2254c170ef130a84a60d8cd1c9cc84a7a85e96c1042/graphon-0.1.2.tar.gz", hash = "sha256:a2210629f93258ad2e7cbe85b5d4c6826814f6c679aa2a23ca100511363b9240", size = 214744, upload-time = "2026-03-27T20:09:53.802Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/08/50/e745a79c5f742f88f6011a1f7c9ba2c2f9cc1beedd982f0b192f1ab8c748/graphon-0.2.2.tar.gz", hash = "sha256:141f0de536171850f1af6f738dc66f0285aadd3c097f1dad2a038636789e0aa5", size = 236360, upload-time = "2026-04-17T08:52:28.047Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/d5/46/65b5e366ec2d7017b6d6448e2635b3772d86840a6f7297277471b1bfbfbd/graphon-0.1.2-py3-none-any.whl", hash = "sha256:79f0c7796de7b8642d070730bb8bdaf1c68ccdfcecac38e0b2282e0543f0a6db", size = 314398, upload-time = "2026-03-27T20:09:52.524Z" },
+    { url = "https://files.pythonhosted.org/packages/de/89/a6340afdaf5169d17a318e00fc685fb67ed99baa602c2cbbbf6af6a76096/graphon-0.2.2-py3-none-any.whl", hash = "sha256:754e544d08779138f99eac6547ab08559463680e2c76488b05e1c978210392b4", size = 340808, upload-time = "2026-04-17T08:52:26.5Z" },
 ]
 
 [[package]]

From 0c8acd402ab852b71fc9444df059b17e93331a01 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Sat, 18 Apr 2026 19:21:07 +0800
Subject: [PATCH 23/24] chore(web): drop delay={0} from tooltip triggers and
 retype DocName (#35382)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 eslint-suppressions.json                           |  5 -----
 .../header/account-dropdown/compliance.tsx         | 14 +++++++-------
 .../model-auth-dropdown/usage-priority-section.tsx |  1 -
 .../provider-added-card/quota-panel.tsx            |  2 --
 .../system-model-selector/index.tsx                |  1 -
 .../plugin-detail-panel/detail-header/index.tsx    |  1 -
 .../nodes/_base/components/layout/field-title.tsx  |  1 -
 .../nodes/llm/components/panel-memory-section.tsx  |  2 --
 .../nodes/llm/components/panel-output-section.tsx  |  2 --
 9 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index fbeb1d6dcf..29fcf2634e 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -3081,11 +3081,6 @@
       "count": 1
     }
   },
-  "web/app/components/header/account-dropdown/compliance.tsx": {
-    "erasable-syntax-only/enums": {
-      "count": 1
-    }
-  },
   "web/app/components/header/account-setting/api-based-extension-page/modal.tsx": {
     "no-restricted-imports": {
       "count": 1
diff --git a/web/app/components/header/account-dropdown/compliance.tsx b/web/app/components/header/account-dropdown/compliance.tsx
index 4f5b79fc66..75d7200666 100644
--- a/web/app/components/header/account-dropdown/compliance.tsx
+++ b/web/app/components/header/account-dropdown/compliance.tsx
@@ -19,12 +19,13 @@ import SparklesSoft from '../../base/icons/src/public/common/SparklesSoft'
 import PremiumBadge from '../../base/premium-badge'
 import { MenuItemContent } from './menu-item-content'
 
-enum DocName {
-  SOC2_Type_I = 'SOC2_Type_I',
-  SOC2_Type_II = 'SOC2_Type_II',
-  ISO_27001 = 'ISO_27001',
-  GDPR = 'GDPR',
-}
+const DocName = {
+  SOC2_Type_I: 'SOC2_Type_I',
+  SOC2_Type_II: 'SOC2_Type_II',
+  ISO_27001: 'ISO_27001',
+  GDPR: 'GDPR',
+} as const
+type DocName = typeof DocName[keyof typeof DocName]
 
 type ComplianceDocActionVisualProps = {
   isCurrentPlanCanDownload: boolean
@@ -61,7 +62,6 @@ function ComplianceDocActionVisual({
   return (
     <Tooltip>
       <TooltipTrigger
-        delay={0}
         disabled={!canShowUpgradeTooltip}
         render={(
           <PremiumBadge color="blue" allowHover={true}>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx
index 4ec7ce3cef..e572ec41af 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx
@@ -34,7 +34,6 @@ export default function UsagePrioritySection({ value, disabled, onSelect }: Usag
           <Tooltip>
             <TooltipTrigger
               aria-label={t('modelProvider.card.usagePriorityTip', { ns: 'common' })}
-              delay={0}
               render={(
                 <span className="flex h-4 w-4 shrink-0 items-center justify-center">
                   <span aria-hidden className="i-ri-question-line h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary" />
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
index 5d31db11f9..7828dc4635 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
@@ -102,7 +102,6 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
           <Tooltip>
             <TooltipTrigger
               aria-label={tipText}
-              delay={0}
               render={(
                 <span className="ml-0.5 flex h-4 w-4 shrink-0 items-center justify-center">
                   <span aria-hidden className="i-ri-question-line h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary" />
@@ -150,7 +149,6 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
                 <Tooltip key={key}>
                   <TooltipTrigger
                     aria-label={tooltipText}
-                    delay={0}
                     render={(
                       <div
                         className={cn('relative h-6 w-6', !providerType && 'cursor-pointer hover:opacity-80')}
diff --git a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
index 41bb3c3ab8..9f993260ca 100644
--- a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
@@ -141,7 +141,6 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
         <Tooltip>
           <TooltipTrigger
             aria-label={tipText}
-            delay={0}
             render={(
               <span className="ml-0.5 flex h-4 w-4 shrink-0 items-center justify-center">
                 <span aria-hidden className="i-ri-question-line h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary" />
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
index 1ed91a93f5..fb31df59a0 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
@@ -189,7 +189,6 @@ const DetailHeader = ({
             {isAutoUpgradeEnabled && !isReadmeView && (
               <Tooltip>
                 <TooltipTrigger
-                  delay={0}
                   render={(
                     <div>
                       <Badge className="mr-1 cursor-pointer px-1">
diff --git a/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx b/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
index 205e75bf67..ce080fb6dd 100644
--- a/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
+++ b/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
@@ -64,7 +64,6 @@ export const FieldTitle = memo(({
             tooltip && (
               <Tooltip>
                 <TooltipTrigger
-                  delay={0}
                   render={(
                     <span className="ml-1 flex h-4 w-4 shrink-0 items-center justify-center">
                       <span aria-hidden className="i-ri-question-line h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary" />
diff --git a/web/app/components/workflow/nodes/llm/components/panel-memory-section.tsx b/web/app/components/workflow/nodes/llm/components/panel-memory-section.tsx
index 3d2697c44e..59b38b41db 100644
--- a/web/app/components/workflow/nodes/llm/components/panel-memory-section.tsx
+++ b/web/app/components/workflow/nodes/llm/components/panel-memory-section.tsx
@@ -52,7 +52,6 @@ const PanelMemorySection: FC<Props> = ({
               <div className="text-xs font-semibold text-text-secondary uppercase">{t('nodes.common.memories.title', { ns: 'workflow' })}</div>
               <Tooltip>
                 <TooltipTrigger
-                  delay={0}
                   render={(
                     <span className="ml-1 flex h-4 w-4 shrink-0 items-center justify-center">
                       <span aria-hidden className="i-ri-question-line h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary" />
@@ -75,7 +74,6 @@ const PanelMemorySection: FC<Props> = ({
                   <div className="text-xs font-semibold text-text-secondary uppercase">user</div>
                   <Tooltip>
                     <TooltipTrigger
-                      delay={0}
                       render={(
                         <span className="ml-1 flex h-4 w-4 shrink-0 items-center justify-center">
                           <span aria-hidden className="i-ri-question-line h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary" />
diff --git a/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx b/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
index 3a3ab7f8cb..bd333b6b1f 100644
--- a/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
+++ b/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
@@ -43,7 +43,6 @@ const PanelOutputSection: FC<Props> = ({
             {(!isModelSupportStructuredOutput && !!inputs.structured_output_enabled) && (
               <Tooltip>
                 <TooltipTrigger
-                  delay={0}
                   render={(
                     <div>
                       <RiAlertFill className="mr-1 size-4 text-text-warning-secondary" />
@@ -61,7 +60,6 @@ const PanelOutputSection: FC<Props> = ({
             <div className="mr-0.5 system-xs-medium-uppercase text-text-tertiary">{t('structOutput.structured', { ns: 'app' })}</div>
             <Tooltip>
               <TooltipTrigger
-                delay={0}
                 render={(
                   <div>
                     <RiQuestionLine className="size-3.5 text-text-quaternary" />

From 25dd79fba77978363f51640ce5b43007fccd5fc7 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Sat, 18 Apr 2026 21:33:13 +0800
Subject: [PATCH 24/24] fix(web): remove dynamic import from Goto Anything to
 restore cmd+k (#35383)

---
 web/app/(commonLayout)/layout.tsx                     |  6 +-----
 .../components/goto-anything/__tests__/index.spec.tsx |  2 +-
 web/app/components/goto-anything/index.tsx            | 11 +++--------
 3 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/web/app/(commonLayout)/layout.tsx b/web/app/(commonLayout)/layout.tsx
index 49e9431940..35da7ef792 100644
--- a/web/app/(commonLayout)/layout.tsx
+++ b/web/app/(commonLayout)/layout.tsx
@@ -5,6 +5,7 @@ import InSiteMessageNotification from '@/app/components/app/in-site-message/noti
 import AmplitudeProvider from '@/app/components/base/amplitude'
 import GA, { GaType } from '@/app/components/base/ga'
 import Zendesk from '@/app/components/base/zendesk'
+import { GotoAnything } from '@/app/components/goto-anything'
 import Header from '@/app/components/header'
 import HeaderWrapper from '@/app/components/header/header-wrapper'
 import ReadmePanel from '@/app/components/plugins/readme-panel'
@@ -12,15 +13,10 @@ import { AppContextProvider } from '@/context/app-context-provider'
 import { EventEmitterContextProvider } from '@/context/event-emitter-provider'
 import { ModalContextProvider } from '@/context/modal-context-provider'
 import { ProviderContextProvider } from '@/context/provider-context-provider'
-import dynamic from '@/next/dynamic'
 import PartnerStack from '../components/billing/partner-stack'
 import Splash from '../components/splash'
 import RoleRouteGuard from './role-route-guard'
 
-const GotoAnything = dynamic(() => import('@/app/components/goto-anything'), {
-  ssr: false,
-})
-
 const Layout = ({ children }: { children: ReactNode }) => {
   return (
     <>
diff --git a/web/app/components/goto-anything/__tests__/index.spec.tsx b/web/app/components/goto-anything/__tests__/index.spec.tsx
index b2050ef9fb..39249e0427 100644
--- a/web/app/components/goto-anything/__tests__/index.spec.tsx
+++ b/web/app/components/goto-anything/__tests__/index.spec.tsx
@@ -3,7 +3,7 @@ import type { ActionItem, SearchResult } from '../actions/types'
 import { act, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
-import GotoAnything from '../index'
+import { GotoAnything } from '../index'
 
 type TestSearchResult = Omit<SearchResult, 'icon' | 'data'> & {
   icon?: ReactNode
diff --git a/web/app/components/goto-anything/index.tsx b/web/app/components/goto-anything/index.tsx
index 13f43ba75a..af6f0a7a9b 100644
--- a/web/app/components/goto-anything/index.tsx
+++ b/web/app/components/goto-anything/index.tsx
@@ -22,7 +22,7 @@ type Props = {
   onHide?: () => void
 }
 
-const GotoAnything: FC<Props> = ({
+const GotoAnythingDialog: FC<Props> = ({
   onHide,
 }) => {
   const { t } = useTranslation()
@@ -234,15 +234,10 @@ const GotoAnything: FC<Props> = ({
   )
 }
 
-/**
- * GotoAnything component with context provider
- */
-const GotoAnythingWithContext: FC<Props> = (props) => {
+export const GotoAnything: FC<Props> = (props) => {
   return (
     <GotoAnythingProvider>
-      <GotoAnything {...props} />
+      <GotoAnythingDialog {...props} />
     </GotoAnythingProvider>
   )
 }
-
-export default GotoAnythingWithContext