diff --git a/.github/workflows/web-tests.yml b/.github/workflows/web-tests.yml
index dd311701b5..b1f32f96c2 100644
--- a/.github/workflows/web-tests.yml
+++ b/.github/workflows/web-tests.yml
@@ -35,6 +35,14 @@ jobs:
           cache: pnpm
           cache-dependency-path: ./web/pnpm-lock.yaml
 
+      - name: Restore Jest cache
+        uses: actions/cache@v4
+        with:
+          path: web/.cache/jest
+          key: ${{ runner.os }}-jest-${{ hashFiles('web/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-jest-
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
@@ -45,7 +53,7 @@ jobs:
         run: |
           pnpm exec jest \
             --ci \
-            --runInBand \
+            --maxWorkers=100% \
             --coverage \
             --passWithNoTests
 
@@ -70,6 +78,13 @@ jobs:
           node <<'NODE' >> "$GITHUB_STEP_SUMMARY"
           const fs = require('fs');
           const path = require('path');
+          let libCoverage = null;
+
+          try {
+            libCoverage = require('istanbul-lib-coverage');
+          } catch (error) {
+            libCoverage = null;
+          }
 
           const summaryPath = path.join('coverage', 'coverage-summary.json');
           const finalPath = path.join('coverage', 'coverage-final.json');
@@ -91,6 +106,54 @@ jobs:
             ? JSON.parse(fs.readFileSync(finalPath, 'utf8'))
             : null;
 
+          const getLineCoverageFromStatements = (statementMap, statementHits) => {
+            const lineHits = {};
+
+            if (!statementMap || !statementHits) {
+              return lineHits;
+            }
+
+            Object.entries(statementMap).forEach(([key, statement]) => {
+              const line = statement?.start?.line;
+              if (!line) {
+                return;
+              }
+              const hits = statementHits[key] ?? 0;
+              const previous = lineHits[line];
+              lineHits[line] = previous === undefined ? hits : Math.max(previous, hits);
+            });
+
+            return lineHits;
+          };
+
+          const getFileCoverage = (entry) => (
+            libCoverage ? libCoverage.createFileCoverage(entry) : null
+          );
+
+          const getLineHits = (entry, fileCoverage) => {
+            const lineHits = entry.l ?? {};
+            if (Object.keys(lineHits).length > 0) {
+              return lineHits;
+            }
+            if (fileCoverage) {
+              return fileCoverage.getLineCoverage();
+            }
+            return getLineCoverageFromStatements(entry.statementMap ?? {}, entry.s ?? {});
+          };
+
+          const getUncoveredLines = (entry, fileCoverage, lineHits) => {
+            if (lineHits && Object.keys(lineHits).length > 0) {
+              return Object.entries(lineHits)
+                .filter(([, count]) => count === 0)
+                .map(([line]) => Number(line))
+                .sort((a, b) => a - b);
+            }
+            if (fileCoverage) {
+              return fileCoverage.getUncoveredLines();
+            }
+            return [];
+          };
+
           const totals = {
             lines: { covered: 0, total: 0 },
             statements: { covered: 0, total: 0 },
@@ -106,7 +169,7 @@ jobs:
                 totals[key].covered = totalEntry[key].covered ?? 0;
                 totals[key].total = totalEntry[key].total ?? 0;
               }
-              });
+            });
 
             Object.entries(summary)
               .filter(([file]) => file !== 'total')
@@ -122,7 +185,8 @@ jobs:
               });
           } else if (coverage) {
             Object.entries(coverage).forEach(([file, entry]) => {
-              const lineHits = entry.l ?? {};
+              const fileCoverage = getFileCoverage(entry);
+              const lineHits = getLineHits(entry, fileCoverage);
               const statementHits = entry.s ?? {};
               const branchHits = entry.b ?? {};
               const functionHits = entry.f ?? {};
@@ -228,7 +292,8 @@ jobs:
             };
             const tableRows = Object.entries(coverage)
               .map(([file, entry]) => {
-                const lineHits = entry.l ?? {};
+                const fileCoverage = getFileCoverage(entry);
+                const lineHits = getLineHits(entry, fileCoverage);
                 const statementHits = entry.s ?? {};
                 const branchHits = entry.b ?? {};
                 const functionHits = entry.f ?? {};
@@ -254,10 +319,7 @@ jobs:
                 tableTotals.functions.total += functionTotal;
                 tableTotals.functions.covered += functionCovered;
 
-                const uncoveredLines = Object.entries(lineHits)
-                  .filter(([, count]) => count === 0)
-                  .map(([line]) => Number(line))
-                  .sort((a, b) => a - b);
+                const uncoveredLines = getUncoveredLines(entry, fileCoverage, lineHits);
 
                 const filePath = entry.path ?? file;
                 const relativePath = path.isAbsolute(filePath)
@@ -294,46 +356,20 @@ jobs:
             };
 
             const rowsForOutput = [allFilesRow, ...tableRows];
-            const columnWidths = Object.fromEntries(
-              columns.map(({ key, header }) => [key, header.length]),
-            );
-
-            rowsForOutput.forEach((row) => {
-              columns.forEach(({ key }) => {
-                const value = String(row[key] ?? '');
-                columnWidths[key] = Math.max(columnWidths[key], value.length);
-              });
-            });
-
-            const formatRow = (row) => columns
-              .map(({ key, align }) => {
-                const value = String(row[key] ?? '');
-                const width = columnWidths[key];
-                return align === 'right' ? value.padStart(width) : value.padEnd(width);
-              })
-              .join(' | ');
-
-            const headerRow = columns
-              .map(({ header, key, align }) => {
-                const width = columnWidths[key];
-                return align === 'right' ? header.padStart(width) : header.padEnd(width);
-              })
-              .join(' | ');
-
-            const dividerRow = columns
-              .map(({ key }) => '-'.repeat(columnWidths[key]))
-              .join('|');
+            const formatRow = (row) => `| ${columns
+              .map(({ key }) => String(row[key] ?? ''))
+              .join(' | ')} |`;
+            const headerRow = `| ${columns.map(({ header }) => header).join(' | ')} |`;
+            const dividerRow = `| ${columns
+              .map(({ align }) => (align === 'right' ? '---:' : ':---'))
+              .join(' | ')} |`;
 
             console.log('');
             console.log('<details><summary>Jest coverage table</summary>');
             console.log('');
-            console.log('```');
-            console.log(dividerRow);
             console.log(headerRow);
             console.log(dividerRow);
             rowsForOutput.forEach((row) => console.log(formatRow(row)));
-            console.log(dividerRow);
-            console.log('```');
             console.log('</details>');
           }
           NODE
diff --git a/api/controllers/web/audio.py b/api/controllers/web/audio.py
index af31fbc334..50bbf3ede9 100644
--- a/api/controllers/web/audio.py
+++ b/api/controllers/web/audio.py
@@ -31,7 +31,6 @@ from services.errors.audio import (
 )
 
 from ..common.schema import register_schema_models
-from ..web.wraps import WebApiResource
 
 
 class TextToAudioPayload(BaseModel):
diff --git a/api/core/rag/splitter/fixed_text_splitter.py b/api/core/rag/splitter/fixed_text_splitter.py
index e95c009292..b65cb14d8e 100644
--- a/api/core/rag/splitter/fixed_text_splitter.py
+++ b/api/core/rag/splitter/fixed_text_splitter.py
@@ -95,7 +95,8 @@ class FixedRecursiveCharacterTextSplitter(EnhanceRecursiveCharacterTextSplitter)
                 splits = re.split(r" +", text)
             else:
                 splits = text.split(separator)
-                splits = [item + separator if i < len(splits) else item for i, item in enumerate(splits)]
+                if self._keep_separator:
+                    splits = [s + separator for s in splits[:-1]] + splits[-1:]
         else:
             splits = list(text)
         if separator == "\n":
@@ -104,7 +105,7 @@ class FixedRecursiveCharacterTextSplitter(EnhanceRecursiveCharacterTextSplitter)
             splits = [s for s in splits if (s not in {"", "\n"})]
         _good_splits = []
         _good_splits_lengths = []  # cache the lengths of the splits
-        _separator = separator if self._keep_separator else ""
+        _separator = "" if self._keep_separator else separator
         s_lens = self._length_function(splits)
         if separator != "":
             for s, s_len in zip(splits, s_lens):
diff --git a/api/libs/helper.py b/api/libs/helper.py
index 888a99fb5c..74e1808e49 100644
--- a/api/libs/helper.py
+++ b/api/libs/helper.py
@@ -120,9 +120,9 @@ def uuid_value(value: Any) -> str:
         raise ValueError(error)
 
 
-def normalize_uuid(value: str | UUID | None) -> str | None:
+def normalize_uuid(value: str | UUID) -> str:
     if not value:
-        return None
+        return ""
 
     try:
         return uuid_value(value)
diff --git a/web/__mocks__/ky.ts b/web/__mocks__/ky.ts
new file mode 100644
index 0000000000..6c7691f2cf
--- /dev/null
+++ b/web/__mocks__/ky.ts
@@ -0,0 +1,71 @@
+/**
+ * Mock for ky HTTP client
+ * This mock is used to avoid ESM issues in Jest tests
+ */
+
+type KyResponse = {
+  ok: boolean
+  status: number
+  statusText: string
+  headers: Headers
+  json: jest.Mock
+  text: jest.Mock
+  blob: jest.Mock
+  arrayBuffer: jest.Mock
+  clone: jest.Mock
+}
+
+type KyInstance = jest.Mock & {
+  get: jest.Mock
+  post: jest.Mock
+  put: jest.Mock
+  patch: jest.Mock
+  delete: jest.Mock
+  head: jest.Mock
+  create: jest.Mock
+  extend: jest.Mock
+  stop: symbol
+}
+
+const createResponse = (data: unknown = {}, status = 200): KyResponse => {
+  const response: KyResponse = {
+    ok: status >= 200 && status < 300,
+    status,
+    statusText: status === 200 ? 'OK' : 'Error',
+    headers: new Headers(),
+    json: jest.fn().mockResolvedValue(data),
+    text: jest.fn().mockResolvedValue(JSON.stringify(data)),
+    blob: jest.fn().mockResolvedValue(new Blob()),
+    arrayBuffer: jest.fn().mockResolvedValue(new ArrayBuffer(0)),
+    clone: jest.fn(),
+  }
+  // Ensure clone returns a new response-like object, not the same instance
+  response.clone.mockImplementation(() => createResponse(data, status))
+  return response
+}
+
+const createKyInstance = (): KyInstance => {
+  const instance = jest.fn().mockImplementation(() => Promise.resolve(createResponse())) as KyInstance
+
+  // HTTP methods
+  instance.get = jest.fn().mockImplementation(() => Promise.resolve(createResponse()))
+  instance.post = jest.fn().mockImplementation(() => Promise.resolve(createResponse()))
+  instance.put = jest.fn().mockImplementation(() => Promise.resolve(createResponse()))
+  instance.patch = jest.fn().mockImplementation(() => Promise.resolve(createResponse()))
+  instance.delete = jest.fn().mockImplementation(() => Promise.resolve(createResponse()))
+  instance.head = jest.fn().mockImplementation(() => Promise.resolve(createResponse()))
+
+  // Create new instance with custom options
+  instance.create = jest.fn().mockImplementation(() => createKyInstance())
+  instance.extend = jest.fn().mockImplementation(() => createKyInstance())
+
+  // Stop method for AbortController
+  instance.stop = Symbol('stop')
+
+  return instance
+}
+
+const ky = createKyInstance()
+
+export default ky
+export { ky }
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
index 1f836de6e6..d5e3c61932 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
@@ -16,7 +16,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useStore } from '@/app/components/app/store'
 import AppSideBar from '@/app/components/app-sidebar'
 import type { NavIcon } from '@/app/components/app-sidebar/navLink'
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
index 2bfdece433..dda5dff2b9 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
@@ -3,7 +3,7 @@ import { RiCalendarLine } from '@remixicon/react'
 import type { Dayjs } from 'dayjs'
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { formatToLocalTime } from '@/utils/format'
 import { useI18N } from '@/context/i18n'
 import Picker from '@/app/components/base/date-and-time-picker/date-picker'
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
index f99ea52492..0a80bf670d 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
@@ -6,7 +6,7 @@ import { SimpleSelect } from '@/app/components/base/select'
 import type { Item } from '@/app/components/base/select'
 import dayjs from 'dayjs'
 import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 const today = dayjs()
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
index 246a1eb6a3..17c919bf22 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
@@ -4,7 +4,7 @@ import React, { useCallback, useRef, useState } from 'react'
 
 import type { PopupProps } from './config-popup'
 import ConfigPopup from './config-popup'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
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 628eb13071..767ccb8c59 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
@@ -12,7 +12,7 @@ import Indicator from '@/app/components/header/indicator'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import Divider from '@/app/components/base/divider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const I18N_PREFIX = 'app.tracing'
 
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
index eecd356e08..e170159e35 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Input from '@/app/components/base/input'
 
 type Props = {
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 2c17931b83..319ff3f423 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
@@ -12,7 +12,7 @@ import type { AliyunConfig, ArizeConfig, DatabricksConfig, LangFuseConfig, LangS
 import { TracingProvider } from './type'
 import TracingIcon from './tracing-icon'
 import ConfigButton from './config-button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { AliyunIcon, ArizeIcon, DatabricksIcon, LangfuseIcon, LangsmithIcon, MlflowIcon, OpikIcon, PhoenixIcon, TencentIcon, WeaveIcon } from '@/app/components/base/icons/src/public/tracing'
 import Indicator from '@/app/components/header/indicator'
 import { fetchTracingConfig as doFetchTracingConfig, fetchTracingStatus, updateTracingStatus } from '@/service/apps'
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
index ac1704d60d..0779689c76 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
@@ -6,7 +6,7 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { TracingProvider } from './type'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { AliyunIconBig, ArizeIconBig, DatabricksIconBig, LangfuseIconBig, LangsmithIconBig, MlflowIconBig, OpikIconBig, PhoenixIconBig, TencentIconBig, WeaveIconBig } from '@/app/components/base/icons/src/public/tracing'
 import { Eye as View } from '@/app/components/base/icons/src/vender/solid/general'
 
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
index ec9117dd38..aeca1cd3ab 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { TracingIcon as Icon } from '@/app/components/base/icons/src/public/tracing'
 
 type Props = {
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
index 3effb79f20..3581587b54 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
@@ -23,7 +23,7 @@ import { useDatasetDetail, useDatasetRelatedApps } from '@/service/knowledge/use
 import useDocumentTitle from '@/hooks/use-document-title'
 import ExtraInfo from '@/app/components/datasets/extra-info'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type IAppDetailLayoutProps = {
   children: React.ReactNode
diff --git a/web/app/(shareLayout)/webapp-reset-password/layout.tsx b/web/app/(shareLayout)/webapp-reset-password/layout.tsx
index e0ac6b9ad6..13073b0e6a 100644
--- a/web/app/(shareLayout)/webapp-reset-password/layout.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/layout.tsx
@@ -1,7 +1,7 @@
 'use client'
 import Header from '@/app/signin/_header'
 
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 export default function SignInLayout({ children }: any) {
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 5e3f6fff1d..843f10e039 100644
--- a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
@@ -2,7 +2,7 @@
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRouter, useSearchParams } from 'next/navigation'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import { RiCheckboxCircleFill } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
 import Button from '@/app/components/base/button'
diff --git a/web/app/(shareLayout)/webapp-signin/layout.tsx b/web/app/(shareLayout)/webapp-signin/layout.tsx
index 7649982072..c75f925d40 100644
--- a/web/app/(shareLayout)/webapp-signin/layout.tsx
+++ b/web/app/(shareLayout)/webapp-signin/layout.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
 import type { PropsWithChildren } from 'react'
diff --git a/web/app/(shareLayout)/webapp-signin/normalForm.tsx b/web/app/(shareLayout)/webapp-signin/normalForm.tsx
index 219722eef3..a14bfcd737 100644
--- a/web/app/(shareLayout)/webapp-signin/normalForm.tsx
+++ b/web/app/(shareLayout)/webapp-signin/normalForm.tsx
@@ -7,7 +7,7 @@ import Loading from '@/app/components/base/loading'
 import MailAndCodeAuth from './components/mail-and-code-auth'
 import MailAndPasswordAuth from './components/mail-and-password-auth'
 import SSOAuth from './components/sso-auth'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { LicenseStatus } from '@/types/feature'
 import { IS_CE_EDITION } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
diff --git a/web/app/account/oauth/authorize/layout.tsx b/web/app/account/oauth/authorize/layout.tsx
index 2ab676d6b6..b70ab210d0 100644
--- a/web/app/account/oauth/authorize/layout.tsx
+++ b/web/app/account/oauth/authorize/layout.tsx
@@ -1,7 +1,7 @@
 'use client'
 import Header from '@/app/signin/_header'
 
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { AppContextProvider } from '@/context/app-context'
diff --git a/web/app/activate/activateForm.tsx b/web/app/activate/activateForm.tsx
index d9d07cbfa1..11fc4866f3 100644
--- a/web/app/activate/activateForm.tsx
+++ b/web/app/activate/activateForm.tsx
@@ -1,13 +1,13 @@
 'use client'
+import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import { useRouter, useSearchParams } from 'next/navigation'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 
-import { invitationCheck } from '@/service/common'
 import Loading from '@/app/components/base/loading'
 import useDocumentTitle from '@/hooks/use-document-title'
+import { useInvitationCheck } from '@/service/use-common'
 
 const ActivateForm = () => {
   useDocumentTitle('')
@@ -26,19 +26,21 @@ const ActivateForm = () => {
       token,
     },
   }
-  const { data: checkRes } = useSWR(checkParams, invitationCheck, {
-    revalidateOnFocus: false,
-    onSuccess(data) {
-      if (data.is_valid) {
-        const params = new URLSearchParams(searchParams)
-        const { email, workspace_id } = data.data
-        params.set('email', encodeURIComponent(email))
-        params.set('workspace_id', encodeURIComponent(workspace_id))
-        params.set('invite_token', encodeURIComponent(token as string))
-        router.replace(`/signin?${params.toString()}`)
-      }
-    },
-  })
+  const { data: checkRes } = useInvitationCheck({
+    ...checkParams.params,
+    token: token || undefined,
+  }, true)
+
+  useEffect(() => {
+    if (checkRes?.is_valid) {
+      const params = new URLSearchParams(searchParams)
+      const { email, workspace_id } = checkRes.data
+      params.set('email', encodeURIComponent(email))
+      params.set('workspace_id', encodeURIComponent(workspace_id))
+      params.set('invite_token', encodeURIComponent(token as string))
+      router.replace(`/signin?${params.toString()}`)
+    }
+  }, [checkRes, router, searchParams, token])
 
   return (
     <div className={
diff --git a/web/app/activate/page.tsx b/web/app/activate/page.tsx
index cfb1e6b149..9ae03f3711 100644
--- a/web/app/activate/page.tsx
+++ b/web/app/activate/page.tsx
@@ -2,7 +2,7 @@
 import React from 'react'
 import Header from '../signin/_header'
 import ActivateForm from './activateForm'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const Activate = () => {
diff --git a/web/app/components/app-sidebar/app-info.tsx b/web/app/components/app-sidebar/app-info.tsx
index f143c2fcef..1b4377c10a 100644
--- a/web/app/components/app-sidebar/app-info.tsx
+++ b/web/app/components/app-sidebar/app-info.tsx
@@ -29,7 +29,7 @@ import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overvie
 import type { Operation } from './app-operations'
 import AppOperations from './app-operations'
 import dynamic from 'next/dynamic'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { AppModeEnum } from '@/types/app'
 
 const SwitchAppModal = dynamic(() => import('@/app/components/app/switch-app-modal'), {
diff --git a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
index 3c5d38dd82..04634906af 100644
--- a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
+++ b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
@@ -16,7 +16,7 @@ import AppInfo from './app-info'
 import NavLink from './navLink'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import type { NavIcon } from './navLink'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { AppModeEnum } from '@/types/app'
 
 type Props = {
diff --git a/web/app/components/app-sidebar/dataset-info/dropdown.tsx b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
index ff110f70bd..dc46af2d02 100644
--- a/web/app/components/app-sidebar/dataset-info/dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
 import ActionButton from '../../base/action-button'
 import { RiMoreFill } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Menu from './menu'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
diff --git a/web/app/components/app-sidebar/dataset-info/index.spec.tsx b/web/app/components/app-sidebar/dataset-info/index.spec.tsx
new file mode 100644
index 0000000000..3674be6658
--- /dev/null
+++ b/web/app/components/app-sidebar/dataset-info/index.spec.tsx
@@ -0,0 +1,379 @@
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import DatasetInfo from './index'
+import Dropdown from './dropdown'
+import Menu from './menu'
+import MenuItem from './menu-item'
+import type { DataSet } from '@/models/datasets'
+import {
+  ChunkingMode,
+  DataSourceType,
+  DatasetPermission,
+} from '@/models/datasets'
+import { RETRIEVE_METHOD } from '@/types/app'
+import { RiEditLine } from '@remixicon/react'
+
+let mockDataset: DataSet
+let mockIsDatasetOperator = false
+const mockReplace = jest.fn()
+const mockInvalidDatasetList = jest.fn()
+const mockInvalidDatasetDetail = jest.fn()
+const mockExportPipeline = jest.fn()
+const mockCheckIsUsedInApp = jest.fn()
+const mockDeleteDataset = jest.fn()
+
+const createDataset = (overrides: Partial<DataSet> = {}): DataSet => ({
+  id: 'dataset-1',
+  name: 'Dataset Name',
+  indexing_status: 'completed',
+  icon_info: {
+    icon: '📙',
+    icon_background: '#FFF4ED',
+    icon_type: 'emoji',
+    icon_url: '',
+  },
+  description: 'Dataset description',
+  permission: DatasetPermission.onlyMe,
+  data_source_type: DataSourceType.FILE,
+  indexing_technique: 'high_quality' as DataSet['indexing_technique'],
+  created_by: 'user-1',
+  updated_by: 'user-1',
+  updated_at: 1690000000,
+  app_count: 0,
+  doc_form: ChunkingMode.text,
+  document_count: 1,
+  total_document_count: 1,
+  word_count: 1000,
+  provider: 'internal',
+  embedding_model: 'text-embedding-3',
+  embedding_model_provider: 'openai',
+  embedding_available: true,
+  retrieval_model_dict: {
+    search_method: RETRIEVE_METHOD.semantic,
+    reranking_enable: false,
+    reranking_model: {
+      reranking_provider_name: '',
+      reranking_model_name: '',
+    },
+    top_k: 5,
+    score_threshold_enabled: false,
+    score_threshold: 0,
+  },
+  retrieval_model: {
+    search_method: RETRIEVE_METHOD.semantic,
+    reranking_enable: false,
+    reranking_model: {
+      reranking_provider_name: '',
+      reranking_model_name: '',
+    },
+    top_k: 5,
+    score_threshold_enabled: false,
+    score_threshold: 0,
+  },
+  tags: [],
+  external_knowledge_info: {
+    external_knowledge_id: '',
+    external_knowledge_api_id: '',
+    external_knowledge_api_name: '',
+    external_knowledge_api_endpoint: '',
+  },
+  external_retrieval_model: {
+    top_k: 0,
+    score_threshold: 0,
+    score_threshold_enabled: false,
+  },
+  built_in_field_enabled: false,
+  runtime_mode: 'rag_pipeline',
+  enable_api: false,
+  is_multimodal: false,
+  ...overrides,
+})
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    replace: mockReplace,
+  }),
+}))
+
+jest.mock('@/context/dataset-detail', () => ({
+  useDatasetDetailContextWithSelector: (selector: (state: { dataset?: DataSet }) => unknown) => selector({ dataset: mockDataset }),
+}))
+
+jest.mock('@/context/app-context', () => ({
+  useSelector: (selector: (state: { isCurrentWorkspaceDatasetOperator: boolean }) => unknown) =>
+    selector({ isCurrentWorkspaceDatasetOperator: mockIsDatasetOperator }),
+}))
+
+jest.mock('@/service/knowledge/use-dataset', () => ({
+  datasetDetailQueryKeyPrefix: ['dataset', 'detail'],
+  useInvalidDatasetList: () => mockInvalidDatasetList,
+}))
+
+jest.mock('@/service/use-base', () => ({
+  useInvalid: () => mockInvalidDatasetDetail,
+}))
+
+jest.mock('@/service/use-pipeline', () => ({
+  useExportPipelineDSL: () => ({
+    mutateAsync: mockExportPipeline,
+  }),
+}))
+
+jest.mock('@/service/datasets', () => ({
+  checkIsUsedInApp: (...args: unknown[]) => mockCheckIsUsedInApp(...args),
+  deleteDataset: (...args: unknown[]) => mockDeleteDataset(...args),
+}))
+
+jest.mock('@/hooks/use-knowledge', () => ({
+  useKnowledge: () => ({
+    formatIndexingTechniqueAndMethod: () => 'indexing-technique',
+  }),
+}))
+
+jest.mock('@/app/components/datasets/rename-modal', () => ({
+  __esModule: true,
+  default: ({
+    show,
+    onClose,
+    onSuccess,
+  }: {
+    show: boolean
+    onClose: () => void
+    onSuccess?: () => void
+  }) => {
+    if (!show)
+      return null
+    return (
+      <div data-testid="rename-modal">
+        <button type="button" onClick={onSuccess}>Success</button>
+        <button type="button" onClick={onClose}>Close</button>
+      </div>
+    )
+  },
+}))
+
+const openMenu = async (user: ReturnType<typeof userEvent.setup>) => {
+  const trigger = screen.getByRole('button')
+  await user.click(trigger)
+}
+
+describe('DatasetInfo', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockDataset = createDataset()
+    mockIsDatasetOperator = false
+  })
+
+  // Rendering of dataset summary details based on expand and dataset state.
+  describe('Rendering', () => {
+    it('should show dataset details when expanded', () => {
+      // Arrange
+      mockDataset = createDataset({ is_published: true })
+      render(<DatasetInfo expand />)
+
+      // Assert
+      expect(screen.getByText('Dataset Name')).toBeInTheDocument()
+      expect(screen.getByText('Dataset description')).toBeInTheDocument()
+      expect(screen.getByText('dataset.chunkingMode.general')).toBeInTheDocument()
+      expect(screen.getByText('indexing-technique')).toBeInTheDocument()
+    })
+
+    it('should show external tag when provider is external', () => {
+      // Arrange
+      mockDataset = createDataset({ provider: 'external', is_published: false })
+      render(<DatasetInfo expand />)
+
+      // Assert
+      expect(screen.getByText('dataset.externalTag')).toBeInTheDocument()
+      expect(screen.queryByText('dataset.chunkingMode.general')).not.toBeInTheDocument()
+    })
+
+    it('should hide detailed fields when collapsed', () => {
+      // Arrange
+      render(<DatasetInfo expand={false} />)
+
+      // Assert
+      expect(screen.queryByText('Dataset Name')).not.toBeInTheDocument()
+      expect(screen.queryByText('Dataset description')).not.toBeInTheDocument()
+    })
+  })
+})
+
+describe('MenuItem', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Event handling for menu item interactions.
+  describe('Interactions', () => {
+    it('should call handler when clicked', async () => {
+      const user = userEvent.setup()
+      const handleClick = jest.fn()
+      // Arrange
+      render(<MenuItem name="Edit" Icon={RiEditLine} handleClick={handleClick} />)
+
+      // Act
+      await user.click(screen.getByText('Edit'))
+
+      // Assert
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+  })
+})
+
+describe('Menu', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockDataset = createDataset()
+  })
+
+  // Rendering of menu options based on runtime mode and delete visibility.
+  describe('Rendering', () => {
+    it('should show edit, export, and delete options when rag pipeline and deletable', () => {
+      // Arrange
+      mockDataset = createDataset({ runtime_mode: 'rag_pipeline' })
+      render(
+        <Menu
+          showDelete
+          openRenameModal={jest.fn()}
+          handleExportPipeline={jest.fn()}
+          detectIsUsedByApp={jest.fn()}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('common.operation.edit')).toBeInTheDocument()
+      expect(screen.getByText('datasetPipeline.operations.exportPipeline')).toBeInTheDocument()
+      expect(screen.getByText('common.operation.delete')).toBeInTheDocument()
+    })
+
+    it('should hide export and delete options when not rag pipeline and not deletable', () => {
+      // Arrange
+      mockDataset = createDataset({ runtime_mode: 'general' })
+      render(
+        <Menu
+          showDelete={false}
+          openRenameModal={jest.fn()}
+          handleExportPipeline={jest.fn()}
+          detectIsUsedByApp={jest.fn()}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('common.operation.edit')).toBeInTheDocument()
+      expect(screen.queryByText('datasetPipeline.operations.exportPipeline')).not.toBeInTheDocument()
+      expect(screen.queryByText('common.operation.delete')).not.toBeInTheDocument()
+    })
+  })
+})
+
+describe('Dropdown', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockDataset = createDataset({ pipeline_id: 'pipeline-1', runtime_mode: 'rag_pipeline' })
+    mockIsDatasetOperator = false
+    mockExportPipeline.mockResolvedValue({ data: 'pipeline-content' })
+    mockCheckIsUsedInApp.mockResolvedValue({ is_using: false })
+    mockDeleteDataset.mockResolvedValue({})
+    if (!('createObjectURL' in URL)) {
+      Object.defineProperty(URL, 'createObjectURL', {
+        value: jest.fn(),
+        writable: true,
+      })
+    }
+    if (!('revokeObjectURL' in URL)) {
+      Object.defineProperty(URL, 'revokeObjectURL', {
+        value: jest.fn(),
+        writable: true,
+      })
+    }
+  })
+
+  // Rendering behavior based on workspace role.
+  describe('Rendering', () => {
+    it('should hide delete option when user is dataset operator', async () => {
+      const user = userEvent.setup()
+      // Arrange
+      mockIsDatasetOperator = true
+      render(<Dropdown expand />)
+
+      // Act
+      await openMenu(user)
+
+      // Assert
+      expect(screen.queryByText('common.operation.delete')).not.toBeInTheDocument()
+    })
+  })
+
+  // User interactions that trigger modals and exports.
+  describe('Interactions', () => {
+    it('should open rename modal when edit is clicked', async () => {
+      const user = userEvent.setup()
+      // Arrange
+      render(<Dropdown expand />)
+
+      // Act
+      await openMenu(user)
+      await user.click(screen.getByText('common.operation.edit'))
+
+      // Assert
+      expect(screen.getByTestId('rename-modal')).toBeInTheDocument()
+    })
+
+    it('should export pipeline when export is clicked', async () => {
+      const user = userEvent.setup()
+      const anchorClickSpy = jest.spyOn(HTMLAnchorElement.prototype, 'click')
+      const createObjectURLSpy = jest.spyOn(URL, 'createObjectURL')
+      // Arrange
+      render(<Dropdown expand />)
+
+      // Act
+      await openMenu(user)
+      await user.click(screen.getByText('datasetPipeline.operations.exportPipeline'))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockExportPipeline).toHaveBeenCalledWith({
+          pipelineId: 'pipeline-1',
+          include: false,
+        })
+      })
+      expect(createObjectURLSpy).toHaveBeenCalledTimes(1)
+      expect(anchorClickSpy).toHaveBeenCalledTimes(1)
+    })
+
+    it('should show delete confirmation when delete is clicked', async () => {
+      const user = userEvent.setup()
+      // Arrange
+      render(<Dropdown expand />)
+
+      // Act
+      await openMenu(user)
+      await user.click(screen.getByText('common.operation.delete'))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('dataset.deleteDatasetConfirmContent')).toBeInTheDocument()
+      })
+    })
+
+    it('should delete dataset and redirect when confirm is clicked', async () => {
+      const user = userEvent.setup()
+      // Arrange
+      render(<Dropdown expand />)
+
+      // Act
+      await openMenu(user)
+      await user.click(screen.getByText('common.operation.delete'))
+      await user.click(await screen.findByRole('button', { name: 'common.operation.confirm' }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockDeleteDataset).toHaveBeenCalledWith('dataset-1')
+      })
+      expect(mockInvalidDatasetList).toHaveBeenCalledTimes(1)
+      expect(mockReplace).toHaveBeenCalledWith('/datasets')
+    })
+  })
+})
diff --git a/web/app/components/app-sidebar/dataset-info/index.tsx b/web/app/components/app-sidebar/dataset-info/index.tsx
index 44b0baa72b..bace656d54 100644
--- a/web/app/components/app-sidebar/dataset-info/index.tsx
+++ b/web/app/components/app-sidebar/dataset-info/index.tsx
@@ -8,7 +8,7 @@ import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import type { DataSet } from '@/models/datasets'
 import { DOC_FORM_TEXT } from '@/models/datasets'
 import { useKnowledge } from '@/hooks/use-knowledge'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Dropdown from './dropdown'
 
 type DatasetInfoProps = {
diff --git a/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx b/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
index ac07333712..cf380d00d2 100644
--- a/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
@@ -11,7 +11,7 @@ import AppIcon from '../base/app-icon'
 import Divider from '../base/divider'
 import NavLink from './navLink'
 import type { NavIcon } from './navLink'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import Effect from '../base/effect'
 import Dropdown from './dataset-info/dropdown'
diff --git a/web/app/components/app-sidebar/index.tsx b/web/app/components/app-sidebar/index.tsx
index 86de2e2034..fe52c4cfa2 100644
--- a/web/app/components/app-sidebar/index.tsx
+++ b/web/app/components/app-sidebar/index.tsx
@@ -9,7 +9,7 @@ import AppSidebarDropdown from './app-sidebar-dropdown'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '../base/divider'
 import { useHover, useKeyPress } from 'ahooks'
 import ToggleButton from './toggle-button'
diff --git a/web/app/components/app-sidebar/navLink.tsx b/web/app/components/app-sidebar/navLink.tsx
index ad90b91250..f6d8e57682 100644
--- a/web/app/components/app-sidebar/navLink.tsx
+++ b/web/app/components/app-sidebar/navLink.tsx
@@ -2,7 +2,7 @@
 import React from 'react'
 import { useSelectedLayoutSegment } from 'next/navigation'
 import Link from 'next/link'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { RemixiconComponentType } from '@remixicon/react'
 
 export type NavIcon = React.ComponentType<
@@ -42,7 +42,7 @@ const NavLink = ({
   const NavIcon = isActive ? iconMap.selected : iconMap.normal
 
   const renderIcon = () => (
-    <div className={classNames(mode !== 'expand' && '-ml-1')}>
+    <div className={cn(mode !== 'expand' && '-ml-1')}>
       <NavIcon className="h-4 w-4 shrink-0" aria-hidden="true" />
     </div>
   )
@@ -53,21 +53,17 @@ const NavLink = ({
         key={name}
         type='button'
         disabled
-        className={classNames(
-          'system-sm-medium flex h-8 cursor-not-allowed items-center rounded-lg text-components-menu-item-text opacity-30 hover:bg-components-menu-item-bg-hover',
-          'pl-3 pr-1',
-        )}
+        className={cn('system-sm-medium flex h-8 cursor-not-allowed items-center rounded-lg text-components-menu-item-text opacity-30 hover:bg-components-menu-item-bg-hover',
+          'pl-3 pr-1')}
         title={mode === 'collapse' ? name : ''}
         aria-disabled
       >
         {renderIcon()}
         <span
-          className={classNames(
-            'overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out',
+          className={cn('overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out',
             mode === 'expand'
               ? 'ml-2 max-w-none opacity-100'
-              : 'ml-0 max-w-0 opacity-0',
-          )}
+              : 'ml-0 max-w-0 opacity-0')}
         >
           {name}
         </span>
@@ -79,22 +75,18 @@ const NavLink = ({
     <Link
       key={name}
       href={href}
-      className={classNames(
-        isActive
-          ? 'system-sm-semibold border-b-[0.25px] border-l-[0.75px] border-r-[0.25px] border-t-[0.75px] border-effects-highlight-lightmode-off bg-components-menu-item-bg-active text-text-accent-light-mode-only'
-          : 'system-sm-medium text-components-menu-item-text hover:bg-components-menu-item-bg-hover hover:text-components-menu-item-text-hover',
-        'flex h-8 items-center rounded-lg pl-3 pr-1',
-      )}
+      className={cn(isActive
+        ? 'system-sm-semibold border-b-[0.25px] border-l-[0.75px] border-r-[0.25px] border-t-[0.75px] border-effects-highlight-lightmode-off bg-components-menu-item-bg-active text-text-accent-light-mode-only'
+        : 'system-sm-medium text-components-menu-item-text hover:bg-components-menu-item-bg-hover hover:text-components-menu-item-text-hover',
+      'flex h-8 items-center rounded-lg pl-3 pr-1')}
       title={mode === 'collapse' ? name : ''}
     >
       {renderIcon()}
       <span
-        className={classNames(
-          'overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out',
+        className={cn('overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out',
           mode === 'expand'
             ? 'ml-2 max-w-none opacity-100'
-            : 'ml-0 max-w-0 opacity-0',
-        )}
+            : 'ml-0 max-w-0 opacity-0')}
       >
         {name}
       </span>
diff --git a/web/app/components/app-sidebar/toggle-button.tsx b/web/app/components/app-sidebar/toggle-button.tsx
index 8de6f887f6..4f69adfc34 100644
--- a/web/app/components/app-sidebar/toggle-button.tsx
+++ b/web/app/components/app-sidebar/toggle-button.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import Button from '../base/button'
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '../base/tooltip'
 import { useTranslation } from 'react-i18next'
 import { getKeyboardKeyNameBySystem } from '../workflow/utils'
diff --git a/web/app/components/app/annotation/batch-action.tsx b/web/app/components/app/annotation/batch-action.tsx
index 6e80d0c4c8..6ff392d17e 100644
--- a/web/app/components/app/annotation/batch-action.tsx
+++ b/web/app/components/app/annotation/batch-action.tsx
@@ -3,7 +3,7 @@ import { RiDeleteBinLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import Divider from '@/app/components/base/divider'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Confirm from '@/app/components/base/confirm'
 
 const i18nPrefix = 'appAnnotation.batchAction'
@@ -38,7 +38,7 @@ const BatchAction: FC<IBatchActionProps> = ({
     setIsNotDeleting()
   }
   return (
-    <div className={classNames('pointer-events-none flex w-full justify-center', className)}>
+    <div className={cn('pointer-events-none flex w-full justify-center', className)}>
       <div className='pointer-events-auto flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]'>
         <div className='inline-flex items-center gap-x-2 py-1 pl-2 pr-3'>
           <span className='flex h-5 w-5 items-center justify-center rounded-md bg-text-accent px-1 py-0.5 text-xs font-medium text-text-primary-on-surface'>
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 ccad46b860..c9766135df 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
@@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { RiDeleteBinLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
 import { ToastContext } from '@/app/components/base/toast'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.spec.tsx b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.spec.tsx
index 1f32e55928..95a5586292 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.spec.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.spec.tsx
@@ -245,7 +245,7 @@ describe('EditItem', () => {
       expect(mockSave).toHaveBeenCalledWith('Test save content')
     })
 
-    it('should show delete option when content changes', async () => {
+    it('should show delete option and restore original content when delete is clicked', async () => {
       // Arrange
       const mockSave = jest.fn().mockResolvedValue(undefined)
       const props = {
@@ -267,7 +267,13 @@ describe('EditItem', () => {
       await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
       // Assert
-      expect(mockSave).toHaveBeenCalledWith('Modified content')
+      expect(mockSave).toHaveBeenNthCalledWith(1, 'Modified content')
+      expect(await screen.findByText('common.operation.delete')).toBeInTheDocument()
+
+      await user.click(screen.getByText('common.operation.delete'))
+
+      expect(mockSave).toHaveBeenNthCalledWith(2, 'Test content')
+      expect(screen.queryByText('common.operation.delete')).not.toBeInTheDocument()
     })
 
     it('should handle keyboard interactions in edit mode', async () => {
@@ -393,5 +399,68 @@ describe('EditItem', () => {
       expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
       expect(screen.getByText('Test content')).toBeInTheDocument()
     })
+
+    it('should handle save failure gracefully in edit mode', async () => {
+      // Arrange
+      const mockSave = jest.fn().mockRejectedValueOnce(new Error('Save failed'))
+      const props = {
+        ...defaultProps,
+        onSave: mockSave,
+      }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Enter edit mode and save (should fail)
+      await user.click(screen.getByText('common.operation.edit'))
+      const textarea = screen.getByRole('textbox')
+      await user.type(textarea, 'New content')
+
+      // Save should fail but not throw
+      await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+      // Assert - Should remain in edit mode when save fails
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeInTheDocument()
+      expect(mockSave).toHaveBeenCalledWith('New content')
+    })
+
+    it('should handle delete action failure gracefully', async () => {
+      // Arrange
+      const mockSave = jest.fn()
+        .mockResolvedValueOnce(undefined) // First save succeeds
+        .mockRejectedValueOnce(new Error('Delete failed')) // Delete fails
+      const props = {
+        ...defaultProps,
+        onSave: mockSave,
+      }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Edit content to show delete button
+      await user.click(screen.getByText('common.operation.edit'))
+      const textarea = screen.getByRole('textbox')
+      await user.clear(textarea)
+      await user.type(textarea, 'Modified content')
+
+      // Save to create new content
+      await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
+      await screen.findByText('common.operation.delete')
+
+      // Click delete (should fail but not throw)
+      await user.click(screen.getByText('common.operation.delete'))
+
+      // Assert - Delete action should handle error gracefully
+      expect(mockSave).toHaveBeenCalledTimes(2)
+      expect(mockSave).toHaveBeenNthCalledWith(1, 'Modified content')
+      expect(mockSave).toHaveBeenNthCalledWith(2, 'Test content')
+
+      // When delete fails, the delete button should still be visible (state not changed)
+      expect(screen.getByText('common.operation.delete')).toBeInTheDocument()
+      expect(screen.getByText('Modified content')).toBeInTheDocument()
+    })
   })
 })
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 e808d0b48a..6ba830967d 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
@@ -6,7 +6,7 @@ import { RiDeleteBinLine, RiEditFill, RiEditLine } from '@remixicon/react'
 import { Robot, User } from '@/app/components/base/icons/src/public/avatar'
 import Textarea from '@/app/components/base/textarea'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export enum EditItemType {
   Query = 'query',
@@ -52,8 +52,14 @@ const EditItem: FC<Props> = ({
   }, [content])
 
   const handleSave = async () => {
-    await onSave(newContent)
-    setIsEdit(false)
+    try {
+      await onSave(newContent)
+      setIsEdit(false)
+    }
+    catch {
+      // Keep edit mode open when save fails
+      // Error notification is handled by the parent component
+    }
   }
 
   const handleCancel = () => {
@@ -96,9 +102,16 @@ const EditItem: FC<Props> = ({
                     <div className='mr-2'>·</div>
                     <div
                       className='flex cursor-pointer items-center space-x-1'
-                      onClick={() => {
-                        setNewContent(content)
-                        onSave(content)
+                      onClick={async () => {
+                        try {
+                          await onSave(content)
+                          // Only update UI state after successful delete
+                          setNewContent(content)
+                        }
+                        catch {
+                          // Delete action failed - error is already handled by parent
+                          // UI state remains unchanged, user can retry
+                        }
                       }}
                     >
                       <div className='h-3.5 w-3.5'>
diff --git a/web/app/components/app/annotation/edit-annotation-modal/index.spec.tsx b/web/app/components/app/annotation/edit-annotation-modal/index.spec.tsx
index b48f8a2a4a..bdc991116c 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/index.spec.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/index.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 Toast, { type IToastProps, type ToastHandle } from '@/app/components/base/toast'
 import EditAnnotationModal from './index'
@@ -408,7 +408,7 @@ describe('EditAnnotationModal', () => {
 
   // Error Handling (CRITICAL for coverage)
   describe('Error Handling', () => {
-    it('should handle addAnnotation API failure gracefully', async () => {
+    it('should show error toast and skip callbacks when addAnnotation fails', async () => {
       // Arrange
       const mockOnAdded = jest.fn()
       const props = {
@@ -420,29 +420,75 @@ describe('EditAnnotationModal', () => {
       // Mock API failure
       mockAddAnnotation.mockRejectedValueOnce(new Error('API Error'))
 
-      // Act & Assert - Should handle API error without crashing
-      expect(async () => {
-        render(<EditAnnotationModal {...props} />)
+      // Act
+      render(<EditAnnotationModal {...props} />)
 
-        // Find and click edit link for query
-        const editLinks = screen.getAllByText(/common\.operation\.edit/i)
-        await user.click(editLinks[0])
+      // Find and click edit link for query
+      const editLinks = screen.getAllByText(/common\.operation\.edit/i)
+      await user.click(editLinks[0])
 
-        // Find textarea and enter new content
-        const textarea = screen.getByRole('textbox')
-        await user.clear(textarea)
-        await user.type(textarea, 'New query content')
+      // Find textarea and enter new content
+      const textarea = screen.getByRole('textbox')
+      await user.clear(textarea)
+      await user.type(textarea, 'New query content')
 
-        // Click save button
-        const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
-        await user.click(saveButton)
+      // Click save button
+      const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+      await user.click(saveButton)
 
-        // Should not call onAdded on error
-        expect(mockOnAdded).not.toHaveBeenCalled()
-      }).not.toThrow()
+      // Assert
+      await waitFor(() => {
+        expect(toastNotifySpy).toHaveBeenCalledWith({
+          message: 'API Error',
+          type: 'error',
+        })
+      })
+      expect(mockOnAdded).not.toHaveBeenCalled()
+
+      // Verify edit mode remains open (textarea should still be visible)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeInTheDocument()
     })
 
-    it('should handle editAnnotation API failure gracefully', async () => {
+    it('should show fallback error message when addAnnotation error has no message', async () => {
+      // Arrange
+      const mockOnAdded = jest.fn()
+      const props = {
+        ...defaultProps,
+        onAdded: mockOnAdded,
+      }
+      const user = userEvent.setup()
+
+      mockAddAnnotation.mockRejectedValueOnce({})
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      const editLinks = screen.getAllByText(/common\.operation\.edit/i)
+      await user.click(editLinks[0])
+
+      const textarea = screen.getByRole('textbox')
+      await user.clear(textarea)
+      await user.type(textarea, 'New query content')
+
+      const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+      await user.click(saveButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(toastNotifySpy).toHaveBeenCalledWith({
+          message: 'common.api.actionFailed',
+          type: 'error',
+        })
+      })
+      expect(mockOnAdded).not.toHaveBeenCalled()
+
+      // Verify edit mode remains open (textarea should still be visible)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeInTheDocument()
+    })
+
+    it('should show error toast and skip callbacks when editAnnotation fails', async () => {
       // Arrange
       const mockOnEdited = jest.fn()
       const props = {
@@ -456,24 +502,72 @@ describe('EditAnnotationModal', () => {
       // Mock API failure
       mockEditAnnotation.mockRejectedValueOnce(new Error('API Error'))
 
-      // Act & Assert - Should handle API error without crashing
-      expect(async () => {
-        render(<EditAnnotationModal {...props} />)
+      // Act
+      render(<EditAnnotationModal {...props} />)
 
-        // Edit query content
-        const editLinks = screen.getAllByText(/common\.operation\.edit/i)
-        await user.click(editLinks[0])
+      // Edit query content
+      const editLinks = screen.getAllByText(/common\.operation\.edit/i)
+      await user.click(editLinks[0])
 
-        const textarea = screen.getByRole('textbox')
-        await user.clear(textarea)
-        await user.type(textarea, 'Modified query')
+      const textarea = screen.getByRole('textbox')
+      await user.clear(textarea)
+      await user.type(textarea, 'Modified query')
 
-        const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
-        await user.click(saveButton)
+      const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+      await user.click(saveButton)
 
-        // Should not call onEdited on error
-        expect(mockOnEdited).not.toHaveBeenCalled()
-      }).not.toThrow()
+      // Assert
+      await waitFor(() => {
+        expect(toastNotifySpy).toHaveBeenCalledWith({
+          message: 'API Error',
+          type: 'error',
+        })
+      })
+      expect(mockOnEdited).not.toHaveBeenCalled()
+
+      // Verify edit mode remains open (textarea should still be visible)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeInTheDocument()
+    })
+
+    it('should show fallback error message when editAnnotation error is not an Error instance', async () => {
+      // Arrange
+      const mockOnEdited = jest.fn()
+      const props = {
+        ...defaultProps,
+        annotationId: 'test-annotation-id',
+        messageId: 'test-message-id',
+        onEdited: mockOnEdited,
+      }
+      const user = userEvent.setup()
+
+      mockEditAnnotation.mockRejectedValueOnce('oops')
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      const editLinks = screen.getAllByText(/common\.operation\.edit/i)
+      await user.click(editLinks[0])
+
+      const textarea = screen.getByRole('textbox')
+      await user.clear(textarea)
+      await user.type(textarea, 'Modified query')
+
+      const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+      await user.click(saveButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(toastNotifySpy).toHaveBeenCalledWith({
+          message: 'common.api.actionFailed',
+          type: 'error',
+        })
+      })
+      expect(mockOnEdited).not.toHaveBeenCalled()
+
+      // Verify edit mode remains open (textarea should still be visible)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeInTheDocument()
     })
   })
 
@@ -526,25 +620,33 @@ describe('EditAnnotationModal', () => {
     })
   })
 
-  // Toast Notifications (Simplified)
+  // Toast Notifications (Success)
   describe('Toast Notifications', () => {
-    it('should trigger success notification when save operation completes', async () => {
+    it('should show success notification when save operation completes', async () => {
       // Arrange
-      const mockOnAdded = jest.fn()
-      const props = {
-        ...defaultProps,
-        onAdded: mockOnAdded,
-      }
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
 
       // Act
       render(<EditAnnotationModal {...props} />)
 
-      // Simulate successful save by calling handleSave indirectly
-      const mockSave = jest.fn()
-      expect(mockSave).not.toHaveBeenCalled()
+      const editLinks = screen.getAllByText(/common\.operation\.edit/i)
+      await user.click(editLinks[0])
 
-      // Assert - Toast spy is available and will be called during real save operations
-      expect(toastNotifySpy).toBeDefined()
+      const textarea = screen.getByRole('textbox')
+      await user.clear(textarea)
+      await user.type(textarea, 'Updated query')
+
+      const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+      await user.click(saveButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(toastNotifySpy).toHaveBeenCalledWith({
+          message: 'common.api.actionSuccess',
+          type: 'success',
+        })
+      })
     })
   })
 
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 2961ce393c..6172a215e4 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/index.tsx
@@ -53,27 +53,39 @@ const EditAnnotationModal: FC<Props> = ({
       postQuery = editedContent
     else
       postAnswer = editedContent
-    if (!isAdd) {
-      await editAnnotation(appId, annotationId, {
-        message_id: messageId,
-        question: postQuery,
-        answer: postAnswer,
-      })
-      onEdited(postQuery, postAnswer)
-    }
-    else {
-      const res: any = await addAnnotation(appId, {
-        question: postQuery,
-        answer: postAnswer,
-        message_id: messageId,
-      })
-      onAdded(res.id, res.account?.name, postQuery, postAnswer)
-    }
+    try {
+      if (!isAdd) {
+        await editAnnotation(appId, annotationId, {
+          message_id: messageId,
+          question: postQuery,
+          answer: postAnswer,
+        })
+        onEdited(postQuery, postAnswer)
+      }
+      else {
+        const res = await addAnnotation(appId, {
+          question: postQuery,
+          answer: postAnswer,
+          message_id: messageId,
+        })
+        onAdded(res.id, res.account?.name ?? '', postQuery, postAnswer)
+      }
 
-    Toast.notify({
-      message: t('common.api.actionSuccess') as string,
-      type: 'success',
-    })
+      Toast.notify({
+        message: t('common.api.actionSuccess') as string,
+        type: 'success',
+      })
+    }
+    catch (error) {
+      const fallbackMessage = t('common.api.actionFailed') as string
+      const message = error instanceof Error && error.message ? error.message : fallbackMessage
+      Toast.notify({
+        message,
+        type: 'error',
+      })
+      // Re-throw to preserve edit mode behavior for UI components
+      throw error
+    }
   }
   const [showModal, setShowModal] = useState(false)
 
diff --git a/web/app/components/app/annotation/header-opts/index.spec.tsx b/web/app/components/app/annotation/header-opts/index.spec.tsx
index 8c640c2790..3d8a1fd4ef 100644
--- a/web/app/components/app/annotation/header-opts/index.spec.tsx
+++ b/web/app/components/app/annotation/header-opts/index.spec.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import type { ComponentProps } from 'react'
@@ -7,6 +8,120 @@ import { LanguagesSupported } from '@/i18n-config/language'
 import type { AnnotationItemBasic } from '../type'
 import { clearAllAnnotations, fetchExportAnnotationList } from '@/service/annotation'
 
+jest.mock('@headlessui/react', () => {
+  type PopoverContextValue = { open: boolean; setOpen: (open: boolean) => void }
+  type MenuContextValue = { open: boolean; setOpen: (open: boolean) => void }
+  const PopoverContext = React.createContext<PopoverContextValue | null>(null)
+  const MenuContext = React.createContext<MenuContextValue | null>(null)
+
+  const Popover = ({ children }: { children: React.ReactNode | ((props: { open: boolean }) => React.ReactNode) }) => {
+    const [open, setOpen] = React.useState(false)
+    const value = React.useMemo(() => ({ open, setOpen }), [open])
+    return (
+      <PopoverContext.Provider value={value}>
+        {typeof children === 'function' ? children({ open }) : children}
+      </PopoverContext.Provider>
+    )
+  }
+
+  const PopoverButton = React.forwardRef(({ onClick, children, ...props }: { onClick?: () => void; children?: React.ReactNode }, ref: React.Ref<HTMLButtonElement>) => {
+    const context = React.useContext(PopoverContext)
+    const handleClick = () => {
+      context?.setOpen(!context.open)
+      onClick?.()
+    }
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-expanded={context?.open ?? false}
+        onClick={handleClick}
+        {...props}
+      >
+        {children}
+      </button>
+    )
+  })
+
+  const PopoverPanel = React.forwardRef(({ children, ...props }: { children: React.ReactNode | ((props: { close: () => void }) => React.ReactNode) }, ref: React.Ref<HTMLDivElement>) => {
+    const context = React.useContext(PopoverContext)
+    if (!context?.open) return null
+    const content = typeof children === 'function' ? children({ close: () => context.setOpen(false) }) : children
+    return (
+      <div ref={ref} {...props}>
+        {content}
+      </div>
+    )
+  })
+
+  const Menu = ({ children }: { children: React.ReactNode }) => {
+    const [open, setOpen] = React.useState(false)
+    const value = React.useMemo(() => ({ open, setOpen }), [open])
+    return (
+      <MenuContext.Provider value={value}>
+        {children}
+      </MenuContext.Provider>
+    )
+  }
+
+  const MenuButton = ({ onClick, children, ...props }: { onClick?: () => void; children?: React.ReactNode }) => {
+    const context = React.useContext(MenuContext)
+    const handleClick = () => {
+      context?.setOpen(!context.open)
+      onClick?.()
+    }
+    return (
+      <button type="button" aria-expanded={context?.open ?? false} onClick={handleClick} {...props}>
+        {children}
+      </button>
+    )
+  }
+
+  const MenuItems = ({ children, ...props }: { children: React.ReactNode }) => {
+    const context = React.useContext(MenuContext)
+    if (!context?.open) return null
+    return (
+      <div {...props}>
+        {children}
+      </div>
+    )
+  }
+
+  return {
+    Dialog: ({ open, children, className }: { open?: boolean; children: React.ReactNode; className?: string }) => {
+      if (open === false) return null
+      return (
+        <div role="dialog" className={className}>
+          {children}
+        </div>
+      )
+    },
+    DialogBackdrop: ({ children, className, onClick }: { children?: React.ReactNode; className?: string; onClick?: () => void }) => (
+      <div className={className} onClick={onClick}>
+        {children}
+      </div>
+    ),
+    DialogPanel: ({ children, className, ...props }: { children: React.ReactNode; className?: string }) => (
+      <div className={className} {...props}>
+        {children}
+      </div>
+    ),
+    DialogTitle: ({ children, className, ...props }: { children: React.ReactNode; className?: string }) => (
+      <div className={className} {...props}>
+        {children}
+      </div>
+    ),
+    Popover,
+    PopoverButton,
+    PopoverPanel,
+    Menu,
+    MenuButton,
+    MenuItems,
+    Transition: ({ show = true, children }: { show?: boolean; children: React.ReactNode }) => (show ? <>{children}</> : null),
+    TransitionChild: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  }
+})
+
 let lastCSVDownloaderProps: Record<string, unknown> | undefined
 const mockCSVDownloader = jest.fn(({ children, ...props }) => {
   lastCSVDownloaderProps = props
@@ -121,6 +236,7 @@ const mockedClearAllAnnotations = jest.mocked(clearAllAnnotations)
 describe('HeaderOptions', () => {
   beforeEach(() => {
     jest.clearAllMocks()
+    jest.useRealTimers()
     mockCSVDownloader.mockClear()
     lastCSVDownloaderProps = undefined
     mockedFetchAnnotations.mockResolvedValue({ data: [] })
diff --git a/web/app/components/app/annotation/header-opts/index.tsx b/web/app/components/app/annotation/header-opts/index.tsx
index 024f75867c..5f8ef658e7 100644
--- a/web/app/components/app/annotation/header-opts/index.tsx
+++ b/web/app/components/app/annotation/header-opts/index.tsx
@@ -17,7 +17,7 @@ import Button from '../../../base/button'
 import AddAnnotationModal from '../add-annotation-modal'
 import type { AnnotationItemBasic } from '../type'
 import BatchAddModal from '../batch-add-annotation-modal'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import CustomPopover from '@/app/components/base/popover'
 import { FileDownload02, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
diff --git a/web/app/components/app/annotation/index.tsx b/web/app/components/app/annotation/index.tsx
index 32d0c799fc..2d639c91e4 100644
--- a/web/app/components/app/annotation/index.tsx
+++ b/web/app/components/app/annotation/index.tsx
@@ -25,7 +25,7 @@ import { sleep } from '@/utils'
 import { useProviderContext } from '@/context/provider-context'
 import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
 import { type App, AppModeEnum } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { delAnnotations } from '@/service/annotation'
 
 type Props = {
diff --git a/web/app/components/app/annotation/list.tsx b/web/app/components/app/annotation/list.tsx
index 4135b4362e..62a0c50e60 100644
--- a/web/app/components/app/annotation/list.tsx
+++ b/web/app/components/app/annotation/list.tsx
@@ -7,7 +7,7 @@ import type { AnnotationItem } from './type'
 import RemoveAnnotationConfirmModal from './remove-annotation-confirm-modal'
 import ActionButton from '@/app/components/base/action-button'
 import useTimestamp from '@/hooks/use-timestamp'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Checkbox from '@/app/components/base/checkbox'
 import BatchAction from './batch-action'
 
diff --git a/web/app/components/app/annotation/type.ts b/web/app/components/app/annotation/type.ts
index 5df6f51ace..e2f2264f07 100644
--- a/web/app/components/app/annotation/type.ts
+++ b/web/app/components/app/annotation/type.ts
@@ -12,6 +12,12 @@ export type AnnotationItem = {
   hit_count: number
 }
 
+export type AnnotationCreateResponse = AnnotationItem & {
+  account?: {
+    name?: string
+  }
+}
+
 export type HitHistoryItem = {
   id: string
   question: string
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 8426ab0005..d21b177098 100644
--- a/web/app/components/app/annotation/view-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/view-annotation-modal/index.tsx
@@ -14,7 +14,7 @@ import TabSlider from '@/app/components/base/tab-slider-plain'
 import { fetchHitHistoryList } from '@/service/annotation'
 import { APP_PAGE_LIMIT } from '@/config'
 import useTimestamp from '@/hooks/use-timestamp'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   appId: string
diff --git a/web/app/components/app/app-access-control/access-control-dialog.tsx b/web/app/components/app/app-access-control/access-control-dialog.tsx
index ee3fa9650b..99cf6d7074 100644
--- a/web/app/components/app/app-access-control/access-control-dialog.tsx
+++ b/web/app/components/app/app-access-control/access-control-dialog.tsx
@@ -2,7 +2,7 @@ import { Fragment, useCallback } from 'react'
 import type { ReactNode } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
 import { RiCloseLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type DialogProps = {
   className?: string
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 bb8dabbae6..17263fdd46 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
@@ -11,7 +11,7 @@ import Input from '../../base/input'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
 import Loading from '../../base/loading'
 import useAccessControlStore from '../../../../context/access-control-store'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useSearchForWhiteListCandidates } from '@/service/access-control'
 import type { AccessControlAccount, AccessControlGroup, Subject, SubjectAccount, SubjectGroup } from '@/models/access-control'
 import { SubjectType } from '@/models/access-control'
@@ -106,7 +106,7 @@ function SelectedGroupsBreadCrumb() {
     setSelectedGroupsForBreadcrumb([])
   }, [setSelectedGroupsForBreadcrumb])
   return <div className='flex h-7 items-center gap-x-0.5 px-2 py-0.5'>
-    <span className={classNames('system-xs-regular text-text-tertiary', selectedGroupsForBreadcrumb.length > 0 && 'cursor-pointer text-text-accent')} onClick={handleReset}>{t('app.accessControlDialog.operateGroupAndMember.allMembers')}</span>
+    <span className={cn('system-xs-regular text-text-tertiary', selectedGroupsForBreadcrumb.length > 0 && 'cursor-pointer text-text-accent')} onClick={handleReset}>{t('app.accessControlDialog.operateGroupAndMember.allMembers')}</span>
     {selectedGroupsForBreadcrumb.map((group, index) => {
       return <div key={index} className='system-xs-regular flex items-center gap-x-0.5 text-text-tertiary'>
         <span>/</span>
@@ -198,7 +198,7 @@ type BaseItemProps = {
   children: React.ReactNode
 }
 function BaseItem({ children, className }: BaseItemProps) {
-  return <div className={classNames('flex cursor-pointer items-center space-x-2 p-1 pl-2 hover:rounded-lg hover:bg-state-base-hover', className)}>
+  return <div className={cn('flex cursor-pointer items-center space-x-2 p-1 pl-2 hover:rounded-lg hover:bg-state-base-hover', className)}>
     {children}
   </div>
 }
diff --git a/web/app/components/app/app-publisher/suggested-action.tsx b/web/app/components/app/app-publisher/suggested-action.tsx
index 2535de6654..154bacc361 100644
--- a/web/app/components/app/app-publisher/suggested-action.tsx
+++ b/web/app/components/app/app-publisher/suggested-action.tsx
@@ -1,6 +1,6 @@
 import type { HTMLProps, PropsWithChildren } from 'react'
 import { RiArrowRightUpLine } from '@remixicon/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type SuggestedActionProps = PropsWithChildren<HTMLProps<HTMLAnchorElement> & {
   icon?: React.ReactNode
@@ -19,11 +19,9 @@ const SuggestedAction = ({ icon, link, disabled, children, className, onClick, .
       href={disabled ? undefined : link}
       target='_blank'
       rel='noreferrer'
-      className={classNames(
-        'flex items-center justify-start gap-2 rounded-lg bg-background-section-burn px-2.5 py-2 text-text-secondary transition-colors [&:not(:first-child)]:mt-1',
+      className={cn('flex items-center justify-start gap-2 rounded-lg bg-background-section-burn px-2.5 py-2 text-text-secondary transition-colors [&:not(:first-child)]:mt-1',
         disabled ? 'cursor-not-allowed opacity-30 shadow-xs' : 'cursor-pointer text-text-secondary hover:bg-state-accent-hover hover:text-text-accent',
-        className,
-      )}
+        className)}
       onClick={handleClick}
       {...props}
     >
diff --git a/web/app/components/app/configuration/base/feature-panel/index.tsx b/web/app/components/app/configuration/base/feature-panel/index.tsx
index ec5ab96d76..c9ebfefbe5 100644
--- a/web/app/components/app/configuration/base/feature-panel/index.tsx
+++ b/web/app/components/app/configuration/base/feature-panel/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC, ReactNode } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type IFeaturePanelProps = {
   className?: string
diff --git a/web/app/components/app/configuration/base/operation-btn/index.tsx b/web/app/components/app/configuration/base/operation-btn/index.tsx
index aba35cded2..db19d2976e 100644
--- a/web/app/components/app/configuration/base/operation-btn/index.tsx
+++ b/web/app/components/app/configuration/base/operation-btn/index.tsx
@@ -6,7 +6,7 @@ import {
   RiAddLine,
   RiEditLine,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 export type IOperationBtnProps = {
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 5bf2f177ff..6492864ce2 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
@@ -14,7 +14,7 @@ import s from './style.module.css'
 import MessageTypeSelector from './message-type-selector'
 import ConfirmAddVar from './confirm-add-var'
 import PromptEditorHeightResizeWrap from './prompt-editor-height-resize-wrap'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { PromptRole, PromptVariable } from '@/models/debug'
 import {
   Copy,
diff --git a/web/app/components/app/configuration/config-prompt/message-type-selector.tsx b/web/app/components/app/configuration/config-prompt/message-type-selector.tsx
index 17b3ecb2f1..71f3e6ee5f 100644
--- a/web/app/components/app/configuration/config-prompt/message-type-selector.tsx
+++ b/web/app/components/app/configuration/config-prompt/message-type-selector.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useBoolean, useClickAway } from 'ahooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { PromptRole } from '@/models/debug'
 import { ChevronSelectorVertical } from '@/app/components/base/icons/src/vender/line/arrows'
 type Props = {
diff --git a/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx b/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx
index 9e10db93ae..90a19c883a 100644
--- a/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx
+++ b/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx
@@ -2,7 +2,7 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import type { FC } from 'react'
 import { useDebounceFn } from 'ahooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
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 68bf6dd7c2..e4c21b0cbc 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
@@ -7,7 +7,7 @@ import { produce } from 'immer'
 import { useContext } from 'use-context-selector'
 import ConfirmAddVar from './confirm-add-var'
 import PromptEditorHeightResizeWrap from './prompt-editor-height-resize-wrap'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { PromptVariable } from '@/models/debug'
 import Tooltip from '@/app/components/base/tooltip'
 import { AppModeEnum } from '@/types/app'
diff --git a/web/app/components/app/configuration/config-var/config-modal/field.tsx b/web/app/components/app/configuration/config-var/config-modal/field.tsx
index b24e0be6ce..76d228358a 100644
--- a/web/app/components/app/configuration/config-var/config-modal/field.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/field.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 type Props = {
diff --git a/web/app/components/app/configuration/config-var/config-modal/type-select.tsx b/web/app/components/app/configuration/config-var/config-modal/type-select.tsx
index 2b52991d4a..53d59eb24b 100644
--- a/web/app/components/app/configuration/config-var/config-modal/type-select.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/type-select.tsx
@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
-import classNames from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -10,7 +9,7 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
 import type { InputVarType } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Badge from '@/app/components/base/badge'
 import { inputVarTypeToVarType } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 
@@ -47,7 +46,7 @@ const TypeSelector: FC<Props> = ({
     >
       <PortalToFollowElemTrigger onClick={() => !readonly && setOpen(v => !v)} className='w-full'>
         <div
-          className={classNames(`group flex h-9 items-center justify-between rounded-lg border-0 bg-components-input-bg-normal px-2 text-sm hover:bg-state-base-hover-alt ${readonly ? 'cursor-not-allowed' : 'cursor-pointer'}`)}
+          className={cn(`group flex h-9 items-center justify-between rounded-lg border-0 bg-components-input-bg-normal px-2 text-sm hover:bg-state-base-hover-alt ${readonly ? 'cursor-not-allowed' : 'cursor-pointer'}`)}
           title={selectedItem?.name}
         >
           <div className='flex items-center'>
@@ -69,7 +68,7 @@ const TypeSelector: FC<Props> = ({
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[61]'>
         <div
-          className={classNames('w-[432px] rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm', popupInnerClassName)}
+          className={cn('w-[432px] rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm', popupInnerClassName)}
         >
           {items.map((item: Item) => (
             <div
diff --git a/web/app/components/app/configuration/config-var/config-select/index.tsx b/web/app/components/app/configuration/config-var/config-select/index.tsx
index 713a715f1c..99ce45508d 100644
--- a/web/app/components/app/configuration/config-var/config-select/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-select/index.tsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react'
 import { RiAddLine, RiDeleteBinLine, RiDraggable } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { ReactSortable } from 'react-sortablejs'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type Options = string[]
 export type IConfigSelectProps = {
diff --git a/web/app/components/app/configuration/config-var/index.tsx b/web/app/components/app/configuration/config-var/index.tsx
index 4090b39a3b..c6613bfbe4 100644
--- a/web/app/components/app/configuration/config-var/index.tsx
+++ b/web/app/components/app/configuration/config-var/index.tsx
@@ -23,7 +23,7 @@ import { useModalContext } from '@/context/modal-context'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import type { InputVar } from '@/app/components/workflow/types'
 import { InputVarType } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export const ADD_EXTERNAL_DATA_TOOL = 'ADD_EXTERNAL_DATA_TOOL'
 
diff --git a/web/app/components/app/configuration/config-var/select-type-item/index.tsx b/web/app/components/app/configuration/config-var/select-type-item/index.tsx
index a952bcf02a..58d463ac60 100644
--- a/web/app/components/app/configuration/config-var/select-type-item/index.tsx
+++ b/web/app/components/app/configuration/config-var/select-type-item/index.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { InputVarType } from '@/app/components/workflow/types'
 import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
 export type ISelectTypeItemProps = {
diff --git a/web/app/components/app/configuration/config-var/var-item.tsx b/web/app/components/app/configuration/config-var/var-item.tsx
index 88cd5d7843..5ddb61a0e5 100644
--- a/web/app/components/app/configuration/config-var/var-item.tsx
+++ b/web/app/components/app/configuration/config-var/var-item.tsx
@@ -10,7 +10,7 @@ import type { IInputTypeIconProps } from './input-type-icon'
 import IconTypeIcon from './input-type-icon'
 import { BracketsX as VarIcon } from '@/app/components/base/icons/src/vender/line/development'
 import Badge from '@/app/components/base/badge'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ItemProps = {
   className?: string
diff --git a/web/app/components/app/configuration/config-vision/index.spec.tsx b/web/app/components/app/configuration/config-vision/index.spec.tsx
new file mode 100644
index 0000000000..e22db7b24e
--- /dev/null
+++ b/web/app/components/app/configuration/config-vision/index.spec.tsx
@@ -0,0 +1,227 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import ConfigVision from './index'
+import ParamConfig from './param-config'
+import ParamConfigContent from './param-config-content'
+import type { FeatureStoreState } from '@/app/components/base/features/store'
+import type { FileUpload } from '@/app/components/base/features/types'
+import { Resolution, TransferMethod } from '@/types/app'
+import { SupportUploadFileTypes } from '@/app/components/workflow/types'
+
+const mockUseContext = jest.fn()
+jest.mock('use-context-selector', () => {
+  const actual = jest.requireActual('use-context-selector')
+  return {
+    ...actual,
+    useContext: (context: unknown) => mockUseContext(context),
+  }
+})
+
+const mockUseFeatures = jest.fn()
+const mockUseFeaturesStore = jest.fn()
+jest.mock('@/app/components/base/features/hooks', () => ({
+  useFeatures: (selector: (state: FeatureStoreState) => any) => mockUseFeatures(selector),
+  useFeaturesStore: () => mockUseFeaturesStore(),
+}))
+
+const defaultFile: FileUpload = {
+  enabled: false,
+  allowed_file_types: [],
+  allowed_file_upload_methods: [TransferMethod.local_file, TransferMethod.remote_url],
+  number_limits: 3,
+  image: {
+    enabled: false,
+    detail: Resolution.low,
+    number_limits: 3,
+    transfer_methods: [TransferMethod.local_file, TransferMethod.remote_url],
+  },
+}
+
+let featureStoreState: FeatureStoreState
+let setFeaturesMock: jest.Mock
+
+const setupFeatureStore = (fileOverrides: Partial<FileUpload> = {}) => {
+  const mergedFile: FileUpload = {
+    ...defaultFile,
+    ...fileOverrides,
+    image: {
+      ...defaultFile.image,
+      ...fileOverrides.image,
+    },
+  }
+  featureStoreState = {
+    features: {
+      file: mergedFile,
+    },
+    setFeatures: jest.fn(),
+    showFeaturesModal: false,
+    setShowFeaturesModal: jest.fn(),
+  }
+  setFeaturesMock = featureStoreState.setFeatures as jest.Mock
+  mockUseFeaturesStore.mockReturnValue({
+    getState: () => featureStoreState,
+  })
+  mockUseFeatures.mockImplementation(selector => selector(featureStoreState))
+}
+
+const getLatestFileConfig = () => {
+  expect(setFeaturesMock).toHaveBeenCalled()
+  const latestFeatures = setFeaturesMock.mock.calls[setFeaturesMock.mock.calls.length - 1][0] as { file: FileUpload }
+  return latestFeatures.file
+}
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  mockUseContext.mockReturnValue({
+    isShowVisionConfig: true,
+    isAllowVideoUpload: false,
+  })
+  setupFeatureStore()
+})
+
+// ConfigVision handles toggling file upload types + visibility rules.
+describe('ConfigVision', () => {
+  it('should not render when vision configuration is hidden', () => {
+    mockUseContext.mockReturnValue({
+      isShowVisionConfig: false,
+      isAllowVideoUpload: false,
+    })
+
+    render(<ConfigVision />)
+
+    expect(screen.queryByText('appDebug.vision.name')).not.toBeInTheDocument()
+  })
+
+  it('should show the toggle and parameter controls when visible', () => {
+    render(<ConfigVision />)
+
+    expect(screen.getByText('appDebug.vision.name')).toBeInTheDocument()
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'false')
+  })
+
+  it('should enable both image and video uploads when toggled on with video support', async () => {
+    const user = userEvent.setup()
+    mockUseContext.mockReturnValue({
+      isShowVisionConfig: true,
+      isAllowVideoUpload: true,
+    })
+    setupFeatureStore({
+      allowed_file_types: [],
+    })
+
+    render(<ConfigVision />)
+    await user.click(screen.getByRole('switch'))
+
+    const updatedFile = getLatestFileConfig()
+    expect(updatedFile.allowed_file_types).toEqual([SupportUploadFileTypes.image, SupportUploadFileTypes.video])
+    expect(updatedFile.image?.enabled).toBe(true)
+    expect(updatedFile.enabled).toBe(true)
+  })
+
+  it('should disable image and video uploads when toggled off and no other types remain', async () => {
+    const user = userEvent.setup()
+    mockUseContext.mockReturnValue({
+      isShowVisionConfig: true,
+      isAllowVideoUpload: true,
+    })
+    setupFeatureStore({
+      allowed_file_types: [SupportUploadFileTypes.image, SupportUploadFileTypes.video],
+      enabled: true,
+      image: {
+        enabled: true,
+      },
+    })
+
+    render(<ConfigVision />)
+    await user.click(screen.getByRole('switch'))
+
+    const updatedFile = getLatestFileConfig()
+    expect(updatedFile.allowed_file_types).toEqual([])
+    expect(updatedFile.enabled).toBe(false)
+    expect(updatedFile.image?.enabled).toBe(false)
+  })
+
+  it('should keep file uploads enabled when other file types remain after disabling vision', async () => {
+    const user = userEvent.setup()
+    mockUseContext.mockReturnValue({
+      isShowVisionConfig: true,
+      isAllowVideoUpload: false,
+    })
+    setupFeatureStore({
+      allowed_file_types: [SupportUploadFileTypes.image, SupportUploadFileTypes.document],
+      enabled: true,
+      image: { enabled: true },
+    })
+
+    render(<ConfigVision />)
+    await user.click(screen.getByRole('switch'))
+
+    const updatedFile = getLatestFileConfig()
+    expect(updatedFile.allowed_file_types).toEqual([SupportUploadFileTypes.document])
+    expect(updatedFile.enabled).toBe(true)
+    expect(updatedFile.image?.enabled).toBe(false)
+  })
+})
+
+// ParamConfig exposes ParamConfigContent via an inline trigger.
+describe('ParamConfig', () => {
+  it('should toggle parameter panel when clicking the settings button', async () => {
+    setupFeatureStore()
+    const user = userEvent.setup()
+
+    render(<ParamConfig />)
+
+    expect(screen.queryByText('appDebug.vision.visionSettings.title')).not.toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: 'appDebug.voice.settings' }))
+
+    expect(await screen.findByText('appDebug.vision.visionSettings.title')).toBeInTheDocument()
+  })
+})
+
+// ParamConfigContent manages resolution, upload source, and count limits.
+describe('ParamConfigContent', () => {
+  it('should set resolution to high when the corresponding option is selected', async () => {
+    const user = userEvent.setup()
+    setupFeatureStore({
+      image: { detail: Resolution.low },
+    })
+
+    render(<ParamConfigContent />)
+
+    await user.click(screen.getByText('appDebug.vision.visionSettings.high'))
+
+    const updatedFile = getLatestFileConfig()
+    expect(updatedFile.image?.detail).toBe(Resolution.high)
+  })
+
+  it('should switch upload method to local only', async () => {
+    const user = userEvent.setup()
+    setupFeatureStore({
+      allowed_file_upload_methods: [TransferMethod.local_file, TransferMethod.remote_url],
+    })
+
+    render(<ParamConfigContent />)
+
+    await user.click(screen.getByText('appDebug.vision.visionSettings.localUpload'))
+
+    const updatedFile = getLatestFileConfig()
+    expect(updatedFile.allowed_file_upload_methods).toEqual([TransferMethod.local_file])
+    expect(updatedFile.image?.transfer_methods).toEqual([TransferMethod.local_file])
+  })
+
+  it('should update upload limit value when input changes', async () => {
+    setupFeatureStore({
+      number_limits: 2,
+    })
+
+    render(<ParamConfigContent />)
+    const input = screen.getByRole('spinbutton') as HTMLInputElement
+    fireEvent.change(input, { target: { value: '4' } })
+
+    const updatedFile = getLatestFileConfig()
+    expect(updatedFile.number_limits).toBe(4)
+    expect(updatedFile.image?.number_limits).toBe(4)
+  })
+})
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 5e4aac6a25..e6af188052 100644
--- a/web/app/components/app/configuration/config-vision/param-config.tsx
+++ b/web/app/components/app/configuration/config-vision/param-config.tsx
@@ -10,7 +10,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const ParamsConfig: FC = () => {
   const { t } = useTranslation()
diff --git a/web/app/components/app/configuration/config/agent-setting-button.spec.tsx b/web/app/components/app/configuration/config/agent-setting-button.spec.tsx
new file mode 100644
index 0000000000..db70865e51
--- /dev/null
+++ b/web/app/components/app/configuration/config/agent-setting-button.spec.tsx
@@ -0,0 +1,100 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import AgentSettingButton from './agent-setting-button'
+import type { AgentConfig } from '@/models/debug'
+import { AgentStrategy } from '@/types/app'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+let latestAgentSettingProps: any
+jest.mock('./agent/agent-setting', () => ({
+  __esModule: true,
+  default: (props: any) => {
+    latestAgentSettingProps = props
+    return (
+      <div data-testid="agent-setting">
+        <button onClick={() => props.onSave({ ...props.payload, max_iteration: 9 })}>
+          save-agent
+        </button>
+        <button onClick={props.onCancel}>
+          cancel-agent
+        </button>
+      </div>
+    )
+  },
+}))
+
+const createAgentConfig = (overrides: Partial<AgentConfig> = {}): AgentConfig => ({
+  enabled: true,
+  strategy: AgentStrategy.react,
+  max_iteration: 3,
+  tools: [],
+  ...overrides,
+})
+
+const setup = (overrides: Partial<React.ComponentProps<typeof AgentSettingButton>> = {}) => {
+  const props: React.ComponentProps<typeof AgentSettingButton> = {
+    isFunctionCall: false,
+    isChatModel: true,
+    onAgentSettingChange: jest.fn(),
+    agentConfig: createAgentConfig(),
+    ...overrides,
+  }
+
+  const user = userEvent.setup()
+  render(<AgentSettingButton {...props} />)
+  return { props, user }
+}
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  latestAgentSettingProps = undefined
+})
+
+describe('AgentSettingButton', () => {
+  it('should render button label from translation key', () => {
+    setup()
+
+    expect(screen.getByRole('button', { name: 'appDebug.agent.setting.name' })).toBeInTheDocument()
+  })
+
+  it('should open AgentSetting with the provided configuration when clicked', async () => {
+    const { user, props } = setup({ isFunctionCall: true, isChatModel: false })
+
+    await user.click(screen.getByRole('button', { name: 'appDebug.agent.setting.name' }))
+
+    expect(screen.getByTestId('agent-setting')).toBeInTheDocument()
+    expect(latestAgentSettingProps.isFunctionCall).toBe(true)
+    expect(latestAgentSettingProps.isChatModel).toBe(false)
+    expect(latestAgentSettingProps.payload).toEqual(props.agentConfig)
+  })
+
+  it('should call onAgentSettingChange and close when AgentSetting saves', async () => {
+    const { user, props } = setup()
+
+    await user.click(screen.getByRole('button', { name: 'appDebug.agent.setting.name' }))
+    await user.click(screen.getByText('save-agent'))
+
+    expect(props.onAgentSettingChange).toHaveBeenCalledTimes(1)
+    expect(props.onAgentSettingChange).toHaveBeenCalledWith({
+      ...props.agentConfig,
+      max_iteration: 9,
+    })
+    expect(screen.queryByTestId('agent-setting')).not.toBeInTheDocument()
+  })
+
+  it('should close AgentSetting without saving when cancel is triggered', async () => {
+    const { user, props } = setup()
+
+    await user.click(screen.getByRole('button', { name: 'appDebug.agent.setting.name' }))
+    await user.click(screen.getByText('cancel-agent'))
+
+    expect(props.onAgentSettingChange).not.toHaveBeenCalled()
+    expect(screen.queryByTestId('agent-setting')).not.toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx b/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
index 6512e11545..6193392026 100644
--- a/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 type Props = {
   className?: string
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 4793b5fe49..8dfa2f194b 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
@@ -25,7 +25,7 @@ import { MAX_TOOLS_NUM } from '@/config'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Tooltip from '@/app/components/base/tooltip'
 import { DefaultToolIcon } from '@/app/components/base/icons/src/public/other'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
 import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
 import { canFindTool } from '@/utils'
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 c5947495db..0627666b4c 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
@@ -22,7 +22,7 @@ import { CollectionType } from '@/app/components/tools/types'
 import { fetchBuiltInToolList, fetchCustomToolList, fetchModelToolList, fetchWorkflowToolList } from '@/service/tools'
 import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import {
   AuthCategory,
diff --git a/web/app/components/app/configuration/config/agent/prompt-editor.tsx b/web/app/components/app/configuration/config/agent/prompt-editor.tsx
index 71a9304d0c..78d7eef029 100644
--- a/web/app/components/app/configuration/config/agent/prompt-editor.tsx
+++ b/web/app/components/app/configuration/config/agent/prompt-editor.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import copy from 'copy-to-clipboard'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   Copy,
   CopyCheck,
diff --git a/web/app/components/app/configuration/config/assistant-type-picker/index.spec.tsx b/web/app/components/app/configuration/config/assistant-type-picker/index.spec.tsx
index f935a203fe..cda24ea045 100644
--- a/web/app/components/app/configuration/config/assistant-type-picker/index.spec.tsx
+++ b/web/app/components/app/configuration/config/assistant-type-picker/index.spec.tsx
@@ -5,31 +5,6 @@ import AssistantTypePicker from './index'
 import type { AgentConfig } from '@/models/debug'
 import { AgentStrategy } from '@/types/app'
 
-// Type definition for AgentSetting props
-type AgentSettingProps = {
-  isChatModel: boolean
-  payload: AgentConfig
-  isFunctionCall: boolean
-  onCancel: () => void
-  onSave: (payload: AgentConfig) => void
-}
-
-// Track mock calls for props validation
-let mockAgentSettingProps: AgentSettingProps | null = null
-
-// Mock AgentSetting component (complex modal with external hooks)
-jest.mock('../agent/agent-setting', () => {
-  return function MockAgentSetting(props: AgentSettingProps) {
-    mockAgentSettingProps = props
-    return (
-      <div data-testid="agent-setting-modal">
-        <button onClick={() => props.onSave({ max_iteration: 5 } as AgentConfig)}>Save</button>
-        <button onClick={props.onCancel}>Cancel</button>
-      </div>
-    )
-  }
-})
-
 // Test utilities
 const defaultAgentConfig: AgentConfig = {
   enabled: true,
@@ -62,7 +37,6 @@ const getOptionByDescription = (descriptionRegex: RegExp) => {
 describe('AssistantTypePicker', () => {
   beforeEach(() => {
     jest.clearAllMocks()
-    mockAgentSettingProps = null
   })
 
   // Rendering tests (REQUIRED)
@@ -139,8 +113,8 @@ describe('AssistantTypePicker', () => {
       renderComponent()
 
       // Act
-      const trigger = screen.getByText(/chatAssistant.name/i).closest('div')
-      await user.click(trigger!)
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
 
       // Assert - Both options should be visible
       await waitFor(() => {
@@ -225,8 +199,8 @@ describe('AssistantTypePicker', () => {
       renderComponent({ value: 'chat' })
 
       // Act - Open dropdown
-      const trigger = screen.getByText(/chatAssistant.name/i).closest('div')
-      await user.click(trigger!)
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
 
       // Wait for dropdown and select agent
       await waitFor(() => {
@@ -235,7 +209,7 @@ describe('AssistantTypePicker', () => {
       })
 
       const agentOptions = screen.getAllByText(/agentAssistant.name/i)
-      await user.click(agentOptions[0].closest('div')!)
+      await user.click(agentOptions[0])
 
       // Assert - Dropdown should remain open (agent settings should be visible)
       await waitFor(() => {
@@ -250,8 +224,8 @@ describe('AssistantTypePicker', () => {
       renderComponent({ value: 'chat', onChange })
 
       // Act - Open dropdown
-      const trigger = screen.getByText(/chatAssistant.name/i).closest('div')
-      await user.click(trigger!)
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
 
       // Wait for dropdown and click same option
       await waitFor(() => {
@@ -260,7 +234,7 @@ describe('AssistantTypePicker', () => {
       })
 
       const chatOptions = screen.getAllByText(/chatAssistant.name/i)
-      await user.click(chatOptions[1].closest('div')!)
+      await user.click(chatOptions[1])
 
       // Assert
       expect(onChange).not.toHaveBeenCalled()
@@ -276,8 +250,8 @@ describe('AssistantTypePicker', () => {
       renderComponent({ disabled: true, onChange })
 
       // Act - Open dropdown (dropdown can still open when disabled)
-      const trigger = screen.getByText(/chatAssistant.name/i).closest('div')
-      await user.click(trigger!)
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
 
       // Wait for dropdown to open
       await waitFor(() => {
@@ -298,8 +272,8 @@ describe('AssistantTypePicker', () => {
       renderComponent({ value: 'agent', disabled: true })
 
       // Act - Open dropdown
-      const trigger = screen.getByText(/agentAssistant.name/i).closest('div')
-      await user.click(trigger!)
+      const trigger = screen.getByText(/agentAssistant.name/i)
+      await user.click(trigger)
 
       // Assert - Agent settings option should not be visible
       await waitFor(() => {
@@ -313,8 +287,8 @@ describe('AssistantTypePicker', () => {
       renderComponent({ value: 'agent', disabled: false })
 
       // Act - Open dropdown
-      const trigger = screen.getByText(/agentAssistant.name/i).closest('div')
-      await user.click(trigger!)
+      const trigger = screen.getByText(/agentAssistant.name/i)
+      await user.click(trigger)
 
       // Assert - Agent settings option should be visible
       await waitFor(() => {
@@ -331,20 +305,20 @@ describe('AssistantTypePicker', () => {
       renderComponent({ value: 'agent', disabled: false })
 
       // Act - Open dropdown
-      const trigger = screen.getByText(/agentAssistant.name/i).closest('div')
-      await user.click(trigger!)
+      const trigger = screen.getByText(/agentAssistant.name/i)
+      await user.click(trigger)
 
       // Click agent settings
       await waitFor(() => {
         expect(screen.getByText(/agent.setting.name/i)).toBeInTheDocument()
       })
 
-      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i).closest('div')
-      await user.click(agentSettingsTrigger!)
+      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i)
+      await user.click(agentSettingsTrigger)
 
       // Assert
       await waitFor(() => {
-        expect(screen.getByTestId('agent-setting-modal')).toBeInTheDocument()
+        expect(screen.getByText(/common.operation.save/i)).toBeInTheDocument()
       })
     })
 
@@ -354,8 +328,8 @@ describe('AssistantTypePicker', () => {
       renderComponent({ value: 'chat', disabled: false })
 
       // Act - Open dropdown
-      const trigger = screen.getByText(/chatAssistant.name/i).closest('div')
-      await user.click(trigger!)
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
 
       // Wait for dropdown to open
       await waitFor(() => {
@@ -363,7 +337,7 @@ describe('AssistantTypePicker', () => {
       })
 
       // Assert - Agent settings modal should not appear (value is 'chat')
-      expect(screen.queryByTestId('agent-setting-modal')).not.toBeInTheDocument()
+      expect(screen.queryByText(/common.operation.save/i)).not.toBeInTheDocument()
     })
 
     it('should call onAgentSettingChange when saving agent settings', async () => {
@@ -373,26 +347,26 @@ describe('AssistantTypePicker', () => {
       renderComponent({ value: 'agent', disabled: false, onAgentSettingChange })
 
       // Act - Open dropdown and agent settings
-      const trigger = screen.getByText(/agentAssistant.name/i).closest('div')
-      await user.click(trigger!)
+      const trigger = screen.getByText(/agentAssistant.name/i)
+      await user.click(trigger)
 
       await waitFor(() => {
         expect(screen.getByText(/agent.setting.name/i)).toBeInTheDocument()
       })
 
-      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i).closest('div')
-      await user.click(agentSettingsTrigger!)
+      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i)
+      await user.click(agentSettingsTrigger)
 
       // Wait for modal and click save
       await waitFor(() => {
-        expect(screen.getByTestId('agent-setting-modal')).toBeInTheDocument()
+        expect(screen.getByText(/common.operation.save/i)).toBeInTheDocument()
       })
 
-      const saveButton = screen.getByText('Save')
+      const saveButton = screen.getByText(/common.operation.save/i)
       await user.click(saveButton)
 
       // Assert
-      expect(onAgentSettingChange).toHaveBeenCalledWith({ max_iteration: 5 })
+      expect(onAgentSettingChange).toHaveBeenCalledWith(defaultAgentConfig)
     })
 
     it('should close modal when saving agent settings', async () => {
@@ -401,26 +375,26 @@ describe('AssistantTypePicker', () => {
       renderComponent({ value: 'agent', disabled: false })
 
       // Act - Open dropdown, agent settings, and save
-      const trigger = screen.getByText(/agentAssistant.name/i).closest('div')
-      await user.click(trigger!)
+      const trigger = screen.getByText(/agentAssistant.name/i)
+      await user.click(trigger)
 
       await waitFor(() => {
         expect(screen.getByText(/agent.setting.name/i)).toBeInTheDocument()
       })
 
-      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i).closest('div')
-      await user.click(agentSettingsTrigger!)
+      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i)
+      await user.click(agentSettingsTrigger)
 
       await waitFor(() => {
-        expect(screen.getByTestId('agent-setting-modal')).toBeInTheDocument()
+        expect(screen.getByText(/appDebug.agent.setting.name/i)).toBeInTheDocument()
       })
 
-      const saveButton = screen.getByText('Save')
+      const saveButton = screen.getByText(/common.operation.save/i)
       await user.click(saveButton)
 
       // Assert
       await waitFor(() => {
-        expect(screen.queryByTestId('agent-setting-modal')).not.toBeInTheDocument()
+        expect(screen.queryByText(/common.operation.save/i)).not.toBeInTheDocument()
       })
     })
 
@@ -431,26 +405,26 @@ describe('AssistantTypePicker', () => {
       renderComponent({ value: 'agent', disabled: false, onAgentSettingChange })
 
       // Act - Open dropdown, agent settings, and cancel
-      const trigger = screen.getByText(/agentAssistant.name/i).closest('div')
-      await user.click(trigger!)
+      const trigger = screen.getByText(/agentAssistant.name/i)
+      await user.click(trigger)
 
       await waitFor(() => {
         expect(screen.getByText(/agent.setting.name/i)).toBeInTheDocument()
       })
 
-      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i).closest('div')
-      await user.click(agentSettingsTrigger!)
+      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i)
+      await user.click(agentSettingsTrigger)
 
       await waitFor(() => {
-        expect(screen.getByTestId('agent-setting-modal')).toBeInTheDocument()
+        expect(screen.getByText(/common.operation.save/i)).toBeInTheDocument()
       })
 
-      const cancelButton = screen.getByText('Cancel')
+      const cancelButton = screen.getByText(/common.operation.cancel/i)
       await user.click(cancelButton)
 
       // Assert
       await waitFor(() => {
-        expect(screen.queryByTestId('agent-setting-modal')).not.toBeInTheDocument()
+        expect(screen.queryByText(/common.operation.save/i)).not.toBeInTheDocument()
       })
       expect(onAgentSettingChange).not.toHaveBeenCalled()
     })
@@ -461,19 +435,19 @@ describe('AssistantTypePicker', () => {
       renderComponent({ value: 'agent', disabled: false })
 
       // Act - Open dropdown and agent settings
-      const trigger = screen.getByText(/agentAssistant.name/i).closest('div')
-      await user.click(trigger!)
+      const trigger = screen.getByText(/agentAssistant.name/i)
+      await user.click(trigger)
 
       await waitFor(() => {
         expect(screen.getByText(/agent.setting.name/i)).toBeInTheDocument()
       })
 
-      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i).closest('div')
-      await user.click(agentSettingsTrigger!)
+      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i)
+      await user.click(agentSettingsTrigger)
 
       // Assert - Modal should be open and dropdown should close
       await waitFor(() => {
-        expect(screen.getByTestId('agent-setting-modal')).toBeInTheDocument()
+        expect(screen.getByText(/common.operation.save/i)).toBeInTheDocument()
       })
 
       // The dropdown should be closed (agent settings description should not be visible)
@@ -492,10 +466,10 @@ describe('AssistantTypePicker', () => {
       renderComponent()
 
       // Act
-      const trigger = screen.getByText(/chatAssistant.name/i).closest('div')
-      await user.click(trigger!)
-      await user.click(trigger!)
-      await user.click(trigger!)
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
+      await user.click(trigger)
+      await user.click(trigger)
 
       // Assert - Should not crash
       expect(trigger).toBeInTheDocument()
@@ -538,8 +512,8 @@ describe('AssistantTypePicker', () => {
         })
       }).not.toThrow()
 
-      const trigger = screen.getByText(/chatAssistant.name/i).closest('div')
-      await user.click(trigger!)
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
     })
 
     it('should handle empty agentConfig', async () => {
@@ -630,8 +604,8 @@ describe('AssistantTypePicker', () => {
       renderComponent()
 
       // Act - Open dropdown
-      const trigger = screen.getByText(/chatAssistant.name/i).closest('div')
-      await user.click(trigger!)
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
 
       // Assert - Descriptions should be visible
       await waitFor(() => {
@@ -657,18 +631,14 @@ describe('AssistantTypePicker', () => {
     })
   })
 
-  // Props Validation for AgentSetting
-  describe('AgentSetting Props', () => {
-    it('should pass isFunctionCall and isChatModel props to AgentSetting', async () => {
+  // Agent Setting Integration
+  describe('AgentSetting Integration', () => {
+    it('should show function call mode when isFunctionCall is true', async () => {
       // Arrange
       const user = userEvent.setup()
-      renderComponent({
-        value: 'agent',
-        isFunctionCall: true,
-        isChatModel: false,
-      })
+      renderComponent({ value: 'agent', isFunctionCall: true, isChatModel: false })
 
-      // Act - Open dropdown and trigger AgentSetting
+      // Act - Open dropdown and settings modal
       const trigger = screen.getByText(/agentAssistant.name/i)
       await user.click(trigger)
 
@@ -679,17 +649,37 @@ describe('AssistantTypePicker', () => {
       const agentSettingsTrigger = screen.getByText(/agent.setting.name/i)
       await user.click(agentSettingsTrigger)
 
-      // Assert - Verify AgentSetting receives correct props
+      // Assert
       await waitFor(() => {
-        expect(screen.getByTestId('agent-setting-modal')).toBeInTheDocument()
+        expect(screen.getByText(/common.operation.save/i)).toBeInTheDocument()
       })
-
-      expect(mockAgentSettingProps).not.toBeNull()
-      expect(mockAgentSettingProps!.isFunctionCall).toBe(true)
-      expect(mockAgentSettingProps!.isChatModel).toBe(false)
+      expect(screen.getByText(/appDebug.agent.agentModeType.functionCall/i)).toBeInTheDocument()
     })
 
-    it('should pass agentConfig payload to AgentSetting', async () => {
+    it('should show built-in prompt when isFunctionCall is false', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent({ value: 'agent', isFunctionCall: false, isChatModel: true })
+
+      // Act - Open dropdown and settings modal
+      const trigger = screen.getByText(/agentAssistant.name/i)
+      await user.click(trigger)
+
+      await waitFor(() => {
+        expect(screen.getByText(/agent.setting.name/i)).toBeInTheDocument()
+      })
+
+      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i)
+      await user.click(agentSettingsTrigger)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText(/common.operation.save/i)).toBeInTheDocument()
+      })
+      expect(screen.getByText(/tools.builtInPromptTitle/i)).toBeInTheDocument()
+    })
+
+    it('should initialize max iteration from agentConfig payload', async () => {
       // Arrange
       const user = userEvent.setup()
       const customConfig: AgentConfig = {
@@ -699,12 +689,9 @@ describe('AssistantTypePicker', () => {
         tools: [],
       }
 
-      renderComponent({
-        value: 'agent',
-        agentConfig: customConfig,
-      })
+      renderComponent({ value: 'agent', agentConfig: customConfig })
 
-      // Act - Open AgentSetting
+      // Act - Open dropdown and settings modal
       const trigger = screen.getByText(/agentAssistant.name/i)
       await user.click(trigger)
 
@@ -715,13 +702,10 @@ describe('AssistantTypePicker', () => {
       const agentSettingsTrigger = screen.getByText(/agent.setting.name/i)
       await user.click(agentSettingsTrigger)
 
-      // Assert - Verify payload was passed
-      await waitFor(() => {
-        expect(screen.getByTestId('agent-setting-modal')).toBeInTheDocument()
-      })
-
-      expect(mockAgentSettingProps).not.toBeNull()
-      expect(mockAgentSettingProps!.payload).toEqual(customConfig)
+      // Assert
+      await screen.findByText(/common.operation.save/i)
+      const maxIterationInput = await screen.findByRole('spinbutton')
+      expect(maxIterationInput).toHaveValue(10)
     })
   })
 
diff --git a/web/app/components/app/configuration/config/assistant-type-picker/index.tsx b/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
index 3597a6e292..50f16f957a 100644
--- a/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
+++ b/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiArrowDownSLine } from '@remixicon/react'
 import AgentSetting from '../agent/agent-setting'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/app/configuration/config/automatic/idea-output.tsx b/web/app/components/app/configuration/config/automatic/idea-output.tsx
index df4f76c92b..895f74baa3 100644
--- a/web/app/components/app/configuration/config/automatic/idea-output.tsx
+++ b/web/app/components/app/configuration/config/automatic/idea-output.tsx
@@ -3,7 +3,7 @@ import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid
 import { useBoolean } from 'ahooks'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Textarea from '@/app/components/base/textarea'
 import { useTranslation } from 'react-i18next'
 
diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
index b14ee93313..409f335232 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React from 'react'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import type { GeneratorType } from './types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { Node, NodeOutPutVar, ValueSelector } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/app/configuration/config/automatic/prompt-toast.tsx b/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
index 2826cc97c8..c9169f0ad7 100644
--- a/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
+++ b/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
@@ -1,7 +1,7 @@
 import { RiArrowDownSLine, RiSparklingFill } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Markdown } from '@/app/components/base/markdown'
 import { useTranslation } from 'react-i18next'
 import s from './style.module.css'
diff --git a/web/app/components/app/configuration/config/automatic/version-selector.tsx b/web/app/components/app/configuration/config/automatic/version-selector.tsx
index c3d3e1d91c..715c1f3c80 100644
--- a/web/app/components/app/configuration/config/automatic/version-selector.tsx
+++ b/web/app/components/app/configuration/config/automatic/version-selector.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import { useBoolean } from 'ahooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 
diff --git a/web/app/components/app/configuration/config/config-audio.spec.tsx b/web/app/components/app/configuration/config/config-audio.spec.tsx
new file mode 100644
index 0000000000..94eeb87c99
--- /dev/null
+++ b/web/app/components/app/configuration/config/config-audio.spec.tsx
@@ -0,0 +1,123 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import ConfigAudio from './config-audio'
+import type { FeatureStoreState } from '@/app/components/base/features/store'
+import { SupportUploadFileTypes } from '@/app/components/workflow/types'
+
+const mockUseContext = jest.fn()
+jest.mock('use-context-selector', () => {
+  const actual = jest.requireActual('use-context-selector')
+  return {
+    ...actual,
+    useContext: (context: unknown) => mockUseContext(context),
+  }
+})
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+const mockUseFeatures = jest.fn()
+const mockUseFeaturesStore = jest.fn()
+jest.mock('@/app/components/base/features/hooks', () => ({
+  useFeatures: (selector: (state: FeatureStoreState) => any) => mockUseFeatures(selector),
+  useFeaturesStore: () => mockUseFeaturesStore(),
+}))
+
+type SetupOptions = {
+  isVisible?: boolean
+  allowedTypes?: SupportUploadFileTypes[]
+}
+
+let mockFeatureStoreState: FeatureStoreState
+let mockSetFeatures: jest.Mock
+const mockStore = {
+  getState: jest.fn<FeatureStoreState, []>(() => mockFeatureStoreState),
+}
+
+const setupFeatureStore = (allowedTypes: SupportUploadFileTypes[] = []) => {
+  mockSetFeatures = jest.fn()
+  mockFeatureStoreState = {
+    features: {
+      file: {
+        allowed_file_types: allowedTypes,
+        enabled: allowedTypes.length > 0,
+      },
+    },
+    setFeatures: mockSetFeatures,
+    showFeaturesModal: false,
+    setShowFeaturesModal: jest.fn(),
+  }
+  mockStore.getState.mockImplementation(() => mockFeatureStoreState)
+  mockUseFeaturesStore.mockReturnValue(mockStore)
+  mockUseFeatures.mockImplementation(selector => selector(mockFeatureStoreState))
+}
+
+const renderConfigAudio = (options: SetupOptions = {}) => {
+  const {
+    isVisible = true,
+    allowedTypes = [],
+  } = options
+  setupFeatureStore(allowedTypes)
+  mockUseContext.mockReturnValue({
+    isShowAudioConfig: isVisible,
+  })
+  const user = userEvent.setup()
+  render(<ConfigAudio />)
+  return {
+    user,
+    setFeatures: mockSetFeatures,
+  }
+}
+
+beforeEach(() => {
+  jest.clearAllMocks()
+})
+
+describe('ConfigAudio', () => {
+  it('should not render when the audio configuration is hidden', () => {
+    renderConfigAudio({ isVisible: false })
+
+    expect(screen.queryByText('appDebug.feature.audioUpload.title')).not.toBeInTheDocument()
+  })
+
+  it('should display the audio toggle state based on feature store data', () => {
+    renderConfigAudio({ allowedTypes: [SupportUploadFileTypes.audio] })
+
+    expect(screen.getByText('appDebug.feature.audioUpload.title')).toBeInTheDocument()
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true')
+  })
+
+  it('should enable audio uploads when toggled on', async () => {
+    const { user, setFeatures } = renderConfigAudio()
+    const toggle = screen.getByRole('switch')
+
+    expect(toggle).toHaveAttribute('aria-checked', 'false')
+    await user.click(toggle)
+
+    expect(setFeatures).toHaveBeenCalledWith(expect.objectContaining({
+      file: expect.objectContaining({
+        allowed_file_types: [SupportUploadFileTypes.audio],
+        enabled: true,
+      }),
+    }))
+  })
+
+  it('should disable audio uploads and turn off file feature when last type is removed', async () => {
+    const { user, setFeatures } = renderConfigAudio({ allowedTypes: [SupportUploadFileTypes.audio] })
+    const toggle = screen.getByRole('switch')
+
+    expect(toggle).toHaveAttribute('aria-checked', 'true')
+    await user.click(toggle)
+
+    expect(setFeatures).toHaveBeenCalledWith(expect.objectContaining({
+      file: expect.objectContaining({
+        allowed_file_types: [],
+        enabled: false,
+      }),
+    }))
+  })
+})
diff --git a/web/app/components/app/configuration/config/config-document.spec.tsx b/web/app/components/app/configuration/config/config-document.spec.tsx
new file mode 100644
index 0000000000..aeb504fdbd
--- /dev/null
+++ b/web/app/components/app/configuration/config/config-document.spec.tsx
@@ -0,0 +1,119 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import ConfigDocument from './config-document'
+import type { FeatureStoreState } from '@/app/components/base/features/store'
+import { SupportUploadFileTypes } from '@/app/components/workflow/types'
+
+const mockUseContext = jest.fn()
+jest.mock('use-context-selector', () => {
+  const actual = jest.requireActual('use-context-selector')
+  return {
+    ...actual,
+    useContext: (context: unknown) => mockUseContext(context),
+  }
+})
+
+const mockUseFeatures = jest.fn()
+const mockUseFeaturesStore = jest.fn()
+jest.mock('@/app/components/base/features/hooks', () => ({
+  useFeatures: (selector: (state: FeatureStoreState) => any) => mockUseFeatures(selector),
+  useFeaturesStore: () => mockUseFeaturesStore(),
+}))
+
+type SetupOptions = {
+  isVisible?: boolean
+  allowedTypes?: SupportUploadFileTypes[]
+}
+
+let mockFeatureStoreState: FeatureStoreState
+let mockSetFeatures: jest.Mock
+const mockStore = {
+  getState: jest.fn<FeatureStoreState, []>(() => mockFeatureStoreState),
+}
+
+const setupFeatureStore = (allowedTypes: SupportUploadFileTypes[] = []) => {
+  mockSetFeatures = jest.fn()
+  mockFeatureStoreState = {
+    features: {
+      file: {
+        allowed_file_types: allowedTypes,
+        enabled: allowedTypes.length > 0,
+      },
+    },
+    setFeatures: mockSetFeatures,
+    showFeaturesModal: false,
+    setShowFeaturesModal: jest.fn(),
+  }
+  mockStore.getState.mockImplementation(() => mockFeatureStoreState)
+  mockUseFeaturesStore.mockReturnValue(mockStore)
+  mockUseFeatures.mockImplementation(selector => selector(mockFeatureStoreState))
+}
+
+const renderConfigDocument = (options: SetupOptions = {}) => {
+  const {
+    isVisible = true,
+    allowedTypes = [],
+  } = options
+  setupFeatureStore(allowedTypes)
+  mockUseContext.mockReturnValue({
+    isShowDocumentConfig: isVisible,
+  })
+  const user = userEvent.setup()
+  render(<ConfigDocument />)
+  return {
+    user,
+    setFeatures: mockSetFeatures,
+  }
+}
+
+beforeEach(() => {
+  jest.clearAllMocks()
+})
+
+describe('ConfigDocument', () => {
+  it('should not render when the document configuration is hidden', () => {
+    renderConfigDocument({ isVisible: false })
+
+    expect(screen.queryByText('appDebug.feature.documentUpload.title')).not.toBeInTheDocument()
+  })
+
+  it('should show document toggle badge when configuration is visible', () => {
+    renderConfigDocument({ allowedTypes: [SupportUploadFileTypes.document] })
+
+    expect(screen.getByText('appDebug.feature.documentUpload.title')).toBeInTheDocument()
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true')
+  })
+
+  it('should add document type to allowed list when toggled on', async () => {
+    const { user, setFeatures } = renderConfigDocument({ allowedTypes: [SupportUploadFileTypes.audio] })
+    const toggle = screen.getByRole('switch')
+
+    expect(toggle).toHaveAttribute('aria-checked', 'false')
+    await user.click(toggle)
+
+    expect(setFeatures).toHaveBeenCalledWith(expect.objectContaining({
+      file: expect.objectContaining({
+        allowed_file_types: [SupportUploadFileTypes.audio, SupportUploadFileTypes.document],
+        enabled: true,
+      }),
+    }))
+  })
+
+  it('should remove document type but keep file feature enabled when other types remain', async () => {
+    const { user, setFeatures } = renderConfigDocument({
+      allowedTypes: [SupportUploadFileTypes.document, SupportUploadFileTypes.audio],
+    })
+    const toggle = screen.getByRole('switch')
+
+    expect(toggle).toHaveAttribute('aria-checked', 'true')
+    await user.click(toggle)
+
+    expect(setFeatures).toHaveBeenCalledWith(expect.objectContaining({
+      file: expect.objectContaining({
+        allowed_file_types: [SupportUploadFileTypes.audio],
+        enabled: true,
+      }),
+    }))
+  })
+})
diff --git a/web/app/components/app/configuration/config/index.spec.tsx b/web/app/components/app/configuration/config/index.spec.tsx
new file mode 100644
index 0000000000..814c52c3d7
--- /dev/null
+++ b/web/app/components/app/configuration/config/index.spec.tsx
@@ -0,0 +1,254 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Config from './index'
+import type { ModelConfig, PromptVariable } from '@/models/debug'
+import * as useContextSelector from 'use-context-selector'
+import type { ToolItem } from '@/types/app'
+import { AgentStrategy, AppModeEnum, ModelModeType } from '@/types/app'
+
+jest.mock('use-context-selector', () => {
+  const actual = jest.requireActual('use-context-selector')
+  return {
+    ...actual,
+    useContext: jest.fn(),
+  }
+})
+
+const mockFormattingDispatcher = jest.fn()
+jest.mock('../debug/hooks', () => ({
+  __esModule: true,
+  useFormattingChangedDispatcher: () => mockFormattingDispatcher,
+}))
+
+let latestConfigPromptProps: any
+jest.mock('@/app/components/app/configuration/config-prompt', () => ({
+  __esModule: true,
+  default: (props: any) => {
+    latestConfigPromptProps = props
+    return <div data-testid="config-prompt" />
+  },
+}))
+
+let latestConfigVarProps: any
+jest.mock('@/app/components/app/configuration/config-var', () => ({
+  __esModule: true,
+  default: (props: any) => {
+    latestConfigVarProps = props
+    return <div data-testid="config-var" />
+  },
+}))
+
+jest.mock('../dataset-config', () => ({
+  __esModule: true,
+  default: () => <div data-testid="dataset-config" />,
+}))
+
+jest.mock('./agent/agent-tools', () => ({
+  __esModule: true,
+  default: () => <div data-testid="agent-tools" />,
+}))
+
+jest.mock('../config-vision', () => ({
+  __esModule: true,
+  default: () => <div data-testid="config-vision" />,
+}))
+
+jest.mock('./config-document', () => ({
+  __esModule: true,
+  default: () => <div data-testid="config-document" />,
+}))
+
+jest.mock('./config-audio', () => ({
+  __esModule: true,
+  default: () => <div data-testid="config-audio" />,
+}))
+
+let latestHistoryPanelProps: any
+jest.mock('../config-prompt/conversation-history/history-panel', () => ({
+  __esModule: true,
+  default: (props: any) => {
+    latestHistoryPanelProps = props
+    return <div data-testid="history-panel" />
+  },
+}))
+
+type MockContext = {
+  mode: AppModeEnum
+  isAdvancedMode: boolean
+  modelModeType: ModelModeType
+  isAgent: boolean
+  hasSetBlockStatus: {
+    context: boolean
+    history: boolean
+    query: boolean
+  }
+  showHistoryModal: jest.Mock
+  modelConfig: ModelConfig
+  setModelConfig: jest.Mock
+  setPrevPromptConfig: jest.Mock
+}
+
+const createPromptVariable = (overrides: Partial<PromptVariable> = {}): PromptVariable => ({
+  key: 'variable',
+  name: 'Variable',
+  type: 'string',
+  ...overrides,
+})
+
+const createModelConfig = (overrides: Partial<ModelConfig> = {}): ModelConfig => ({
+  provider: 'openai',
+  model_id: 'gpt-4',
+  mode: ModelModeType.chat,
+  configs: {
+    prompt_template: 'Hello {{variable}}',
+    prompt_variables: [createPromptVariable({ key: 'existing' })],
+  },
+  chat_prompt_config: null,
+  completion_prompt_config: null,
+  opening_statement: null,
+  more_like_this: null,
+  suggested_questions: null,
+  suggested_questions_after_answer: null,
+  speech_to_text: null,
+  text_to_speech: null,
+  file_upload: null,
+  retriever_resource: null,
+  sensitive_word_avoidance: null,
+  annotation_reply: null,
+  external_data_tools: null,
+  system_parameters: {
+    audio_file_size_limit: 1,
+    file_size_limit: 1,
+    image_file_size_limit: 1,
+    video_file_size_limit: 1,
+    workflow_file_upload_limit: 1,
+  },
+  dataSets: [],
+  agentConfig: {
+    enabled: false,
+    strategy: AgentStrategy.react,
+    max_iteration: 1,
+    tools: [] as ToolItem[],
+  },
+  ...overrides,
+})
+
+const createContextValue = (overrides: Partial<MockContext> = {}): MockContext => ({
+  mode: AppModeEnum.CHAT,
+  isAdvancedMode: false,
+  modelModeType: ModelModeType.chat,
+  isAgent: false,
+  hasSetBlockStatus: {
+    context: false,
+    history: true,
+    query: false,
+  },
+  showHistoryModal: jest.fn(),
+  modelConfig: createModelConfig(),
+  setModelConfig: jest.fn(),
+  setPrevPromptConfig: jest.fn(),
+  ...overrides,
+})
+
+const mockUseContext = useContextSelector.useContext as jest.Mock
+
+const renderConfig = (contextOverrides: Partial<MockContext> = {}) => {
+  const contextValue = createContextValue(contextOverrides)
+  mockUseContext.mockReturnValue(contextValue)
+  return {
+    contextValue,
+    ...render(<Config />),
+  }
+}
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  latestConfigPromptProps = undefined
+  latestConfigVarProps = undefined
+  latestHistoryPanelProps = undefined
+})
+
+// Rendering scenarios ensure the layout toggles agent/history specific sections correctly.
+describe('Config - Rendering', () => {
+  it('should render baseline sections without agent specific panels', () => {
+    renderConfig()
+
+    expect(screen.getByTestId('config-prompt')).toBeInTheDocument()
+    expect(screen.getByTestId('config-var')).toBeInTheDocument()
+    expect(screen.getByTestId('dataset-config')).toBeInTheDocument()
+    expect(screen.getByTestId('config-vision')).toBeInTheDocument()
+    expect(screen.getByTestId('config-document')).toBeInTheDocument()
+    expect(screen.getByTestId('config-audio')).toBeInTheDocument()
+    expect(screen.queryByTestId('agent-tools')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('history-panel')).not.toBeInTheDocument()
+  })
+
+  it('should show AgentTools when app runs in agent mode', () => {
+    renderConfig({ isAgent: true })
+
+    expect(screen.getByTestId('agent-tools')).toBeInTheDocument()
+  })
+
+  it('should display HistoryPanel only when advanced chat completion values apply', () => {
+    const showHistoryModal = jest.fn()
+    renderConfig({
+      isAdvancedMode: true,
+      mode: AppModeEnum.ADVANCED_CHAT,
+      modelModeType: ModelModeType.completion,
+      hasSetBlockStatus: {
+        context: false,
+        history: false,
+        query: false,
+      },
+      showHistoryModal,
+    })
+
+    expect(screen.getByTestId('history-panel')).toBeInTheDocument()
+    expect(latestHistoryPanelProps.showWarning).toBe(true)
+    expect(latestHistoryPanelProps.onShowEditModal).toBe(showHistoryModal)
+  })
+})
+
+// Prompt handling scenarios validate integration between Config and prompt children.
+describe('Config - Prompt Handling', () => {
+  it('should update prompt template and dispatch formatting event when text changes', () => {
+    const { contextValue } = renderConfig()
+    const previousVariables = contextValue.modelConfig.configs.prompt_variables
+    const additions = [createPromptVariable({ key: 'new', name: 'New' })]
+
+    latestConfigPromptProps.onChange('Updated template', additions)
+
+    expect(contextValue.setPrevPromptConfig).toHaveBeenCalledWith(contextValue.modelConfig.configs)
+    expect(contextValue.setModelConfig).toHaveBeenCalledWith(expect.objectContaining({
+      configs: expect.objectContaining({
+        prompt_template: 'Updated template',
+        prompt_variables: [...previousVariables, ...additions],
+      }),
+    }))
+    expect(mockFormattingDispatcher).toHaveBeenCalledTimes(1)
+  })
+
+  it('should skip formatting dispatcher when template remains identical', () => {
+    const { contextValue } = renderConfig()
+    const unchangedTemplate = contextValue.modelConfig.configs.prompt_template
+
+    latestConfigPromptProps.onChange(unchangedTemplate, [createPromptVariable({ key: 'added' })])
+
+    expect(contextValue.setPrevPromptConfig).toHaveBeenCalledWith(contextValue.modelConfig.configs)
+    expect(mockFormattingDispatcher).not.toHaveBeenCalled()
+  })
+
+  it('should replace prompt variables when ConfigVar reports updates', () => {
+    const { contextValue } = renderConfig()
+    const replacementVariables = [createPromptVariable({ key: 'replacement' })]
+
+    latestConfigVarProps.onPromptVariablesChange(replacementVariables)
+
+    expect(contextValue.setPrevPromptConfig).toHaveBeenCalledWith(contextValue.modelConfig.configs)
+    expect(contextValue.setModelConfig).toHaveBeenCalledWith(expect.objectContaining({
+      configs: expect.objectContaining({
+        prompt_variables: replacementVariables,
+      }),
+    }))
+  })
+})
diff --git a/web/app/components/app/configuration/dataset-config/card-item/index.tsx b/web/app/components/app/configuration/dataset-config/card-item/index.tsx
index 85d46122a3..7fd7011a56 100644
--- a/web/app/components/app/configuration/dataset-config/card-item/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/card-item/index.tsx
@@ -13,7 +13,7 @@ import Drawer from '@/app/components/base/drawer'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import Badge from '@/app/components/base/badge'
 import { useKnowledge } from '@/hooks/use-knowledge'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import AppIcon from '@/app/components/base/app-icon'
 
 type ItemProps = {
diff --git a/web/app/components/app/configuration/dataset-config/context-var/index.tsx b/web/app/components/app/configuration/dataset-config/context-var/index.tsx
index ebba9c51cb..80cc50acdf 100644
--- a/web/app/components/app/configuration/dataset-config/context-var/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/context-var/index.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import type { Props } from './var-picker'
 import VarPicker from './var-picker'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { BracketsX } from '@/app/components/base/icons/src/vender/line/development'
 import Tooltip from '@/app/components/base/tooltip'
 
diff --git a/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx b/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
index c443ea0b1f..f5ea2eaa27 100644
--- a/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
+++ b/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ChevronDownIcon } from '@heroicons/react/24/outline'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
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 8e06d6c901..c7a43fbfbd 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
@@ -20,7 +20,7 @@ import type {
   DataSet,
 } from '@/models/datasets'
 import { RerankingModeEnum } from '@/models/datasets'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useSelectedDatasetsMode } from '@/app/components/workflow/nodes/knowledge-retrieval/hooks'
 import Switch from '@/app/components/base/switch'
 import Toast from '@/app/components/base/toast'
diff --git a/web/app/components/app/configuration/dataset-config/params-config/index.spec.tsx b/web/app/components/app/configuration/dataset-config/params-config/index.spec.tsx
index b666a6cb5b..c432ca68e2 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/index.spec.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/index.spec.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
-import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import ParamsConfig from './index'
 import ConfigContext from '@/context/debug-configuration'
 import type { DatasetConfigs } from '@/models/debug'
@@ -11,6 +12,37 @@ import {
   useModelListAndDefaultModelAndCurrentProviderAndModel,
 } from '@/app/components/header/account-setting/model-provider-page/hooks'
 
+jest.mock('@headlessui/react', () => ({
+  Dialog: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <div role="dialog" className={className}>
+      {children}
+    </div>
+  ),
+  DialogPanel: ({ children, className, ...props }: { children: React.ReactNode; className?: string }) => (
+    <div className={className} {...props}>
+      {children}
+    </div>
+  ),
+  DialogTitle: ({ children, className, ...props }: { children: React.ReactNode; className?: string }) => (
+    <div className={className} {...props}>
+      {children}
+    </div>
+  ),
+  Transition: ({ show, children }: { show: boolean; children: React.ReactNode }) => (show ? <>{children}</> : null),
+  TransitionChild: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  Switch: ({ checked, onChange, children, ...props }: { checked: boolean; onChange?: (value: boolean) => void; children?: React.ReactNode }) => (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      onClick={() => onChange?.(!checked)}
+      {...props}
+    >
+      {children}
+    </button>
+  ),
+}))
+
 jest.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
   useModelListAndDefaultModelAndCurrentProviderAndModel: jest.fn(),
   useCurrentProviderAndModel: jest.fn(),
@@ -74,9 +106,6 @@ const renderParamsConfig = ({
   initialModalOpen?: boolean
   disabled?: boolean
 } = {}) => {
-  const setDatasetConfigsSpy = jest.fn<void, [DatasetConfigs]>()
-  const setModalOpenSpy = jest.fn<void, [boolean]>()
-
   const Wrapper = ({ children }: { children: React.ReactNode }) => {
     const [datasetConfigsState, setDatasetConfigsState] = React.useState(datasetConfigs)
     const [modalOpen, setModalOpen] = React.useState(initialModalOpen)
@@ -84,12 +113,10 @@ const renderParamsConfig = ({
     const contextValue = {
       datasetConfigs: datasetConfigsState,
       setDatasetConfigs: (next: DatasetConfigs) => {
-        setDatasetConfigsSpy(next)
         setDatasetConfigsState(next)
       },
       rerankSettingModalOpen: modalOpen,
       setRerankSettingModalOpen: (open: boolean) => {
-        setModalOpenSpy(open)
         setModalOpen(open)
       },
     } as unknown as React.ComponentProps<typeof ConfigContext.Provider>['value']
@@ -101,18 +128,13 @@ const renderParamsConfig = ({
     )
   }
 
-  render(
+  return render(
     <ParamsConfig
       disabled={disabled}
       selectedDatasets={[]}
     />,
     { wrapper: Wrapper },
   )
-
-  return {
-    setDatasetConfigsSpy,
-    setModalOpenSpy,
-  }
 }
 
 describe('dataset-config/params-config', () => {
@@ -151,77 +173,92 @@ describe('dataset-config/params-config', () => {
   describe('User Interactions', () => {
     it('should open modal and persist changes when save is clicked', async () => {
       // Arrange
-      const { setDatasetConfigsSpy } = renderParamsConfig()
+      renderParamsConfig()
+      const user = userEvent.setup()
 
       // Act
-      fireEvent.click(screen.getByRole('button', { name: 'dataset.retrievalSettings' }))
+      await user.click(screen.getByRole('button', { name: 'dataset.retrievalSettings' }))
       const dialog = await screen.findByRole('dialog', {}, { timeout: 3000 })
       const dialogScope = within(dialog)
 
-      // Change top_k via the first number input increment control.
       const incrementButtons = dialogScope.getAllByRole('button', { name: 'increment' })
-      fireEvent.click(incrementButtons[0])
+      await user.click(incrementButtons[0])
 
-      const saveButton = await dialogScope.findByRole('button', { name: 'common.operation.save' })
-      fireEvent.click(saveButton)
+      await waitFor(() => {
+        const [topKInput] = dialogScope.getAllByRole('spinbutton')
+        expect(topKInput).toHaveValue(5)
+      })
+
+      await user.click(dialogScope.getByRole('button', { name: 'common.operation.save' }))
 
-      // Assert
-      expect(setDatasetConfigsSpy).toHaveBeenCalledWith(expect.objectContaining({ top_k: 5 }))
       await waitFor(() => {
         expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
       })
+
+      await user.click(screen.getByRole('button', { name: 'dataset.retrievalSettings' }))
+      const reopenedDialog = await screen.findByRole('dialog', {}, { timeout: 3000 })
+      const reopenedScope = within(reopenedDialog)
+      const [reopenedTopKInput] = reopenedScope.getAllByRole('spinbutton')
+
+      // Assert
+      expect(reopenedTopKInput).toHaveValue(5)
     })
 
     it('should discard changes when cancel is clicked', async () => {
       // Arrange
-      const { setDatasetConfigsSpy } = renderParamsConfig()
+      renderParamsConfig()
+      const user = userEvent.setup()
 
       // Act
-      fireEvent.click(screen.getByRole('button', { name: 'dataset.retrievalSettings' }))
+      await user.click(screen.getByRole('button', { name: 'dataset.retrievalSettings' }))
       const dialog = await screen.findByRole('dialog', {}, { timeout: 3000 })
       const dialogScope = within(dialog)
 
       const incrementButtons = dialogScope.getAllByRole('button', { name: 'increment' })
-      fireEvent.click(incrementButtons[0])
+      await user.click(incrementButtons[0])
+
+      await waitFor(() => {
+        const [topKInput] = dialogScope.getAllByRole('spinbutton')
+        expect(topKInput).toHaveValue(5)
+      })
 
       const cancelButton = await dialogScope.findByRole('button', { name: 'common.operation.cancel' })
-      fireEvent.click(cancelButton)
+      await user.click(cancelButton)
       await waitFor(() => {
         expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
       })
 
-      // Re-open and save without changes.
-      fireEvent.click(screen.getByRole('button', { name: 'dataset.retrievalSettings' }))
+      // Re-open and verify the original value remains.
+      await user.click(screen.getByRole('button', { name: 'dataset.retrievalSettings' }))
       const reopenedDialog = await screen.findByRole('dialog', {}, { timeout: 3000 })
       const reopenedScope = within(reopenedDialog)
-      const reopenedSave = await reopenedScope.findByRole('button', { name: 'common.operation.save' })
-      fireEvent.click(reopenedSave)
+      const [reopenedTopKInput] = reopenedScope.getAllByRole('spinbutton')
 
-      // Assert - should save original top_k rather than the canceled change.
-      expect(setDatasetConfigsSpy).toHaveBeenCalledWith(expect.objectContaining({ top_k: 4 }))
+      // Assert
+      expect(reopenedTopKInput).toHaveValue(4)
     })
 
     it('should prevent saving when rerank model is required but invalid', async () => {
       // Arrange
-      const { setDatasetConfigsSpy } = renderParamsConfig({
+      renderParamsConfig({
         datasetConfigs: createDatasetConfigs({
           reranking_enable: true,
           reranking_mode: RerankingModeEnum.RerankingModel,
         }),
         initialModalOpen: true,
       })
+      const user = userEvent.setup()
 
       // Act
       const dialog = await screen.findByRole('dialog', {}, { timeout: 3000 })
       const dialogScope = within(dialog)
-      fireEvent.click(dialogScope.getByRole('button', { name: 'common.operation.save' }))
+      await user.click(dialogScope.getByRole('button', { name: 'common.operation.save' }))
 
       // Assert
       expect(toastNotifySpy).toHaveBeenCalledWith({
         type: 'error',
         message: 'appDebug.datasetConfig.rerankModelRequired',
       })
-      expect(setDatasetConfigsSpy).not.toHaveBeenCalled()
       expect(screen.getByRole('dialog')).toBeInTheDocument()
     })
   })
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 df2b4293c4..24da958217 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
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { RiEqualizer2Line } from '@remixicon/react'
 import ConfigContent from './config-content'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ConfigContext from '@/context/debug-configuration'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
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 ebfa3b1e12..459623104d 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
@@ -2,7 +2,7 @@ import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import './weighted-score.css'
 import Slider from '@/app/components/base/slider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 const formatNumber = (value: number) => {
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 6857c38e1e..f02fdcb5d7 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
@@ -10,7 +10,7 @@ import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
 import Badge from '@/app/components/base/badge'
 import { useKnowledge } from '@/hooks/use-knowledge'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import AppIcon from '@/app/components/base/app-icon'
 import { useInfiniteDatasets } from '@/service/knowledge/use-dataset'
 import { ModelFeatureEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/index.spec.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/index.spec.tsx
index 08db7186ec..e2c5307b03 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/index.spec.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.spec.tsx
@@ -7,8 +7,9 @@ import { ChunkingMode, DataSourceType, DatasetPermission, RerankingModeEnum } fr
 import { IndexingType } from '@/app/components/datasets/create/step-two'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { updateDatasetSetting } from '@/service/datasets'
-import { fetchMembers } from '@/service/common'
+import { useMembers } from '@/service/use-common'
 import { RETRIEVE_METHOD, type RetrievalConfig } from '@/types/app'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 
 const mockNotify = jest.fn()
 const mockOnCancel = jest.fn()
@@ -41,8 +42,10 @@ jest.mock('@/service/datasets', () => ({
   updateDatasetSetting: jest.fn(),
 }))
 
-jest.mock('@/service/common', () => ({
-  fetchMembers: jest.fn(),
+jest.mock('@/service/use-common', () => ({
+  __esModule: true,
+  ...jest.requireActual('@/service/use-common'),
+  useMembers: jest.fn(),
 }))
 
 jest.mock('@/context/app-context', () => ({
@@ -103,7 +106,7 @@ jest.mock('@/app/components/datasets/settings/utils', () => ({
 }))
 
 const mockUpdateDatasetSetting = updateDatasetSetting as jest.MockedFunction<typeof updateDatasetSetting>
-const mockFetchMembers = fetchMembers as jest.MockedFunction<typeof fetchMembers>
+const mockUseMembers = useMembers as jest.MockedFunction<typeof useMembers>
 
 const createRetrievalConfig = (overrides: Partial<RetrievalConfig> = {}): RetrievalConfig => ({
   search_method: RETRIEVE_METHOD.semantic,
@@ -192,10 +195,43 @@ const renderWithProviders = (dataset: DataSet) => {
   )
 }
 
+const createMemberList = (): DataSet['partial_member_list'] => ([
+  'member-2',
+])
+
+const renderSettingsModal = async (dataset: DataSet) => {
+  renderWithProviders(dataset)
+  await waitFor(() => expect(mockUseMembers).toHaveBeenCalled())
+}
+
 describe('SettingsModal', () => {
   beforeEach(() => {
     jest.clearAllMocks()
     mockIsWorkspaceDatasetOperator = false
+    mockUseMembers.mockReturnValue({
+      data: {
+        accounts: [
+          {
+            id: 'user-1',
+            name: 'User One',
+            email: 'user@example.com',
+            avatar: 'avatar.png',
+            avatar_url: 'avatar.png',
+            status: 'active',
+            role: 'owner',
+          },
+          {
+            id: 'member-2',
+            name: 'Member Two',
+            email: 'member@example.com',
+            avatar: 'avatar.png',
+            avatar_url: 'avatar.png',
+            status: 'active',
+            role: 'editor',
+          },
+        ],
+      },
+    } as ReturnType<typeof useMembers>)
     mockUseModelList.mockImplementation((type: ModelTypeEnum) => {
       if (type === ModelTypeEnum.rerank) {
         return {
@@ -213,261 +249,289 @@ describe('SettingsModal', () => {
     mockUseModelListAndDefaultModelAndCurrentProviderAndModel.mockReturnValue({ defaultModel: null, currentModel: null })
     mockUseCurrentProviderAndModel.mockReturnValue({ currentProvider: null, currentModel: null })
     mockCheckShowMultiModalTip.mockReturnValue(false)
-    mockFetchMembers.mockResolvedValue({
-      accounts: [
-        {
-          id: 'user-1',
-          name: 'User One',
-          email: 'user@example.com',
-          avatar: 'avatar.png',
-          avatar_url: 'avatar.png',
-          status: 'active',
-          role: 'owner',
-        },
-        {
-          id: 'member-2',
-          name: 'Member Two',
-          email: 'member@example.com',
-          avatar: 'avatar.png',
-          avatar_url: 'avatar.png',
-          status: 'active',
-          role: 'editor',
-        },
-      ],
-    })
     mockUpdateDatasetSetting.mockResolvedValue(createDataset())
   })
 
-  it('renders dataset details', async () => {
-    renderWithProviders(createDataset())
+  // Rendering and basic field bindings.
+  describe('Rendering', () => {
+    it('should render dataset details when dataset is provided', async () => {
+      // Arrange
+      const dataset = createDataset()
 
-    await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
+      // Act
+      await renderSettingsModal(dataset)
 
-    expect(screen.getByPlaceholderText('datasetSettings.form.namePlaceholder')).toHaveValue('Test Dataset')
-    expect(screen.getByPlaceholderText('datasetSettings.form.descPlaceholder')).toHaveValue('Description')
-  })
-
-  it('calls onCancel when cancel is clicked', async () => {
-    renderWithProviders(createDataset())
-
-    await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
-
-    await userEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
-
-    expect(mockOnCancel).toHaveBeenCalledTimes(1)
-  })
-
-  it('shows external knowledge info for external datasets', async () => {
-    const dataset = createDataset({
-      provider: 'external',
-      external_knowledge_info: {
-        external_knowledge_id: 'ext-id-123',
-        external_knowledge_api_id: 'ext-api-id-123',
-        external_knowledge_api_name: 'External Knowledge API',
-        external_knowledge_api_endpoint: 'https://api.external.com',
-      },
+      // Assert
+      expect(screen.getByPlaceholderText('datasetSettings.form.namePlaceholder')).toHaveValue('Test Dataset')
+      expect(screen.getByPlaceholderText('datasetSettings.form.descPlaceholder')).toHaveValue('Description')
     })
 
-    renderWithProviders(dataset)
+    it('should show external knowledge info when dataset is external', async () => {
+      // Arrange
+      const dataset = createDataset({
+        provider: 'external',
+        external_knowledge_info: {
+          external_knowledge_id: 'ext-id-123',
+          external_knowledge_api_id: 'ext-api-id-123',
+          external_knowledge_api_name: 'External Knowledge API',
+          external_knowledge_api_endpoint: 'https://api.external.com',
+        },
+      })
 
-    await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
+      // Act
+      await renderSettingsModal(dataset)
 
-    expect(screen.getByText('External Knowledge API')).toBeInTheDocument()
-    expect(screen.getByText('https://api.external.com')).toBeInTheDocument()
-    expect(screen.getByText('ext-id-123')).toBeInTheDocument()
-  })
-
-  it('updates name when user types', async () => {
-    renderWithProviders(createDataset())
-
-    await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
-
-    const nameInput = screen.getByPlaceholderText('datasetSettings.form.namePlaceholder')
-    await userEvent.clear(nameInput)
-    await userEvent.type(nameInput, 'New Dataset Name')
-
-    expect(nameInput).toHaveValue('New Dataset Name')
-  })
-
-  it('updates description when user types', async () => {
-    renderWithProviders(createDataset())
-
-    await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
-
-    const descriptionInput = screen.getByPlaceholderText('datasetSettings.form.descPlaceholder')
-    await userEvent.clear(descriptionInput)
-    await userEvent.type(descriptionInput, 'New description')
-
-    expect(descriptionInput).toHaveValue('New description')
-  })
-
-  it('shows and dismisses retrieval change tip when index method changes', async () => {
-    const dataset = createDataset({ indexing_technique: IndexingType.ECONOMICAL })
-
-    renderWithProviders(dataset)
-
-    await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
-
-    await userEvent.click(screen.getByText('datasetCreation.stepTwo.qualified'))
-
-    expect(await screen.findByText('appDebug.datasetConfig.retrieveChangeTip')).toBeInTheDocument()
-
-    await userEvent.click(screen.getByLabelText('close-retrieval-change-tip'))
-
-    await waitFor(() => {
-      expect(screen.queryByText('appDebug.datasetConfig.retrieveChangeTip')).not.toBeInTheDocument()
+      // Assert
+      expect(screen.getByText('External Knowledge API')).toBeInTheDocument()
+      expect(screen.getByText('https://api.external.com')).toBeInTheDocument()
+      expect(screen.getByText('ext-id-123')).toBeInTheDocument()
     })
   })
 
-  it('requires dataset name before saving', async () => {
-    renderWithProviders(createDataset())
+  // User interactions that update visible state.
+  describe('Interactions', () => {
+    it('should call onCancel when cancel button is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
 
-    await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
+      // Act
+      await renderSettingsModal(createDataset())
+      await user.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
 
-    const nameInput = screen.getByPlaceholderText('datasetSettings.form.namePlaceholder')
-    await userEvent.clear(nameInput)
-    await userEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
-
-    expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
-      type: 'error',
-      message: 'datasetSettings.form.nameError',
-    }))
-    expect(mockUpdateDatasetSetting).not.toHaveBeenCalled()
-  })
-
-  it('requires rerank model when reranking is enabled', async () => {
-    mockUseModelList.mockReturnValue({ data: [] })
-    const dataset = createDataset({}, createRetrievalConfig({
-      reranking_enable: true,
-      reranking_model: {
-        reranking_provider_name: '',
-        reranking_model_name: '',
-      },
-    }))
-
-    renderWithProviders(dataset)
-
-    await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
-    await userEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
-
-    expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
-      type: 'error',
-      message: 'appDebug.datasetConfig.rerankModelRequired',
-    }))
-    expect(mockUpdateDatasetSetting).not.toHaveBeenCalled()
-  })
-
-  it('saves internal dataset changes', async () => {
-    const rerankRetrieval = createRetrievalConfig({
-      reranking_enable: true,
-      reranking_model: {
-        reranking_provider_name: 'rerank-provider',
-        reranking_model_name: 'rerank-model',
-      },
-    })
-    const dataset = createDataset({
-      retrieval_model: rerankRetrieval,
-      retrieval_model_dict: rerankRetrieval,
+      // Assert
+      expect(mockOnCancel).toHaveBeenCalledTimes(1)
     })
 
-    renderWithProviders(dataset)
+    it('should update name input when user types', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      await renderSettingsModal(createDataset())
 
-    await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
+      const nameInput = screen.getByPlaceholderText('datasetSettings.form.namePlaceholder')
 
-    const nameInput = screen.getByPlaceholderText('datasetSettings.form.namePlaceholder')
-    await userEvent.clear(nameInput)
-    await userEvent.type(nameInput, 'Updated Internal Dataset')
-    await userEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+      // Act
+      await user.clear(nameInput)
+      await user.type(nameInput, 'New Dataset Name')
 
-    await waitFor(() => expect(mockUpdateDatasetSetting).toHaveBeenCalled())
+      // Assert
+      expect(nameInput).toHaveValue('New Dataset Name')
+    })
 
-    expect(mockUpdateDatasetSetting).toHaveBeenCalledWith(expect.objectContaining({
-      body: expect.objectContaining({
-        name: 'Updated Internal Dataset',
-        permission: DatasetPermission.allTeamMembers,
-      }),
-    }))
-    expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
-      type: 'success',
-      message: 'common.actionMsg.modifiedSuccessfully',
-    }))
-    expect(mockOnSave).toHaveBeenCalledWith(expect.objectContaining({
-      name: 'Updated Internal Dataset',
-      retrieval_model_dict: expect.objectContaining({
+    it('should update description input when user types', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      await renderSettingsModal(createDataset())
+
+      const descriptionInput = screen.getByPlaceholderText('datasetSettings.form.descPlaceholder')
+
+      // Act
+      await user.clear(descriptionInput)
+      await user.type(descriptionInput, 'New description')
+
+      // Assert
+      expect(descriptionInput).toHaveValue('New description')
+    })
+
+    it('should show and dismiss retrieval change tip when indexing method changes', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const dataset = createDataset({ indexing_technique: IndexingType.ECONOMICAL })
+
+      // Act
+      await renderSettingsModal(dataset)
+      await user.click(screen.getByText('datasetCreation.stepTwo.qualified'))
+
+      // Assert
+      expect(await screen.findByText('appDebug.datasetConfig.retrieveChangeTip')).toBeInTheDocument()
+
+      // Act
+      await user.click(screen.getByLabelText('close-retrieval-change-tip'))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.queryByText('appDebug.datasetConfig.retrieveChangeTip')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should open account setting modal when embedding model tip is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+
+      // Act
+      await renderSettingsModal(createDataset())
+      await user.click(screen.getByText('datasetSettings.form.embeddingModelTipLink'))
+
+      // Assert
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({ payload: ACCOUNT_SETTING_TAB.PROVIDER })
+    })
+  })
+
+  // Validation guardrails before saving.
+  describe('Validation', () => {
+    it('should block save when dataset name is empty', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      await renderSettingsModal(createDataset())
+
+      const nameInput = screen.getByPlaceholderText('datasetSettings.form.namePlaceholder')
+
+      // Act
+      await user.clear(nameInput)
+      await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+      // Assert
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
+        type: 'error',
+        message: 'datasetSettings.form.nameError',
+      }))
+      expect(mockUpdateDatasetSetting).not.toHaveBeenCalled()
+    })
+
+    it('should block save when reranking is enabled without model', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      mockUseModelList.mockReturnValue({ data: [] })
+      const dataset = createDataset({}, createRetrievalConfig({
         reranking_enable: true,
-      }),
-    }))
+        reranking_model: {
+          reranking_provider_name: '',
+          reranking_model_name: '',
+        },
+      }))
+
+      // Act
+      await renderSettingsModal(dataset)
+      await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+      // Assert
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
+        type: 'error',
+        message: 'appDebug.datasetConfig.rerankModelRequired',
+      }))
+      expect(mockUpdateDatasetSetting).not.toHaveBeenCalled()
+    })
   })
 
-  it('saves external dataset with partial members and updated retrieval params', async () => {
-    const dataset = createDataset({
-      provider: 'external',
-      permission: DatasetPermission.partialMembers,
-      partial_member_list: ['member-2'],
-      external_retrieval_model: {
-        top_k: 5,
-        score_threshold: 0.3,
-        score_threshold_enabled: true,
-      },
-    }, {
-      score_threshold_enabled: true,
-      score_threshold: 0.8,
+  // Save flows and side effects.
+  describe('Save', () => {
+    it('should save internal dataset changes when form is valid', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const rerankRetrieval = createRetrievalConfig({
+        reranking_enable: true,
+        reranking_model: {
+          reranking_provider_name: 'rerank-provider',
+          reranking_model_name: 'rerank-model',
+        },
+      })
+      const dataset = createDataset({
+        retrieval_model: rerankRetrieval,
+        retrieval_model_dict: rerankRetrieval,
+      })
+
+      // Act
+      await renderSettingsModal(dataset)
+
+      const nameInput = screen.getByPlaceholderText('datasetSettings.form.namePlaceholder')
+      await user.clear(nameInput)
+      await user.type(nameInput, 'Updated Internal Dataset')
+      await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+      // Assert
+      await waitFor(() => expect(mockUpdateDatasetSetting).toHaveBeenCalled())
+
+      expect(mockUpdateDatasetSetting).toHaveBeenCalledWith(expect.objectContaining({
+        body: expect.objectContaining({
+          name: 'Updated Internal Dataset',
+          permission: DatasetPermission.allTeamMembers,
+        }),
+      }))
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
+        type: 'success',
+        message: 'common.actionMsg.modifiedSuccessfully',
+      }))
+      expect(mockOnSave).toHaveBeenCalledWith(expect.objectContaining({
+        name: 'Updated Internal Dataset',
+        retrieval_model_dict: expect.objectContaining({
+          reranking_enable: true,
+        }),
+      }))
     })
 
-    renderWithProviders(dataset)
-
-    await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
-
-    await userEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
-
-    await waitFor(() => expect(mockUpdateDatasetSetting).toHaveBeenCalled())
-
-    expect(mockUpdateDatasetSetting).toHaveBeenCalledWith(expect.objectContaining({
-      body: expect.objectContaining({
+    it('should save external dataset changes when partial members configured', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const dataset = createDataset({
+        provider: 'external',
         permission: DatasetPermission.partialMembers,
-        external_retrieval_model: expect.objectContaining({
+        partial_member_list: createMemberList(),
+        external_retrieval_model: {
           top_k: 5,
-        }),
-        partial_member_list: [
-          {
-            user_id: 'member-2',
-            role: 'editor',
-          },
-        ],
-      }),
-    }))
-    expect(mockOnSave).toHaveBeenCalledWith(expect.objectContaining({
-      retrieval_model_dict: expect.objectContaining({
+          score_threshold: 0.3,
+          score_threshold_enabled: true,
+        },
+      }, {
         score_threshold_enabled: true,
         score_threshold: 0.8,
-      }),
-    }))
-  })
+      })
 
-  it('disables save button while saving', async () => {
-    mockUpdateDatasetSetting.mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)))
+      // Act
+      await renderSettingsModal(dataset)
+      await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
-    renderWithProviders(createDataset())
+      // Assert
+      await waitFor(() => expect(mockUpdateDatasetSetting).toHaveBeenCalled())
 
-    await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
+      expect(mockUpdateDatasetSetting).toHaveBeenCalledWith(expect.objectContaining({
+        body: expect.objectContaining({
+          permission: DatasetPermission.partialMembers,
+          external_retrieval_model: expect.objectContaining({
+            top_k: 5,
+          }),
+          partial_member_list: [
+            {
+              user_id: 'member-2',
+              role: 'editor',
+            },
+          ],
+        }),
+      }))
+      expect(mockOnSave).toHaveBeenCalledWith(expect.objectContaining({
+        retrieval_model_dict: expect.objectContaining({
+          score_threshold_enabled: true,
+          score_threshold: 0.8,
+        }),
+      }))
+    })
 
-    const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
-    await userEvent.click(saveButton)
+    it('should disable save button while saving', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      mockUpdateDatasetSetting.mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)))
 
-    expect(saveButton).toBeDisabled()
-  })
+      // Act
+      await renderSettingsModal(createDataset())
 
-  it('shows error toast when save fails', async () => {
-    mockUpdateDatasetSetting.mockRejectedValue(new Error('API Error'))
+      const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+      await user.click(saveButton)
 
-    renderWithProviders(createDataset())
+      // Assert
+      expect(saveButton).toBeDisabled()
+    })
 
-    await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
+    it('should show error toast when save fails', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      mockUpdateDatasetSetting.mockRejectedValue(new Error('API Error'))
 
-    await userEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+      // Act
+      await renderSettingsModal(createDataset())
+      await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
-    await waitFor(() => {
-      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+      // Assert
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+      })
     })
   })
 })
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 37d9ddd372..c191ff5d46 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
@@ -1,10 +1,9 @@
 import type { FC } from 'react'
-import { useMemo, useRef, useState } from 'react'
-import { useMount } from 'ahooks'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { isEqual } from 'lodash-es'
 import { RiCloseLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import IndexMethod from '@/app/components/datasets/settings/index-method'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
@@ -21,10 +20,10 @@ import PermissionSelector from '@/app/components/datasets/settings/permission-se
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
 import { useModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import { fetchMembers } from '@/service/common'
 import type { Member } from '@/models/common'
 import { IndexingType } from '@/app/components/datasets/create/step-two'
 import { useDocLink } from '@/context/i18n'
+import { useMembers } from '@/service/use-common'
 import { checkShowMultiModalTip } from '@/app/components/datasets/settings/utils'
 import { RetrievalChangeTip, RetrievalSection } from './retrieval-section'
 
@@ -63,6 +62,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
   const [scoreThresholdEnabled, setScoreThresholdEnabled] = useState(localeCurrentDataset?.external_retrieval_model.score_threshold_enabled ?? false)
   const [selectedMemberIDs, setSelectedMemberIDs] = useState<string[]>(currentDataset.partial_member_list || [])
   const [memberList, setMemberList] = useState<Member[]>([])
+  const { data: membersData } = useMembers()
 
   const [indexMethod, setIndexMethod] = useState(currentDataset.indexing_technique)
   const [retrievalConfig, setRetrievalConfig] = useState(localeCurrentDataset?.retrieval_model_dict as RetrievalConfig)
@@ -160,17 +160,12 @@ const SettingsModal: FC<SettingsModalProps> = ({
     }
   }
 
-  const getMembers = async () => {
-    const { accounts } = await fetchMembers({ url: '/workspaces/current/members', params: {} })
-    if (!accounts)
+  useEffect(() => {
+    if (!membersData?.accounts)
       setMemberList([])
     else
-      setMemberList(accounts)
-  }
-
-  useMount(() => {
-    getMembers()
-  })
+      setMemberList(membersData.accounts)
+  }, [membersData])
 
   const showMultiModalTip = useMemo(() => {
     return checkShowMultiModalTip({
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx
index 5ea799d092..99d042f681 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx
@@ -1,6 +1,6 @@
 import { RiCloseLine } from '@remixicon/react'
 import type { FC } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
diff --git a/web/app/components/app/configuration/debug/chat-user-input.tsx b/web/app/components/app/configuration/debug/chat-user-input.tsx
index 16666d514e..c25bed548c 100644
--- a/web/app/components/app/configuration/debug/chat-user-input.tsx
+++ b/web/app/components/app/configuration/debug/chat-user-input.tsx
@@ -7,7 +7,7 @@ import Select from '@/app/components/base/select'
 import Textarea from '@/app/components/base/textarea'
 import { DEFAULT_VALUE_MAX_LEN } from '@/config'
 import type { Inputs } from '@/models/debug'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
 
 type Props = {
diff --git a/web/app/components/app/configuration/debug/debug-with-single-model/index.spec.tsx b/web/app/components/app/configuration/debug/debug-with-single-model/index.spec.tsx
index f76145f901..676456c3ea 100644
--- a/web/app/components/app/configuration/debug/debug-with-single-model/index.spec.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-single-model/index.spec.tsx
@@ -1,5 +1,5 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { createRef } from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { type ReactNode, type RefObject, createRef } from 'react'
 import DebugWithSingleModel from './index'
 import type { DebugWithSingleModelRefType } from './index'
 import type { ChatItem } from '@/app/components/base/chat/types'
@@ -8,7 +8,8 @@ import type { ProviderContextState } from '@/context/provider-context'
 import type { DatasetConfigs, ModelConfig } from '@/models/debug'
 import { PromptMode } from '@/models/debug'
 import { type Collection, CollectionType } from '@/app/components/tools/types'
-import { AgentStrategy, AppModeEnum, ModelModeType } from '@/types/app'
+import type { FileEntity } from '@/app/components/base/file-uploader/types'
+import { AgentStrategy, AppModeEnum, ModelModeType, Resolution, TransferMethod } from '@/types/app'
 
 // ============================================================================
 // Test Data Factories (Following testing.md guidelines)
@@ -67,21 +68,6 @@ function createMockModelConfig(overrides: Partial<ModelConfig> = {}): ModelConfi
   }
 }
 
-/**
- * Factory function for creating mock ChatItem list
- * Note: Currently unused but kept for potential future test cases
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-function createMockChatList(items: Partial<ChatItem>[] = []): ChatItem[] {
-  return items.map((item, index) => ({
-    id: `msg-${index}`,
-    content: 'Test message',
-    isAnswer: false,
-    message_files: [],
-    ...item,
-  }))
-}
-
 /**
  * Factory function for creating mock Collection list
  */
@@ -156,9 +142,9 @@ const mockFetchSuggestedQuestions = jest.fn()
 const mockStopChatMessageResponding = jest.fn()
 
 jest.mock('@/service/debug', () => ({
-  fetchConversationMessages: (...args: any[]) => mockFetchConversationMessages(...args),
-  fetchSuggestedQuestions: (...args: any[]) => mockFetchSuggestedQuestions(...args),
-  stopChatMessageResponding: (...args: any[]) => mockStopChatMessageResponding(...args),
+  fetchConversationMessages: (...args: unknown[]) => mockFetchConversationMessages(...args),
+  fetchSuggestedQuestions: (...args: unknown[]) => mockFetchSuggestedQuestions(...args),
+  stopChatMessageResponding: (...args: unknown[]) => mockStopChatMessageResponding(...args),
 }))
 
 jest.mock('next/navigation', () => ({
@@ -255,11 +241,11 @@ const mockDebugConfigContext = {
     score_threshold: 0.7,
     datasets: { datasets: [] },
   } as DatasetConfigs,
-  datasetConfigsRef: { current: null } as any,
+  datasetConfigsRef: createRef<DatasetConfigs>(),
   setDatasetConfigs: jest.fn(),
   hasSetContextVar: false,
   isShowVisionConfig: false,
-  visionConfig: { enabled: false, number_limits: 2, detail: 'low' as any, transfer_methods: [] },
+  visionConfig: { enabled: false, number_limits: 2, detail: Resolution.low, transfer_methods: [] },
   setVisionConfig: jest.fn(),
   isAllowVideoUpload: false,
   isShowDocumentConfig: false,
@@ -295,7 +281,19 @@ jest.mock('@/context/app-context', () => ({
   useAppContext: jest.fn(() => mockAppContext),
 }))
 
-const mockFeatures = {
+type FeatureState = {
+  moreLikeThis: { enabled: boolean }
+  opening: { enabled: boolean; opening_statement: string; suggested_questions: string[] }
+  moderation: { enabled: boolean }
+  speech2text: { enabled: boolean }
+  text2speech: { enabled: boolean }
+  file: { enabled: boolean }
+  suggested: { enabled: boolean }
+  citation: { enabled: boolean }
+  annotationReply: { enabled: boolean }
+}
+
+const defaultFeatures: FeatureState = {
   moreLikeThis: { enabled: false },
   opening: { enabled: false, opening_statement: '', suggested_questions: [] },
   moderation: { enabled: false },
@@ -306,13 +304,11 @@ const mockFeatures = {
   citation: { enabled: false },
   annotationReply: { enabled: false },
 }
+type FeatureSelector = (state: { features: FeatureState }) => unknown
 
+let mockFeaturesState: FeatureState = { ...defaultFeatures }
 jest.mock('@/app/components/base/features/hooks', () => ({
-  useFeatures: jest.fn((selector) => {
-    if (typeof selector === 'function')
-      return selector({ features: mockFeatures })
-    return mockFeatures
-  }),
+  useFeatures: jest.fn(),
 }))
 
 const mockConfigFromDebugContext = {
@@ -345,7 +341,7 @@ jest.mock('../hooks', () => ({
 const mockSetShowAppConfigureFeaturesModal = jest.fn()
 
 jest.mock('@/app/components/app/store', () => ({
-  useStore: jest.fn((selector) => {
+  useStore: jest.fn((selector?: (state: { setShowAppConfigureFeaturesModal: typeof mockSetShowAppConfigureFeaturesModal }) => unknown) => {
     if (typeof selector === 'function')
       return selector({ setShowAppConfigureFeaturesModal: mockSetShowAppConfigureFeaturesModal })
     return mockSetShowAppConfigureFeaturesModal
@@ -384,12 +380,31 @@ jest.mock('@/app/components/base/audio-btn/audio.player.manager', () => ({
   },
 }))
 
-// Mock external APIs that might be used
-globalThis.ResizeObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
-}))
+type MockChatProps = {
+  chatList?: ChatItem[]
+  isResponding?: boolean
+  onSend?: (message: string, files?: FileEntity[]) => void
+  onRegenerate?: (chatItem: ChatItem, editedQuestion?: { message: string; files?: FileEntity[] }) => void
+  onStopResponding?: () => void
+  suggestedQuestions?: string[]
+  questionIcon?: ReactNode
+  answerIcon?: ReactNode
+  onAnnotationAdded?: (annotationId: string, authorName: string, question: string, answer: string, index: number) => void
+  onAnnotationEdited?: (question: string, answer: string, index: number) => void
+  onAnnotationRemoved?: (index: number) => void
+  switchSibling?: (siblingMessageId: string) => void
+  onFeatureBarClick?: (state: boolean) => void
+}
+
+const mockFile: FileEntity = {
+  id: 'file-1',
+  name: 'test.png',
+  size: 123,
+  type: 'image/png',
+  progress: 100,
+  transferMethod: TransferMethod.local_file,
+  supportFileType: 'image',
+}
 
 // Mock Chat component (complex with many dependencies)
 // This is a pragmatic mock that tests the integration at DebugWithSingleModel level
@@ -408,11 +423,13 @@ jest.mock('@/app/components/base/chat/chat', () => {
     onAnnotationRemoved,
     switchSibling,
     onFeatureBarClick,
-  }: any) {
+  }: MockChatProps) {
+    const items = chatList || []
+    const suggested = suggestedQuestions ?? []
     return (
       <div data-testid="chat-component">
         <div data-testid="chat-list">
-          {chatList?.map((item: any) => (
+          {items.map((item: ChatItem) => (
             <div key={item.id} data-testid={`chat-item-${item.id}`}>
               {item.content}
             </div>
@@ -434,14 +451,21 @@ jest.mock('@/app/components/base/chat/chat', () => {
         >
           Send
         </button>
+        <button
+          data-testid="send-with-files"
+          onClick={() => onSend?.('test message', [mockFile])}
+          disabled={isResponding}
+        >
+          Send With Files
+        </button>
         {isResponding && (
           <button data-testid="stop-button" onClick={onStopResponding}>
             Stop
           </button>
         )}
-        {suggestedQuestions?.length > 0 && (
+        {suggested.length > 0 && (
           <div data-testid="suggested-questions">
-            {suggestedQuestions.map((q: string, i: number) => (
+            {suggested.map((q: string, i: number) => (
               <button key={i} onClick={() => onSend?.(q, [])}>
                 {q}
               </button>
@@ -451,7 +475,13 @@ jest.mock('@/app/components/base/chat/chat', () => {
         {onRegenerate && (
           <button
             data-testid="regenerate-button"
-            onClick={() => onRegenerate({ id: 'msg-1', parentMessageId: 'msg-0' })}
+            onClick={() => onRegenerate({
+              id: 'msg-1',
+              content: 'Question',
+              isAnswer: false,
+              message_files: [],
+              parentMessageId: 'msg-0',
+            })}
           >
             Regenerate
           </button>
@@ -506,12 +536,30 @@ jest.mock('@/app/components/base/chat/chat', () => {
 // ============================================================================
 
 describe('DebugWithSingleModel', () => {
-  let ref: React.RefObject<DebugWithSingleModelRefType | null>
+  let ref: RefObject<DebugWithSingleModelRefType | null>
 
   beforeEach(() => {
     jest.clearAllMocks()
     ref = createRef<DebugWithSingleModelRefType | null>()
 
+    const { useDebugConfigurationContext } = require('@/context/debug-configuration')
+    const { useProviderContext } = require('@/context/provider-context')
+    const { useAppContext } = require('@/context/app-context')
+    const { useConfigFromDebugContext, useFormattingChangedSubscription } = require('../hooks')
+    const { useFeatures } = require('@/app/components/base/features/hooks') as { useFeatures: jest.Mock }
+
+    useDebugConfigurationContext.mockReturnValue(mockDebugConfigContext)
+    useProviderContext.mockReturnValue(mockProviderContext)
+    useAppContext.mockReturnValue(mockAppContext)
+    useConfigFromDebugContext.mockReturnValue(mockConfigFromDebugContext)
+    useFormattingChangedSubscription.mockReturnValue(undefined)
+    mockFeaturesState = { ...defaultFeatures }
+    useFeatures.mockImplementation((selector?: FeatureSelector) => {
+      if (typeof selector === 'function')
+        return selector({ features: mockFeaturesState })
+      return mockFeaturesState
+    })
+
     // Reset mock implementations
     mockFetchConversationMessages.mockResolvedValue({ data: [] })
     mockFetchSuggestedQuestions.mockResolvedValue({ data: [] })
@@ -521,7 +569,7 @@ describe('DebugWithSingleModel', () => {
   // Rendering Tests
   describe('Rendering', () => {
     it('should render without crashing', () => {
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
 
       // Verify Chat component is rendered
       expect(screen.getByTestId('chat-component')).toBeInTheDocument()
@@ -532,7 +580,7 @@ describe('DebugWithSingleModel', () => {
     it('should render with custom checkCanSend prop', () => {
       const checkCanSend = jest.fn(() => true)
 
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} checkCanSend={checkCanSend} />)
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} checkCanSend={checkCanSend} />)
 
       expect(screen.getByTestId('chat-component')).toBeInTheDocument()
     })
@@ -543,122 +591,88 @@ describe('DebugWithSingleModel', () => {
     it('should respect checkCanSend returning true', async () => {
       const checkCanSend = jest.fn(() => true)
 
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} checkCanSend={checkCanSend} />)
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} checkCanSend={checkCanSend} />)
 
       const sendButton = screen.getByTestId('send-button')
       fireEvent.click(sendButton)
 
+      const { ssePost } = require('@/service/base') as { ssePost: jest.Mock }
       await waitFor(() => {
         expect(checkCanSend).toHaveBeenCalled()
+        expect(ssePost).toHaveBeenCalled()
       })
+
+      expect(ssePost.mock.calls[0][0]).toBe('apps/test-app-id/chat-messages')
     })
 
     it('should prevent send when checkCanSend returns false', async () => {
       const checkCanSend = jest.fn(() => false)
 
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} checkCanSend={checkCanSend} />)
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} checkCanSend={checkCanSend} />)
 
       const sendButton = screen.getByTestId('send-button')
       fireEvent.click(sendButton)
 
+      const { ssePost } = require('@/service/base') as { ssePost: jest.Mock }
       await waitFor(() => {
         expect(checkCanSend).toHaveBeenCalled()
         expect(checkCanSend).toHaveReturnedWith(false)
       })
+      expect(ssePost).not.toHaveBeenCalled()
     })
   })
 
-  // Context Integration Tests
-  describe('Context Integration', () => {
-    it('should use debug configuration context', () => {
-      const { useDebugConfigurationContext } = require('@/context/debug-configuration')
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should open feature configuration when feature bar is clicked', () => {
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
 
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
+      fireEvent.click(screen.getByTestId('feature-bar-button'))
 
-      expect(useDebugConfigurationContext).toHaveBeenCalled()
-    })
-
-    it('should use provider context for model list', () => {
-      const { useProviderContext } = require('@/context/provider-context')
-
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
-
-      expect(useProviderContext).toHaveBeenCalled()
-    })
-
-    it('should use app context for user profile', () => {
-      const { useAppContext } = require('@/context/app-context')
-
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
-
-      expect(useAppContext).toHaveBeenCalled()
-    })
-
-    it('should use features from features hook', () => {
-      const { useFeatures } = require('@/app/components/base/features/hooks')
-
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
-
-      expect(useFeatures).toHaveBeenCalled()
-    })
-
-    it('should use config from debug context hook', () => {
-      const { useConfigFromDebugContext } = require('../hooks')
-
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
-
-      expect(useConfigFromDebugContext).toHaveBeenCalled()
-    })
-
-    it('should subscribe to formatting changes', () => {
-      const { useFormattingChangedSubscription } = require('../hooks')
-
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
-
-      expect(useFormattingChangedSubscription).toHaveBeenCalled()
+      expect(mockSetShowAppConfigureFeaturesModal).toHaveBeenCalledWith(true)
     })
   })
 
   // Model Configuration Tests
   describe('Model Configuration', () => {
-    it('should merge features into config correctly when all features enabled', () => {
-      const { useFeatures } = require('@/app/components/base/features/hooks')
+    it('should include opening features in request when enabled', async () => {
+      mockFeaturesState = {
+        ...defaultFeatures,
+        opening: { enabled: true, opening_statement: 'Hello!', suggested_questions: ['Q1'] },
+      }
 
-      useFeatures.mockReturnValue((selector: any) => {
-        const features = {
-          moreLikeThis: { enabled: true },
-          opening: { enabled: true, opening_statement: 'Hello!', suggested_questions: ['Q1'] },
-          moderation: { enabled: true },
-          speech2text: { enabled: true },
-          text2speech: { enabled: true },
-          file: { enabled: true },
-          suggested: { enabled: true },
-          citation: { enabled: true },
-          annotationReply: { enabled: true },
-        }
-        return typeof selector === 'function' ? selector({ features }) : features
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
+
+      fireEvent.click(screen.getByTestId('send-button'))
+
+      const { ssePost } = require('@/service/base') as { ssePost: jest.Mock }
+      await waitFor(() => {
+        expect(ssePost).toHaveBeenCalled()
       })
 
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
-
-      expect(screen.getByTestId('chat-component')).toBeInTheDocument()
+      const body = ssePost.mock.calls[0][1].body
+      expect(body.model_config.opening_statement).toBe('Hello!')
+      expect(body.model_config.suggested_questions).toEqual(['Q1'])
     })
 
-    it('should handle opening feature disabled correctly', () => {
-      const { useFeatures } = require('@/app/components/base/features/hooks')
+    it('should omit opening statement when feature is disabled', async () => {
+      mockFeaturesState = {
+        ...defaultFeatures,
+        opening: { enabled: false, opening_statement: 'Should not appear', suggested_questions: ['Q1'] },
+      }
 
-      useFeatures.mockReturnValue((selector: any) => {
-        const features = {
-          ...mockFeatures,
-          opening: { enabled: false, opening_statement: 'Should not appear', suggested_questions: ['Q1'] },
-        }
-        return typeof selector === 'function' ? selector({ features }) : features
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
+
+      fireEvent.click(screen.getByTestId('send-button'))
+
+      const { ssePost } = require('@/service/base') as { ssePost: jest.Mock }
+      await waitFor(() => {
+        expect(ssePost).toHaveBeenCalled()
       })
 
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
-
-      // When opening is disabled, opening_statement should be empty
-      expect(screen.queryByText('Should not appear')).not.toBeInTheDocument()
+      const body = ssePost.mock.calls[0][1].body
+      expect(body.model_config.opening_statement).toBe('')
+      expect(body.model_config.suggested_questions).toEqual([])
     })
 
     it('should handle model without vision support', () => {
@@ -689,7 +703,7 @@ describe('DebugWithSingleModel', () => {
         ],
       }))
 
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
 
       expect(screen.getByTestId('chat-component')).toBeInTheDocument()
     })
@@ -710,7 +724,7 @@ describe('DebugWithSingleModel', () => {
         ],
       }))
 
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
 
       expect(screen.getByTestId('chat-component')).toBeInTheDocument()
     })
@@ -735,7 +749,7 @@ describe('DebugWithSingleModel', () => {
         }),
       })
 
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
 
       // Component should render successfully with filtered variables
       expect(screen.getByTestId('chat-component')).toBeInTheDocument()
@@ -754,7 +768,7 @@ describe('DebugWithSingleModel', () => {
         }),
       })
 
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
 
       expect(screen.getByTestId('chat-component')).toBeInTheDocument()
     })
@@ -763,7 +777,7 @@ describe('DebugWithSingleModel', () => {
   // Tool Icons Tests
   describe('Tool Icons', () => {
     it('should map tool icons from collection list', () => {
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
 
       expect(screen.getByTestId('chat-component')).toBeInTheDocument()
     })
@@ -783,7 +797,7 @@ describe('DebugWithSingleModel', () => {
         }),
       })
 
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
 
       expect(screen.getByTestId('chat-component')).toBeInTheDocument()
     })
@@ -812,7 +826,7 @@ describe('DebugWithSingleModel', () => {
         collectionList: [],
       })
 
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
 
       expect(screen.getByTestId('chat-component')).toBeInTheDocument()
     })
@@ -828,7 +842,7 @@ describe('DebugWithSingleModel', () => {
         inputs: {},
       })
 
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
 
       expect(screen.getByTestId('chat-component')).toBeInTheDocument()
     })
@@ -846,7 +860,7 @@ describe('DebugWithSingleModel', () => {
         },
       })
 
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
 
       expect(screen.getByTestId('chat-component')).toBeInTheDocument()
     })
@@ -859,7 +873,7 @@ describe('DebugWithSingleModel', () => {
         completionParams: {},
       })
 
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
 
       expect(screen.getByTestId('chat-component')).toBeInTheDocument()
     })
@@ -868,7 +882,7 @@ describe('DebugWithSingleModel', () => {
   // Imperative Handle Tests
   describe('Imperative Handle', () => {
     it('should expose handleRestart method via ref', () => {
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
 
       expect(ref.current).not.toBeNull()
       expect(ref.current?.handleRestart).toBeDefined()
@@ -876,65 +890,26 @@ describe('DebugWithSingleModel', () => {
     })
 
     it('should call handleRestart when invoked via ref', () => {
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
 
-      expect(() => {
+      act(() => {
         ref.current?.handleRestart()
-      }).not.toThrow()
-    })
-  })
-
-  // Memory and Performance Tests
-  describe('Memory and Performance', () => {
-    it('should properly memoize component', () => {
-      const { rerender } = render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
-
-      // Re-render with same props
-      rerender(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
-
-      expect(screen.getByTestId('chat-component')).toBeInTheDocument()
-    })
-
-    it('should have displayName set for debugging', () => {
-      expect(DebugWithSingleModel).toBeDefined()
-      // memo wraps the component
-      expect(typeof DebugWithSingleModel).toBe('object')
-    })
-  })
-
-  // Async Operations Tests
-  describe('Async Operations', () => {
-    it('should handle API calls during message send', async () => {
-      mockFetchConversationMessages.mockResolvedValue({ data: [] })
-
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
-
-      const textarea = screen.getByRole('textbox', { hidden: true })
-      fireEvent.change(textarea, { target: { value: 'Test message' } })
-
-      // Component should render without errors during async operations
-      await waitFor(() => {
-        expect(screen.getByTestId('chat-component')).toBeInTheDocument()
-      })
-    })
-
-    it('should handle API errors gracefully', async () => {
-      mockFetchConversationMessages.mockRejectedValue(new Error('API Error'))
-
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
-
-      // Component should still render even if API calls fail
-      await waitFor(() => {
-        expect(screen.getByTestId('chat-component')).toBeInTheDocument()
       })
     })
   })
 
   // File Upload Tests
   describe('File Upload', () => {
-    it('should not include files when vision is not supported', () => {
+    it('should not include files when vision is not supported', async () => {
+      const { useDebugConfigurationContext } = require('@/context/debug-configuration')
       const { useProviderContext } = require('@/context/provider-context')
-      const { useFeatures } = require('@/app/components/base/features/hooks')
+
+      useDebugConfigurationContext.mockReturnValue({
+        ...mockDebugConfigContext,
+        modelConfig: createMockModelConfig({
+          model_id: 'gpt-3.5-turbo',
+        }),
+      })
 
       useProviderContext.mockReturnValue(createMockProviderContext({
         textGenerationModelList: [
@@ -961,23 +936,34 @@ describe('DebugWithSingleModel', () => {
         ],
       }))
 
-      useFeatures.mockReturnValue((selector: any) => {
-        const features = {
-          ...mockFeatures,
-          file: { enabled: true }, // File upload enabled
-        }
-        return typeof selector === 'function' ? selector({ features }) : features
+      mockFeaturesState = {
+        ...defaultFeatures,
+        file: { enabled: true },
+      }
+
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
+
+      fireEvent.click(screen.getByTestId('send-with-files'))
+
+      const { ssePost } = require('@/service/base') as { ssePost: jest.Mock }
+      await waitFor(() => {
+        expect(ssePost).toHaveBeenCalled()
       })
 
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
-
-      // Should render but not allow file uploads
-      expect(screen.getByTestId('chat-component')).toBeInTheDocument()
+      const body = ssePost.mock.calls[0][1].body
+      expect(body.files).toEqual([])
     })
 
-    it('should support files when vision is enabled', () => {
+    it('should support files when vision is enabled', async () => {
+      const { useDebugConfigurationContext } = require('@/context/debug-configuration')
       const { useProviderContext } = require('@/context/provider-context')
-      const { useFeatures } = require('@/app/components/base/features/hooks')
+
+      useDebugConfigurationContext.mockReturnValue({
+        ...mockDebugConfigContext,
+        modelConfig: createMockModelConfig({
+          model_id: 'gpt-4-vision',
+        }),
+      })
 
       useProviderContext.mockReturnValue(createMockProviderContext({
         textGenerationModelList: [
@@ -1004,17 +990,22 @@ describe('DebugWithSingleModel', () => {
         ],
       }))
 
-      useFeatures.mockReturnValue((selector: any) => {
-        const features = {
-          ...mockFeatures,
-          file: { enabled: true },
-        }
-        return typeof selector === 'function' ? selector({ features }) : features
+      mockFeaturesState = {
+        ...defaultFeatures,
+        file: { enabled: true },
+      }
+
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
+
+      fireEvent.click(screen.getByTestId('send-with-files'))
+
+      const { ssePost } = require('@/service/base') as { ssePost: jest.Mock }
+      await waitFor(() => {
+        expect(ssePost).toHaveBeenCalled()
       })
 
-      render(<DebugWithSingleModel ref={ref as React.RefObject<DebugWithSingleModelRefType>} />)
-
-      expect(screen.getByTestId('chat-component')).toBeInTheDocument()
+      const body = ssePost.mock.calls[0][1].body
+      expect(body.files).toHaveLength(1)
     })
   })
 })
diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx
index 2537062e13..4da12319f2 100644
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@@ -1,7 +1,6 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import useSWR from 'swr'
 import { basePath } from '@/utils/var'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -72,7 +71,7 @@ import type { Features as FeaturesData, FileUpload } from '@/app/components/base
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import NewFeaturePanel from '@/app/components/base/features/new-feature-panel'
-import { fetchFileUploadConfig } from '@/service/common'
+import { useFileUploadConfig } from '@/service/use-common'
 import {
   correctModelProvider,
   correctToolProvider,
@@ -101,7 +100,7 @@ const Configuration: FC = () => {
     showAppConfigureFeaturesModal: state.showAppConfigureFeaturesModal,
     setShowAppConfigureFeaturesModal: state.setShowAppConfigureFeaturesModal,
   })))
-  const { data: fileUploadConfigResponse } = useSWR({ url: '/files/upload' }, fetchFileUploadConfig)
+  const { data: fileUploadConfigResponse } = useFileUploadConfig()
 
   const latestPublishedAt = useMemo(() => appDetail?.model_config?.updated_at, [appDetail])
   const [formattingChanged, setFormattingChanged] = useState(false)
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 005f7f938f..9874664443 100644
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@@ -21,7 +21,7 @@ import FeatureBar from '@/app/components/base/features/new-feature-panel/feature
 import type { VisionFile, VisionSettings } from '@/types/app'
 import { DEFAULT_VALUE_MAX_LEN } from '@/config'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
 
 export type IPromptValuePanelProps = {
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 990e679c79..6f177643ae 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
@@ -1,6 +1,5 @@
 import type { FC } from 'react'
 import { useState } from 'react'
-import useSWR from 'swr'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import FormGeneration from '@/app/components/base/features/new-feature-panel/moderation/form-generation'
@@ -9,7 +8,6 @@ import Button from '@/app/components/base/button'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import ApiBasedExtensionSelector from '@/app/components/header/account-setting/api-based-extension-page/selector'
 import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
-import { fetchCodeBasedExtensionList } from '@/service/common'
 import { SimpleSelect } from '@/app/components/base/select'
 import I18n from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n-config/language'
@@ -21,6 +19,7 @@ import { useToastContext } from '@/app/components/base/toast'
 import AppIcon from '@/app/components/base/app-icon'
 import { noop } from 'lodash-es'
 import { useDocLink } from '@/context/i18n'
+import { useCodeBasedExtensions } from '@/service/use-common'
 
 const systemTypes = ['api']
 type ExternalDataToolModalProps = {
@@ -46,10 +45,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
   const { locale } = useContext(I18n)
   const [localeData, setLocaleData] = useState(data.type ? data : { ...data, type: 'api' })
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
-  const { data: codeBasedExtensionList } = useSWR(
-    '/code-based-extension?module=external_data_tool',
-    fetchCodeBasedExtensionList,
-  )
+  const { data: codeBasedExtensionList } = useCodeBasedExtensions('external_data_tool')
 
   const providers: Provider[] = [
     {
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 a3bf91cb5d..df35a74ec7 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
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { PlusIcon } from '@heroicons/react/20/solid'
 import { AppTypeIcon, AppTypeLabel } from '../../type-selector'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { App } from '@/models/explore'
 import AppIcon from '@/app/components/base/app-icon'
 
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 51b6874d52..4655d7a676 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
@@ -11,7 +11,7 @@ import AppCard from '../app-card'
 import Sidebar, { AppCategories, AppCategoryLabel } from './sidebar'
 import Toast from '@/app/components/base/toast'
 import Divider from '@/app/components/base/divider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ExploreContext from '@/context/explore-context'
 import type { App } from '@/models/explore'
 import { fetchAppDetail, fetchAppList } from '@/service/explore'
diff --git a/web/app/components/app/create-app-dialog/app-list/sidebar.tsx b/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
index 85c55c5385..89062cdcf9 100644
--- a/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { RiStickyNoteAddLine, RiThumbUpLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 
 export enum AppCategories {
@@ -40,13 +40,13 @@ type CategoryItemProps = {
 }
 function CategoryItem({ category, active, onClick }: CategoryItemProps) {
   return <li
-    className={classNames('group flex h-8 cursor-pointer items-center gap-2 rounded-lg p-1 pl-3 hover:bg-state-base-hover [&.active]:bg-state-base-active', active && 'active')}
+    className={cn('group flex h-8 cursor-pointer items-center gap-2 rounded-lg p-1 pl-3 hover:bg-state-base-hover [&.active]:bg-state-base-active', active && 'active')}
     onClick={() => { onClick?.(category) }}>
     {category === AppCategories.RECOMMENDED && <div className='inline-flex h-5 w-5 items-center justify-center rounded-md'>
       <RiThumbUpLine className='h-4 w-4 text-components-menu-item-text group-[.active]:text-components-menu-item-text-active' />
     </div>}
     <AppCategoryLabel category={category}
-      className={classNames('system-sm-medium text-components-menu-item-text group-hover:text-components-menu-item-text-hover group-[.active]:text-components-menu-item-text-active', active && 'system-sm-semibold')} />
+      className={cn('system-sm-medium text-components-menu-item-text group-hover:text-components-menu-item-text-hover group-[.active]:text-components-menu-item-text-active', active && 'system-sm-semibold')} />
   </li >
 }
 
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index a449ec8ef2..d74715187f 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -13,7 +13,7 @@ import AppIconPicker from '../../base/app-icon-picker'
 import type { AppIconSelection } from '../../base/app-icon-picker'
 import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { basePath } from '@/utils/var'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
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 3564738dfd..0d30a2abac 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -25,7 +25,7 @@ import { useProviderContext } from '@/context/provider-context'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { getRedirection } from '@/utils/app-redirection'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { noop } from 'lodash-es'
 import { trackEvent } from '@/app/components/base/amplitude'
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 b6644da5a4..2745ca84c6 100644
--- a/web/app/components/app/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/app/create-from-dsl-modal/uploader.tsx
@@ -8,7 +8,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { formatFileSize } from '@/utils/format'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Yaml as YamlIcon } from '@/app/components/base/icons/src/public/files'
 import { ToastContext } from '@/app/components/base/toast'
 import ActionButton from '@/app/components/base/action-button'
diff --git a/web/app/components/app/duplicate-modal/index.spec.tsx b/web/app/components/app/duplicate-modal/index.spec.tsx
new file mode 100644
index 0000000000..2d73addeab
--- /dev/null
+++ b/web/app/components/app/duplicate-modal/index.spec.tsx
@@ -0,0 +1,167 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import DuplicateAppModal from './index'
+import Toast from '@/app/components/base/toast'
+import type { ProviderContextState } from '@/context/provider-context'
+import { baseProviderContextValue } from '@/context/provider-context'
+import { Plan } from '@/app/components/billing/type'
+
+const appsFullRenderSpy = jest.fn()
+jest.mock('@/app/components/billing/apps-full-in-dialog', () => ({
+  __esModule: true,
+  default: ({ loc }: { loc: string }) => {
+    appsFullRenderSpy(loc)
+    return <div data-testid="apps-full">AppsFull</div>
+  },
+}))
+
+const useProviderContextMock = jest.fn<ProviderContextState, []>()
+jest.mock('@/context/provider-context', () => {
+  const actual = jest.requireActual('@/context/provider-context')
+  return {
+    ...actual,
+    useProviderContext: () => useProviderContextMock(),
+  }
+})
+
+const renderComponent = (overrides: Partial<React.ComponentProps<typeof DuplicateAppModal>> = {}) => {
+  const onConfirm = jest.fn().mockResolvedValue(undefined)
+  const onHide = jest.fn()
+  const props: React.ComponentProps<typeof DuplicateAppModal> = {
+    appName: 'My App',
+    icon_type: 'emoji',
+    icon: '🚀',
+    icon_background: '#FFEAD5',
+    icon_url: null,
+    show: true,
+    onConfirm,
+    onHide,
+    ...overrides,
+  }
+  const utils = render(<DuplicateAppModal {...props} />)
+  return {
+    ...utils,
+    onConfirm,
+    onHide,
+  }
+}
+
+const setupProviderContext = (overrides: Partial<ProviderContextState> = {}) => {
+  useProviderContextMock.mockReturnValue({
+    ...baseProviderContextValue,
+    plan: {
+      ...baseProviderContextValue.plan,
+      type: Plan.sandbox,
+      usage: {
+        ...baseProviderContextValue.plan.usage,
+        buildApps: 0,
+      },
+      total: {
+        ...baseProviderContextValue.plan.total,
+        buildApps: 10,
+      },
+    },
+    enableBilling: false,
+    ...overrides,
+  } as ProviderContextState)
+}
+
+describe('DuplicateAppModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    setupProviderContext()
+  })
+
+  // Rendering output based on modal visibility.
+  describe('Rendering', () => {
+    it('should render modal content when show is true', () => {
+      // Arrange
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('app.duplicateTitle')).toBeInTheDocument()
+      expect(screen.getByDisplayValue('My App')).toBeInTheDocument()
+    })
+
+    it('should not render modal content when show is false', () => {
+      // Arrange
+      renderComponent({ show: false })
+
+      // Assert
+      expect(screen.queryByText('app.duplicateTitle')).not.toBeInTheDocument()
+    })
+  })
+
+  // Prop-driven states such as full plan handling.
+  describe('Props', () => {
+    it('should disable duplicate button and show apps full content when plan is full', () => {
+      // Arrange
+      setupProviderContext({
+        enableBilling: true,
+        plan: {
+          ...baseProviderContextValue.plan,
+          type: Plan.sandbox,
+          usage: { ...baseProviderContextValue.plan.usage, buildApps: 10 },
+          total: { ...baseProviderContextValue.plan.total, buildApps: 10 },
+        },
+      })
+      renderComponent()
+
+      // Assert
+      expect(screen.getByTestId('apps-full')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'app.duplicate' })).toBeDisabled()
+    })
+  })
+
+  // User interactions for cancel and confirm flows.
+  describe('Interactions', () => {
+    it('should call onHide when cancel is clicked', async () => {
+      const user = userEvent.setup()
+      // Arrange
+      const { onHide } = renderComponent()
+
+      // Act
+      await user.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+
+      // Assert
+      expect(onHide).toHaveBeenCalledTimes(1)
+    })
+
+    it('should show error toast when name is empty', async () => {
+      const user = userEvent.setup()
+      const toastSpy = jest.spyOn(Toast, 'notify')
+      // Arrange
+      const { onConfirm, onHide } = renderComponent()
+
+      // Act
+      await user.clear(screen.getByDisplayValue('My App'))
+      await user.click(screen.getByRole('button', { name: 'app.duplicate' }))
+
+      // Assert
+      expect(toastSpy).toHaveBeenCalledWith({ type: 'error', message: 'explore.appCustomize.nameRequired' })
+      expect(onConfirm).not.toHaveBeenCalled()
+      expect(onHide).not.toHaveBeenCalled()
+    })
+
+    it('should submit app info and hide modal when duplicate is clicked', async () => {
+      const user = userEvent.setup()
+      // Arrange
+      const { onConfirm, onHide } = renderComponent()
+
+      // Act
+      await user.clear(screen.getByDisplayValue('My App'))
+      await user.type(screen.getByRole('textbox'), 'New App')
+      await user.click(screen.getByRole('button', { name: 'app.duplicate' }))
+
+      // Assert
+      expect(onConfirm).toHaveBeenCalledWith({
+        name: 'New App',
+        icon_type: 'emoji',
+        icon: '🚀',
+        icon_background: '#FFEAD5',
+      })
+      expect(onHide).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/web/app/components/app/duplicate-modal/index.tsx b/web/app/components/app/duplicate-modal/index.tsx
index f98fb831ed..f25eb5373d 100644
--- a/web/app/components/app/duplicate-modal/index.tsx
+++ b/web/app/components/app/duplicate-modal/index.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
 import AppIconPicker from '../../base/app-icon-picker'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
diff --git a/web/app/components/app/log-annotation/index.tsx b/web/app/components/app/log-annotation/index.tsx
index c0b0854b29..e7c2be3eed 100644
--- a/web/app/components/app/log-annotation/index.tsx
+++ b/web/app/components/app/log-annotation/index.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Log from '@/app/components/app/log'
 import WorkflowLog from '@/app/components/app/workflow-log'
 import Annotation from '@/app/components/app/annotation'
diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx
index 0ff375d815..e479cbe881 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -39,7 +39,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import CopyIcon from '@/app/components/base/copy-icon'
 import { buildChatItemTree, getThreadMessages } from '@/app/components/base/chat/utils'
 import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 import PromptLogModal from '../../base/prompt-log-modal'
 import { WorkflowContextProvider } from '@/app/components/workflow/context'
diff --git a/web/app/components/app/log/model-info.tsx b/web/app/components/app/log/model-info.tsx
index 626ef093e9..b3c4f11be5 100644
--- a/web/app/components/app/log/model-info.tsx
+++ b/web/app/components/app/log/model-info.tsx
@@ -13,7 +13,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const PARAM_MAP = {
   temperature: 'Temperature',
diff --git a/web/app/components/app/log/var-panel.tsx b/web/app/components/app/log/var-panel.tsx
index dd8c231a56..8915b3438a 100644
--- a/web/app/components/app/log/var-panel.tsx
+++ b/web/app/components/app/log/var-panel.tsx
@@ -9,7 +9,7 @@ import {
 } from '@remixicon/react'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   varList: { label: string; value: string }[]
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 b50b0077cb..47fe7af972 100644
--- a/web/app/components/app/overview/apikey-info-panel/index.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/index.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
 import { IS_CE_EDITION } from '@/config'
diff --git a/web/app/components/app/overview/embedded/index.tsx b/web/app/components/app/overview/embedded/index.tsx
index 6eba993e1d..d4be58b1b2 100644
--- a/web/app/components/app/overview/embedded/index.tsx
+++ b/web/app/components/app/overview/embedded/index.tsx
@@ -14,7 +14,7 @@ import type { SiteInfo } from '@/models/share'
 import { useThemeContext } from '@/app/components/base/chat/embedded-chatbot/theme/theme-context'
 import ActionButton from '@/app/components/base/action-button'
 import { basePath } from '@/utils/var'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   siteInfo?: SiteInfo
diff --git a/web/app/components/app/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
index 3b71b8f75c..d079631cf7 100644
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@@ -25,7 +25,7 @@ import { useModalContext } from '@/context/modal-context'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useDocLink } from '@/context/i18n'
 
 export type ISettingsModalProps = {
diff --git a/web/app/components/app/switch-app-modal/index.spec.tsx b/web/app/components/app/switch-app-modal/index.spec.tsx
new file mode 100644
index 0000000000..b6fe838666
--- /dev/null
+++ b/web/app/components/app/switch-app-modal/index.spec.tsx
@@ -0,0 +1,295 @@
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import SwitchAppModal from './index'
+import { ToastContext } from '@/app/components/base/toast'
+import type { App } from '@/types/app'
+import { AppModeEnum } from '@/types/app'
+import { Plan } from '@/app/components/billing/type'
+import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
+
+const mockPush = jest.fn()
+const mockReplace = jest.fn()
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: mockPush,
+    replace: mockReplace,
+  }),
+}))
+
+const mockSetAppDetail = jest.fn()
+jest.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: any) => unknown) => selector({ setAppDetail: mockSetAppDetail }),
+}))
+
+const mockSwitchApp = jest.fn()
+const mockDeleteApp = jest.fn()
+jest.mock('@/service/apps', () => ({
+  switchApp: (...args: unknown[]) => mockSwitchApp(...args),
+  deleteApp: (...args: unknown[]) => mockDeleteApp(...args),
+}))
+
+let mockIsEditor = true
+jest.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    isCurrentWorkspaceEditor: mockIsEditor,
+    userProfile: {
+      email: 'user@example.com',
+    },
+    langGeniusVersionInfo: {
+      current_version: '1.0.0',
+    },
+  }),
+}))
+
+let mockEnableBilling = false
+let mockPlan = {
+  type: Plan.sandbox,
+  usage: {
+    buildApps: 0,
+    teamMembers: 0,
+    annotatedResponse: 0,
+    documentsUploadQuota: 0,
+    apiRateLimit: 0,
+    triggerEvents: 0,
+    vectorSpace: 0,
+  },
+  total: {
+    buildApps: 10,
+    teamMembers: 0,
+    annotatedResponse: 0,
+    documentsUploadQuota: 0,
+    apiRateLimit: 0,
+    triggerEvents: 0,
+    vectorSpace: 0,
+  },
+}
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    plan: mockPlan,
+    enableBilling: mockEnableBilling,
+  }),
+}))
+
+jest.mock('@/app/components/billing/apps-full-in-dialog', () => ({
+  __esModule: true,
+  default: ({ loc }: { loc: string }) => <div data-testid="apps-full">AppsFull {loc}</div>,
+}))
+
+const createMockApp = (overrides: Partial<App> = {}): App => ({
+  id: 'app-123',
+  name: 'Demo App',
+  description: 'Demo description',
+  author_name: 'Demo author',
+  icon_type: 'emoji',
+  icon: '🚀',
+  icon_background: '#FFEAD5',
+  icon_url: null,
+  use_icon_as_answer_icon: false,
+  mode: AppModeEnum.COMPLETION,
+  enable_site: true,
+  enable_api: true,
+  api_rpm: 60,
+  api_rph: 3600,
+  is_demo: false,
+  model_config: {} as App['model_config'],
+  app_model_config: {} as App['app_model_config'],
+  created_at: Date.now(),
+  updated_at: Date.now(),
+  site: {
+    access_token: 'token',
+    app_base_url: 'https://example.com',
+  } as App['site'],
+  api_base_url: 'https://api.example.com',
+  tags: [],
+  access_mode: 'public_access' as App['access_mode'],
+  ...overrides,
+})
+
+const renderComponent = (overrides: Partial<React.ComponentProps<typeof SwitchAppModal>> = {}) => {
+  const notify = jest.fn()
+  const onClose = jest.fn()
+  const onSuccess = jest.fn()
+  const appDetail = createMockApp()
+
+  const utils = render(
+    <ToastContext.Provider value={{ notify, close: jest.fn() }}>
+      <SwitchAppModal
+        show
+        appDetail={appDetail}
+        onClose={onClose}
+        onSuccess={onSuccess}
+        {...overrides}
+      />
+    </ToastContext.Provider>,
+  )
+
+  return {
+    ...utils,
+    notify,
+    onClose,
+    onSuccess,
+    appDetail,
+  }
+}
+
+describe('SwitchAppModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockIsEditor = true
+    mockEnableBilling = false
+    mockPlan = {
+      type: Plan.sandbox,
+      usage: {
+        buildApps: 0,
+        teamMembers: 0,
+        annotatedResponse: 0,
+        documentsUploadQuota: 0,
+        apiRateLimit: 0,
+        triggerEvents: 0,
+        vectorSpace: 0,
+      },
+      total: {
+        buildApps: 10,
+        teamMembers: 0,
+        annotatedResponse: 0,
+        documentsUploadQuota: 0,
+        apiRateLimit: 0,
+        triggerEvents: 0,
+        vectorSpace: 0,
+      },
+    }
+  })
+
+  // Rendering behavior for modal visibility and default values.
+  describe('Rendering', () => {
+    it('should render modal content when show is true', () => {
+      // Arrange
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('app.switch')).toBeInTheDocument()
+      expect(screen.getByDisplayValue('Demo App(copy)')).toBeInTheDocument()
+    })
+
+    it('should not render modal content when show is false', () => {
+      // Arrange
+      renderComponent({ show: false })
+
+      // Assert
+      expect(screen.queryByText('app.switch')).not.toBeInTheDocument()
+    })
+  })
+
+  // Prop-driven UI states such as disabling actions.
+  describe('Props', () => {
+    it('should disable the start button when name is empty', async () => {
+      const user = userEvent.setup()
+      // Arrange
+      renderComponent()
+
+      // Act
+      const nameInput = screen.getByDisplayValue('Demo App(copy)')
+      await user.clear(nameInput)
+
+      // Assert
+      expect(screen.getByRole('button', { name: 'app.switchStart' })).toBeDisabled()
+    })
+
+    it('should render the apps full warning when plan limits are reached', () => {
+      // Arrange
+      mockEnableBilling = true
+      mockPlan = {
+        ...mockPlan,
+        usage: { ...mockPlan.usage, buildApps: 10 },
+        total: { ...mockPlan.total, buildApps: 10 },
+      }
+      renderComponent()
+
+      // Assert
+      expect(screen.getByTestId('apps-full')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'app.switchStart' })).toBeDisabled()
+    })
+  })
+
+  // User interactions that trigger navigation and API calls.
+  describe('Interactions', () => {
+    it('should call onClose when cancel is clicked', async () => {
+      const user = userEvent.setup()
+      // Arrange
+      const { onClose } = renderComponent()
+
+      // Act
+      await user.click(screen.getByRole('button', { name: 'app.newApp.Cancel' }))
+
+      // Assert
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should switch app and navigate with push when keeping original', async () => {
+      const user = userEvent.setup()
+      // Arrange
+      const { appDetail, notify, onClose, onSuccess } = renderComponent()
+      mockSwitchApp.mockResolvedValueOnce({ new_app_id: 'new-app-001' })
+      const setItemSpy = jest.spyOn(Storage.prototype, 'setItem')
+
+      // Act
+      await user.click(screen.getByRole('button', { name: 'app.switchStart' }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockSwitchApp).toHaveBeenCalledWith({
+          appID: appDetail.id,
+          name: 'Demo App(copy)',
+          icon_type: 'emoji',
+          icon: '🚀',
+          icon_background: '#FFEAD5',
+        })
+      })
+      expect(onSuccess).toHaveBeenCalledTimes(1)
+      expect(onClose).toHaveBeenCalledTimes(1)
+      expect(notify).toHaveBeenCalledWith({ type: 'success', message: 'app.newApp.appCreated' })
+      expect(setItemSpy).toHaveBeenCalledWith(NEED_REFRESH_APP_LIST_KEY, '1')
+      expect(mockPush).toHaveBeenCalledWith('/app/new-app-001/workflow')
+      expect(mockReplace).not.toHaveBeenCalled()
+    })
+
+    it('should delete the original app and use replace when remove original is confirmed', async () => {
+      const user = userEvent.setup()
+      // Arrange
+      const { appDetail } = renderComponent({ inAppDetail: true })
+      mockSwitchApp.mockResolvedValueOnce({ new_app_id: 'new-app-002' })
+
+      // Act
+      await user.click(screen.getByText('app.removeOriginal'))
+      const confirmButton = await screen.findByRole('button', { name: 'common.operation.confirm' })
+      await user.click(confirmButton)
+      await user.click(screen.getByRole('button', { name: 'app.switchStart' }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockDeleteApp).toHaveBeenCalledWith(appDetail.id)
+      })
+      expect(mockReplace).toHaveBeenCalledWith('/app/new-app-002/workflow')
+      expect(mockPush).not.toHaveBeenCalled()
+      expect(mockSetAppDetail).toHaveBeenCalledTimes(1)
+    })
+
+    it('should notify error when switch app fails', async () => {
+      const user = userEvent.setup()
+      // Arrange
+      const { notify, onClose, onSuccess } = renderComponent()
+      mockSwitchApp.mockRejectedValueOnce(new Error('fail'))
+
+      // Act
+      await user.click(screen.getByRole('button', { name: 'app.switchStart' }))
+
+      // Assert
+      await waitFor(() => {
+        expect(notify).toHaveBeenCalledWith({ type: 'error', message: 'app.newApp.appCreateFailed' })
+      })
+      expect(onClose).not.toHaveBeenCalled()
+      expect(onSuccess).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index a7e1cea429..742212a44d 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -6,7 +6,7 @@ import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
 import AppIconPicker from '../../base/app-icon-picker'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Checkbox from '@/app/components/base/checkbox'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
diff --git a/web/app/components/app/text-generate/item/index.tsx b/web/app/components/app/text-generate/item/index.tsx
index 92d86351e0..d284ecd46e 100644
--- a/web/app/components/app/text-generate/item/index.tsx
+++ b/web/app/components/app/text-generate/item/index.tsx
@@ -30,7 +30,7 @@ import type { SiteInfo } from '@/models/share'
 import { useChatContext } from '@/app/components/base/chat/chat/context'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import NewAudioButton from '@/app/components/base/new-audio-button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const MAX_DEPTH = 3
 
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 c22a4ca6c2..e6cf264cf2 100644
--- a/web/app/components/app/text-generate/saved-items/index.tsx
+++ b/web/app/components/app/text-generate/saved-items/index.tsx
@@ -8,7 +8,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import copy from 'copy-to-clipboard'
 import NoData from './no-data'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { SavedMessage } from '@/models/debug'
 import { Markdown } from '@/app/components/base/markdown'
 import Toast from '@/app/components/base/toast'
diff --git a/web/app/components/app/type-selector/index.tsx b/web/app/components/app/type-selector/index.tsx
index 7be2351119..f213a89a94 100644
--- a/web/app/components/app/type-selector/index.tsx
+++ b/web/app/components/app/type-selector/index.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next'
 import React, { useState } from 'react'
 import { RiArrowDownSLine, RiCloseCircleFill, RiExchange2Fill, RiFilter3Line } from '@remixicon/react'
 import Checkbox from '../../base/checkbox'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/app/workflow-log/filter.spec.tsx b/web/app/components/app/workflow-log/filter.spec.tsx
index d7bec41224..04216e5cc8 100644
--- a/web/app/components/app/workflow-log/filter.spec.tsx
+++ b/web/app/components/app/workflow-log/filter.spec.tsx
@@ -7,6 +7,7 @@
  * - Keyword search
  */
 
+import { useState } from 'react'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import Filter, { TIME_PERIOD_MAPPING } from './filter'
@@ -293,12 +294,21 @@ describe('Filter', () => {
       const user = userEvent.setup()
       const setQueryParams = jest.fn()
 
-      render(
-        <Filter
-          queryParams={createDefaultQueryParams()}
-          setQueryParams={setQueryParams}
-        />,
-      )
+      const Wrapper = () => {
+        const [queryParams, updateQueryParams] = useState<QueryParam>(createDefaultQueryParams())
+        const handleSetQueryParams = (next: QueryParam) => {
+          updateQueryParams(next)
+          setQueryParams(next)
+        }
+        return (
+          <Filter
+            queryParams={queryParams}
+            setQueryParams={handleSetQueryParams}
+          />
+        )
+      }
+
+      render(<Wrapper />)
 
       const input = screen.getByPlaceholderText('common.operation.search')
       await user.type(input, 'workflow')
diff --git a/web/app/components/app/workflow-log/filter.tsx b/web/app/components/app/workflow-log/filter.tsx
index 0c8d72c1be..a4db4c9642 100644
--- a/web/app/components/app/workflow-log/filter.tsx
+++ b/web/app/components/app/workflow-log/filter.tsx
@@ -65,7 +65,7 @@ const Filter: FC<IFilterProps> = ({ queryParams, setQueryParams }: IFilterProps)
         wrapperClassName='w-[200px]'
         showLeftIcon
         showClearIcon
-        value={queryParams.keyword}
+        value={queryParams.keyword ?? ''}
         placeholder={t('common.operation.search')!}
         onChange={(e) => {
           setQueryParams({ ...queryParams, keyword: e.target.value })
diff --git a/web/app/components/app/workflow-log/list.tsx b/web/app/components/app/workflow-log/list.tsx
index 0e9b5dd67f..cef8a98f44 100644
--- a/web/app/components/app/workflow-log/list.tsx
+++ b/web/app/components/app/workflow-log/list.tsx
@@ -12,7 +12,7 @@ import Drawer from '@/app/components/base/drawer'
 import Indicator from '@/app/components/header/indicator'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useTimestamp from '@/hooks/use-timestamp'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { WorkflowRunTriggeredFrom } from '@/models/log'
 
 type ILogs = {
diff --git a/web/app/components/apps/app-card.spec.tsx b/web/app/components/apps/app-card.spec.tsx
index 40aa66075d..f7ff525ed2 100644
--- a/web/app/components/apps/app-card.spec.tsx
+++ b/web/app/components/apps/app-card.spec.tsx
@@ -42,11 +42,12 @@ jest.mock('@/context/provider-context', () => ({
   }),
 }))
 
-// Mock global public store
+// Mock global public store - allow dynamic configuration
+let mockWebappAuthEnabled = false
 jest.mock('@/context/global-public-context', () => ({
   useGlobalPublicStore: (selector: (s: any) => any) => selector({
     systemFeatures: {
-      webapp_auth: { enabled: false },
+      webapp_auth: { enabled: mockWebappAuthEnabled },
       branding: { enabled: false },
     },
   }),
@@ -79,8 +80,9 @@ jest.mock('@/service/access-control', () => ({
 }))
 
 // Mock hooks
+const mockOpenAsyncWindow = jest.fn()
 jest.mock('@/hooks/use-async-window-open', () => ({
-  useAsyncWindowOpen: () => jest.fn(),
+  useAsyncWindowOpen: () => mockOpenAsyncWindow,
 }))
 
 // Mock utils
@@ -178,21 +180,10 @@ jest.mock('next/dynamic', () => {
   }
 })
 
-/**
- * Mock components that require special handling in test environment.
- *
- * Per frontend testing skills (mocking.md), we should NOT mock simple base components.
- * However, the following require mocking due to:
- * - Portal-based rendering that doesn't work well in happy-dom
- * - Deep dependency chains importing ES modules (like ky) incompatible with Jest
- * - Complex state management that requires controlled test behavior
- */
-
-// Popover uses portals for positioning which requires mocking in happy-dom environment
+// Popover uses @headlessui/react portals - mock for controlled interaction testing
 jest.mock('@/app/components/base/popover', () => {
   const MockPopover = ({ htmlContent, btnElement, btnClassName }: any) => {
     const [isOpen, setIsOpen] = React.useState(false)
-    // Call btnClassName to cover lines 430-433
     const computedClassName = typeof btnClassName === 'function' ? btnClassName(isOpen) : ''
     return React.createElement('div', { 'data-testid': 'custom-popover', 'className': computedClassName },
       React.createElement('div', {
@@ -210,13 +201,13 @@ jest.mock('@/app/components/base/popover', () => {
   return { __esModule: true, default: MockPopover }
 })
 
-// Tooltip uses portals for positioning - minimal mock preserving popup content as title attribute
+// Tooltip uses portals - minimal mock preserving popup content as title attribute
 jest.mock('@/app/components/base/tooltip', () => ({
   __esModule: true,
   default: ({ children, popupContent }: any) => React.createElement('div', { title: popupContent }, children),
 }))
 
-// TagSelector imports service/tag which depends on ky ES module - mock to avoid Jest ES module issues
+// TagSelector has API dependency (service/tag) - mock for isolated testing
 jest.mock('@/app/components/base/tag-management/selector', () => ({
   __esModule: true,
   default: ({ tags }: any) => {
@@ -227,7 +218,7 @@ jest.mock('@/app/components/base/tag-management/selector', () => ({
   },
 }))
 
-// AppTypeIcon has complex icon mapping logic - mock for focused component testing
+// AppTypeIcon has complex icon mapping - mock for focused component testing
 jest.mock('@/app/components/app/type-selector', () => ({
   AppTypeIcon: () => React.createElement('div', { 'data-testid': 'app-type-icon' }),
 }))
@@ -278,6 +269,8 @@ describe('AppCard', () => {
 
   beforeEach(() => {
     jest.clearAllMocks()
+    mockOpenAsyncWindow.mockReset()
+    mockWebappAuthEnabled = false
   })
 
   describe('Rendering', () => {
@@ -536,6 +529,46 @@ describe('AppCard', () => {
         expect(screen.queryByTestId('confirm-dialog')).not.toBeInTheDocument()
       })
     })
+
+    it('should close edit modal when onHide is called', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.editApp'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('edit-app-modal')).toBeInTheDocument()
+      })
+
+      // Click close button to trigger onHide
+      fireEvent.click(screen.getByTestId('close-edit-modal'))
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('edit-app-modal')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should close duplicate modal when onHide is called', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.duplicate'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('duplicate-modal')).toBeInTheDocument()
+      })
+
+      // Click close button to trigger onHide
+      fireEvent.click(screen.getByTestId('close-duplicate-modal'))
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('duplicate-modal')).not.toBeInTheDocument()
+      })
+    })
   })
 
   describe('Styling', () => {
@@ -852,6 +885,31 @@ describe('AppCard', () => {
         expect(workflowService.fetchWorkflowDraft).toHaveBeenCalled()
       })
     })
+
+    it('should close DSL export modal when onClose is called', async () => {
+      (workflowService.fetchWorkflowDraft as jest.Mock).mockResolvedValueOnce({
+        environment_variables: [{ value_type: 'secret', name: 'API_KEY' }],
+      })
+
+      const workflowApp = { ...mockApp, mode: AppModeEnum.WORKFLOW }
+      render(<AppCard app={workflowApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.export'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('dsl-export-modal')).toBeInTheDocument()
+      })
+
+      // Click close button to trigger onClose
+      fireEvent.click(screen.getByTestId('close-dsl-export'))
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('dsl-export-modal')).not.toBeInTheDocument()
+      })
+    })
   })
 
   describe('Edge Cases', () => {
@@ -1054,6 +1112,276 @@ describe('AppCard', () => {
 
       const tagSelector = screen.getByLabelText('tag-selector')
       expect(tagSelector).toBeInTheDocument()
+
+      // Click on tag selector wrapper to trigger stopPropagation
+      const tagSelectorWrapper = tagSelector.closest('div')
+      if (tagSelectorWrapper)
+        fireEvent.click(tagSelectorWrapper)
+    })
+
+    it('should handle popover mouse leave', async () => {
+      render(<AppCard app={mockApp} />)
+
+      // Open popover
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        expect(screen.getByTestId('popover-content')).toBeInTheDocument()
+      })
+
+      // Trigger mouse leave on the outer popover-content
+      fireEvent.mouseLeave(screen.getByTestId('popover-content'))
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should handle operations menu mouse leave', async () => {
+      render(<AppCard app={mockApp} />)
+
+      // Open popover
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        expect(screen.getByText('app.editApp')).toBeInTheDocument()
+      })
+
+      // Find the Operations wrapper div (contains the menu items)
+      const editButton = screen.getByText('app.editApp')
+      const operationsWrapper = editButton.closest('div.relative')
+
+      // Trigger mouse leave on the Operations wrapper to call onMouseLeave
+      if (operationsWrapper)
+        fireEvent.mouseLeave(operationsWrapper)
+    })
+
+    it('should click open in explore button', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        const openInExploreBtn = screen.getByText('app.openInExplore')
+        fireEvent.click(openInExploreBtn)
+      })
+
+      // Verify openAsyncWindow was called with callback and options
+      await waitFor(() => {
+        expect(mockOpenAsyncWindow).toHaveBeenCalledWith(
+          expect.any(Function),
+          expect.objectContaining({ onError: expect.any(Function) }),
+        )
+      })
+    })
+
+    it('should handle open in explore via async window', async () => {
+      // Configure mockOpenAsyncWindow to actually call the callback
+      mockOpenAsyncWindow.mockImplementationOnce(async (callback: () => Promise<string>) => {
+        await callback()
+      })
+
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        const openInExploreBtn = screen.getByText('app.openInExplore')
+        fireEvent.click(openInExploreBtn)
+      })
+
+      const { fetchInstalledAppList } = require('@/service/explore')
+      await waitFor(() => {
+        expect(fetchInstalledAppList).toHaveBeenCalledWith(mockApp.id)
+      })
+    })
+
+    it('should handle open in explore API failure', async () => {
+      const { fetchInstalledAppList } = require('@/service/explore')
+      fetchInstalledAppList.mockRejectedValueOnce(new Error('API Error'))
+
+      // Configure mockOpenAsyncWindow to call the callback and trigger error
+      mockOpenAsyncWindow.mockImplementationOnce(async (callback: () => Promise<string>, options: any) => {
+        try {
+          await callback()
+        }
+        catch (err) {
+          options?.onError?.(err)
+        }
+      })
+
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        const openInExploreBtn = screen.getByText('app.openInExplore')
+        fireEvent.click(openInExploreBtn)
+      })
+
+      await waitFor(() => {
+        expect(fetchInstalledAppList).toHaveBeenCalled()
+      })
+    })
+  })
+
+  describe('Access Control', () => {
+    it('should render operations menu correctly', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        expect(screen.getByText('app.editApp')).toBeInTheDocument()
+        expect(screen.getByText('app.duplicate')).toBeInTheDocument()
+        expect(screen.getByText('app.export')).toBeInTheDocument()
+        expect(screen.getByText('common.operation.delete')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Open in Explore - No App Found', () => {
+    it('should handle case when installed_apps is empty array', async () => {
+      const { fetchInstalledAppList } = require('@/service/explore')
+      fetchInstalledAppList.mockResolvedValueOnce({ installed_apps: [] })
+
+      // Configure mockOpenAsyncWindow to call the callback and trigger error
+      mockOpenAsyncWindow.mockImplementationOnce(async (callback: () => Promise<string>, options: any) => {
+        try {
+          await callback()
+        }
+        catch (err) {
+          options?.onError?.(err)
+        }
+      })
+
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        const openInExploreBtn = screen.getByText('app.openInExplore')
+        fireEvent.click(openInExploreBtn)
+      })
+
+      await waitFor(() => {
+        expect(fetchInstalledAppList).toHaveBeenCalled()
+      })
+    })
+
+    it('should handle case when API throws in callback', async () => {
+      const { fetchInstalledAppList } = require('@/service/explore')
+      fetchInstalledAppList.mockRejectedValueOnce(new Error('Network error'))
+
+      // Configure mockOpenAsyncWindow to call the callback without catching
+      mockOpenAsyncWindow.mockImplementationOnce(async (callback: () => Promise<string>) => {
+        return await callback()
+      })
+
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        const openInExploreBtn = screen.getByText('app.openInExplore')
+        fireEvent.click(openInExploreBtn)
+      })
+
+      await waitFor(() => {
+        expect(fetchInstalledAppList).toHaveBeenCalled()
+      })
+    })
+  })
+
+  describe('Draft Trigger Apps', () => {
+    it('should not show open in explore option for apps with has_draft_trigger', async () => {
+      const draftTriggerApp = createMockApp({ has_draft_trigger: true })
+      render(<AppCard app={draftTriggerApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        expect(screen.getByText('app.editApp')).toBeInTheDocument()
+        // openInExplore should not be shown for draft trigger apps
+        expect(screen.queryByText('app.openInExplore')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Non-editor User', () => {
+    it('should handle non-editor workspace users', () => {
+      // This tests the isCurrentWorkspaceEditor=true branch (default mock)
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+  })
+
+  describe('WebApp Auth Enabled', () => {
+    beforeEach(() => {
+      mockWebappAuthEnabled = true
+    })
+
+    it('should show access control option when webapp_auth is enabled', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        expect(screen.getByText('app.accessControl')).toBeInTheDocument()
+      })
+    })
+
+    it('should click access control button', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        const accessControlBtn = screen.getByText('app.accessControl')
+        fireEvent.click(accessControlBtn)
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('access-control-modal')).toBeInTheDocument()
+      })
+    })
+
+    it('should close access control modal and call onRefresh', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.accessControl'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('access-control-modal')).toBeInTheDocument()
+      })
+
+      // Confirm access control
+      fireEvent.click(screen.getByTestId('confirm-access-control'))
+
+      await waitFor(() => {
+        expect(mockOnRefresh).toHaveBeenCalled()
+      })
+    })
+
+    it('should show open in explore when userCanAccessApp is true', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        expect(screen.getByText('app.openInExplore')).toBeInTheDocument()
+      })
+    })
+
+    it('should close access control modal when onClose is called', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.accessControl'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('access-control-modal')).toBeInTheDocument()
+      })
+
+      // Click close button to trigger onClose
+      fireEvent.click(screen.getByTestId('close-access-control'))
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('access-control-modal')).not.toBeInTheDocument()
+      })
     })
   })
 })
diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index b8da0264e4..8140422c0f 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -5,7 +5,7 @@ import { useContext } from 'use-context-selector'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { RiBuildingLine, RiGlobalLine, RiLockLine, RiMoreFill, RiVerifiedBadgeLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { type App, AppModeEnum } from '@/types/app'
 import Toast, { ToastContext } from '@/app/components/base/toast'
 import { copyApp, deleteApp, exportAppConfig, updateAppInfo } from '@/service/apps'
diff --git a/web/app/components/apps/list.spec.tsx b/web/app/components/apps/list.spec.tsx
index fe664a4a50..3bc8a27375 100644
--- a/web/app/components/apps/list.spec.tsx
+++ b/web/app/components/apps/list.spec.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
 import { AppModeEnum } from '@/types/app'
 
 // Mock next/navigation
@@ -28,20 +28,29 @@ jest.mock('@/context/global-public-context', () => ({
   }),
 }))
 
-// Mock custom hooks
+// Mock custom hooks - allow dynamic query state
 const mockSetQuery = jest.fn()
+const mockQueryState = {
+  tagIDs: [] as string[],
+  keywords: '',
+  isCreatedByMe: false,
+}
 jest.mock('./hooks/use-apps-query-state', () => ({
   __esModule: true,
   default: () => ({
-    query: { tagIDs: [], keywords: '', isCreatedByMe: false },
+    query: mockQueryState,
     setQuery: mockSetQuery,
   }),
 }))
 
+// Store callback for testing DSL file drop
+let mockOnDSLFileDropped: ((file: File) => void) | null = null
+let mockDragging = false
 jest.mock('./hooks/use-dsl-drag-drop', () => ({
-  useDSLDragDrop: () => ({
-    dragging: false,
-  }),
+  useDSLDragDrop: ({ onDSLFileDropped }: { onDSLFileDropped: (file: File) => void }) => {
+    mockOnDSLFileDropped = onDSLFileDropped
+    return { dragging: mockDragging }
+  },
 }))
 
 const mockSetActiveTab = jest.fn()
@@ -49,55 +58,90 @@ jest.mock('@/hooks/use-tab-searchparams', () => ({
   useTabSearchParams: () => ['all', mockSetActiveTab],
 }))
 
-// Mock service hooks
+// Mock service hooks - use object for mutable state (jest.mock is hoisted)
 const mockRefetch = jest.fn()
+const mockFetchNextPage = jest.fn()
+
+const mockServiceState = {
+  error: null as Error | null,
+  hasNextPage: false,
+  isLoading: false,
+  isFetchingNextPage: false,
+}
+
+const defaultAppData = {
+  pages: [{
+    data: [
+      {
+        id: 'app-1',
+        name: 'Test App 1',
+        description: 'Description 1',
+        mode: AppModeEnum.CHAT,
+        icon: '🤖',
+        icon_type: 'emoji',
+        icon_background: '#FFEAD5',
+        tags: [],
+        author_name: 'Author 1',
+        created_at: 1704067200,
+        updated_at: 1704153600,
+      },
+      {
+        id: 'app-2',
+        name: 'Test App 2',
+        description: 'Description 2',
+        mode: AppModeEnum.WORKFLOW,
+        icon: '⚙️',
+        icon_type: 'emoji',
+        icon_background: '#E4FBCC',
+        tags: [],
+        author_name: 'Author 2',
+        created_at: 1704067200,
+        updated_at: 1704153600,
+      },
+    ],
+    total: 2,
+  }],
+}
+
 jest.mock('@/service/use-apps', () => ({
   useInfiniteAppList: () => ({
-    data: {
-      pages: [{
-        data: [
-          {
-            id: 'app-1',
-            name: 'Test App 1',
-            description: 'Description 1',
-            mode: AppModeEnum.CHAT,
-            icon: '🤖',
-            icon_type: 'emoji',
-            icon_background: '#FFEAD5',
-            tags: [],
-            author_name: 'Author 1',
-            created_at: 1704067200,
-            updated_at: 1704153600,
-          },
-          {
-            id: 'app-2',
-            name: 'Test App 2',
-            description: 'Description 2',
-            mode: AppModeEnum.WORKFLOW,
-            icon: '⚙️',
-            icon_type: 'emoji',
-            icon_background: '#E4FBCC',
-            tags: [],
-            author_name: 'Author 2',
-            created_at: 1704067200,
-            updated_at: 1704153600,
-          },
-        ],
-        total: 2,
-      }],
-    },
-    isLoading: false,
-    isFetchingNextPage: false,
-    fetchNextPage: jest.fn(),
-    hasNextPage: false,
-    error: null,
+    data: defaultAppData,
+    isLoading: mockServiceState.isLoading,
+    isFetchingNextPage: mockServiceState.isFetchingNextPage,
+    fetchNextPage: mockFetchNextPage,
+    hasNextPage: mockServiceState.hasNextPage,
+    error: mockServiceState.error,
     refetch: mockRefetch,
   }),
 }))
 
 // Mock tag store
 jest.mock('@/app/components/base/tag-management/store', () => ({
-  useStore: () => false,
+  useStore: (selector: (state: { tagList: any[]; setTagList: any; showTagManagementModal: boolean; setShowTagManagementModal: any }) => any) => {
+    const state = {
+      tagList: [{ id: 'tag-1', name: 'Test Tag', type: 'app' }],
+      setTagList: jest.fn(),
+      showTagManagementModal: false,
+      setShowTagManagementModal: jest.fn(),
+    }
+    return selector(state)
+  },
+}))
+
+// Mock tag service to avoid API calls in TagFilter
+jest.mock('@/service/tag', () => ({
+  fetchTagList: jest.fn().mockResolvedValue([{ id: 'tag-1', name: 'Test Tag', type: 'app' }]),
+}))
+
+// Store TagFilter onChange callback for testing
+let mockTagFilterOnChange: ((value: string[]) => void) | null = null
+jest.mock('@/app/components/base/tag-management/filter', () => ({
+  __esModule: true,
+  default: ({ onChange }: { onChange: (value: string[]) => void }) => {
+    const React = require('react')
+    mockTagFilterOnChange = onChange
+    return React.createElement('div', { 'data-testid': 'tag-filter' }, 'common.tag.placeholder')
+  },
 }))
 
 // Mock config
@@ -110,9 +154,17 @@ jest.mock('@/hooks/use-pay', () => ({
   CheckModal: () => null,
 }))
 
-// Mock debounce hook
+// Mock ahooks - useMount only executes once on mount, not on fn change
 jest.mock('ahooks', () => ({
   useDebounceFn: (fn: () => void) => ({ run: fn }),
+  useMount: (fn: () => void) => {
+    const React = require('react')
+    const fnRef = React.useRef(fn)
+    fnRef.current = fn
+    React.useEffect(() => {
+      fnRef.current()
+    }, [])
+  },
 }))
 
 // Mock dynamic imports
@@ -127,10 +179,11 @@ jest.mock('next/dynamic', () => {
       }
     }
     if (fnString.includes('create-from-dsl-modal')) {
-      return function MockCreateFromDSLModal({ show, onClose }: any) {
+      return function MockCreateFromDSLModal({ show, onClose, onSuccess }: any) {
         if (!show) return null
         return React.createElement('div', { 'data-testid': 'create-dsl-modal' },
           React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-dsl-modal' }, 'Close'),
+          React.createElement('button', { 'onClick': onSuccess, 'data-testid': 'success-dsl-modal' }, 'Success'),
         )
       }
     }
@@ -174,127 +227,83 @@ jest.mock('./footer', () => ({
   },
 }))
 
-/**
- * Mock base components that have deep dependency chains or require controlled test behavior.
- *
- * Per frontend testing skills (mocking.md), we generally should NOT mock base components.
- * However, the following require mocking due to:
- * - Deep dependency chains importing ES modules (like ky) incompatible with Jest
- * - Need for controlled interaction behavior in tests (onChange, onClear handlers)
- * - Complex internal state that would make tests flaky
- *
- * These mocks preserve the component's props interface to test List's integration correctly.
- */
-jest.mock('@/app/components/base/tab-slider-new', () => ({
-  __esModule: true,
-  default: ({ value, onChange, options }: any) => {
-    const React = require('react')
-    return React.createElement('div', { 'data-testid': 'tab-slider', 'role': 'tablist' },
-      options.map((opt: any) =>
-        React.createElement('button', {
-          'key': opt.value,
-          'data-testid': `tab-${opt.value}`,
-          'role': 'tab',
-          'aria-selected': value === opt.value,
-          'onClick': () => onChange(opt.value),
-        }, opt.text),
-      ),
-    )
-  },
-}))
-
-jest.mock('@/app/components/base/input', () => ({
-  __esModule: true,
-  default: ({ value, onChange, onClear }: any) => {
-    const React = require('react')
-    return React.createElement('div', { 'data-testid': 'search-input' },
-      React.createElement('input', {
-        'data-testid': 'search-input-field',
-        'role': 'searchbox',
-        'value': value || '',
-        onChange,
-      }),
-      React.createElement('button', {
-        'data-testid': 'clear-search',
-        'aria-label': 'Clear search',
-        'onClick': onClear,
-      }, 'Clear'),
-    )
-  },
-}))
-
-jest.mock('@/app/components/base/tag-management/filter', () => ({
-  __esModule: true,
-  default: ({ value, onChange }: any) => {
-    const React = require('react')
-    return React.createElement('div', { 'data-testid': 'tag-filter', 'role': 'listbox' },
-      React.createElement('button', {
-        'data-testid': 'add-tag-filter',
-        'onClick': () => onChange([...value, 'new-tag']),
-      }, 'Add Tag'),
-    )
-  },
-}))
-
-jest.mock('@/app/components/datasets/create/website/base/checkbox-with-label', () => ({
-  __esModule: true,
-  default: ({ label, isChecked, onChange }: any) => {
-    const React = require('react')
-    return React.createElement('label', { 'data-testid': 'created-by-me-checkbox' },
-      React.createElement('input', {
-        'type': 'checkbox',
-        'role': 'checkbox',
-        'checked': isChecked,
-        'aria-checked': isChecked,
-        onChange,
-        'data-testid': 'created-by-me-input',
-      }),
-      label,
-    )
-  },
-}))
-
 // Import after mocks
 import List from './list'
 
+// Store IntersectionObserver callback
+let intersectionCallback: IntersectionObserverCallback | null = null
+const mockObserve = jest.fn()
+const mockDisconnect = jest.fn()
+
+// Mock IntersectionObserver
+beforeAll(() => {
+  globalThis.IntersectionObserver = class MockIntersectionObserver {
+    constructor(callback: IntersectionObserverCallback) {
+      intersectionCallback = callback
+    }
+
+    observe = mockObserve
+    disconnect = mockDisconnect
+    unobserve = jest.fn()
+    root = null
+    rootMargin = ''
+    thresholds = []
+    takeRecords = () => []
+  } as unknown as typeof IntersectionObserver
+})
+
 describe('List', () => {
   beforeEach(() => {
     jest.clearAllMocks()
     mockIsCurrentWorkspaceEditor.mockReturnValue(true)
     mockIsCurrentWorkspaceDatasetOperator.mockReturnValue(false)
+    mockDragging = false
+    mockOnDSLFileDropped = null
+    mockTagFilterOnChange = null
+    mockServiceState.error = null
+    mockServiceState.hasNextPage = false
+    mockServiceState.isLoading = false
+    mockServiceState.isFetchingNextPage = false
+    mockQueryState.tagIDs = []
+    mockQueryState.keywords = ''
+    mockQueryState.isCreatedByMe = false
+    intersectionCallback = null
     localStorage.clear()
   })
 
   describe('Rendering', () => {
     it('should render without crashing', () => {
       render(<List />)
-      expect(screen.getByTestId('tab-slider')).toBeInTheDocument()
+      // Tab slider renders app type tabs
+      expect(screen.getByText('app.types.all')).toBeInTheDocument()
     })
 
     it('should render tab slider with all app types', () => {
       render(<List />)
 
-      expect(screen.getByTestId('tab-all')).toBeInTheDocument()
-      expect(screen.getByTestId(`tab-${AppModeEnum.WORKFLOW}`)).toBeInTheDocument()
-      expect(screen.getByTestId(`tab-${AppModeEnum.ADVANCED_CHAT}`)).toBeInTheDocument()
-      expect(screen.getByTestId(`tab-${AppModeEnum.CHAT}`)).toBeInTheDocument()
-      expect(screen.getByTestId(`tab-${AppModeEnum.AGENT_CHAT}`)).toBeInTheDocument()
-      expect(screen.getByTestId(`tab-${AppModeEnum.COMPLETION}`)).toBeInTheDocument()
+      expect(screen.getByText('app.types.all')).toBeInTheDocument()
+      expect(screen.getByText('app.types.workflow')).toBeInTheDocument()
+      expect(screen.getByText('app.types.advanced')).toBeInTheDocument()
+      expect(screen.getByText('app.types.chatbot')).toBeInTheDocument()
+      expect(screen.getByText('app.types.agent')).toBeInTheDocument()
+      expect(screen.getByText('app.types.completion')).toBeInTheDocument()
     })
 
     it('should render search input', () => {
       render(<List />)
-      expect(screen.getByTestId('search-input')).toBeInTheDocument()
+      // Input component renders a searchbox
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
     })
 
     it('should render tag filter', () => {
       render(<List />)
-      expect(screen.getByTestId('tag-filter')).toBeInTheDocument()
+      // Tag filter renders with placeholder text
+      expect(screen.getByText('common.tag.placeholder')).toBeInTheDocument()
     })
 
     it('should render created by me checkbox', () => {
       render(<List />)
-      expect(screen.getByTestId('created-by-me-checkbox')).toBeInTheDocument()
+      expect(screen.getByText('app.showMyCreatedAppsOnly')).toBeInTheDocument()
     })
 
     it('should render app cards when apps exist', () => {
@@ -324,7 +333,7 @@ describe('List', () => {
     it('should call setActiveTab when tab is clicked', () => {
       render(<List />)
 
-      fireEvent.click(screen.getByTestId(`tab-${AppModeEnum.WORKFLOW}`))
+      fireEvent.click(screen.getByText('app.types.workflow'))
 
       expect(mockSetActiveTab).toHaveBeenCalledWith(AppModeEnum.WORKFLOW)
     })
@@ -332,7 +341,7 @@ describe('List', () => {
     it('should call setActiveTab for all tab', () => {
       render(<List />)
 
-      fireEvent.click(screen.getByTestId('tab-all'))
+      fireEvent.click(screen.getByText('app.types.all'))
 
       expect(mockSetActiveTab).toHaveBeenCalledWith('all')
     })
@@ -341,23 +350,38 @@ describe('List', () => {
   describe('Search Functionality', () => {
     it('should render search input field', () => {
       render(<List />)
-      expect(screen.getByTestId('search-input-field')).toBeInTheDocument()
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
     })
 
     it('should handle search input change', () => {
       render(<List />)
 
-      const input = screen.getByTestId('search-input-field')
+      const input = screen.getByRole('textbox')
       fireEvent.change(input, { target: { value: 'test search' } })
 
       expect(mockSetQuery).toHaveBeenCalled()
     })
 
-    it('should clear search when clear button is clicked', () => {
+    it('should handle search input interaction', () => {
       render(<List />)
 
-      fireEvent.click(screen.getByTestId('clear-search'))
+      const input = screen.getByRole('textbox')
+      expect(input).toBeInTheDocument()
+    })
 
+    it('should handle search clear button click', () => {
+      // Set initial keywords to make clear button visible
+      mockQueryState.keywords = 'existing search'
+
+      render(<List />)
+
+      // Find and click clear button (Input component uses .group class for clear icon container)
+      const clearButton = document.querySelector('.group')
+      expect(clearButton).toBeInTheDocument()
+      if (clearButton)
+        fireEvent.click(clearButton)
+
+      // handleKeywordsChange should be called with empty string
       expect(mockSetQuery).toHaveBeenCalled()
     })
   })
@@ -365,16 +389,14 @@ describe('List', () => {
   describe('Tag Filter', () => {
     it('should render tag filter component', () => {
       render(<List />)
-      expect(screen.getByTestId('tag-filter')).toBeInTheDocument()
+      expect(screen.getByText('common.tag.placeholder')).toBeInTheDocument()
     })
 
-    it('should handle tag filter change', () => {
+    it('should render tag filter with placeholder', () => {
       render(<List />)
 
-      fireEvent.click(screen.getByTestId('add-tag-filter'))
-
-      // Tag filter change triggers debounced setTagIDs
-      expect(screen.getByTestId('tag-filter')).toBeInTheDocument()
+      // Tag filter is rendered
+      expect(screen.getByText('common.tag.placeholder')).toBeInTheDocument()
     })
   })
 
@@ -387,7 +409,9 @@ describe('List', () => {
     it('should handle checkbox change', () => {
       render(<List />)
 
-      const checkbox = screen.getByTestId('created-by-me-input')
+      // Checkbox component uses data-testid="checkbox-{id}"
+      // CheckboxWithLabel doesn't pass testId, so id is undefined
+      const checkbox = screen.getByTestId('checkbox-undefined')
       fireEvent.click(checkbox)
 
       expect(mockSetQuery).toHaveBeenCalled()
@@ -436,10 +460,10 @@ describe('List', () => {
   describe('Edge Cases', () => {
     it('should handle multiple renders without issues', () => {
       const { rerender } = render(<List />)
-      expect(screen.getByTestId('tab-slider')).toBeInTheDocument()
+      expect(screen.getByText('app.types.all')).toBeInTheDocument()
 
       rerender(<List />)
-      expect(screen.getByTestId('tab-slider')).toBeInTheDocument()
+      expect(screen.getByText('app.types.all')).toBeInTheDocument()
     })
 
     it('should render app cards correctly', () => {
@@ -452,9 +476,9 @@ describe('List', () => {
     it('should render with all filter options visible', () => {
       render(<List />)
 
-      expect(screen.getByTestId('search-input')).toBeInTheDocument()
-      expect(screen.getByTestId('tag-filter')).toBeInTheDocument()
-      expect(screen.getByTestId('created-by-me-checkbox')).toBeInTheDocument()
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+      expect(screen.getByText('common.tag.placeholder')).toBeInTheDocument()
+      expect(screen.getByText('app.showMyCreatedAppsOnly')).toBeInTheDocument()
     })
   })
 
@@ -469,27 +493,27 @@ describe('List', () => {
     it('should render all app type tabs', () => {
       render(<List />)
 
-      expect(screen.getByTestId('tab-all')).toBeInTheDocument()
-      expect(screen.getByTestId(`tab-${AppModeEnum.WORKFLOW}`)).toBeInTheDocument()
-      expect(screen.getByTestId(`tab-${AppModeEnum.ADVANCED_CHAT}`)).toBeInTheDocument()
-      expect(screen.getByTestId(`tab-${AppModeEnum.CHAT}`)).toBeInTheDocument()
-      expect(screen.getByTestId(`tab-${AppModeEnum.AGENT_CHAT}`)).toBeInTheDocument()
-      expect(screen.getByTestId(`tab-${AppModeEnum.COMPLETION}`)).toBeInTheDocument()
+      expect(screen.getByText('app.types.all')).toBeInTheDocument()
+      expect(screen.getByText('app.types.workflow')).toBeInTheDocument()
+      expect(screen.getByText('app.types.advanced')).toBeInTheDocument()
+      expect(screen.getByText('app.types.chatbot')).toBeInTheDocument()
+      expect(screen.getByText('app.types.agent')).toBeInTheDocument()
+      expect(screen.getByText('app.types.completion')).toBeInTheDocument()
     })
 
     it('should call setActiveTab for each app type', () => {
       render(<List />)
 
-      const appModes = [
-        AppModeEnum.WORKFLOW,
-        AppModeEnum.ADVANCED_CHAT,
-        AppModeEnum.CHAT,
-        AppModeEnum.AGENT_CHAT,
-        AppModeEnum.COMPLETION,
+      const appTypeTexts = [
+        { mode: AppModeEnum.WORKFLOW, text: 'app.types.workflow' },
+        { mode: AppModeEnum.ADVANCED_CHAT, text: 'app.types.advanced' },
+        { mode: AppModeEnum.CHAT, text: 'app.types.chatbot' },
+        { mode: AppModeEnum.AGENT_CHAT, text: 'app.types.agent' },
+        { mode: AppModeEnum.COMPLETION, text: 'app.types.completion' },
       ]
 
-      appModes.forEach((mode) => {
-        fireEvent.click(screen.getByTestId(`tab-${mode}`))
+      appTypeTexts.forEach(({ mode, text }) => {
+        fireEvent.click(screen.getByText(text))
         expect(mockSetActiveTab).toHaveBeenCalledWith(mode)
       })
     })
@@ -499,7 +523,7 @@ describe('List', () => {
     it('should display search input with correct attributes', () => {
       render(<List />)
 
-      const input = screen.getByTestId('search-input-field')
+      const input = screen.getByRole('textbox')
       expect(input).toBeInTheDocument()
       expect(input).toHaveAttribute('value', '')
     })
@@ -507,8 +531,7 @@ describe('List', () => {
     it('should have tag filter component', () => {
       render(<List />)
 
-      const tagFilter = screen.getByTestId('tag-filter')
-      expect(tagFilter).toBeInTheDocument()
+      expect(screen.getByText('common.tag.placeholder')).toBeInTheDocument()
     })
 
     it('should display created by me label', () => {
@@ -547,18 +570,17 @@ describe('List', () => {
   // --------------------------------------------------------------------------
   describe('Additional Coverage', () => {
     it('should render dragging state overlay when dragging', () => {
-      // Test dragging state is handled
+      mockDragging = true
       const { container } = render(<List />)
 
-      // Component should render successfully
+      // Component should render successfully with dragging state
       expect(container).toBeInTheDocument()
     })
 
     it('should handle app mode filter in query params', () => {
-      // Test that different modes are handled in query
       render(<List />)
 
-      const workflowTab = screen.getByTestId(`tab-${AppModeEnum.WORKFLOW}`)
+      const workflowTab = screen.getByText('app.types.workflow')
       fireEvent.click(workflowTab)
 
       expect(mockSetActiveTab).toHaveBeenCalledWith(AppModeEnum.WORKFLOW)
@@ -570,4 +592,168 @@ describe('List', () => {
       expect(screen.getByTestId('new-app-card')).toBeInTheDocument()
     })
   })
+
+  describe('DSL File Drop', () => {
+    it('should handle DSL file drop and show modal', () => {
+      render(<List />)
+
+      // Simulate DSL file drop via the callback
+      const mockFile = new File(['test content'], 'test.yml', { type: 'application/yaml' })
+      act(() => {
+        if (mockOnDSLFileDropped)
+          mockOnDSLFileDropped(mockFile)
+      })
+
+      // Modal should be shown
+      expect(screen.getByTestId('create-dsl-modal')).toBeInTheDocument()
+    })
+
+    it('should close DSL modal when onClose is called', () => {
+      render(<List />)
+
+      // Open modal via DSL file drop
+      const mockFile = new File(['test content'], 'test.yml', { type: 'application/yaml' })
+      act(() => {
+        if (mockOnDSLFileDropped)
+          mockOnDSLFileDropped(mockFile)
+      })
+
+      expect(screen.getByTestId('create-dsl-modal')).toBeInTheDocument()
+
+      // Close modal
+      fireEvent.click(screen.getByTestId('close-dsl-modal'))
+
+      expect(screen.queryByTestId('create-dsl-modal')).not.toBeInTheDocument()
+    })
+
+    it('should close DSL modal and refetch when onSuccess is called', () => {
+      render(<List />)
+
+      // Open modal via DSL file drop
+      const mockFile = new File(['test content'], 'test.yml', { type: 'application/yaml' })
+      act(() => {
+        if (mockOnDSLFileDropped)
+          mockOnDSLFileDropped(mockFile)
+      })
+
+      expect(screen.getByTestId('create-dsl-modal')).toBeInTheDocument()
+
+      // Click success button
+      fireEvent.click(screen.getByTestId('success-dsl-modal'))
+
+      // Modal should be closed and refetch should be called
+      expect(screen.queryByTestId('create-dsl-modal')).not.toBeInTheDocument()
+      expect(mockRefetch).toHaveBeenCalled()
+    })
+  })
+
+  describe('Tag Filter Change', () => {
+    it('should handle tag filter value change', () => {
+      jest.useFakeTimers()
+      render(<List />)
+
+      // TagFilter component is rendered
+      expect(screen.getByTestId('tag-filter')).toBeInTheDocument()
+
+      // Trigger tag filter change via captured callback
+      act(() => {
+        if (mockTagFilterOnChange)
+          mockTagFilterOnChange(['tag-1', 'tag-2'])
+      })
+
+      // Advance timers to trigger debounced setTagIDs
+      act(() => {
+        jest.advanceTimersByTime(500)
+      })
+
+      // setQuery should have been called with updated tagIDs
+      expect(mockSetQuery).toHaveBeenCalled()
+
+      jest.useRealTimers()
+    })
+
+    it('should handle empty tag filter selection', () => {
+      jest.useFakeTimers()
+      render(<List />)
+
+      // Trigger tag filter change with empty array
+      act(() => {
+        if (mockTagFilterOnChange)
+          mockTagFilterOnChange([])
+      })
+
+      // Advance timers
+      act(() => {
+        jest.advanceTimersByTime(500)
+      })
+
+      expect(mockSetQuery).toHaveBeenCalled()
+
+      jest.useRealTimers()
+    })
+  })
+
+  describe('Infinite Scroll', () => {
+    it('should call fetchNextPage when intersection observer triggers', () => {
+      mockServiceState.hasNextPage = true
+      render(<List />)
+
+      // Simulate intersection
+      if (intersectionCallback) {
+        act(() => {
+          intersectionCallback!(
+            [{ isIntersecting: true } as IntersectionObserverEntry],
+            {} as IntersectionObserver,
+          )
+        })
+      }
+
+      expect(mockFetchNextPage).toHaveBeenCalled()
+    })
+
+    it('should not call fetchNextPage when not intersecting', () => {
+      mockServiceState.hasNextPage = true
+      render(<List />)
+
+      // Simulate non-intersection
+      if (intersectionCallback) {
+        act(() => {
+          intersectionCallback!(
+            [{ isIntersecting: false } as IntersectionObserverEntry],
+            {} as IntersectionObserver,
+          )
+        })
+      }
+
+      expect(mockFetchNextPage).not.toHaveBeenCalled()
+    })
+
+    it('should not call fetchNextPage when loading', () => {
+      mockServiceState.hasNextPage = true
+      mockServiceState.isLoading = true
+      render(<List />)
+
+      if (intersectionCallback) {
+        act(() => {
+          intersectionCallback!(
+            [{ isIntersecting: true } as IntersectionObserverEntry],
+            {} as IntersectionObserver,
+          )
+        })
+      }
+
+      expect(mockFetchNextPage).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Error State', () => {
+    it('should handle error state in useEffect', () => {
+      mockServiceState.error = new Error('Test error')
+      const { container } = render(<List />)
+
+      // Component should still render
+      expect(container).toBeInTheDocument()
+      // Disconnect should be called when there's an error (cleanup)
+    })
+  })
 })
diff --git a/web/app/components/apps/new-app-card.tsx b/web/app/components/apps/new-app-card.tsx
index 7a10bc8527..51e4bae8fe 100644
--- a/web/app/components/apps/new-app-card.tsx
+++ b/web/app/components/apps/new-app-card.tsx
@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'
 import { CreateFromDSLModalTab } from '@/app/components/app/create-from-dsl-modal'
 import { useProviderContext } from '@/context/provider-context'
 import { FileArrow01, FilePlus01, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import dynamic from 'next/dynamic'
 
 const CreateAppModal = dynamic(() => import('@/app/components/app/create-app-modal'), {
diff --git a/web/app/components/base/action-button/index.tsx b/web/app/components/base/action-button/index.tsx
index f70bfb4448..eff6a43d22 100644
--- a/web/app/components/base/action-button/index.tsx
+++ b/web/app/components/base/action-button/index.tsx
@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react'
 import React from 'react'
 import { type VariantProps, cva } from 'class-variance-authority'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 enum ActionButtonState {
   Destructive = 'destructive',
@@ -54,10 +54,8 @@ const ActionButton = ({ className, size, state = ActionButtonState.Default, styl
   return (
     <button
       type='button'
-      className={classNames(
-        actionButtonVariants({ className, size }),
-        getActionButtonState(state),
-      )}
+      className={cn(actionButtonVariants({ className, size }),
+        getActionButtonState(state))}
       ref={ref}
       style={styleCss}
       {...props}
diff --git a/web/app/components/base/agent-log-modal/detail.tsx b/web/app/components/base/agent-log-modal/detail.tsx
index 148b16815e..3a7ef3d340 100644
--- a/web/app/components/base/agent-log-modal/detail.tsx
+++ b/web/app/components/base/agent-log-modal/detail.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'
 import { flatten, uniq } from 'lodash-es'
 import ResultPanel from './result'
 import TracingPanel from './tracing'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ToastContext } from '@/app/components/base/toast'
 import Loading from '@/app/components/base/loading'
 import { fetchAgentLogDetail } from '@/service/log'
diff --git a/web/app/components/base/agent-log-modal/index.tsx b/web/app/components/base/agent-log-modal/index.tsx
index 024ea2ab97..22d3477ee3 100644
--- a/web/app/components/base/agent-log-modal/index.tsx
+++ b/web/app/components/base/agent-log-modal/index.tsx
@@ -4,7 +4,7 @@ import { RiCloseLine } from '@remixicon/react'
 import { useEffect, useRef, useState } from 'react'
 import { useClickAway } from 'ahooks'
 import AgentLogDetail from './detail'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 
 type AgentLogModalProps = {
diff --git a/web/app/components/base/agent-log-modal/iteration.tsx b/web/app/components/base/agent-log-modal/iteration.tsx
index 691e9cf1ac..3c51c3a61c 100644
--- a/web/app/components/base/agent-log-modal/iteration.tsx
+++ b/web/app/components/base/agent-log-modal/iteration.tsx
@@ -4,7 +4,7 @@ import type { FC } from 'react'
 import ToolCall from './tool-call'
 import Divider from '@/app/components/base/divider'
 import type { AgentIteration } from '@/models/log'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   isFinal: boolean
diff --git a/web/app/components/base/agent-log-modal/tool-call.tsx b/web/app/components/base/agent-log-modal/tool-call.tsx
index 433a20fd5d..ae9753bc67 100644
--- a/web/app/components/base/agent-log-modal/tool-call.tsx
+++ b/web/app/components/base/agent-log-modal/tool-call.tsx
@@ -6,7 +6,7 @@ import {
   RiErrorWarningLine,
 } from '@remixicon/react'
 import { useContext } from 'use-context-selector'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 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/base/answer-icon/index.tsx b/web/app/components/base/answer-icon/index.tsx
index faad4e5aaa..04da58e2b8 100644
--- a/web/app/components/base/answer-icon/index.tsx
+++ b/web/app/components/base/answer-icon/index.tsx
@@ -3,7 +3,7 @@
 import type { FC } from 'react'
 import { init } from 'emoji-mart'
 import data from '@emoji-mart/data'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { AppIconType } from '@/types/app'
 
 init({ data })
@@ -21,8 +21,7 @@ const AnswerIcon: FC<AnswerIconProps> = ({
   background,
   imageUrl,
 }) => {
-  const wrapperClassName = classNames(
-    'flex',
+  const wrapperClassName = cn('flex',
     'items-center',
     'justify-center',
     'w-full',
@@ -30,8 +29,7 @@ const AnswerIcon: FC<AnswerIconProps> = ({
     'rounded-full',
     'border-[0.5px]',
     'border-black/5',
-    'text-xl',
-  )
+    'text-xl')
   const isValidImageIcon = iconType === 'image' && imageUrl
   return <div
     className={wrapperClassName}
diff --git a/web/app/components/base/app-icon-picker/ImageInput.tsx b/web/app/components/base/app-icon-picker/ImageInput.tsx
index a074c8afac..ad57ffc173 100644
--- a/web/app/components/base/app-icon-picker/ImageInput.tsx
+++ b/web/app/components/base/app-icon-picker/ImageInput.tsx
@@ -3,7 +3,7 @@
 import type { ChangeEvent, FC } from 'react'
 import { createRef, useEffect, useState } from 'react'
 import Cropper, { type Area, type CropperProps } from 'react-easy-crop'
-import classNames from 'classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 import { ImagePlus } from '../icons/src/vender/line/images'
@@ -90,10 +90,9 @@ const ImageInput: FC<UploaderProps> = ({
   }
 
   return (
-    <div className={classNames(className, 'w-full px-3 py-1.5')}>
+    <div className={cn(className, 'w-full px-3 py-1.5')}>
       <div
-        className={classNames(
-          isDragActive && 'border-primary-600',
+        className={cn(isDragActive && 'border-primary-600',
           'relative flex aspect-square flex-col items-center justify-center rounded-lg border-[1.5px] border-dashed text-gray-500')}
         onDragEnter={handleDragEnter}
         onDragOver={handleDragOver}
diff --git a/web/app/components/base/app-icon-picker/index.tsx b/web/app/components/base/app-icon-picker/index.tsx
index 3deb6a6c8f..a3cb419915 100644
--- a/web/app/components/base/app-icon-picker/index.tsx
+++ b/web/app/components/base/app-icon-picker/index.tsx
@@ -12,7 +12,7 @@ import ImageInput from './ImageInput'
 import s from './style.module.css'
 import getCroppedImg from './utils'
 import type { AppIconType, ImageFile } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
 import { noop } from 'lodash-es'
 import { RiImageCircleAiLine } from '@remixicon/react'
diff --git a/web/app/components/base/app-icon/index.tsx b/web/app/components/base/app-icon/index.tsx
index e31e7286a3..9bcaa2ced2 100644
--- a/web/app/components/base/app-icon/index.tsx
+++ b/web/app/components/base/app-icon/index.tsx
@@ -5,7 +5,7 @@ import { init } from 'emoji-mart'
 import data from '@emoji-mart/data'
 import { cva } from 'class-variance-authority'
 import type { AppIconType } from '@/types/app'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useHover } from 'ahooks'
 import { RiEditLine } from '@remixicon/react'
 
@@ -107,7 +107,7 @@ const AppIcon: FC<AppIconProps> = ({
   return (
     <span
       ref={wrapperRef}
-      className={classNames(appIconVariants({ size, rounded }), className)}
+      className={cn(appIconVariants({ size, rounded }), className)}
       style={{ background: isValidImageIcon ? undefined : (background || '#FFEAD5') }}
       onClick={onClick}
     >
diff --git a/web/app/components/base/app-unavailable.tsx b/web/app/components/base/app-unavailable.tsx
index c501d36118..e80853086e 100644
--- a/web/app/components/base/app-unavailable.tsx
+++ b/web/app/components/base/app-unavailable.tsx
@@ -1,5 +1,5 @@
 'use client'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -20,7 +20,7 @@ const AppUnavailable: FC<IAppUnavailableProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className={classNames('flex h-screen w-screen items-center justify-center', className)}>
+    <div className={cn('flex h-screen w-screen items-center justify-center', className)}>
       <h1 className='mr-5 h-[50px] shrink-0 pr-5 text-[24px] font-medium leading-[50px]'
         style={{
           borderRight: '1px solid rgba(0,0,0,.3)',
diff --git a/web/app/components/base/audio-gallery/AudioPlayer.tsx b/web/app/components/base/audio-gallery/AudioPlayer.tsx
index 399f055161..49167d9ba2 100644
--- a/web/app/components/base/audio-gallery/AudioPlayer.tsx
+++ b/web/app/components/base/audio-gallery/AudioPlayer.tsx
@@ -7,7 +7,7 @@ import {
 import Toast from '@/app/components/base/toast'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type AudioPlayerProps = {
   src?: string // Keep backward compatibility
diff --git a/web/app/components/base/auto-height-textarea/index.tsx b/web/app/components/base/auto-height-textarea/index.tsx
index fb64bf9db4..e5621fe00c 100644
--- a/web/app/components/base/auto-height-textarea/index.tsx
+++ b/web/app/components/base/auto-height-textarea/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { sleep } from '@/utils'
 
 type IProps = {
diff --git a/web/app/components/base/avatar/index.tsx b/web/app/components/base/avatar/index.tsx
index 89019a19b0..98900a52cb 100644
--- a/web/app/components/base/avatar/index.tsx
+++ b/web/app/components/base/avatar/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { useEffect, useState } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type AvatarProps = {
   name: string
diff --git a/web/app/components/base/badge.tsx b/web/app/components/base/badge.tsx
index 9a0c93118a..e0934f3b5a 100644
--- a/web/app/components/base/badge.tsx
+++ b/web/app/components/base/badge.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { memo } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type BadgeProps = {
   className?: string
diff --git a/web/app/components/base/badge/index.tsx b/web/app/components/base/badge/index.tsx
index 88ba026e14..dd8fa178d7 100644
--- a/web/app/components/base/badge/index.tsx
+++ b/web/app/components/base/badge/index.tsx
@@ -1,7 +1,7 @@
 import type { CSSProperties, ReactNode } from 'react'
 import React from 'react'
 import { type VariantProps, cva } from 'class-variance-authority'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import './index.css'
 
 enum BadgeState {
@@ -58,16 +58,14 @@ const Badge: React.FC<BadgeProps> = ({
 }) => {
   return (
     <div
-      className={classNames(
-        BadgeVariants({ size, className }),
+      className={cn(BadgeVariants({ size, className }),
         getBadgeState(state),
         size === 's'
           ? (iconOnly ? 'p-[3px]' : 'px-[5px] py-[3px]')
           : size === 'l'
             ? (iconOnly ? 'p-1.5' : 'px-2 py-1')
             : (iconOnly ? 'p-1' : 'px-[5px] py-[2px]'),
-        uppercase ? 'system-2xs-medium-uppercase' : 'system-2xs-medium',
-      )}
+        uppercase ? 'system-2xs-medium-uppercase' : 'system-2xs-medium')}
       style={styleCss}
       {...props}
     >
diff --git a/web/app/components/base/block-input/index.tsx b/web/app/components/base/block-input/index.tsx
index ae6f77fab3..956bd3d766 100644
--- a/web/app/components/base/block-input/index.tsx
+++ b/web/app/components/base/block-input/index.tsx
@@ -5,7 +5,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import VarHighlight from '../../app/configuration/base/var-highlight'
 import Toast from '../toast'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { checkKeys } from '@/utils/var'
 
 // regex to match the {{}} and replace it with a span
@@ -61,7 +61,7 @@ const BlockInput: FC<IBlockInputProps> = ({
     }
   }, [isEditing])
 
-  const style = classNames({
+  const style = cn({
     'block px-4 py-2 w-full h-full text-sm text-gray-900 outline-0 border-0 break-all': true,
     'block-input--editing': isEditing,
   })
@@ -110,7 +110,7 @@ const BlockInput: FC<IBlockInputProps> = ({
   // Prevent rerendering caused cursor to jump to the start of the contentEditable element
   const TextAreaContentView = () => {
     return (
-      <div className={classNames(style, className)}>
+      <div className={cn(style, className)}>
         {renderSafeContent(currentValue || '')}
       </div>
     )
@@ -120,12 +120,12 @@ const BlockInput: FC<IBlockInputProps> = ({
   const editAreaClassName = 'focus:outline-none bg-transparent text-sm'
 
   const textAreaContent = (
-    <div className={classNames(readonly ? 'max-h-[180px] pb-5' : 'h-[180px]', ' overflow-y-auto')} onClick={() => !readonly && setIsEditing(true)}>
+    <div className={cn(readonly ? 'max-h-[180px] pb-5' : 'h-[180px]', ' overflow-y-auto')} onClick={() => !readonly && setIsEditing(true)}>
       {isEditing
         ? <div className='h-full px-4 py-2'>
           <textarea
             ref={contentEditableRef}
-            className={classNames(editAreaClassName, 'block h-full w-full resize-none')}
+            className={cn(editAreaClassName, 'block h-full w-full resize-none')}
             placeholder={placeholder}
             onChange={onValueChange}
             value={currentValue}
@@ -143,7 +143,7 @@ const BlockInput: FC<IBlockInputProps> = ({
     </div>)
 
   return (
-    <div className={classNames('block-input w-full overflow-y-auto rounded-xl border-none bg-white')}>
+    <div className={cn('block-input w-full overflow-y-auto rounded-xl border-none bg-white')}>
       {textAreaContent}
       {/* footer */}
       {!readonly && (
diff --git a/web/app/components/base/button/add-button.tsx b/web/app/components/base/button/add-button.tsx
index 420b668141..cecc9ec063 100644
--- a/web/app/components/base/button/add-button.tsx
+++ b/web/app/components/base/button/add-button.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { RiAddLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/base/button/index.tsx b/web/app/components/base/button/index.tsx
index 4f75aec5a5..cb0d0c1fd9 100644
--- a/web/app/components/base/button/index.tsx
+++ b/web/app/components/base/button/index.tsx
@@ -2,7 +2,7 @@ import type { CSSProperties } from 'react'
 import React from 'react'
 import { type VariantProps, cva } from 'class-variance-authority'
 import Spinner from '../spinner'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const buttonVariants = cva(
   'btn disabled:btn-disabled',
@@ -42,16 +42,14 @@ const Button = ({ className, variant, size, destructive, loading, styleCss, chil
   return (
     <button
       type='button'
-      className={classNames(
-        buttonVariants({ variant, size, className }),
-        destructive && 'btn-destructive',
-      )}
+      className={cn(buttonVariants({ variant, size, className }),
+        destructive && 'btn-destructive')}
       ref={ref}
       style={styleCss}
       {...props}
     >
       {children}
-      {loading && <Spinner loading={loading} className={classNames('!ml-1 !h-3 !w-3 !border-2 !text-white', spinnerClassName)} />}
+      {loading && <Spinner loading={loading} className={cn('!ml-1 !h-3 !w-3 !border-2 !text-white', spinnerClassName)} />}
     </button>
   )
 }
diff --git a/web/app/components/base/button/sync-button.tsx b/web/app/components/base/button/sync-button.tsx
index 013c86889a..a9d4d1022f 100644
--- a/web/app/components/base/button/sync-button.tsx
+++ b/web/app/components/base/button/sync-button.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { RiRefreshLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import TooltipPlus from '@/app/components/base/tooltip'
 
 type Props = {
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 ab133d67af..535d7e19bf 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
@@ -20,7 +20,7 @@ import AppIcon from '@/app/components/base/app-icon'
 import AnswerIcon from '@/app/components/base/answer-icon'
 import SuggestedQuestions from '@/app/components/base/chat/chat/answer/suggested-questions'
 import { Markdown } from '@/app/components/base/markdown'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FileEntity } from '../../file-uploader/types'
 import { formatBooleanInputs } from '@/utils/model-config'
 import Avatar from '../../avatar'
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 b5c5bccec1..f63c97603b 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
@@ -16,7 +16,7 @@ import ViewFormDropdown from '@/app/components/base/chat/chat-with-history/input
 import Confirm from '@/app/components/base/confirm'
 import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
 import type { ConversationItem } from '@/models/share'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const Header = () => {
   const {
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 0923d712fa..9549e9da26 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
@@ -7,7 +7,7 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   title: string
diff --git a/web/app/components/base/chat/chat-with-history/index.tsx b/web/app/components/base/chat/chat-with-history/index.tsx
index 6953be4b3c..51ba88b049 100644
--- a/web/app/components/base/chat/chat-with-history/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/index.tsx
@@ -17,7 +17,7 @@ import ChatWrapper from './chat-wrapper'
 import type { InstalledApp } from '@/models/explore'
 import Loading from '@/app/components/base/loading'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useDocumentTitle from '@/hooks/use-document-title'
 
 type ChatWithHistoryProps = {
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 3a1b92089c..643ca1a808 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
@@ -5,7 +5,7 @@ import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import InputsFormContent from '@/app/components/base/chat/chat-with-history/inputs-form/content'
 import { useChatWithHistoryContext } from '../context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   collapsed: boolean
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 c6a7063d80..c5f2afd425 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
@@ -18,7 +18,7 @@ import Confirm from '@/app/components/base/confirm'
 import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import type { ConversationItem } from '@/models/share'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 type Props = {
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/item.tsx b/web/app/components/base/chat/chat-with-history/sidebar/item.tsx
index ea17f3f3ea..cd181fd7eb 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/item.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/item.tsx
@@ -6,7 +6,7 @@ import {
 import { useHover } from 'ahooks'
 import type { ConversationItem } from '@/models/share'
 import Operation from '@/app/components/base/chat/chat-with-history/sidebar/operation'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ItemProps = {
   isPin?: boolean
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 19d2aa2cbf..9c4ea6ffb1 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
@@ -12,7 +12,7 @@ import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   isActive?: boolean
diff --git a/web/app/components/base/chat/chat/answer/basic-content.tsx b/web/app/components/base/chat/chat/answer/basic-content.tsx
index 6c8a44cf52..cb3791650a 100644
--- a/web/app/components/base/chat/chat/answer/basic-content.tsx
+++ b/web/app/components/base/chat/chat/answer/basic-content.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import { memo } from 'react'
 import type { ChatItem } from '../../types'
 import { Markdown } from '@/app/components/base/markdown'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type BasicContentProps = {
   item: ChatItem
diff --git a/web/app/components/base/chat/chat/answer/index.tsx b/web/app/components/base/chat/chat/answer/index.tsx
index a1b458ba9a..fb5b91054f 100644
--- a/web/app/components/base/chat/chat/answer/index.tsx
+++ b/web/app/components/base/chat/chat/answer/index.tsx
@@ -19,7 +19,7 @@ import Citation from '@/app/components/base/chat/chat/citation'
 import { EditTitle } from '@/app/components/app/annotation/edit-annotation-modal/edit-item'
 import type { AppData } from '@/models/share'
 import AnswerIcon from '@/app/components/base/answer-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { FileList } from '@/app/components/base/file-uploader'
 import ContentSwitch from '../content-switch'
 
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index fca0ae5cae..d068d3e108 100644
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -26,7 +26,7 @@ import NewAudioButton from '@/app/components/base/new-audio-button'
 import Modal from '@/app/components/base/modal/modal'
 import Textarea from '@/app/components/base/textarea'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type OperationProps = {
   item: ChatItem
diff --git a/web/app/components/base/chat/chat/answer/tool-detail.tsx b/web/app/components/base/chat/chat/answer/tool-detail.tsx
index 26d1b3bbef..6e6710e053 100644
--- a/web/app/components/base/chat/chat/answer/tool-detail.tsx
+++ b/web/app/components/base/chat/chat/answer/tool-detail.tsx
@@ -7,7 +7,7 @@ import {
   RiLoader2Line,
 } from '@remixicon/react'
 import type { ToolInfoInThought } from '../type'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ToolDetailProps = {
   payload: ToolInfoInThought
diff --git a/web/app/components/base/chat/chat/answer/workflow-process.tsx b/web/app/components/base/chat/chat/answer/workflow-process.tsx
index 0537d3c58b..c36f2b8f72 100644
--- a/web/app/components/base/chat/chat/answer/workflow-process.tsx
+++ b/web/app/components/base/chat/chat/answer/workflow-process.tsx
@@ -10,7 +10,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import type { ChatItem, WorkflowProcess } from '../../types'
 import TracingPanel from '@/app/components/workflow/run/tracing-panel'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 
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 5004bb2a92..bea1b3890b 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
@@ -16,7 +16,7 @@ import type { InputForm } from '../type'
 import { useCheckInputsForms } from '../check-input-forms-hooks'
 import { useTextAreaHeight } from './hooks'
 import Operation from './operation'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { FileListInChatInput } from '@/app/components/base/file-uploader'
 import { useFile } from '@/app/components/base/file-uploader/hooks'
 import {
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 014ca6651f..2c041be90b 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
@@ -12,7 +12,7 @@ import Button from '@/app/components/base/button'
 import ActionButton from '@/app/components/base/action-button'
 import { FileUploaderInChatInput } from '@/app/components/base/file-uploader'
 import type { FileUpload } from '@/app/components/base/features/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type OperationProps = {
   fileConfig?: FileUpload
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index 0e947f8137..19c7b0da52 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -26,7 +26,7 @@ import ChatInputArea from './chat-input-area'
 import TryToAsk from './try-to-ask'
 import { ChatContextProvider } from './context'
 import type { InputForm } from './type'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { Emoji } from '@/app/components/tools/types'
 import Button from '@/app/components/base/button'
 import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
diff --git a/web/app/components/base/chat/chat/loading-anim/index.tsx b/web/app/components/base/chat/chat/loading-anim/index.tsx
index 801c89fce7..90cda3da2d 100644
--- a/web/app/components/base/chat/chat/loading-anim/index.tsx
+++ b/web/app/components/base/chat/chat/loading-anim/index.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type ILoadingAnimProps = {
   type: 'text' | 'avatar'
diff --git a/web/app/components/base/chat/chat/question.tsx b/web/app/components/base/chat/chat/question.tsx
index 21b604b969..a36e7ee160 100644
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -21,7 +21,7 @@ import { RiClipboardLine, RiEditLine } from '@remixicon/react'
 import Toast from '../../toast'
 import copy from 'copy-to-clipboard'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Textarea from 'react-textarea-autosize'
 import Button from '../../button'
 import { useChatContext } from './context'
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 a07e6217b0..ebd2e2de14 100644
--- a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
@@ -22,7 +22,7 @@ import LogoAvatar from '@/app/components/base/logo/logo-embedded-chat-avatar'
 import AnswerIcon from '@/app/components/base/answer-icon'
 import SuggestedQuestions from '@/app/components/base/chat/chat/answer/suggested-questions'
 import { Markdown } from '@/app/components/base/markdown'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FileEntity } from '../../file-uploader/types'
 import Avatar from '../../avatar'
 
diff --git a/web/app/components/base/chat/embedded-chatbot/header/index.tsx b/web/app/components/base/chat/embedded-chatbot/header/index.tsx
index 48f6de5725..16e656171e 100644
--- a/web/app/components/base/chat/embedded-chatbot/header/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/header/index.tsx
@@ -12,7 +12,7 @@ import ActionButton from '@/app/components/base/action-button'
 import Divider from '@/app/components/base/divider'
 import ViewFormDropdown from '@/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 export type IHeaderProps = {
diff --git a/web/app/components/base/chat/embedded-chatbot/index.tsx b/web/app/components/base/chat/embedded-chatbot/index.tsx
index 1553d1f153..d908e39787 100644
--- a/web/app/components/base/chat/embedded-chatbot/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/index.tsx
@@ -17,7 +17,7 @@ import LogoHeader from '@/app/components/base/logo/logo-embedded-chat-header'
 import Header from '@/app/components/base/chat/embedded-chatbot/header'
 import ChatWrapper from '@/app/components/base/chat/embedded-chatbot/chat-wrapper'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
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 88472b5d8f..ac1017c619 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
@@ -5,7 +5,7 @@ import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import InputsFormContent from '@/app/components/base/chat/embedded-chatbot/inputs-form/content'
 import { useEmbeddedChatbotContext } from '../context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   collapsed: boolean
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
index d6c89864d9..9d2a6d9824 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
@@ -7,7 +7,7 @@ import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigge
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import { Message3Fill } from '@/app/components/base/icons/src/public/other'
 import InputsFormContent from '@/app/components/base/chat/embedded-chatbot/inputs-form/content'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   iconColor?: string
diff --git a/web/app/components/base/checkbox-list/index.tsx b/web/app/components/base/checkbox-list/index.tsx
index ca8333a200..efb1b588d1 100644
--- a/web/app/components/base/checkbox-list/index.tsx
+++ b/web/app/components/base/checkbox-list/index.tsx
@@ -3,7 +3,7 @@ import Badge from '@/app/components/base/badge'
 import Checkbox from '@/app/components/base/checkbox'
 import SearchInput from '@/app/components/base/search-input'
 import SearchMenu from '@/assets/search-menu.svg'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Image from 'next/image'
 import type { FC } from 'react'
 import { useCallback, useMemo, useState } from 'react'
diff --git a/web/app/components/base/checkbox/index.tsx b/web/app/components/base/checkbox/index.tsx
index 9495292ea6..5d222f5723 100644
--- a/web/app/components/base/checkbox/index.tsx
+++ b/web/app/components/base/checkbox/index.tsx
@@ -1,5 +1,5 @@
 import { RiCheckLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import IndeterminateIcon from './assets/indeterminate-icon'
 
 type CheckboxProps = {
diff --git a/web/app/components/base/chip/index.tsx b/web/app/components/base/chip/index.tsx
index eeaf2b19c6..919f2e1ab1 100644
--- a/web/app/components/base/chip/index.tsx
+++ b/web/app/components/base/chip/index.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { useMemo, useState } from 'react'
 import { RiArrowDownSLine, RiCheckLine, RiCloseCircleFill, RiFilter3Line } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/base/content-dialog/index.tsx b/web/app/components/base/content-dialog/index.tsx
index 5efab57a40..4367744f4d 100644
--- a/web/app/components/base/content-dialog/index.tsx
+++ b/web/app/components/base/content-dialog/index.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { Transition, TransitionChild } from '@headlessui/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ContentDialogProps = {
   className?: string
@@ -23,24 +23,20 @@ const ContentDialog = ({
     >
       <TransitionChild>
         <div
-          className={classNames(
-            'absolute inset-0 left-0 w-full bg-app-detail-overlay-bg',
+          className={cn('absolute inset-0 left-0 w-full bg-app-detail-overlay-bg',
             'duration-300 ease-in data-[closed]:opacity-0',
             'data-[enter]:opacity-100',
-            'data-[leave]:opacity-0',
-          )}
+            'data-[leave]:opacity-0')}
           onClick={onClose}
         />
       </TransitionChild>
 
       <TransitionChild>
-        <div className={classNames(
-          'absolute left-0 w-full border-r border-divider-burn bg-app-detail-bg',
+        <div className={cn('absolute left-0 w-full border-r border-divider-burn bg-app-detail-bg',
           'duration-100 ease-in data-[closed]:-translate-x-full',
           'data-[enter]:translate-x-0 data-[enter]:duration-300 data-[enter]:ease-out',
           'data-[leave]:-translate-x-full data-[leave]:duration-200 data-[leave]:ease-in',
-          className,
-        )}>
+          className)}>
           {children}
         </div>
       </TransitionChild>
diff --git a/web/app/components/base/corner-label/index.tsx b/web/app/components/base/corner-label/index.tsx
index 0807ed4659..25cd228ba5 100644
--- a/web/app/components/base/corner-label/index.tsx
+++ b/web/app/components/base/corner-label/index.tsx
@@ -1,5 +1,5 @@
 import { Corner } from '../icons/src/vender/solid/shapes'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type CornerLabelProps = {
   label: string
diff --git a/web/app/components/base/date-and-time-picker/calendar/item.tsx b/web/app/components/base/date-and-time-picker/calendar/item.tsx
index 7132d7bdfb..991ab84043 100644
--- a/web/app/components/base/date-and-time-picker/calendar/item.tsx
+++ b/web/app/components/base/date-and-time-picker/calendar/item.tsx
@@ -1,6 +1,6 @@
 import React, { type FC } from 'react'
 import type { CalendarItemProps } from '../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import dayjs from '../utils/dayjs'
 
 const Item: FC<CalendarItemProps> = ({
diff --git a/web/app/components/base/date-and-time-picker/common/option-list-item.tsx b/web/app/components/base/date-and-time-picker/common/option-list-item.tsx
index 0144a7c6ec..fcb1e5299e 100644
--- a/web/app/components/base/date-and-time-picker/common/option-list-item.tsx
+++ b/web/app/components/base/date-and-time-picker/common/option-list-item.tsx
@@ -1,5 +1,5 @@
 import React, { type FC, useEffect, useRef } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type OptionListItemProps = {
   isSelected: boolean
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 6351a8235b..9c7136f67a 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
@@ -2,7 +2,7 @@ import React, { type FC } from 'react'
 import Button from '../../button'
 import { type DatePickerFooterProps, ViewType } from '../types'
 import { RiTimeLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 const Footer: FC<DatePickerFooterProps> = ({
diff --git a/web/app/components/base/date-and-time-picker/date-picker/index.tsx b/web/app/components/base/date-and-time-picker/date-picker/index.tsx
index db089d10d0..a0ccfa153d 100644
--- a/web/app/components/base/date-and-time-picker/date-picker/index.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { RiCalendarLine, RiCloseCircleFill } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { DatePickerProps, Period } from '../types'
 import { ViewType } from '../types'
 import type { Dayjs } from 'dayjs'
diff --git a/web/app/components/base/date-and-time-picker/time-picker/index.tsx b/web/app/components/base/date-and-time-picker/time-picker/index.tsx
index 9577a107e5..316164bfac 100644
--- a/web/app/components/base/date-and-time-picker/time-picker/index.tsx
+++ b/web/app/components/base/date-and-time-picker/time-picker/index.tsx
@@ -18,7 +18,7 @@ import Options from './options'
 import Header from './header'
 import { useTranslation } from 'react-i18next'
 import { RiCloseCircleFill, RiTimeLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import TimezoneLabel from '@/app/components/base/timezone-label'
 
 const to24Hour = (hour12: string, period: Period) => {
diff --git a/web/app/components/base/dialog/index.tsx b/web/app/components/base/dialog/index.tsx
index d4c0f10b40..3a56942537 100644
--- a/web/app/components/base/dialog/index.tsx
+++ b/web/app/components/base/dialog/index.tsx
@@ -1,7 +1,7 @@
 import { Fragment, useCallback } from 'react'
 import type { ElementType, ReactNode } from 'react'
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 // https://headlessui.com/react/dialog
 
@@ -35,37 +35,33 @@ const CustomDialog = ({
     <Transition appear show={show} as={Fragment}>
       <Dialog as="div" className="relative z-40" onClose={close}>
         <TransitionChild>
-          <div className={classNames(
-            'fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]',
+          <div className={cn('fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]',
             'duration-300 ease-in data-[closed]:opacity-0',
             'data-[enter]:opacity-100',
-            'data-[leave]:opacity-0',
-          )} />
+            'data-[leave]:opacity-0')} />
         </TransitionChild>
 
         <div className="fixed inset-0 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center">
             <TransitionChild>
-              <DialogPanel className={classNames(
-                'w-full max-w-[800px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl transition-all',
+              <DialogPanel className={cn('w-full max-w-[800px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl transition-all',
                 'duration-100 ease-in data-[closed]:scale-95 data-[closed]:opacity-0',
                 'data-[enter]:scale-100 data-[enter]:opacity-100',
                 'data-[enter]:scale-95 data-[leave]:opacity-0',
-                className,
-              )}>
+                className)}>
                 {Boolean(title) && (
                   <DialogTitle
                     as={titleAs || 'h3'}
-                    className={classNames('title-2xl-semi-bold pb-3 pr-8 text-text-primary', titleClassName)}
+                    className={cn('title-2xl-semi-bold pb-3 pr-8 text-text-primary', titleClassName)}
                   >
                     {title}
                   </DialogTitle>
                 )}
-                <div className={classNames(bodyClassName)}>
+                <div className={cn(bodyClassName)}>
                   {children}
                 </div>
                 {Boolean(footer) && (
-                  <div className={classNames('flex items-center justify-end gap-2 px-6 pb-6 pt-3', footerClassName)}>
+                  <div className={cn('flex items-center justify-end gap-2 px-6 pb-6 pt-3', footerClassName)}>
                     {footer}
                   </div>
                 )}
diff --git a/web/app/components/base/divider/index.tsx b/web/app/components/base/divider/index.tsx
index 387f24a5e9..0fe4af0f1e 100644
--- a/web/app/components/base/divider/index.tsx
+++ b/web/app/components/base/divider/index.tsx
@@ -1,7 +1,7 @@
 import type { CSSProperties, FC } from 'react'
 import React from 'react'
 import { type VariantProps, cva } from 'class-variance-authority'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const dividerVariants = cva('',
   {
@@ -29,7 +29,7 @@ export type DividerProps = {
 
 const Divider: FC<DividerProps> = ({ type, bgStyle, className = '', style }) => {
   return (
-    <div className={classNames(dividerVariants({ type, bgStyle }), 'shrink-0', className)} style={style}></div>
+    <div className={cn(dividerVariants({ type, bgStyle }), 'shrink-0', className)} style={style}></div>
   )
 }
 
diff --git a/web/app/components/base/drawer-plus/index.tsx b/web/app/components/base/drawer-plus/index.tsx
index 33a1948181..4d822a0576 100644
--- a/web/app/components/base/drawer-plus/index.tsx
+++ b/web/app/components/base/drawer-plus/index.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useRef } from 'react'
 import { RiCloseLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
diff --git a/web/app/components/base/drawer/index.tsx b/web/app/components/base/drawer/index.tsx
index 101ac22b6c..dca9f555c9 100644
--- a/web/app/components/base/drawer/index.tsx
+++ b/web/app/components/base/drawer/index.tsx
@@ -3,7 +3,7 @@ import { Dialog, DialogBackdrop, DialogTitle } from '@headlessui/react'
 import { useTranslation } from 'react-i18next'
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import Button from '../button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type IDrawerProps = {
   title?: string
diff --git a/web/app/components/base/dropdown/index.tsx b/web/app/components/base/dropdown/index.tsx
index 121fb06000..728f8098c5 100644
--- a/web/app/components/base/dropdown/index.tsx
+++ b/web/app/components/base/dropdown/index.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import { useState } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   RiMoreFill,
 } from '@remixicon/react'
diff --git a/web/app/components/base/effect/index.tsx b/web/app/components/base/effect/index.tsx
index 95afb1ba5f..85fc5a7cd8 100644
--- a/web/app/components/base/effect/index.tsx
+++ b/web/app/components/base/effect/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type EffectProps = {
   className?: string
diff --git a/web/app/components/base/emoji-picker/Inner.tsx b/web/app/components/base/emoji-picker/Inner.tsx
index 6299ea7aef..c023f26d1c 100644
--- a/web/app/components/base/emoji-picker/Inner.tsx
+++ b/web/app/components/base/emoji-picker/Inner.tsx
@@ -12,7 +12,7 @@ import {
 import Input from '@/app/components/base/input'
 import Divider from '@/app/components/base/divider'
 import { searchEmoji } from '@/utils/emoji'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 init({ data })
 
diff --git a/web/app/components/base/emoji-picker/index.tsx b/web/app/components/base/emoji-picker/index.tsx
index 7b91c62797..d12393f574 100644
--- a/web/app/components/base/emoji-picker/index.tsx
+++ b/web/app/components/base/emoji-picker/index.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import EmojiPickerInner from './Inner'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
diff --git a/web/app/components/base/encrypted-bottom/index.tsx b/web/app/components/base/encrypted-bottom/index.tsx
index 8416217517..be1862fc1b 100644
--- a/web/app/components/base/encrypted-bottom/index.tsx
+++ b/web/app/components/base/encrypted-bottom/index.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiLock2Fill } from '@remixicon/react'
 import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/base/error-boundary/index.tsx b/web/app/components/base/error-boundary/index.tsx
index e3df2c2ca8..0c226299d0 100644
--- a/web/app/components/base/error-boundary/index.tsx
+++ b/web/app/components/base/error-boundary/index.tsx
@@ -3,7 +3,7 @@ import type { ErrorInfo, ReactNode } from 'react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { RiAlertLine, RiBugLine } from '@remixicon/react'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ErrorBoundaryState = {
   hasError: boolean
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 3050249bb6..ef1fb183c8 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
@@ -41,7 +41,7 @@ const AnnotationCtrlButton: FC<Props> = ({
       setShowAnnotationFullModal()
       return
     }
-    const res: any = await addAnnotation(appId, {
+    const res = await addAnnotation(appId, {
       message_id: messageId,
       question: query,
       answer,
@@ -50,7 +50,7 @@ const AnnotationCtrlButton: FC<Props> = ({
       message: t('common.api.actionSuccess') as string,
       type: 'success',
     })
-    onAdded(res.id, res.account?.name)
+    onAdded(res.id, res.account?.name ?? '')
   }
 
   return (
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx
index cc8e125e6b..b97f18ae87 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx
@@ -1,6 +1,6 @@
 import ReactSlider from 'react-slider'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ISliderProps = {
   className?: string
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 9d2236c1a4..daf1fe4f70 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
@@ -14,7 +14,7 @@ import { getInputKeys } from '@/app/components/base/block-input'
 import type { PromptVariable } from '@/models/debug'
 import type { InputVar } from '@/app/components/workflow/types'
 import { getNewVar } from '@/utils/var'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 import { checkKeys } from '@/utils/var'
 
diff --git a/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx b/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
index 9efd072e00..3c82150e01 100644
--- a/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
+++ b/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
@@ -1,7 +1,7 @@
 import { Fragment, useCallback } from 'react'
 import type { ReactNode } from 'react'
 import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type DialogProps = {
   className?: string
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 bea26d8bb7..b32ef3e4f7 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
@@ -6,7 +6,7 @@ import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
 import VoiceSettings from '@/app/components/base/features/new-feature-panel/text-to-speech/voice-settings'
 import { useFeatures } from '@/app/components/base/features/hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   isChatMode?: boolean
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 b5bcbca474..abbde2bab9 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,6 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import { produce } from 'immer'
 import { useContext } from 'use-context-selector'
 import { RiEqualizer2Line } from '@remixicon/react'
@@ -10,9 +9,9 @@ import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import { FeatureEnum } from '@/app/components/base/features/types'
-import { fetchCodeBasedExtensionList } from '@/service/common'
 import { useModalContext } from '@/context/modal-context'
 import I18n from '@/context/i18n'
+import { useCodeBasedExtensions } from '@/service/use-common'
 
 type Props = {
   disabled?: boolean
@@ -28,10 +27,7 @@ const Moderation = ({
   const { locale } = useContext(I18n)
   const featuresStore = useFeaturesStore()
   const moderation = useFeatures(s => s.features.moderation)
-  const { data: codeBasedExtensionList } = useSWR(
-    '/code-based-extension?module=moderation',
-    fetchCodeBasedExtensionList,
-  )
+  const { data: codeBasedExtensionList } = useCodeBasedExtensions('moderation')
   const [isHovering, setIsHovering] = useState(false)
 
   const handleOpenModerationSettingModal = () => {
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 ff45a7ea4c..dd9c58c5ab 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,6 +1,5 @@
 import type { ChangeEvent, FC } from 'react'
 import { useState } from 'react'
-import useSWR from 'swr'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
@@ -13,20 +12,17 @@ import Divider from '@/app/components/base/divider'
 import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
 import type { ModerationConfig, ModerationContentConfig } from '@/models/debug'
 import { useToastContext } from '@/app/components/base/toast'
-import {
-  fetchCodeBasedExtensionList,
-  fetchModelProviders,
-} from '@/service/common'
 import type { CodeBasedExtensionItem } from '@/models/common'
 import I18n from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n-config/language'
 import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
 import { useModalContext } from '@/context/modal-context'
 import { CustomConfigurationStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 import { useDocLink } from '@/context/i18n'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
+import { useCodeBasedExtensions, useModelProviders } from '@/service/use-common'
 
 const systemTypes = ['openai_moderation', 'keywords', 'api']
 
@@ -51,21 +47,18 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
   const docLink = useDocLink()
   const { notify } = useToastContext()
   const { locale } = useContext(I18n)
-  const { data: modelProviders, isLoading, mutate } = useSWR('/workspaces/current/model-providers', fetchModelProviders)
+  const { data: modelProviders, isPending: isLoading, refetch: refetchModelProviders } = useModelProviders()
   const [localeData, setLocaleData] = useState<ModerationConfig>(data)
   const { setShowAccountSettingModal } = useModalContext()
   const handleOpenSettingsModal = () => {
     setShowAccountSettingModal({
       payload: ACCOUNT_SETTING_TAB.PROVIDER,
       onCancelCallback: () => {
-        mutate()
+        refetchModelProviders()
       },
     })
   }
-  const { data: codeBasedExtensionList } = useSWR(
-    '/code-based-extension?module=moderation',
-    fetchCodeBasedExtensionList,
-  )
+  const { data: codeBasedExtensionList } = useCodeBasedExtensions('moderation')
   const openaiProvider = modelProviders?.data.find(item => item.provider === 'langgenius/openai/openai')
   const systemOpenaiProviderEnabled = openaiProvider?.system_configuration.enabled
   const systemOpenaiProviderQuota = systemOpenaiProviderEnabled ? openaiProvider?.system_configuration.quota_configurations.find(item => item.quota_type === openaiProvider.system_configuration.current_quota_type) : undefined
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 6b8bf2d567..ab67a0bae0 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
@@ -14,7 +14,7 @@ import AudioBtn from '@/app/components/base/audio-btn'
 import { languages } from '@/i18n-config/language'
 import { TtsAutoPlay } from '@/types/app'
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useAppVoices } from '@/service/use-apps'
 
 type VoiceParamConfigProps = {
@@ -93,7 +93,7 @@ const VoiceParamConfig = ({
           <div className='relative h-8'>
             <ListboxButton
               className={'h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6'}>
-              <span className={classNames('block truncate text-left text-text-secondary', !languageItem?.name && 'text-text-tertiary')}>
+              <span className={cn('block truncate text-left text-text-secondary', !languageItem?.name && 'text-text-tertiary')}>
                 {languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}`) : localLanguagePlaceholder}
               </span>
               <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -124,12 +124,10 @@ const VoiceParamConfig = ({
                     {({ /* active, */ selected }) => (
                       <>
                         <span
-                          className={classNames('block', selected && 'font-normal')}>{t(`common.voice.language.${(item.value).toString().replace('-', '')}`)}</span>
+                          className={cn('block', selected && 'font-normal')}>{t(`common.voice.language.${(item.value).toString().replace('-', '')}`)}</span>
                         {(selected || item.value === text2speech?.language) && (
                           <span
-                            className={classNames(
-                              'absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary',
-                            )}
+                            className={cn('absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary')}
                           >
                             <CheckIcon className="h-4 w-4" aria-hidden="true" />
                           </span>
@@ -161,7 +159,7 @@ const VoiceParamConfig = ({
               <ListboxButton
                 className={'h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6'}>
                 <span
-                  className={classNames('block truncate text-left text-text-secondary', !voiceItem?.name && 'text-text-tertiary')}>{voiceItem?.name ?? localVoicePlaceholder}</span>
+                  className={cn('block truncate text-left text-text-secondary', !voiceItem?.name && 'text-text-tertiary')}>{voiceItem?.name ?? localVoicePlaceholder}</span>
                 <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                   <ChevronDownIcon
                     className="h-4 w-4 text-text-tertiary"
@@ -189,12 +187,10 @@ const VoiceParamConfig = ({
                     >
                       {({ /* active, */ selected }) => (
                         <>
-                          <span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
+                          <span className={cn('block', selected && 'font-normal')}>{item.name}</span>
                           {(selected || item.value === text2speech?.voice) && (
                             <span
-                              className={classNames(
-                                'absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary',
-                              )}
+                              className={cn('absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary')}
                             >
                               <CheckIcon className="h-4 w-4" aria-hidden="true" />
                             </span>
diff --git a/web/app/components/base/file-thumb/index.tsx b/web/app/components/base/file-thumb/index.tsx
index 2b9004545a..36d1a91533 100644
--- a/web/app/components/base/file-thumb/index.tsx
+++ b/web/app/components/base/file-thumb/index.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react'
 import ImageRender from './image-render'
 import type { VariantProps } from 'class-variance-authority'
 import { cva } from 'class-variance-authority'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { getFileAppearanceType } from '../file-uploader/utils'
 import { FileTypeIcon } from '../file-uploader'
 import Tooltip from '../tooltip'
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 9fae0abafa..b9d22c0325 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
@@ -15,7 +15,7 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import Button from '@/app/components/base/button'
 import type { FileUpload } from '@/app/components/base/features/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type FileFromLinkOrLocalProps = {
   showFromLink?: boolean
diff --git a/web/app/components/base/file-uploader/file-image-render.tsx b/web/app/components/base/file-uploader/file-image-render.tsx
index d6135051dd..ff2e2901e7 100644
--- a/web/app/components/base/file-uploader/file-image-render.tsx
+++ b/web/app/components/base/file-uploader/file-image-render.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type FileImageRenderProps = {
   imageUrl: string
diff --git a/web/app/components/base/file-uploader/file-list-in-log.tsx b/web/app/components/base/file-uploader/file-list-in-log.tsx
index 186e8fcc2c..76d5c1412e 100644
--- a/web/app/components/base/file-uploader/file-list-in-log.tsx
+++ b/web/app/components/base/file-uploader/file-list-in-log.tsx
@@ -10,7 +10,7 @@ import {
 } from './utils'
 import Tooltip from '@/app/components/base/tooltip'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   fileList: {
diff --git a/web/app/components/base/file-uploader/file-type-icon.tsx b/web/app/components/base/file-uploader/file-type-icon.tsx
index 850b08c71f..0d8d69a116 100644
--- a/web/app/components/base/file-uploader/file-type-icon.tsx
+++ b/web/app/components/base/file-uploader/file-type-icon.tsx
@@ -15,7 +15,7 @@ import {
 } from '@remixicon/react'
 import { FileAppearanceTypeEnum } from './types'
 import type { FileAppearanceType } from './types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const FILE_TYPE_ICON_MAP = {
   [FileAppearanceTypeEnum.pdf]: {
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
index b308e8d758..e9e19d46a5 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
@@ -19,7 +19,7 @@ import type { FileEntity } from '../types'
 import ActionButton from '@/app/components/base/action-button'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
 import { formatFileSize } from '@/utils/format'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
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 87a5411eab..936419b25d 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
@@ -16,7 +16,7 @@ import FileInput from '../file-input'
 import { useFile } from '../hooks'
 import FileItem from './file-item'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FileUpload } from '@/app/components/base/features/types'
 import { TransferMethod } from '@/types/app'
 
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 667bf7cc15..8f3959dca4 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
@@ -11,7 +11,7 @@ import {
 } from '../utils'
 import FileTypeIcon from '../file-type-icon'
 import type { FileEntity } from '../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { formatFileSize } from '@/utils/format'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.tsx
index ba909040c3..7770d07153 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.tsx
@@ -5,7 +5,7 @@ import FileImageItem from './file-image-item'
 import FileItem from './file-item'
 import type { FileUpload } from '@/app/components/base/features/types'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type FileListProps = {
   className?: string
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
index 7e6e190ddb..291388ca02 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
@@ -7,7 +7,7 @@ import {
 } from '@remixicon/react'
 import FileFromLinkOrLocal from '../file-from-link-or-local'
 import ActionButton from '@/app/components/base/action-button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FileUpload } from '@/app/components/base/features/types'
 import { TransferMethod } from '@/types/app'
 
diff --git a/web/app/components/base/form/components/base/base-field.tsx b/web/app/components/base/form/components/base/base-field.tsx
index db57059b82..c51da5fc06 100644
--- a/web/app/components/base/form/components/base/base-field.tsx
+++ b/web/app/components/base/form/components/base/base-field.tsx
@@ -8,7 +8,7 @@ import PureSelect from '@/app/components/base/select/pure'
 import Tooltip from '@/app/components/base/tooltip'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { useTriggerPluginDynamicOptions } from '@/service/use-triggers'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiExternalLinkLine } from '@remixicon/react'
 import type { AnyFieldApi } from '@tanstack/react-form'
 import { useStore } from '@tanstack/react-form'
diff --git a/web/app/components/base/form/components/base/base-form.tsx b/web/app/components/base/form/components/base/base-form.tsx
index 0d35380523..4cf9ab52ec 100644
--- a/web/app/components/base/form/components/base/base-form.tsx
+++ b/web/app/components/base/form/components/base/base-form.tsx
@@ -26,7 +26,7 @@ import {
 import type {
   BaseFieldProps,
 } from '.'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   useGetFormValues,
   useGetValidators,
diff --git a/web/app/components/base/form/components/field/checkbox.tsx b/web/app/components/base/form/components/field/checkbox.tsx
index 855dbd80fe..526e8e3853 100644
--- a/web/app/components/base/form/components/field/checkbox.tsx
+++ b/web/app/components/base/form/components/field/checkbox.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../..'
 import Checkbox from '../../../checkbox'
 
diff --git a/web/app/components/base/form/components/field/custom-select.tsx b/web/app/components/base/form/components/field/custom-select.tsx
index 0e605184dc..fb6bb18e1b 100644
--- a/web/app/components/base/form/components/field/custom-select.tsx
+++ b/web/app/components/base/form/components/field/custom-select.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../..'
 import type { CustomSelectProps, Option } from '../../../select/custom'
 import CustomSelect from '../../../select/custom'
diff --git a/web/app/components/base/form/components/field/file-types.tsx b/web/app/components/base/form/components/field/file-types.tsx
index 44c77dc894..2a05a7035b 100644
--- a/web/app/components/base/form/components/field/file-types.tsx
+++ b/web/app/components/base/form/components/field/file-types.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { LabelProps } from '../label'
 import { useFieldContext } from '../..'
 import Label from '../label'
diff --git a/web/app/components/base/form/components/field/file-uploader.tsx b/web/app/components/base/form/components/field/file-uploader.tsx
index 2e4e26b5d6..3e447702d5 100644
--- a/web/app/components/base/form/components/field/file-uploader.tsx
+++ b/web/app/components/base/form/components/field/file-uploader.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useFieldContext } from '../..'
 import type { LabelProps } from '../label'
 import Label from '../label'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FileUploaderInAttachmentWrapperProps } from '../../../file-uploader/file-uploader-in-attachment'
 import FileUploaderInAttachmentWrapper from '../../../file-uploader/file-uploader-in-attachment'
 import type { FileEntity } from '../../../file-uploader/types'
diff --git a/web/app/components/base/form/components/field/input-type-select/index.tsx b/web/app/components/base/form/components/field/input-type-select/index.tsx
index 256fd872d2..d3961e158c 100644
--- a/web/app/components/base/form/components/field/input-type-select/index.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/index.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../../..'
 import type { CustomSelectProps } from '../../../../select/custom'
 import CustomSelect from '../../../../select/custom'
diff --git a/web/app/components/base/form/components/field/input-type-select/trigger.tsx b/web/app/components/base/form/components/field/input-type-select/trigger.tsx
index d71f3b7628..270ead6001 100644
--- a/web/app/components/base/form/components/field/input-type-select/trigger.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/trigger.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Badge from '@/app/components/base/badge'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import type { FileTypeSelectOption } from './types'
diff --git a/web/app/components/base/form/components/field/mixed-variable-text-input/index.tsx b/web/app/components/base/form/components/field/mixed-variable-text-input/index.tsx
index 4bb562ba3a..c8614db7dd 100644
--- a/web/app/components/base/form/components/field/mixed-variable-text-input/index.tsx
+++ b/web/app/components/base/form/components/field/mixed-variable-text-input/index.tsx
@@ -2,7 +2,7 @@ import {
   memo,
 } from 'react'
 import PromptEditor from '@/app/components/base/prompt-editor'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Placeholder from './placeholder'
 
 type MixedVariableTextInputProps = {
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 46d2ced8b6..5bb3494ed8 100644
--- a/web/app/components/base/form/components/field/number-input.tsx
+++ b/web/app/components/base/form/components/field/number-input.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useFieldContext } from '../..'
 import type { LabelProps } from '../label'
 import Label from '../label'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { InputNumberProps } from '../../../input-number'
 import { InputNumber } from '../../../input-number'
 
diff --git a/web/app/components/base/form/components/field/number-slider.tsx b/web/app/components/base/form/components/field/number-slider.tsx
index 1e8fc4e912..0dbffb7578 100644
--- a/web/app/components/base/form/components/field/number-slider.tsx
+++ b/web/app/components/base/form/components/field/number-slider.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { LabelProps } from '../label'
 import { useFieldContext } from '../..'
 import Label from '../label'
diff --git a/web/app/components/base/form/components/field/options.tsx b/web/app/components/base/form/components/field/options.tsx
index 9ba9c4d398..6cfffc3c43 100644
--- a/web/app/components/base/form/components/field/options.tsx
+++ b/web/app/components/base/form/components/field/options.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../..'
 import type { LabelProps } from '../label'
 import Label from '../label'
diff --git a/web/app/components/base/form/components/field/select.tsx b/web/app/components/base/form/components/field/select.tsx
index 8a36a49510..be6337e42c 100644
--- a/web/app/components/base/form/components/field/select.tsx
+++ b/web/app/components/base/form/components/field/select.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../..'
 import type { Option, PureSelectProps } from '../../../select/pure'
 import PureSelect from '../../../select/pure'
diff --git a/web/app/components/base/form/components/field/text-area.tsx b/web/app/components/base/form/components/field/text-area.tsx
index 2392d0609e..675f73d69c 100644
--- a/web/app/components/base/form/components/field/text-area.tsx
+++ b/web/app/components/base/form/components/field/text-area.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useFieldContext } from '../..'
 import type { LabelProps } from '../label'
 import Label from '../label'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { TextareaProps } from '../../../textarea'
 import Textarea from '../../../textarea'
 
diff --git a/web/app/components/base/form/components/field/text.tsx b/web/app/components/base/form/components/field/text.tsx
index ed6cab9423..9a18ee4db6 100644
--- a/web/app/components/base/form/components/field/text.tsx
+++ b/web/app/components/base/form/components/field/text.tsx
@@ -3,7 +3,7 @@ import { useFieldContext } from '../..'
 import Input, { type InputProps } from '../../../input'
 import type { LabelProps } from '../label'
 import Label from '../label'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type TextFieldProps = {
   label: string
diff --git a/web/app/components/base/form/components/field/upload-method.tsx b/web/app/components/base/form/components/field/upload-method.tsx
index 8aac32f638..8ec619ba00 100644
--- a/web/app/components/base/form/components/field/upload-method.tsx
+++ b/web/app/components/base/form/components/field/upload-method.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { LabelProps } from '../label'
 import { useFieldContext } from '../..'
 import Label from '../label'
diff --git a/web/app/components/base/form/components/field/variable-or-constant-input.tsx b/web/app/components/base/form/components/field/variable-or-constant-input.tsx
index b8a96c5401..78a1bb0c8e 100644
--- a/web/app/components/base/form/components/field/variable-or-constant-input.tsx
+++ b/web/app/components/base/form/components/field/variable-or-constant-input.tsx
@@ -1,7 +1,7 @@
 import type { ChangeEvent } from 'react'
 import { useCallback, useState } from 'react'
 import { RiEditLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import SegmentedControl from '@/app/components/base/segmented-control'
 import { VariableX } from '@/app/components/base/icons/src/vender/workflow'
 import Input from '@/app/components/base/input'
diff --git a/web/app/components/base/form/components/field/variable-selector.tsx b/web/app/components/base/form/components/field/variable-selector.tsx
index 3c4042b118..c945eb93c6 100644
--- a/web/app/components/base/form/components/field/variable-selector.tsx
+++ b/web/app/components/base/form/components/field/variable-selector.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
 import type { LabelProps } from '../label'
 import Label from '../label'
diff --git a/web/app/components/base/form/components/label.tsx b/web/app/components/base/form/components/label.tsx
index 4b104c9dc6..47b74d28e0 100644
--- a/web/app/components/base/form/components/label.tsx
+++ b/web/app/components/base/form/components/label.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '../../tooltip'
 import { useTranslation } from 'react-i18next'
 
diff --git a/web/app/components/base/fullscreen-modal/index.tsx b/web/app/components/base/fullscreen-modal/index.tsx
index ba96ae13bd..b6a1ee8a32 100644
--- a/web/app/components/base/fullscreen-modal/index.tsx
+++ b/web/app/components/base/fullscreen-modal/index.tsx
@@ -1,6 +1,6 @@
 import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
 import { RiCloseLargeLine } from '@remixicon/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 type IModal = {
@@ -26,14 +26,12 @@ export default function FullScreenModal({
 }: IModal) {
   return (
     <Transition show={open} appear>
-      <Dialog as="div" className={classNames('modal-dialog', wrapperClassName)} onClose={onClose}>
+      <Dialog as="div" className={cn('modal-dialog', wrapperClassName)} onClose={onClose}>
         <TransitionChild>
-          <div className={classNames(
-            'fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]',
+          <div className={cn('fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]',
             'duration-300 ease-in data-[closed]:opacity-0',
             'data-[enter]:opacity-100',
-            'data-[leave]:opacity-0',
-          )} />
+            'data-[leave]:opacity-0')} />
         </TransitionChild>
 
         <div
@@ -45,14 +43,12 @@ export default function FullScreenModal({
         >
           <div className="relative h-full w-full rounded-2xl border border-effects-highlight bg-background-default-subtle">
             <TransitionChild>
-              <DialogPanel className={classNames(
-                'h-full',
+              <DialogPanel className={cn('h-full',
                 overflowVisible ? 'overflow-visible' : 'overflow-hidden',
                 'duration-100 ease-in data-[closed]:scale-95 data-[closed]:opacity-0',
                 'data-[enter]:scale-100 data-[enter]:opacity-100',
                 'data-[enter]:scale-95 data-[leave]:opacity-0',
-                className,
-              )}>
+                className)}>
                 {closable
                   && <div
                     className='absolute right-3 top-3 z-50 flex h-9 w-9 cursor-pointer items-center justify-center
diff --git a/web/app/components/base/grid-mask/index.tsx b/web/app/components/base/grid-mask/index.tsx
index 9f5cb50e14..455b155939 100644
--- a/web/app/components/base/grid-mask/index.tsx
+++ b/web/app/components/base/grid-mask/index.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import Style from './style.module.css'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type GridMaskProps = {
   children: React.ReactNode
@@ -15,9 +15,9 @@ const GridMask: FC<GridMaskProps> = ({
   gradientClassName,
 }) => {
   return (
-    <div className={classNames('relative bg-saas-background', wrapperClassName)}>
-      <div className={classNames('absolute inset-0 z-0 h-full w-full opacity-70', canvasClassName, Style.gridBg)} />
-      <div className={classNames('absolute z-[1] h-full w-full rounded-lg bg-grid-mask-background', gradientClassName)} />
+    <div className={cn('relative bg-saas-background', wrapperClassName)}>
+      <div className={cn('absolute inset-0 z-0 h-full w-full opacity-70', canvasClassName, Style.gridBg)} />
+      <div className={cn('absolute z-[1] h-full w-full rounded-lg bg-grid-mask-background', gradientClassName)} />
       <div className='relative z-[2]'>{children}</div>
     </div>
   )
diff --git a/web/app/components/base/icons/script.mjs b/web/app/components/base/icons/script.mjs
index 764bbf1987..f2bf43d930 100644
--- a/web/app/components/base/icons/script.mjs
+++ b/web/app/components/base/icons/script.mjs
@@ -113,7 +113,7 @@ const generateImageComponent = async (entry, pathList) => {
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './<%= fileName %>.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx b/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx
index be9a407eb2..7c2f24b6b7 100644
--- a/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx
+++ b/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx
@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './BaichuanTextCn.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/icons/src/image/llm/Minimax.tsx b/web/app/components/base/icons/src/image/llm/Minimax.tsx
index 7df7e3fcbc..9a4f81e374 100644
--- a/web/app/components/base/icons/src/image/llm/Minimax.tsx
+++ b/web/app/components/base/icons/src/image/llm/Minimax.tsx
@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './Minimax.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/icons/src/image/llm/MinimaxText.tsx b/web/app/components/base/icons/src/image/llm/MinimaxText.tsx
index 840e8cb439..a11210a9c0 100644
--- a/web/app/components/base/icons/src/image/llm/MinimaxText.tsx
+++ b/web/app/components/base/icons/src/image/llm/MinimaxText.tsx
@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './MinimaxText.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/icons/src/image/llm/Tongyi.tsx b/web/app/components/base/icons/src/image/llm/Tongyi.tsx
index 2f62f1a355..966a99e041 100644
--- a/web/app/components/base/icons/src/image/llm/Tongyi.tsx
+++ b/web/app/components/base/icons/src/image/llm/Tongyi.tsx
@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './Tongyi.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/icons/src/image/llm/TongyiText.tsx b/web/app/components/base/icons/src/image/llm/TongyiText.tsx
index a52f63c248..e82fcc6361 100644
--- a/web/app/components/base/icons/src/image/llm/TongyiText.tsx
+++ b/web/app/components/base/icons/src/image/llm/TongyiText.tsx
@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './TongyiText.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx b/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx
index c982c73aed..8fb41b60d1 100644
--- a/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx
+++ b/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx
@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './TongyiTextCn.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/icons/src/image/llm/Wxyy.tsx b/web/app/components/base/icons/src/image/llm/Wxyy.tsx
index a3c494811e..988c289215 100644
--- a/web/app/components/base/icons/src/image/llm/Wxyy.tsx
+++ b/web/app/components/base/icons/src/image/llm/Wxyy.tsx
@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './Wxyy.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/icons/src/image/llm/WxyyText.tsx b/web/app/components/base/icons/src/image/llm/WxyyText.tsx
index e5dd6e8803..87402fd856 100644
--- a/web/app/components/base/icons/src/image/llm/WxyyText.tsx
+++ b/web/app/components/base/icons/src/image/llm/WxyyText.tsx
@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './WxyyText.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx b/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx
index 32108adab4..f7d6464c13 100644
--- a/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx
+++ b/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx
@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './WxyyTextCn.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/image-gallery/index.tsx b/web/app/components/base/image-gallery/index.tsx
index fdb9711292..6bef84a724 100644
--- a/web/app/components/base/image-gallery/index.tsx
+++ b/web/app/components/base/image-gallery/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import s from './style.module.css'
diff --git a/web/app/components/base/image-uploader/chat-image-uploader.tsx b/web/app/components/base/image-uploader/chat-image-uploader.tsx
index bc563b80e3..6e2503dfbe 100644
--- a/web/app/components/base/image-uploader/chat-image-uploader.tsx
+++ b/web/app/components/base/image-uploader/chat-image-uploader.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Uploader from './uploader'
 import ImageLinkInput from './image-link-input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ImagePlus } from '@/app/components/base/icons/src/vender/line/images'
 import { TransferMethod } from '@/types/app'
 import {
diff --git a/web/app/components/base/image-uploader/image-list.tsx b/web/app/components/base/image-uploader/image-list.tsx
index 3b5f6dee9c..fe88bdc68f 100644
--- a/web/app/components/base/image-uploader/image-list.tsx
+++ b/web/app/components/base/image-uploader/image-list.tsx
@@ -5,7 +5,7 @@ import {
   RiCloseLine,
   RiLoader2Line,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Tooltip from '@/app/components/base/tooltip'
diff --git a/web/app/components/base/inline-delete-confirm/index.tsx b/web/app/components/base/inline-delete-confirm/index.tsx
index eb671609cf..22942a179a 100644
--- a/web/app/components/base/inline-delete-confirm/index.tsx
+++ b/web/app/components/base/inline-delete-confirm/index.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type InlineDeleteConfirmProps = {
   title?: string
diff --git a/web/app/components/base/input-number/index.tsx b/web/app/components/base/input-number/index.tsx
index a5a171a9fc..5726bb8bbd 100644
--- a/web/app/components/base/input-number/index.tsx
+++ b/web/app/components/base/input-number/index.tsx
@@ -1,7 +1,7 @@
 import { type FC, useCallback } from 'react'
 import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
 import Input, { type InputProps } from '../input'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type InputNumberProps = {
   unit?: string
@@ -81,11 +81,11 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
     onChange(parsed)
   }, [isValidValue, onChange])
 
-  return <div className={classNames('flex', wrapClassName)}>
+  return <div className={cn('flex', wrapClassName)}>
     <Input {...rest}
       // disable default controller
       type='number'
-      className={classNames('no-spinner rounded-r-none', className)}
+      className={cn('no-spinner rounded-r-none', className)}
       value={value ?? 0}
       max={max}
       min={min}
@@ -94,8 +94,7 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
       unit={unit}
       size={size}
     />
-    <div className={classNames(
-      'flex flex-col rounded-r-md border-l border-divider-subtle bg-components-input-bg-normal text-text-tertiary focus:shadow-xs',
+    <div className={cn('flex flex-col rounded-r-md border-l border-divider-subtle bg-components-input-bg-normal text-text-tertiary focus:shadow-xs',
       disabled && 'cursor-not-allowed opacity-50',
       controlWrapClassName)}
     >
@@ -104,12 +103,10 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
         onClick={inc}
         disabled={disabled}
         aria-label='increment'
-        className={classNames(
-          size === 'regular' ? 'pt-1' : 'pt-1.5',
+        className={cn(size === 'regular' ? 'pt-1' : 'pt-1.5',
           'px-1.5 hover:bg-components-input-bg-hover',
           disabled && 'cursor-not-allowed hover:bg-transparent',
-          controlClassName,
-        )}
+          controlClassName)}
       >
         <RiArrowUpSLine className='size-3' />
       </button>
@@ -118,12 +115,10 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
         onClick={dec}
         disabled={disabled}
         aria-label='decrement'
-        className={classNames(
-          size === 'regular' ? 'pb-1' : 'pb-1.5',
+        className={cn(size === 'regular' ? 'pb-1' : 'pb-1.5',
           'px-1.5 hover:bg-components-input-bg-hover',
           disabled && 'cursor-not-allowed hover:bg-transparent',
-          controlClassName,
-        )}
+          controlClassName)}
       >
         <RiArrowDownSLine className='size-3' />
       </button>
diff --git a/web/app/components/base/input-with-copy/index.tsx b/web/app/components/base/input-with-copy/index.tsx
index 87b7de5005..6c0c7e45aa 100644
--- a/web/app/components/base/input-with-copy/index.tsx
+++ b/web/app/components/base/input-with-copy/index.tsx
@@ -7,7 +7,7 @@ import copy from 'copy-to-clipboard'
 import type { InputProps } from '../input'
 import Tooltip from '../tooltip'
 import ActionButton from '../action-button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type InputWithCopyProps = {
   showCopyButton?: boolean
diff --git a/web/app/components/base/input/index.tsx b/web/app/components/base/input/index.tsx
index 60f80d560b..8171b6f9b8 100644
--- a/web/app/components/base/input/index.tsx
+++ b/web/app/components/base/input/index.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiCloseCircleFill, RiErrorWarningLine, RiSearchLine } from '@remixicon/react'
 import { type VariantProps, cva } from 'class-variance-authority'
 import { noop } from 'lodash-es'
diff --git a/web/app/components/base/linked-apps-panel/index.tsx b/web/app/components/base/linked-apps-panel/index.tsx
index 561bd49c2a..7fa8d9c1e9 100644
--- a/web/app/components/base/linked-apps-panel/index.tsx
+++ b/web/app/components/base/linked-apps-panel/index.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React from 'react'
 import Link from 'next/link'
 import { RiArrowRightUpLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import AppIcon from '@/app/components/base/app-icon'
 import type { RelatedApp } from '@/models/datasets'
 import { AppModeEnum } from '@/types/app'
diff --git a/web/app/components/base/logo/dify-logo.tsx b/web/app/components/base/logo/dify-logo.tsx
index 5369144e1c..765d0fedf7 100644
--- a/web/app/components/base/logo/dify-logo.tsx
+++ b/web/app/components/base/logo/dify-logo.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useTheme from '@/hooks/use-theme'
 import { basePath } from '@/utils/var'
 export type LogoStyle = 'default' | 'monochromeWhite'
@@ -35,7 +35,7 @@ const DifyLogo: FC<DifyLogoProps> = ({
   return (
     <img
       src={`${basePath}${logoPathMap[themedStyle]}`}
-      className={classNames('block object-contain', logoSizeMap[size], className)}
+      className={cn('block object-contain', logoSizeMap[size], className)}
       alt='Dify logo'
     />
   )
diff --git a/web/app/components/base/logo/logo-embedded-chat-header.tsx b/web/app/components/base/logo/logo-embedded-chat-header.tsx
index 38451abc5e..a580ad944f 100644
--- a/web/app/components/base/logo/logo-embedded-chat-header.tsx
+++ b/web/app/components/base/logo/logo-embedded-chat-header.tsx
@@ -1,4 +1,4 @@
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FC } from 'react'
 import { basePath } from '@/utils/var'
 
@@ -16,7 +16,7 @@ const LogoEmbeddedChatHeader: FC<LogoEmbeddedChatHeaderProps> = ({
     <img
       src={`${basePath}/logo/logo-embedded-chat-header.png`}
       alt='logo'
-      className={classNames('block h-6 w-auto', className)}
+      className={cn('block h-6 w-auto', className)}
     />
   </picture>
 }
diff --git a/web/app/components/base/logo/logo-site.tsx b/web/app/components/base/logo/logo-site.tsx
index fd606ee8c3..3795a072c8 100644
--- a/web/app/components/base/logo/logo-site.tsx
+++ b/web/app/components/base/logo/logo-site.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import { basePath } from '@/utils/var'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type LogoSiteProps = {
   className?: string
@@ -13,7 +13,7 @@ const LogoSite: FC<LogoSiteProps> = ({
   return (
     <img
       src={`${basePath}/logo/logo.png`}
-      className={classNames('block h-[24.5px] w-[22.651px]', className)}
+      className={cn('block h-[24.5px] w-[22.651px]', className)}
       alt='logo'
     />
   )
diff --git a/web/app/components/base/markdown-blocks/button.tsx b/web/app/components/base/markdown-blocks/button.tsx
index 315653bcd0..1036315842 100644
--- a/web/app/components/base/markdown-blocks/button.tsx
+++ b/web/app/components/base/markdown-blocks/button.tsx
@@ -1,6 +1,6 @@
 import { useChatContext } from '@/app/components/base/chat/chat/context'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { isValidUrl } from './utils'
 const MarkdownButton = ({ node }: any) => {
   const { onSend } = useChatContext()
diff --git a/web/app/components/base/markdown-blocks/think-block.tsx b/web/app/components/base/markdown-blocks/think-block.tsx
index 9c43578e4c..b345612ebc 100644
--- a/web/app/components/base/markdown-blocks/think-block.tsx
+++ b/web/app/components/base/markdown-blocks/think-block.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useChatContext } from '../chat/chat/context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const hasEndThink = (children: any): boolean => {
   if (typeof children === 'string')
diff --git a/web/app/components/base/markdown/index.tsx b/web/app/components/base/markdown/index.tsx
index bb49fe1b14..2c881dc2eb 100644
--- a/web/app/components/base/markdown/index.tsx
+++ b/web/app/components/base/markdown/index.tsx
@@ -1,7 +1,7 @@
 import dynamic from 'next/dynamic'
 import 'katex/dist/katex.min.css'
 import { flow } from 'lodash-es'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { preprocessLaTeX, preprocessThinkTag } from './markdown-utils'
 import type { ReactMarkdownWrapperProps, SimplePluginInfo } from './react-markdown-wrapper'
 
diff --git a/web/app/components/base/mermaid/index.tsx b/web/app/components/base/mermaid/index.tsx
index 92fcd5cac9..73709bdc8e 100644
--- a/web/app/components/base/mermaid/index.tsx
+++ b/web/app/components/base/mermaid/index.tsx
@@ -13,7 +13,7 @@ import {
   waitForDOMElement,
 } from './utils'
 import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 import { Theme } from '@/types/app'
 
diff --git a/web/app/components/base/message-log-modal/index.tsx b/web/app/components/base/message-log-modal/index.tsx
index 12746f5982..d57a191953 100644
--- a/web/app/components/base/message-log-modal/index.tsx
+++ b/web/app/components/base/message-log-modal/index.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { useEffect, useRef, useState } from 'react'
 import { useClickAway } from 'ahooks'
 import { RiCloseLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 import Run from '@/app/components/workflow/run'
 import { useStore } from '@/app/components/app/store'
diff --git a/web/app/components/base/modal-like-wrap/index.tsx b/web/app/components/base/modal-like-wrap/index.tsx
index cf18ef13cd..ecbcd503d1 100644
--- a/web/app/components/base/modal-like-wrap/index.tsx
+++ b/web/app/components/base/modal-like-wrap/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 import Button from '../button'
 import { RiCloseLine } from '@remixicon/react'
diff --git a/web/app/components/base/modal/index.tsx b/web/app/components/base/modal/index.tsx
index f091717191..6ae1f299a0 100644
--- a/web/app/components/base/modal/index.tsx
+++ b/web/app/components/base/modal/index.tsx
@@ -1,7 +1,7 @@
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
 import { Fragment } from 'react'
 import { RiCloseLine } from '@remixicon/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 // https://headlessui.com/react/dialog
 
@@ -38,15 +38,13 @@ export default function Modal({
 }: IModal) {
   return (
     <Transition appear show={isShow} as={Fragment}>
-      <Dialog as="div" className={classNames('relative', highPriority ? 'z-[1100]' : 'z-[60]', wrapperClassName)} onClose={clickOutsideNotClose ? noop : onClose}>
+      <Dialog as="div" className={cn('relative', highPriority ? 'z-[1100]' : 'z-[60]', wrapperClassName)} onClose={clickOutsideNotClose ? noop : onClose}>
         <TransitionChild>
-          <div className={classNames(
-            'fixed inset-0',
+          <div className={cn('fixed inset-0',
             overlayOpacity ? 'bg-workflow-canvas-canvas-overlay' : 'bg-background-overlay',
             'duration-300 ease-in data-[closed]:opacity-0',
             'data-[enter]:opacity-100',
-            'data-[leave]:opacity-0',
-          )} />
+            'data-[leave]:opacity-0')} />
         </TransitionChild>
         <div
           className="fixed inset-0 overflow-y-auto"
@@ -55,16 +53,14 @@ export default function Modal({
             e.stopPropagation()
           }}
         >
-          <div className={classNames('flex min-h-full items-center justify-center p-4 text-center', containerClassName)}>
+          <div className={cn('flex min-h-full items-center justify-center p-4 text-center', containerClassName)}>
             <TransitionChild>
-              <DialogPanel className={classNames(
-                'relative w-full max-w-[480px] rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all',
+              <DialogPanel className={cn('relative w-full max-w-[480px] rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all',
                 overflowVisible ? 'overflow-visible' : 'overflow-hidden',
                 'duration-100 ease-in data-[closed]:scale-95 data-[closed]:opacity-0',
                 'data-[enter]:scale-100 data-[enter]:opacity-100',
                 'data-[enter]:scale-95 data-[leave]:opacity-0',
-                className,
-              )}>
+                className)}>
                 {title && <DialogTitle
                   as="h3"
                   className="title-2xl-semi-bold text-text-primary"
diff --git a/web/app/components/base/modal/modal.tsx b/web/app/components/base/modal/modal.tsx
index 49be4f2f54..cf19bc976f 100644
--- a/web/app/components/base/modal/modal.tsx
+++ b/web/app/components/base/modal/modal.tsx
@@ -4,7 +4,7 @@ import {
   PortalToFollowElem,
   PortalToFollowElemContent,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'lodash-es'
 import { memo } from 'react'
diff --git a/web/app/components/base/node-status/index.tsx b/web/app/components/base/node-status/index.tsx
index a09737809d..03adb8e099 100644
--- a/web/app/components/base/node-status/index.tsx
+++ b/web/app/components/base/node-status/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import AlertTriangle from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback/AlertTriangle'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiErrorWarningFill } from '@remixicon/react'
 import { type VariantProps, cva } from 'class-variance-authority'
 import type { CSSProperties } from 'react'
@@ -51,17 +51,13 @@ const NodeStatus = ({
 
   return (
     <div
-      className={classNames(
-        nodeStatusVariants({ status, className }),
-      )}
+      className={cn(nodeStatusVariants({ status, className }))}
       style={styleCss}
       {...props}
     >
       <Icon
-        className={classNames(
-          'h-3.5 w-3.5 shrink-0',
-          iconClassName,
-        )}
+        className={cn('h-3.5 w-3.5 shrink-0',
+          iconClassName)}
       />
       <span>{message ?? defaultMessage}</span>
       {children}
diff --git a/web/app/components/base/notion-icon/index.tsx b/web/app/components/base/notion-icon/index.tsx
index 75fea8c378..9dbb909332 100644
--- a/web/app/components/base/notion-icon/index.tsx
+++ b/web/app/components/base/notion-icon/index.tsx
@@ -1,5 +1,5 @@
 import { RiFileTextLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { DataSourceNotionPage } from '@/models/common'
 
 type IconTypes = 'workspace' | 'page'
diff --git a/web/app/components/base/notion-page-selector/page-selector/index.tsx b/web/app/components/base/notion-page-selector/page-selector/index.tsx
index 3541997c67..c3c5636b0c 100644
--- a/web/app/components/base/notion-page-selector/page-selector/index.tsx
+++ b/web/app/components/base/notion-page-selector/page-selector/index.tsx
@@ -5,7 +5,7 @@ import type { ListChildComponentProps } from 'react-window'
 import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import Checkbox from '../../checkbox'
 import NotionIcon from '../../notion-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { DataSourceNotionPage, DataSourceNotionPageMap } from '@/models/common'
 
 type PageSelectorProps = {
diff --git a/web/app/components/base/notion-page-selector/search-input/index.tsx b/web/app/components/base/notion-page-selector/search-input/index.tsx
index 6bf819e148..b5035ff483 100644
--- a/web/app/components/base/notion-page-selector/search-input/index.tsx
+++ b/web/app/components/base/notion-page-selector/search-input/index.tsx
@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import type { ChangeEvent } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiCloseCircleFill, RiSearchLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type SearchInputProps = {
   value: string
diff --git a/web/app/components/base/pagination/index.tsx b/web/app/components/base/pagination/index.tsx
index e0c02df253..54848b54fc 100644
--- a/web/app/components/base/pagination/index.tsx
+++ b/web/app/components/base/pagination/index.tsx
@@ -6,7 +6,7 @@ import { useDebounceFn } from 'ahooks'
 import { Pagination } from './pagination'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type Props = {
   className?: string
diff --git a/web/app/components/base/pagination/pagination.tsx b/web/app/components/base/pagination/pagination.tsx
index 07ace7bcf2..733ba5dd82 100644
--- a/web/app/components/base/pagination/pagination.tsx
+++ b/web/app/components/base/pagination/pagination.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import usePagination from './hook'
 import type {
   ButtonProps,
diff --git a/web/app/components/base/popover/index.tsx b/web/app/components/base/popover/index.tsx
index 2387737d02..fb7e86ebce 100644
--- a/web/app/components/base/popover/index.tsx
+++ b/web/app/components/base/popover/index.tsx
@@ -1,6 +1,6 @@
 import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react'
 import { Fragment, cloneElement, isValidElement, useRef } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type HtmlContentProps = {
   open?: boolean
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 e1192fe73b..685ac33a0b 100644
--- a/web/app/components/base/portal-to-follow-elem/index.tsx
+++ b/web/app/components/base/portal-to-follow-elem/index.tsx
@@ -17,7 +17,7 @@ import {
 } from '@floating-ui/react'
 
 import type { OffsetOptions, Placement } from '@floating-ui/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 export type PortalToFollowElemOptions = {
   /*
   * top, bottom, left, right
diff --git a/web/app/components/base/premium-badge/index.tsx b/web/app/components/base/premium-badge/index.tsx
index 7bf85cdcc3..c10ed8d0b7 100644
--- a/web/app/components/base/premium-badge/index.tsx
+++ b/web/app/components/base/premium-badge/index.tsx
@@ -2,7 +2,7 @@ import type { CSSProperties, ReactNode } from 'react'
 import React from 'react'
 import { type VariantProps, cva } from 'class-variance-authority'
 import { Highlight } from '@/app/components/base/icons/src/public/common'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import './index.css'
 
 const PremiumBadgeVariants = cva(
@@ -52,19 +52,15 @@ const PremiumBadge: React.FC<PremiumBadgeProps> = ({
 }) => {
   return (
     <div
-      className={classNames(
-        PremiumBadgeVariants({ size, color, allowHover, className }),
-        'relative text-nowrap',
-      )}
+      className={cn(PremiumBadgeVariants({ size, color, allowHover, className }),
+        'relative text-nowrap')}
       style={styleCss}
       {...props}
     >
       {children}
       <Highlight
-        className={classNames(
-          'absolute right-1/2 top-0 translate-x-[20%] opacity-50 transition-all duration-100 ease-out hover:translate-x-[30%] hover:opacity-80',
-          size === 's' ? 'h-[18px] w-12' : 'h-6 w-12',
-        )}
+        className={cn('absolute right-1/2 top-0 translate-x-[20%] opacity-50 transition-all duration-100 ease-out hover:translate-x-[30%] hover:opacity-80',
+          size === 's' ? 'h-[18px] w-12' : 'h-6 w-12')}
       />
     </div>
   )
diff --git a/web/app/components/base/progress-bar/progress-circle.tsx b/web/app/components/base/progress-bar/progress-circle.tsx
index b9b280eea3..1123e412e3 100644
--- a/web/app/components/base/progress-bar/progress-circle.tsx
+++ b/web/app/components/base/progress-bar/progress-circle.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ProgressCircleProps = {
   className?: string
diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index 50fdc1f920..eb780d90a4 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -78,7 +78,7 @@ import {
   UPDATE_HISTORY_EVENT_EMITTER,
 } from './constants'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type PromptEditorProps = {
   instanceId?: string
diff --git a/web/app/components/base/prompt-editor/plugins/current-block/component.tsx b/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
index 1d1cb7bde5..b01fe0626b 100644
--- a/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
@@ -3,7 +3,7 @@ import { GeneratorType } from '@/app/components/app/configuration/config/automat
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { useSelectOrDelete } from '../../hooks'
 import { CurrentBlockNode, DELETE_CURRENT_BLOCK_COMMAND } from '.'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { CodeAssistant, MagicEdit } from '../../../icons/src/vender/line/general'
 
 type CurrentBlockComponentProps = {
diff --git a/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx b/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx
index 3fc4db2323..1f98c51cb5 100644
--- a/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx
@@ -2,7 +2,7 @@ import { type FC, useEffect } from 'react'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { useSelectOrDelete } from '../../hooks'
 import { DELETE_ERROR_MESSAGE_COMMAND, ErrorMessageBlockNode } from '.'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Variable02 } from '../../../icons/src/vender/solid/development'
 
 type Props = {
diff --git a/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx b/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx
index e7f96cd4da..3518fb99ef 100644
--- a/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx
@@ -2,7 +2,7 @@ import { type FC, useEffect } from 'react'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { useSelectOrDelete } from '../../hooks'
 import { DELETE_LAST_RUN_COMMAND, LastRunBlockNode } from '.'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Variable02 } from '../../../icons/src/vender/solid/development'
 
 type Props = {
diff --git a/web/app/components/base/prompt-editor/plugins/placeholder.tsx b/web/app/components/base/prompt-editor/plugins/placeholder.tsx
index 187b574cea..70b338858e 100644
--- a/web/app/components/base/prompt-editor/plugins/placeholder.tsx
+++ b/web/app/components/base/prompt-editor/plugins/placeholder.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react'
 import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const Placeholder = ({
   compact,
diff --git a/web/app/components/base/radio-card/index.tsx b/web/app/components/base/radio-card/index.tsx
index 417897270b..605f3dccc7 100644
--- a/web/app/components/base/radio-card/index.tsx
+++ b/web/app/components/base/radio-card/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 type Props = {
diff --git a/web/app/components/base/radio-card/simple/index.tsx b/web/app/components/base/radio-card/simple/index.tsx
index 7bb5c0f19a..fff7fe9c83 100644
--- a/web/app/components/base/radio-card/simple/index.tsx
+++ b/web/app/components/base/radio-card/simple/index.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/base/radio/component/group/index.tsx b/web/app/components/base/radio/component/group/index.tsx
index 8bc90e2b1b..aa11fdddb7 100644
--- a/web/app/components/base/radio/component/group/index.tsx
+++ b/web/app/components/base/radio/component/group/index.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import RadioGroupContext from '../../context'
 import s from '../../style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type TRadioGroupProps = {
   children?: ReactNode | ReactNode[]
diff --git a/web/app/components/base/radio/component/radio/index.tsx b/web/app/components/base/radio/component/radio/index.tsx
index 3f94e8b33f..d31507cdd4 100644
--- a/web/app/components/base/radio/component/radio/index.tsx
+++ b/web/app/components/base/radio/component/radio/index.tsx
@@ -3,7 +3,7 @@ import { useId } from 'react'
 import { useContext } from 'use-context-selector'
 import RadioGroupContext from '../../context'
 import s from '../../style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type IRadioProps = {
   className?: string
diff --git a/web/app/components/base/radio/ui.tsx b/web/app/components/base/radio/ui.tsx
index c10e324adc..4d1ce7a300 100644
--- a/web/app/components/base/radio/ui.tsx
+++ b/web/app/components/base/radio/ui.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   isChecked: boolean
diff --git a/web/app/components/base/search-input/index.tsx b/web/app/components/base/search-input/index.tsx
index abf1817e88..3b20a8816c 100644
--- a/web/app/components/base/search-input/index.tsx
+++ b/web/app/components/base/search-input/index.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiCloseCircleFill, RiSearchLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type SearchInputProps = {
   placeholder?: string
diff --git a/web/app/components/base/segmented-control/index.tsx b/web/app/components/base/segmented-control/index.tsx
index 6c2d7fab0e..92c4c0c829 100644
--- a/web/app/components/base/segmented-control/index.tsx
+++ b/web/app/components/base/segmented-control/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { RemixiconComponentType } from '@remixicon/react'
 import Divider from '../divider'
 import type { VariantProps } from 'class-variance-authority'
diff --git a/web/app/components/base/select/custom.tsx b/web/app/components/base/select/custom.tsx
index f9032658c3..d17c8c7a7e 100644
--- a/web/app/components/base/select/custom.tsx
+++ b/web/app/components/base/select/custom.tsx
@@ -15,7 +15,7 @@ import {
 import type {
   PortalToFollowElemOptions,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type Option = {
   label: string
diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index 1a096d7f93..d42c9fa2b9 100644
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -6,7 +6,7 @@ import { ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/s
 import Badge from '../badge/index'
 import { RiCheckLine, RiLoader4Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -101,7 +101,7 @@ const Select: FC<ISelectProps> = ({
           onSelect(value)
         }
       }}>
-      <div className={classNames('relative')}>
+      <div className={cn('relative')}>
         <div className='group text-text-secondary'>
           {allowSearch
             ? <ComboboxInput
@@ -117,7 +117,7 @@ const Select: FC<ISelectProps> = ({
                 if (!disabled)
                   setOpen(!open)
               }
-            } className={classNames(`flex h-9 w-full items-center rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6`, optionClassName)}>
+            } className={cn(`flex h-9 w-full items-center rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6`, optionClassName)}>
               <div className='w-0 grow truncate text-left' title={selectedItem?.name}>{selectedItem?.name}</div>
             </ComboboxButton>}
           <ComboboxButton className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none" onClick={
@@ -137,11 +137,9 @@ const Select: FC<ISelectProps> = ({
                 key={item.value}
                 value={item}
                 className={({ active }: { active: boolean }) =>
-                  classNames(
-                    'relative cursor-default select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover',
+                  cn('relative cursor-default select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover',
                     active ? 'bg-state-base-hover' : '',
-                    optionClassName,
-                  )
+                    optionClassName)
                 }
               >
                 {({ /* active, */ selected }) => (
@@ -150,12 +148,10 @@ const Select: FC<ISelectProps> = ({
                       ? renderOption({ item, selected })
                       : (
                         <>
-                          <span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
+                          <span className={cn('block', selected && 'font-normal')}>{item.name}</span>
                           {selected && (
                             <span
-                              className={classNames(
-                                'absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary',
-                              )}
+                              className={cn('absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary')}
                             >
                               <RiCheckLine className="h-4 w-4" aria-hidden="true" />
                             </span>
@@ -221,13 +217,13 @@ const SimpleSelect: FC<ISelectProps> = ({
       }}
     >
       {({ open }) => (
-        <div className={classNames('group/simple-select relative h-9', wrapperClassName)}>
+        <div className={cn('group/simple-select relative h-9', wrapperClassName)}>
           {renderTrigger && <ListboxButton className='w-full'>{renderTrigger(selectedItem, open)}</ListboxButton>}
           {!renderTrigger && (
             <ListboxButton onClick={() => {
               onOpenChange?.(open)
-            }} className={classNames(`flex h-full w-full items-center rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 focus-visible:bg-state-base-hover-alt focus-visible:outline-none group-hover/simple-select:bg-state-base-hover-alt sm:text-sm sm:leading-6 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
-              <span className={classNames('system-sm-regular block truncate text-left text-components-input-text-filled', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span>
+            }} className={cn(`flex h-full w-full items-center rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 focus-visible:bg-state-base-hover-alt focus-visible:outline-none group-hover/simple-select:bg-state-base-hover-alt sm:text-sm sm:leading-6 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
+              <span className={cn('system-sm-regular block truncate text-left text-components-input-text-filled', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span>
               <span className="absolute inset-y-0 right-0 flex items-center pr-2">
                 {isLoading ? <RiLoader4Line className='h-3.5 w-3.5 animate-spin text-text-secondary' />
                   : (selectedItem && !notClearable)
@@ -260,7 +256,7 @@ const SimpleSelect: FC<ISelectProps> = ({
           )}
 
           {(!disabled) && (
-            <ListboxOptions className={classNames('absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-1 py-1 text-base shadow-lg backdrop-blur-sm focus:outline-none sm:text-sm', optionWrapClassName)}>
+            <ListboxOptions className={cn('absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-1 py-1 text-base shadow-lg backdrop-blur-sm focus:outline-none sm:text-sm', optionWrapClassName)}>
               {items.map((item: Item) =>
                 item.isGroup ? (
                   <div
@@ -273,10 +269,8 @@ const SimpleSelect: FC<ISelectProps> = ({
                   <ListboxOption
                     key={item.value}
                     className={
-                      classNames(
-                        'relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover',
-                        optionClassName,
-                      )
+                      cn('relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover',
+                        optionClassName)
                     }
                     value={item}
                     disabled={item.disabled || disabled}
@@ -286,12 +280,10 @@ const SimpleSelect: FC<ISelectProps> = ({
                         {renderOption
                           ? renderOption({ item, selected })
                           : (<>
-                            <span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
+                            <span className={cn('block', selected && 'font-normal')}>{item.name}</span>
                             {selected && !hideChecked && (
                               <span
-                                className={classNames(
-                                  'absolute inset-y-0 right-0 flex items-center pr-2 text-text-accent',
-                                )}
+                                className={cn('absolute inset-y-0 right-0 flex items-center pr-2 text-text-accent')}
                               >
                                 <RiCheckLine className="h-4 w-4" aria-hidden="true" />
                               </span>
@@ -356,9 +348,9 @@ const PortalSelect: FC<PortalSelectProps> = ({
           ? renderTrigger(selectedItem)
           : (
             <div
-              className={classNames(`
-            group flex h-9 items-center justify-between rounded-lg border-0 bg-components-input-bg-normal px-2.5 text-sm hover:bg-state-base-hover-alt ${readonly ? 'cursor-not-allowed' : 'cursor-pointer'}
-          `, triggerClassName, triggerClassNameFn?.(open))}
+              className={cn(`
+                          group flex h-9 items-center justify-between rounded-lg border-0 bg-components-input-bg-normal px-2.5 text-sm hover:bg-state-base-hover-alt ${readonly ? 'cursor-not-allowed' : 'cursor-pointer'}
+                        `, triggerClassName, triggerClassNameFn?.(open))}
               title={selectedItem?.name}
             >
               <span
@@ -377,7 +369,7 @@ const PortalSelect: FC<PortalSelectProps> = ({
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className={`z-20 ${popupClassName}`}>
         <div
-          className={classNames('max-h-60 overflow-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm', popupInnerClassName)}
+          className={cn('max-h-60 overflow-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm', popupInnerClassName)}
         >
           {items.map((item: Item) => (
             <div
diff --git a/web/app/components/base/select/pure.tsx b/web/app/components/base/select/pure.tsx
index 3de8245025..50008ac3d2 100644
--- a/web/app/components/base/select/pure.tsx
+++ b/web/app/components/base/select/pure.tsx
@@ -16,7 +16,7 @@ import {
 import type {
   PortalToFollowElemOptions,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type Option = {
   label: string
diff --git a/web/app/components/base/simple-pie-chart/index.tsx b/web/app/components/base/simple-pie-chart/index.tsx
index 4b987ab42d..5a1a148424 100644
--- a/web/app/components/base/simple-pie-chart/index.tsx
+++ b/web/app/components/base/simple-pie-chart/index.tsx
@@ -3,7 +3,7 @@ import { memo, useMemo } from 'react'
 import ReactECharts from 'echarts-for-react'
 import type { EChartsOption } from 'echarts'
 import style from './index.module.css'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type SimplePieChartProps = {
   percentage?: number
@@ -54,7 +54,7 @@ const SimplePieChart = ({ percentage = 80, fill = '#fdb022', stroke = '#f79009',
   return (
     <ReactECharts
       option={option}
-      className={classNames(style.simplePieChart, className)}
+      className={cn(style.simplePieChart, className)}
       style={{
         '--simple-pie-chart-color': fill,
         'width': size,
diff --git a/web/app/components/base/skeleton/index.tsx b/web/app/components/base/skeleton/index.tsx
index 114baa8fba..9cd7e3f09c 100644
--- a/web/app/components/base/skeleton/index.tsx
+++ b/web/app/components/base/skeleton/index.tsx
@@ -1,12 +1,12 @@
 import type { ComponentProps, FC } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type SkeletonProps = ComponentProps<'div'>
 
 export const SkeletonContainer: FC<SkeletonProps> = (props) => {
   const { className, children, ...rest } = props
   return (
-    <div className={classNames('flex flex-col gap-1', className)} {...rest}>
+    <div className={cn('flex flex-col gap-1', className)} {...rest}>
       {children}
     </div>
   )
@@ -15,7 +15,7 @@ export const SkeletonContainer: FC<SkeletonProps> = (props) => {
 export const SkeletonRow: FC<SkeletonProps> = (props) => {
   const { className, children, ...rest } = props
   return (
-    <div className={classNames('flex items-center gap-2', className)} {...rest}>
+    <div className={cn('flex items-center gap-2', className)} {...rest}>
       {children}
     </div>
   )
@@ -24,7 +24,7 @@ export const SkeletonRow: FC<SkeletonProps> = (props) => {
 export const SkeletonRectangle: FC<SkeletonProps> = (props) => {
   const { className, children, ...rest } = props
   return (
-    <div className={classNames('my-1 h-2 rounded-sm bg-text-quaternary opacity-20', className)} {...rest}>
+    <div className={cn('my-1 h-2 rounded-sm bg-text-quaternary opacity-20', className)} {...rest}>
       {children}
     </div>
   )
@@ -33,7 +33,7 @@ export const SkeletonRectangle: FC<SkeletonProps> = (props) => {
 export const SkeletonPoint: FC<SkeletonProps> = (props) => {
   const { className, ...rest } = props
   return (
-    <div className={classNames('text-xs font-medium text-text-quaternary', className)} {...rest}>·</div>
+    <div className={cn('text-xs font-medium text-text-quaternary', className)} {...rest}>·</div>
   )
 }
 /** Usage
diff --git a/web/app/components/base/slider/index.tsx b/web/app/components/base/slider/index.tsx
index 1b41ee64c1..ea45b3ac7a 100644
--- a/web/app/components/base/slider/index.tsx
+++ b/web/app/components/base/slider/index.tsx
@@ -1,5 +1,5 @@
 import ReactSlider from 'react-slider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import './style.css'
 
 type ISliderProps = {
diff --git a/web/app/components/base/sort/index.tsx b/web/app/components/base/sort/index.tsx
index 3823b13d1a..14f3b0c59e 100644
--- a/web/app/components/base/sort/index.tsx
+++ b/web/app/components/base/sort/index.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiArrowDownSLine, RiCheckLine, RiSortAsc, RiSortDesc } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/base/svg/index.tsx b/web/app/components/base/svg/index.tsx
index d29fd17f0d..ee4b7efff4 100644
--- a/web/app/components/base/svg/index.tsx
+++ b/web/app/components/base/svg/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import s from './style.module.css'
 import ActionButton from '../action-button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ISVGBtnProps = {
   isSVG: boolean
diff --git a/web/app/components/base/switch/index.tsx b/web/app/components/base/switch/index.tsx
index bca98d0820..af96489982 100644
--- a/web/app/components/base/switch/index.tsx
+++ b/web/app/components/base/switch/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import React, { useEffect, useState } from 'react'
 import { Switch as OriginalSwitch } from '@headlessui/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type SwitchProps = {
   onChange?: (value: boolean) => void
@@ -60,23 +60,19 @@ const Switch = (
         setEnabled(checked)
         onChange?.(checked)
       }}
-      className={classNames(
-        wrapStyle[size],
+      className={cn(wrapStyle[size],
         enabled ? 'bg-components-toggle-bg' : 'bg-components-toggle-bg-unchecked',
         'relative inline-flex  shrink-0 cursor-pointer rounded-[5px] border-2 border-transparent transition-colors duration-200 ease-in-out',
         disabled ? '!cursor-not-allowed !opacity-50' : '',
         size === 'xs' && 'rounded-sm',
-        className,
-      )}
+        className)}
     >
       <span
         aria-hidden="true"
-        className={classNames(
-          circleStyle[size],
+        className={cn(circleStyle[size],
           enabled ? translateLeft[size] : 'translate-x-0',
           size === 'xs' && 'rounded-[1px]',
-          'pointer-events-none inline-block rounded-[3px] bg-components-toggle-knob shadow ring-0 transition duration-200 ease-in-out',
-        )}
+          'pointer-events-none inline-block rounded-[3px] bg-components-toggle-knob shadow ring-0 transition duration-200 ease-in-out')}
       />
     </OriginalSwitch>
   )
diff --git a/web/app/components/base/tab-header/index.tsx b/web/app/components/base/tab-header/index.tsx
index 846277e5db..0d49f84cbf 100644
--- a/web/app/components/base/tab-header/index.tsx
+++ b/web/app/components/base/tab-header/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Item = {
   id: string
diff --git a/web/app/components/base/tab-slider-new/index.tsx b/web/app/components/base/tab-slider-new/index.tsx
index cf68abff1d..464226ee02 100644
--- a/web/app/components/base/tab-slider-new/index.tsx
+++ b/web/app/components/base/tab-slider-new/index.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Option = {
   value: string
diff --git a/web/app/components/base/tab-slider-plain/index.tsx b/web/app/components/base/tab-slider-plain/index.tsx
index b9b39657af..85454ab41d 100644
--- a/web/app/components/base/tab-slider-plain/index.tsx
+++ b/web/app/components/base/tab-slider-plain/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Option = {
   value: string
diff --git a/web/app/components/base/tab-slider/index.tsx b/web/app/components/base/tab-slider/index.tsx
index 7c9364baf9..3e1eb69f0f 100644
--- a/web/app/components/base/tab-slider/index.tsx
+++ b/web/app/components/base/tab-slider/index.tsx
@@ -1,6 +1,6 @@
 import type { FC, ReactNode } from 'react'
 import { useEffect, useState } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
 import { useInstalledPluginList } from '@/service/use-plugins'
 type Option = {
diff --git a/web/app/components/base/tag-input/index.tsx b/web/app/components/base/tag-input/index.tsx
index 415afc7549..d3d43a9c52 100644
--- a/web/app/components/base/tag-input/index.tsx
+++ b/web/app/components/base/tag-input/index.tsx
@@ -3,7 +3,7 @@ import type { ChangeEvent, FC, KeyboardEvent } from 'react'
 import { useTranslation } from 'react-i18next'
 import AutosizeInput from 'react-18-input-autosize'
 import { RiAddLine, RiCloseLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useToastContext } from '@/app/components/base/toast'
 
 type TagInputProps = {
diff --git a/web/app/components/base/tag-management/filter.tsx b/web/app/components/base/tag-management/filter.tsx
index 36be042160..5f8ab11dda 100644
--- a/web/app/components/base/tag-management/filter.tsx
+++ b/web/app/components/base/tag-management/filter.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { useDebounceFn, useMount } from 'ahooks'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useStore as useTagStore } from './store'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/base/tag-management/selector.tsx b/web/app/components/base/tag-management/selector.tsx
index bb1eb98642..150c06688f 100644
--- a/web/app/components/base/tag-management/selector.tsx
+++ b/web/app/components/base/tag-management/selector.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { useCallback, useMemo } from 'react'
 import { useStore as useTagStore } from './store'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import CustomPopover from '@/app/components/base/popover'
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import { fetchTagList } from '@/service/tag'
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 0fdfc5079a..a9b7efa737 100644
--- a/web/app/components/base/tag-management/tag-item-editor.tsx
+++ b/web/app/components/base/tag-management/tag-item-editor.tsx
@@ -9,7 +9,7 @@ import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { useStore as useTagStore } from './store'
 import Confirm from '@/app/components/base/confirm'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import { ToastContext } from '@/app/components/base/toast'
 import Tooltip from '@/app/components/base/tooltip'
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 85f1831ac1..a41dd98cf3 100644
--- a/web/app/components/base/tag-management/tag-remove-modal.tsx
+++ b/web/app/components/base/tag-management/tag-remove-modal.tsx
@@ -2,7 +2,7 @@
 
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
diff --git a/web/app/components/base/tag/index.tsx b/web/app/components/base/tag/index.tsx
index 1d24e2c825..f85abe372e 100644
--- a/web/app/components/base/tag/index.tsx
+++ b/web/app/components/base/tag/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type ITagProps = {
   children: string | React.ReactNode
@@ -31,7 +31,7 @@ const COLOR_MAP = {
 export default function Tag({ children, color = 'green', className = '', bordered = false, hideBg = false }: ITagProps) {
   return (
     <div className={
-      classNames('inline-flex shrink-0 items-center rounded-md px-2.5 py-px text-xs leading-5',
+      cn('inline-flex shrink-0 items-center rounded-md px-2.5 py-px text-xs leading-5',
         COLOR_MAP[color] ? `${COLOR_MAP[color].text} ${COLOR_MAP[color].bg}` : '',
         bordered ? 'border-[1px]' : '',
         hideBg ? 'bg-transparent' : '',
diff --git a/web/app/components/base/textarea/index.tsx b/web/app/components/base/textarea/index.tsx
index 609f1ad51d..31a183c6c7 100644
--- a/web/app/components/base/textarea/index.tsx
+++ b/web/app/components/base/textarea/index.tsx
@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react'
 import React from 'react'
 import { type VariantProps, cva } from 'class-variance-authority'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const textareaVariants = cva(
   '',
diff --git a/web/app/components/base/theme-switcher.tsx b/web/app/components/base/theme-switcher.tsx
index 902d064a66..29eabfb4aa 100644
--- a/web/app/components/base/theme-switcher.tsx
+++ b/web/app/components/base/theme-switcher.tsx
@@ -5,7 +5,7 @@ import {
   RiSunLine,
 } from '@remixicon/react'
 import { useTheme } from 'next-themes'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type Theme = 'light' | 'dark' | 'system'
 
diff --git a/web/app/components/base/timezone-label/index.tsx b/web/app/components/base/timezone-label/index.tsx
index b151ceb9b8..2904555e5b 100644
--- a/web/app/components/base/timezone-label/index.tsx
+++ b/web/app/components/base/timezone-label/index.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 import { convertTimezoneToOffsetStr } from '@/app/components/base/date-and-time-picker/utils/dayjs'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type TimezoneLabelProps = {
   /** IANA timezone identifier (e.g., 'Asia/Shanghai', 'America/New_York') */
diff --git a/web/app/components/base/toast/index.tsx b/web/app/components/base/toast/index.tsx
index eb13fddda8..e0e282ac50 100644
--- a/web/app/components/base/toast/index.tsx
+++ b/web/app/components/base/toast/index.tsx
@@ -11,7 +11,7 @@ import {
 } from '@remixicon/react'
 import { createContext, useContext } from 'use-context-selector'
 import ActionButton from '@/app/components/base/action-button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 export type IToastProps = {
diff --git a/web/app/components/base/tooltip/index.tsx b/web/app/components/base/tooltip/index.tsx
index 46680c8f5b..6df7b5c80c 100644
--- a/web/app/components/base/tooltip/index.tsx
+++ b/web/app/components/base/tooltip/index.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useBoolean } from 'ahooks'
 import type { OffsetOptions, Placement } from '@floating-ui/react'
 import { RiQuestionLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import { tooltipManager } from './TooltipManager'
 
diff --git a/web/app/components/base/voice-input/index.tsx b/web/app/components/base/voice-input/index.tsx
index 6587a61217..2498467384 100644
--- a/web/app/components/base/voice-input/index.tsx
+++ b/web/app/components/base/voice-input/index.tsx
@@ -9,7 +9,7 @@ import Recorder from 'js-audio-recorder'
 import { useRafInterval } from 'ahooks'
 import { convertToMp3 } from './utils'
 import s from './index.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import { audioToText } from '@/service/share'
 
diff --git a/web/app/components/billing/annotation-full/index.tsx b/web/app/components/billing/annotation-full/index.tsx
index 88ed5f1716..9aee529c8c 100644
--- a/web/app/components/billing/annotation-full/index.tsx
+++ b/web/app/components/billing/annotation-full/index.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import UpgradeBtn from '../upgrade-btn'
 import Usage from './usage'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import GridMask from '@/app/components/base/grid-mask'
 
 const AnnotationFull: FC = () => {
diff --git a/web/app/components/billing/annotation-full/modal.tsx b/web/app/components/billing/annotation-full/modal.tsx
index 324a4dcc36..a5b04c67b6 100644
--- a/web/app/components/billing/annotation-full/modal.tsx
+++ b/web/app/components/billing/annotation-full/modal.tsx
@@ -6,7 +6,7 @@ import UpgradeBtn from '../upgrade-btn'
 import Modal from '../../base/modal'
 import Usage from './usage'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import GridMask from '@/app/components/base/grid-mask'
 
 type Props = {
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 fda3213713..8d06d2a534 100644
--- a/web/app/components/billing/apps-full-in-dialog/index.tsx
+++ b/web/app/components/billing/apps-full-in-dialog/index.tsx
@@ -10,7 +10,7 @@ import { useProviderContext } from '@/context/provider-context'
 import { useAppContext } from '@/context/app-context'
 import { Plan } from '@/app/components/billing/type'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const LOW = 50
 const MIDDLE = 80
diff --git a/web/app/components/billing/header-billing-btn/index.tsx b/web/app/components/billing/header-billing-btn/index.tsx
index f34fa0bce4..aad4d2b9e9 100644
--- a/web/app/components/billing/header-billing-btn/index.tsx
+++ b/web/app/components/billing/header-billing-btn/index.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React from 'react'
 import UpgradeBtn from '../upgrade-btn'
 import { Plan } from '../type'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 
 type Props = {
diff --git a/web/app/components/billing/pricing/footer.tsx b/web/app/components/billing/pricing/footer.tsx
index fd713eb3da..4605aad998 100644
--- a/web/app/components/billing/pricing/footer.tsx
+++ b/web/app/components/billing/pricing/footer.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import { type Category, CategoryEnum } from '.'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type FooterProps = {
   pricingPageURL: string
diff --git a/web/app/components/billing/pricing/plan-switcher/tab.tsx b/web/app/components/billing/pricing/plan-switcher/tab.tsx
index 417c9ff1fb..4be0973ead 100644
--- a/web/app/components/billing/pricing/plan-switcher/tab.tsx
+++ b/web/app/components/billing/pricing/plan-switcher/tab.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type TabProps<T> = {
   Icon: React.ComponentType<{ isActive: boolean }>
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx
index 1f16632ef2..e24faab2c9 100644
--- a/web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import type { BasicPlan } from '../../../type'
 import { Plan } from '../../../type'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiArrowRightLine } from '@remixicon/react'
 
 const BUTTON_CLASSNAME = {
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
index ffa4dbcb65..f6ebb2cb3f 100644
--- a/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react'
 import { SelfHostedPlan } from '../../../type'
 import { AwsMarketplaceDark, AwsMarketplaceLight } from '@/app/components/base/icons/src/public/billing'
 import { RiArrowRightLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
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 db32f6c750..2f14365d8f 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
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { SelfHostedPlan } from '../../../type'
 import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../../../config'
 import Toast from '../../../../base/toast'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useAppContext } from '@/context/app-context'
 import Button from './button'
 import List from './list'
diff --git a/web/app/components/billing/priority-label/index.tsx b/web/app/components/billing/priority-label/index.tsx
index 98c6a982b8..8893263470 100644
--- a/web/app/components/billing/priority-label/index.tsx
+++ b/web/app/components/billing/priority-label/index.tsx
@@ -4,7 +4,7 @@ import {
   DocumentProcessingPriority,
   Plan,
 } from '../type'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import Tooltip from '@/app/components/base/tooltip'
 import { RiAedFill } from '@remixicon/react'
diff --git a/web/app/components/billing/progress-bar/index.tsx b/web/app/components/billing/progress-bar/index.tsx
index 6397b43967..6728fd617c 100644
--- a/web/app/components/billing/progress-bar/index.tsx
+++ b/web/app/components/billing/progress-bar/index.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ProgressBarProps = {
   percent: number
diff --git a/web/app/components/billing/upgrade-btn/index.spec.tsx b/web/app/components/billing/upgrade-btn/index.spec.tsx
index f52cc97b01..d106dbe327 100644
--- a/web/app/components/billing/upgrade-btn/index.spec.tsx
+++ b/web/app/components/billing/upgrade-btn/index.spec.tsx
@@ -5,24 +5,6 @@ import UpgradeBtn from './index'
 // ✅ Import real project components (DO NOT mock these)
 // PremiumBadge, Button, SparklesSoft are all base components
 
-// ✅ Mock i18n with actual translations instead of returning keys
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => {
-      const translations: Record<string, string> = {
-        'billing.upgradeBtn.encourage': 'Upgrade to Pro',
-        'billing.upgradeBtn.encourageShort': 'Upgrade',
-        'billing.upgradeBtn.plain': 'Upgrade Plan',
-        'custom.label.key': 'Custom Label',
-        'custom.key': 'Custom Text',
-        'custom.short.key': 'Short Custom',
-        'custom.all': 'All Custom Props',
-      }
-      return translations[key] || key
-    },
-  }),
-}))
-
 // ✅ Mock external dependencies only
 const mockSetShowPricingModal = jest.fn()
 jest.mock('@/context/modal-context', () => ({
@@ -52,7 +34,7 @@ describe('UpgradeBtn', () => {
       render(<UpgradeBtn />)
 
       // Assert - should render with default text
-      expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
 
     it('should render premium badge by default', () => {
@@ -60,7 +42,7 @@ describe('UpgradeBtn', () => {
       render(<UpgradeBtn />)
 
       // Assert - PremiumBadge renders with text content
-      expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
 
     it('should render plain button when isPlain is true', () => {
@@ -70,7 +52,7 @@ describe('UpgradeBtn', () => {
       // Assert - Button should be rendered with plain text
       const button = screen.getByRole('button')
       expect(button).toBeInTheDocument()
-      expect(screen.getByText(/upgrade plan/i)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.upgradeBtn\.plain/i)).toBeInTheDocument()
     })
 
     it('should render short text when isShort is true', () => {
@@ -78,7 +60,7 @@ describe('UpgradeBtn', () => {
       render(<UpgradeBtn isShort />)
 
       // Assert
-      expect(screen.getByText(/^upgrade$/i)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.upgradeBtn\.encourageShort/i)).toBeInTheDocument()
     })
 
     it('should render custom label when labelKey is provided', () => {
@@ -86,7 +68,7 @@ describe('UpgradeBtn', () => {
       render(<UpgradeBtn labelKey="custom.label.key" />)
 
       // Assert
-      expect(screen.getByText(/custom label/i)).toBeInTheDocument()
+      expect(screen.getByText(/custom\.label\.key/i)).toBeInTheDocument()
     })
 
     it('should render custom label in plain button when labelKey is provided with isPlain', () => {
@@ -96,7 +78,7 @@ describe('UpgradeBtn', () => {
       // Assert
       const button = screen.getByRole('button')
       expect(button).toBeInTheDocument()
-      expect(screen.getByText(/custom label/i)).toBeInTheDocument()
+      expect(screen.getByText(/custom\.label\.key/i)).toBeInTheDocument()
     })
   })
 
@@ -155,7 +137,7 @@ describe('UpgradeBtn', () => {
       render(<UpgradeBtn size="s" />)
 
       // Assert - Component renders successfully with size prop
-      expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
 
     it('should render with size "m" by default', () => {
@@ -163,7 +145,7 @@ describe('UpgradeBtn', () => {
       render(<UpgradeBtn />)
 
       // Assert - Component renders successfully
-      expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
 
     it('should render with size "custom"', () => {
@@ -171,7 +153,7 @@ describe('UpgradeBtn', () => {
       render(<UpgradeBtn size="custom" />)
 
       // Assert - Component renders successfully with custom size
-      expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
   })
 
@@ -184,8 +166,8 @@ describe('UpgradeBtn', () => {
 
       // Act
       render(<UpgradeBtn onClick={handleClick} />)
-      const badge = screen.getByText(/upgrade to pro/i).closest('div')
-      await user.click(badge!)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
 
       // Assert
       expect(handleClick).toHaveBeenCalledTimes(1)
@@ -213,8 +195,8 @@ describe('UpgradeBtn', () => {
 
       // Act
       render(<UpgradeBtn />)
-      const badge = screen.getByText(/upgrade to pro/i).closest('div')
-      await user.click(badge!)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
 
       // Assert
       expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
@@ -240,8 +222,8 @@ describe('UpgradeBtn', () => {
 
       // Act
       render(<UpgradeBtn loc={loc} />)
-      const badge = screen.getByText(/upgrade to pro/i).closest('div')
-      await user.click(badge!)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
 
       // Assert
       expect(mockGtag).toHaveBeenCalledTimes(1)
@@ -273,8 +255,8 @@ describe('UpgradeBtn', () => {
 
       // Act
       render(<UpgradeBtn />)
-      const badge = screen.getByText(/upgrade to pro/i).closest('div')
-      await user.click(badge!)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
 
       // Assert
       expect(mockGtag).not.toHaveBeenCalled()
@@ -287,8 +269,8 @@ describe('UpgradeBtn', () => {
 
       // Act
       render(<UpgradeBtn loc="test-location" />)
-      const badge = screen.getByText(/upgrade to pro/i).closest('div')
-      await user.click(badge!)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
 
       // Assert - should not throw error
       expect(mockGtag).not.toHaveBeenCalled()
@@ -302,8 +284,8 @@ describe('UpgradeBtn', () => {
 
       // Act
       render(<UpgradeBtn onClick={handleClick} loc={loc} />)
-      const badge = screen.getByText(/upgrade to pro/i).closest('div')
-      await user.click(badge!)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
 
       // Assert
       expect(handleClick).toHaveBeenCalledTimes(1)
@@ -321,7 +303,7 @@ describe('UpgradeBtn', () => {
       render(<UpgradeBtn className={undefined} />)
 
       // Assert - should render without error
-      expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
 
     it('should handle undefined style', () => {
@@ -329,7 +311,7 @@ describe('UpgradeBtn', () => {
       render(<UpgradeBtn style={undefined} />)
 
       // Assert - should render without error
-      expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
 
     it('should handle undefined onClick', async () => {
@@ -338,8 +320,8 @@ describe('UpgradeBtn', () => {
 
       // Act
       render(<UpgradeBtn onClick={undefined} />)
-      const badge = screen.getByText(/upgrade to pro/i).closest('div')
-      await user.click(badge!)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
 
       // Assert - should fall back to setShowPricingModal
       expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
@@ -351,8 +333,8 @@ describe('UpgradeBtn', () => {
 
       // Act
       render(<UpgradeBtn loc={undefined} />)
-      const badge = screen.getByText(/upgrade to pro/i).closest('div')
-      await user.click(badge!)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
 
       // Assert - should not attempt to track gtag
       expect(mockGtag).not.toHaveBeenCalled()
@@ -363,7 +345,7 @@ describe('UpgradeBtn', () => {
       render(<UpgradeBtn labelKey={undefined} />)
 
       // Assert - should use default label
-      expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
 
     it('should handle empty string className', () => {
@@ -371,7 +353,7 @@ describe('UpgradeBtn', () => {
       render(<UpgradeBtn className="" />)
 
       // Assert
-      expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
 
     it('should handle empty string loc', async () => {
@@ -380,8 +362,8 @@ describe('UpgradeBtn', () => {
 
       // Act
       render(<UpgradeBtn loc="" />)
-      const badge = screen.getByText(/upgrade to pro/i).closest('div')
-      await user.click(badge!)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
 
       // Assert - empty loc should not trigger gtag
       expect(mockGtag).not.toHaveBeenCalled()
@@ -392,7 +374,7 @@ describe('UpgradeBtn', () => {
       render(<UpgradeBtn labelKey="" />)
 
       // Assert - empty labelKey is falsy, so it falls back to default label
-      expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
   })
 
@@ -403,7 +385,7 @@ describe('UpgradeBtn', () => {
       render(<UpgradeBtn isPlain isShort />)
 
       // Assert - isShort should not affect plain button text
-      expect(screen.getByText(/upgrade plan/i)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.upgradeBtn\.plain/i)).toBeInTheDocument()
     })
 
     it('should handle isPlain with custom labelKey', () => {
@@ -411,8 +393,8 @@ describe('UpgradeBtn', () => {
       render(<UpgradeBtn isPlain labelKey="custom.key" />)
 
       // Assert - labelKey should override plain text
-      expect(screen.getByText(/custom text/i)).toBeInTheDocument()
-      expect(screen.queryByText(/upgrade plan/i)).not.toBeInTheDocument()
+      expect(screen.getByText(/custom\.key/i)).toBeInTheDocument()
+      expect(screen.queryByText(/billing\.upgradeBtn\.plain/i)).not.toBeInTheDocument()
     })
 
     it('should handle isShort with custom labelKey', () => {
@@ -420,8 +402,8 @@ describe('UpgradeBtn', () => {
       render(<UpgradeBtn isShort labelKey="custom.short.key" />)
 
       // Assert - labelKey should override isShort behavior
-      expect(screen.getByText(/short custom/i)).toBeInTheDocument()
-      expect(screen.queryByText(/^upgrade$/i)).not.toBeInTheDocument()
+      expect(screen.getByText(/custom\.short\.key/i)).toBeInTheDocument()
+      expect(screen.queryByText(/billing\.upgradeBtn\.encourageShort/i)).not.toBeInTheDocument()
     })
 
     it('should handle all custom props together', async () => {
@@ -443,14 +425,14 @@ describe('UpgradeBtn', () => {
           labelKey="custom.all"
         />,
       )
-      const badge = screen.getByText(/all custom props/i).closest('div')
-      await user.click(badge!)
+      const badge = screen.getByText(/custom\.all/i)
+      await user.click(badge)
 
       // Assert
       const rootElement = container.firstChild as HTMLElement
       expect(rootElement).toHaveClass(customClass)
       expect(rootElement).toHaveStyle(customStyle)
-      expect(screen.getByText(/all custom props/i)).toBeInTheDocument()
+      expect(screen.getByText(/custom\.all/i)).toBeInTheDocument()
       expect(handleClick).toHaveBeenCalledTimes(1)
       expect(mockGtag).toHaveBeenCalledWith('event', 'click_upgrade_btn', {
         loc: 'test-loc',
@@ -503,10 +485,10 @@ describe('UpgradeBtn', () => {
 
       // Act
       render(<UpgradeBtn onClick={handleClick} />)
-      const badge = screen.getByText(/upgrade to pro/i).closest('div')
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
 
       // Click badge
-      await user.click(badge!)
+      await user.click(badge)
 
       // Assert
       expect(handleClick).toHaveBeenCalledTimes(1)
@@ -522,70 +504,6 @@ describe('UpgradeBtn', () => {
     })
   })
 
-  // Performance Tests
-  describe('Performance', () => {
-    it('should not rerender when props do not change', () => {
-      // Arrange
-      const { rerender } = render(<UpgradeBtn loc="test" />)
-      const firstRender = screen.getByText(/upgrade to pro/i)
-
-      // Act - Rerender with same props
-      rerender(<UpgradeBtn loc="test" />)
-
-      // Assert - Component should still be in document
-      expect(firstRender).toBeInTheDocument()
-      expect(screen.getByText(/upgrade to pro/i)).toBe(firstRender)
-    })
-
-    it('should rerender when props change', () => {
-      // Arrange
-      const { rerender } = render(<UpgradeBtn labelKey="custom.key" />)
-      expect(screen.getByText(/custom text/i)).toBeInTheDocument()
-
-      // Act - Rerender with different labelKey
-      rerender(<UpgradeBtn labelKey="custom.label.key" />)
-
-      // Assert - Should show new label
-      expect(screen.getByText(/custom label/i)).toBeInTheDocument()
-      expect(screen.queryByText(/custom text/i)).not.toBeInTheDocument()
-    })
-
-    it('should handle rapid rerenders efficiently', () => {
-      // Arrange
-      const { rerender } = render(<UpgradeBtn />)
-
-      // Act - Multiple rapid rerenders
-      for (let i = 0; i < 10; i++)
-        rerender(<UpgradeBtn />)
-
-      // Assert - Component should still render correctly
-      expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
-    })
-
-    it('should be memoized with React.memo', () => {
-      // Arrange
-      const TestWrapper = ({ children }: { children: React.ReactNode }) => <div>{children}</div>
-
-      const { rerender } = render(
-        <TestWrapper>
-          <UpgradeBtn />
-        </TestWrapper>,
-      )
-
-      const firstElement = screen.getByText(/upgrade to pro/i)
-
-      // Act - Rerender parent with same props
-      rerender(
-        <TestWrapper>
-          <UpgradeBtn />
-        </TestWrapper>,
-      )
-
-      // Assert - Element reference should be stable due to memo
-      expect(screen.getByText(/upgrade to pro/i)).toBe(firstElement)
-    })
-  })
-
   // Integration Tests
   describe('Integration', () => {
     it('should work with modal context for pricing modal', async () => {
@@ -594,8 +512,8 @@ describe('UpgradeBtn', () => {
 
       // Act
       render(<UpgradeBtn />)
-      const badge = screen.getByText(/upgrade to pro/i).closest('div')
-      await user.click(badge!)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
 
       // Assert
       await waitFor(() => {
@@ -610,8 +528,8 @@ describe('UpgradeBtn', () => {
 
       // Act
       render(<UpgradeBtn onClick={handleClick} loc="integration-test" />)
-      const badge = screen.getByText(/upgrade to pro/i).closest('div')
-      await user.click(badge!)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
 
       // Assert - Both onClick and gtag should be called
       await waitFor(() => {
diff --git a/web/app/components/billing/usage-info/index.tsx b/web/app/components/billing/usage-info/index.tsx
index 668d49d698..a8be0aef53 100644
--- a/web/app/components/billing/usage-info/index.tsx
+++ b/web/app/components/billing/usage-info/index.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import ProgressBar from '../progress-bar'
 import { NUM_INFINITE } from '../config'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/billing/vector-space-full/index.tsx b/web/app/components/billing/vector-space-full/index.tsx
index 58d9db068a..026277948e 100644
--- a/web/app/components/billing/vector-space-full/index.tsx
+++ b/web/app/components/billing/vector-space-full/index.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import UpgradeBtn from '../upgrade-btn'
 import VectorSpaceInfo from '../usage-info/vector-space-info'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import GridMask from '@/app/components/base/grid-mask'
 
 const VectorSpaceFull: FC = () => {
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 fee0bf75f7..e919144b1e 100644
--- a/web/app/components/custom/custom-web-app-brand/index.tsx
+++ b/web/app/components/custom/custom-web-app-brand/index.tsx
@@ -23,7 +23,7 @@ import {
   updateCurrentWorkspace,
 } from '@/service/common'
 import { useAppContext } from '@/context/app-context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const ALLOW_FILE_EXTENSIONS = ['svg', 'png']
diff --git a/web/app/components/datasets/common/credential-icon.tsx b/web/app/components/datasets/common/credential-icon.tsx
index d4e6fd69ac..041df770a8 100644
--- a/web/app/components/datasets/common/credential-icon.tsx
+++ b/web/app/components/datasets/common/credential-icon.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import React, { useCallback, useMemo, useState } from 'react'
 
 type CredentialIconProps = {
diff --git a/web/app/components/datasets/common/document-picker/document-list.tsx b/web/app/components/datasets/common/document-picker/document-list.tsx
index 20ec949bbd..2ab6334383 100644
--- a/web/app/components/datasets/common/document-picker/document-list.tsx
+++ b/web/app/components/datasets/common/document-picker/document-list.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import FileIcon from '../document-file-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { DocumentItem } from '@/models/datasets'
 
 type Props = {
diff --git a/web/app/components/datasets/common/document-picker/index.tsx b/web/app/components/datasets/common/document-picker/index.tsx
index 0629ff0e48..5fee49d7db 100644
--- a/web/app/components/datasets/common/document-picker/index.tsx
+++ b/web/app/components/datasets/common/document-picker/index.tsx
@@ -13,7 +13,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import SearchInput from '@/app/components/base/search-input'
 import { GeneralChunk, ParentChildChunk } from '@/app/components/base/icons/src/vender/knowledge'
 import { useDocumentList } from '@/service/knowledge/use-document'
diff --git a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
index b6ffa520a8..907d075893 100644
--- a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
+++ b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
@@ -11,7 +11,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Loading from '@/app/components/base/loading'
 import type { DocumentItem } from '@/models/datasets'
 
diff --git a/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx b/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
index 0314b26fde..9edad28e65 100644
--- a/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
+++ b/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
@@ -2,7 +2,7 @@
 import { RiAlertFill, RiCheckboxCircleFill, RiErrorWarningFill, RiInformation2Fill } from '@remixicon/react'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 
 type Status = 'success' | 'error' | 'warning' | 'info'
diff --git a/web/app/components/datasets/common/image-list/index.tsx b/web/app/components/datasets/common/image-list/index.tsx
index 8b0cf62e4a..8084b6eac6 100644
--- a/web/app/components/datasets/common/image-list/index.tsx
+++ b/web/app/components/datasets/common/image-list/index.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react'
 import type { FileEntity } from '@/app/components/base/file-thumb'
 import FileThumb from '@/app/components/base/file-thumb'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import More from './more'
 import type { ImageInfo } from '../image-previewer'
 import ImagePreviewer from '../image-previewer'
diff --git a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-input.tsx b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-input.tsx
index 3e15b92705..002ee705ba 100644
--- a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-input.tsx
+++ b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-input.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiUploadCloud2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useUpload } from '../hooks/use-upload'
diff --git a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/index.tsx b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/index.tsx
index 3efa3a19d7..5dc9971fd6 100644
--- a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/index.tsx
+++ b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/index.tsx
@@ -6,7 +6,7 @@ import type { FileEntity } from '../types'
 import FileItem from './image-item'
 import { useUpload } from '../hooks/use-upload'
 import ImageInput from './image-input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useCallback, useState } from 'react'
 import type { ImageInfo } from '@/app/components/datasets/common/image-previewer'
 import ImagePreviewer from '@/app/components/datasets/common/image-previewer'
diff --git a/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/index.tsx b/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/index.tsx
index 2d04132842..7fa4cca507 100644
--- a/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/index.tsx
+++ b/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/index.tsx
@@ -8,7 +8,7 @@ import {
 import type { FileEntity } from '../types'
 import { useUpload } from '../hooks/use-upload'
 import ImageInput from './image-input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 import { useFileStoreWithSelector } from '../store'
 import ImageItem from './image-item'
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 2b703cc44d..be47ea6b8f 100644
--- a/web/app/components/datasets/common/retrieval-param-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-param-config/index.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'
 import Image from 'next/image'
 import ProgressIndicator from '../../create/assets/progress-indicator.svg'
 import Reranking from '../../create/assets/rerank.svg'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import TopKItem from '@/app/components/base/param-item/top-k-item'
 import ScoreThresholdItem from '@/app/components/base/param-item/score-threshold-item'
 import { RETRIEVE_METHOD } from '@/types/app'
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/tab/item.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/tab/item.tsx
index 8474a832e4..5d95db5f5c 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/tab/item.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/tab/item.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ItemProps = {
   isActive: boolean
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 57509b646f..96413e8aed 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
@@ -9,7 +9,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { formatFileSize } from '@/utils/format'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ToastContext } from '@/app/components/base/toast'
 import ActionButton from '@/app/components/base/action-button'
 
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/details/chunk-structure-card.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/details/chunk-structure-card.tsx
index f3ed24c8f3..5fa80cfe39 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/details/chunk-structure-card.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/details/chunk-structure-card.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { Option } from './types'
 import { EffectColor } from './types'
 
diff --git a/web/app/components/datasets/create/embedding-process/index.tsx b/web/app/components/datasets/create/embedding-process/index.tsx
index 4e78eb2034..22612b19bc 100644
--- a/web/app/components/datasets/create/embedding-process/index.tsx
+++ b/web/app/components/datasets/create/embedding-process/index.tsx
@@ -13,7 +13,7 @@ import Image from 'next/image'
 import { indexMethodIcon, retrievalIcon } from '../icons'
 import { IndexingType } from '../step-two'
 import DocumentFileIcon from '../../common/document-file-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { FieldInfo } from '@/app/components/datasets/documents/detail/metadata'
 import Button from '@/app/components/base/button'
 import type {
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 29986e4fca..db5aa8e48d 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
@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import s from './index.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Input from '@/app/components/base/input'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/datasets/create/file-preview/index.tsx b/web/app/components/datasets/create/file-preview/index.tsx
index 8a88834ebe..012f3608dc 100644
--- a/web/app/components/datasets/create/file-preview/index.tsx
+++ b/web/app/components/datasets/create/file-preview/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import Loading from '@/app/components/base/loading'
 import s from './index.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CustomFile as File } from '@/models/datasets'
 import { fetchFilePreview } from '@/service/common'
 
diff --git a/web/app/components/datasets/create/file-uploader/index.tsx b/web/app/components/datasets/create/file-uploader/index.tsx
index 700a5f7680..20c8ea3633 100644
--- a/web/app/components/datasets/create/file-uploader/index.tsx
+++ b/web/app/components/datasets/create/file-uploader/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { RiDeleteBinLine, RiUploadCloud2Line } from '@remixicon/react'
 import DocumentFileIcon from '../../common/document-file-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CustomFile as File, FileItem } from '@/models/datasets'
 import { ToastContext } from '@/app/components/base/toast'
 import SimplePieChart from '@/app/components/base/simple-pie-chart'
diff --git a/web/app/components/datasets/create/notion-page-preview/index.tsx b/web/app/components/datasets/create/notion-page-preview/index.tsx
index edbee2b194..456b124324 100644
--- a/web/app/components/datasets/create/notion-page-preview/index.tsx
+++ b/web/app/components/datasets/create/notion-page-preview/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import Loading from '@/app/components/base/loading'
 import s from './index.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { NotionPage } from '@/models/common'
 import NotionIcon from '@/app/components/base/notion-icon'
 import { fetchNotionPagePreview } from '@/service/datasets'
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index e70feb204c..e844fd1b8a 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -9,7 +9,6 @@ import EmptyDatasetCreationModal from '../empty-dataset-creation-modal'
 import Website from '../website'
 import WebsitePreview from '../website/preview'
 import s from './index.module.css'
-import cn from '@/utils/classnames'
 import type { CrawlOptions, CrawlResultItem, FileItem } from '@/models/datasets'
 import type { DataSourceProvider, NotionPage } from '@/models/common'
 import { DataSourceType } from '@/models/datasets'
@@ -18,7 +17,7 @@ import { NotionPageSelector } from '@/app/components/base/notion-page-selector'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useProviderContext } from '@/context/provider-context'
 import VectorSpaceFull from '@/app/components/billing/vector-space-full'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ENABLE_WEBSITE_FIRECRAWL, ENABLE_WEBSITE_JINAREADER, ENABLE_WEBSITE_WATERCRAWL } from '@/config'
 import NotionConnector from '@/app/components/base/notion-connector'
 import type { DataSourceAuth } from '@/app/components/header/account-setting/data-source-page-new/types'
@@ -165,10 +164,10 @@ const StepOne = ({
       <div className='flex h-full w-full min-w-[1440px]'>
         <div className='relative h-full w-1/2 overflow-y-auto'>
           <div className='flex justify-end'>
-            <div className={classNames(s.form)}>
+            <div className={cn(s.form)}>
               {
                 shouldShowDataSourceTypeList && (
-                  <div className={classNames(s.stepHeader, 'system-md-semibold text-text-secondary')}>
+                  <div className={cn(s.stepHeader, 'system-md-semibold text-text-secondary')}>
                     {t('datasetCreation.steps.one')}
                   </div>
                 )
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index 4d568e9a6c..cb592aed5d 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -28,7 +28,7 @@ import escape from './escape'
 import { OptionCard } from './option-card'
 import LanguageSelect from './language-select'
 import { DelimiterInput, MaxLengthInput, OverlapInput } from './inputs'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CrawlOptions, CrawlResultItem, CreateDocumentReq, CustomFile, DocumentItem, FullDocumentDetail, ParentMode, PreProcessingRule, ProcessRule, Rules, createDocumentResponse } from '@/models/datasets'
 import { ChunkingMode, DataSourceType, ProcessMode } from '@/models/datasets'
 
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 2fd8c143f9..da3807b95f 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
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Popover from '@/app/components/base/popover'
 import { languages } from '@/i18n-config/language'
 
diff --git a/web/app/components/datasets/create/step-two/option-card.tsx b/web/app/components/datasets/create/step-two/option-card.tsx
index 7e901c913a..9a43513df1 100644
--- a/web/app/components/datasets/create/step-two/option-card.tsx
+++ b/web/app/components/datasets/create/step-two/option-card.tsx
@@ -1,6 +1,6 @@
 import type { ComponentProps, FC, ReactNode } from 'react'
 import Image from 'next/image'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const TriangleArrow: FC<ComponentProps<'svg'>> = props => (
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="11" viewBox="0 0 24 11" fill="none" {...props}>
@@ -20,11 +20,9 @@ type OptionCardHeaderProps = {
 
 export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
   const { icon, title, description, isActive, activeClassName, effectImg, disabled } = props
-  return <div className={classNames(
-    'relative flex h-full overflow-hidden rounded-t-xl',
+  return <div className={cn('relative flex h-full overflow-hidden rounded-t-xl',
     isActive && activeClassName,
-    !disabled && 'cursor-pointer',
-  )}>
+    !disabled && 'cursor-pointer')}>
     <div className='relative flex size-14 items-center justify-center overflow-hidden'>
       {isActive && effectImg && <Image src={effectImg} className='absolute left-0 top-0 h-full w-full' alt='' width={56} height={56} />}
       <div className='p-1'>
@@ -34,7 +32,7 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
       </div>
     </div>
     <TriangleArrow
-      className={classNames('absolute -bottom-1.5 left-4 text-transparent', isActive && 'text-components-panel-bg')}
+      className={cn('absolute -bottom-1.5 left-4 text-transparent', isActive && 'text-components-panel-bg')}
     />
     <div className='flex-1 space-y-0.5 py-3 pr-4'>
       <div className='system-md-semibold text-text-secondary'>{title}</div>
@@ -66,14 +64,12 @@ export const OptionCard: FC<OptionCardProps> = (
   const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, noHighlight, disabled, ...rest } = props
   return (
     <div
-      className={classNames(
-        'rounded-xl bg-components-option-card-option-bg shadow-xs',
+      className={cn('rounded-xl bg-components-option-card-option-bg shadow-xs',
         (isActive && !noHighlight)
           ? 'border-[1.5px] border-components-option-card-option-selected-border'
           : 'border border-components-option-card-option-border',
         disabled && 'pointer-events-none opacity-50',
-        className,
-      )}
+        className)}
       style={{
         ...style,
       }}
diff --git a/web/app/components/datasets/create/stepper/step.tsx b/web/app/components/datasets/create/stepper/step.tsx
index f135e4f007..8169103348 100644
--- a/web/app/components/datasets/create/stepper/step.tsx
+++ b/web/app/components/datasets/create/stepper/step.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type Step = {
   name: string
@@ -16,31 +16,26 @@ export const StepperStep: FC<StepperStepProps> = (props) => {
   const isDisabled = activeIndex < index
   const label = isActive ? `STEP ${index + 1}` : `${index + 1}`
   return <div className='flex items-center gap-2'>
-    <div className={classNames(
-      'inline-flex h-5 flex-col items-center justify-center gap-2 rounded-3xl py-1',
+    <div className={cn('inline-flex h-5 flex-col items-center justify-center gap-2 rounded-3xl py-1',
       isActive
         ? 'bg-state-accent-solid px-2'
         : !isDisabled
           ? 'w-5 border border-text-quaternary'
-          : 'w-5 border border-divider-deep',
-    )}>
-      <div className={classNames(
-        'system-2xs-semibold-uppercase text-center',
+          : 'w-5 border border-divider-deep')}>
+      <div className={cn('system-2xs-semibold-uppercase text-center',
         isActive
           ? 'text-text-primary-on-surface'
           : !isDisabled
             ? 'text-text-tertiary'
-            : 'text-text-quaternary',
-      )}>
+            : 'text-text-quaternary')}>
         {label}
       </div>
     </div>
-    <div className={classNames('system-xs-medium-uppercase',
+    <div className={cn('system-xs-medium-uppercase',
       isActive
         ? 'system-xs-semibold-uppercase text-text-accent'
         : !isDisabled
           ? 'text-text-tertiary'
-          : 'text-text-quaternary',
-    )}>{name}</div>
+          : 'text-text-quaternary')}>{name}</div>
   </div>
 }
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 9d29187dc2..8fadf4d135 100644
--- a/web/app/components/datasets/create/stop-embedding-modal/index.tsx
+++ b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
@@ -2,7 +2,7 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import s from './index.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 
diff --git a/web/app/components/datasets/create/top-bar/index.tsx b/web/app/components/datasets/create/top-bar/index.tsx
index e54577f46b..6d3064c350 100644
--- a/web/app/components/datasets/create/top-bar/index.tsx
+++ b/web/app/components/datasets/create/top-bar/index.tsx
@@ -3,7 +3,7 @@ import { RiArrowLeftLine } from '@remixicon/react'
 import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
 import { Stepper, type StepperProps } from '../stepper'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type TopBarProps = Pick<StepperProps, 'activeIndex'> & {
   className?: string
@@ -24,7 +24,7 @@ export const TopBar: FC<TopBarProps> = (props) => {
     return datasetId ? `/datasets/${datasetId}/documents` : '/datasets'
   }, [datasetId])
 
-  return <div className={classNames('relative flex h-[52px] shrink-0 items-center justify-between border-b border-b-divider-subtle', className)}>
+  return <div className={cn('relative flex h-[52px] shrink-0 items-center justify-between border-b border-b-divider-subtle', className)}>
     <Link href={fallbackRoute} replace className="inline-flex h-12 items-center justify-start gap-1 py-2 pl-2 pr-6">
       <div className='p-2'>
         <RiArrowLeftLine className='size-4 text-text-primary' />
diff --git a/web/app/components/datasets/create/website/base/checkbox-with-label.tsx b/web/app/components/datasets/create/website/base/checkbox-with-label.tsx
index d5be00354a..54031a87d4 100644
--- a/web/app/components/datasets/create/website/base/checkbox-with-label.tsx
+++ b/web/app/components/datasets/create/website/base/checkbox-with-label.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Checkbox from '@/app/components/base/checkbox'
 import Tooltip from '@/app/components/base/tooltip'
 
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 6253d56380..ae546f7757 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
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
 import Checkbox from '@/app/components/base/checkbox'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/datasets/create/website/base/crawled-result.tsx b/web/app/components/datasets/create/website/base/crawled-result.tsx
index 655723175f..34a702445c 100644
--- a/web/app/components/datasets/create/website/base/crawled-result.tsx
+++ b/web/app/components/datasets/create/website/base/crawled-result.tsx
@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import CheckboxWithLabel from './checkbox-with-label'
 import CrawledResultItem from './crawled-result-item'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CrawlResultItem } from '@/models/datasets'
 
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
diff --git a/web/app/components/datasets/create/website/base/error-message.tsx b/web/app/components/datasets/create/website/base/error-message.tsx
index 2788eb9013..4a88dfe79e 100644
--- a/web/app/components/datasets/create/website/base/error-message.tsx
+++ b/web/app/components/datasets/create/website/base/error-message.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 
 type Props = {
diff --git a/web/app/components/datasets/create/website/base/field.tsx b/web/app/components/datasets/create/website/base/field.tsx
index 43d76464e6..5db048c6b9 100644
--- a/web/app/components/datasets/create/website/base/field.tsx
+++ b/web/app/components/datasets/create/website/base/field.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import Input from './input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 
 type Props = {
diff --git a/web/app/components/datasets/create/website/base/header.tsx b/web/app/components/datasets/create/website/base/header.tsx
index 5a99835522..c5aa95189f 100644
--- a/web/app/components/datasets/create/website/base/header.tsx
+++ b/web/app/components/datasets/create/website/base/header.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import Divider from '@/app/components/base/divider'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
 
 type HeaderProps = {
diff --git a/web/app/components/datasets/create/website/base/options-wrap.tsx b/web/app/components/datasets/create/website/base/options-wrap.tsx
index f17a546203..9428782fdb 100644
--- a/web/app/components/datasets/create/website/base/options-wrap.tsx
+++ b/web/app/components/datasets/create/website/base/options-wrap.tsx
@@ -4,7 +4,7 @@ import type { FC } from 'react'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiEqualizer2Line } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
 
diff --git a/web/app/components/datasets/create/website/firecrawl/options.tsx b/web/app/components/datasets/create/website/firecrawl/options.tsx
index dea6c0e5b9..f31ae93e9d 100644
--- a/web/app/components/datasets/create/website/firecrawl/options.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/options.tsx
@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import CheckboxWithLabel from '../base/checkbox-with-label'
 import Field from '../base/field'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CrawlOptions } from '@/models/datasets'
 
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
diff --git a/web/app/components/datasets/create/website/index.tsx b/web/app/components/datasets/create/website/index.tsx
index ee7ace6815..180f6c6bcd 100644
--- a/web/app/components/datasets/create/website/index.tsx
+++ b/web/app/components/datasets/create/website/index.tsx
@@ -7,7 +7,7 @@ import NoData from './no-data'
 import Firecrawl from './firecrawl'
 import Watercrawl from './watercrawl'
 import JinaReader from './jina-reader'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useModalContext } from '@/context/modal-context'
 import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
 import { DataSourceProvider } from '@/models/common'
diff --git a/web/app/components/datasets/create/website/jina-reader/options.tsx b/web/app/components/datasets/create/website/jina-reader/options.tsx
index 33af3138e8..3b8eab469e 100644
--- a/web/app/components/datasets/create/website/jina-reader/options.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/options.tsx
@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import CheckboxWithLabel from '../base/checkbox-with-label'
 import Field from '../base/field'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CrawlOptions } from '@/models/datasets'
 
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
diff --git a/web/app/components/datasets/create/website/preview.tsx b/web/app/components/datasets/create/website/preview.tsx
index f43dc83589..ff2ca4ec43 100644
--- a/web/app/components/datasets/create/website/preview.tsx
+++ b/web/app/components/datasets/create/website/preview.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import s from '../file-preview/index.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CrawlResultItem } from '@/models/datasets'
 
 type IProps = {
diff --git a/web/app/components/datasets/create/website/watercrawl/options.tsx b/web/app/components/datasets/create/website/watercrawl/options.tsx
index 030505030e..e2e59bfa7d 100644
--- a/web/app/components/datasets/create/website/watercrawl/options.tsx
+++ b/web/app/components/datasets/create/website/watercrawl/options.tsx
@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import CheckboxWithLabel from '../base/checkbox-with-label'
 import Field from '../base/field'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CrawlOptions } from '@/models/datasets'
 
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/actions/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/actions/index.spec.tsx
new file mode 100644
index 0000000000..e3076bd172
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/actions/index.spec.tsx
@@ -0,0 +1,825 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import Actions from './index'
+
+// ==========================================
+// Mock External Dependencies
+// ==========================================
+
+// Mock next/navigation - useParams returns datasetId
+const mockDatasetId = 'test-dataset-id'
+jest.mock('next/navigation', () => ({
+  useParams: () => ({ datasetId: mockDatasetId }),
+}))
+
+// Mock next/link to capture href
+jest.mock('next/link', () => {
+  return ({ children, href, replace }: { children: React.ReactNode; href: string; replace?: boolean }) => (
+    <a href={href} data-replace={replace}>
+      {children}
+    </a>
+  )
+})
+
+// ==========================================
+// Test Suite
+// ==========================================
+
+describe('Actions', () => {
+  // Default mock for required props
+  const defaultProps = {
+    handleNextStep: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    // Tests basic rendering functionality
+    it('should render without crashing', () => {
+      // Arrange & Act
+      render(<Actions {...defaultProps} />)
+
+      // Assert
+      expect(screen.getByRole('button', { name: /datasetCreation.stepOne.button/i })).toBeInTheDocument()
+    })
+
+    it('should render cancel button with correct link', () => {
+      // Arrange & Act
+      render(<Actions {...defaultProps} />)
+
+      // Assert
+      const cancelLink = screen.getByRole('link')
+      expect(cancelLink).toHaveAttribute('href', `/datasets/${mockDatasetId}/documents`)
+      expect(cancelLink).toHaveAttribute('data-replace', 'true')
+    })
+
+    it('should render next step button with arrow icon', () => {
+      // Arrange & Act
+      render(<Actions {...defaultProps} />)
+
+      // Assert
+      const nextButton = screen.getByRole('button', { name: /datasetCreation.stepOne.button/i })
+      expect(nextButton).toBeInTheDocument()
+      expect(nextButton.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('should render cancel button with correct translation key', () => {
+      // Arrange & Act
+      render(<Actions {...defaultProps} />)
+
+      // Assert
+      expect(screen.getByText('common.operation.cancel')).toBeInTheDocument()
+    })
+
+    it('should not render select all section by default', () => {
+      // Arrange & Act
+      render(<Actions {...defaultProps} />)
+
+      // Assert
+      expect(screen.queryByText('common.operation.selectAll')).not.toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Props Testing
+  // ==========================================
+  describe('Props', () => {
+    // Tests for prop variations and defaults
+    describe('disabled prop', () => {
+      it('should not disable next step button when disabled is false', () => {
+        // Arrange & Act
+        render(<Actions {...defaultProps} disabled={false} />)
+
+        // Assert
+        const nextButton = screen.getByRole('button', { name: /datasetCreation.stepOne.button/i })
+        expect(nextButton).not.toBeDisabled()
+      })
+
+      it('should disable next step button when disabled is true', () => {
+        // Arrange & Act
+        render(<Actions {...defaultProps} disabled={true} />)
+
+        // Assert
+        const nextButton = screen.getByRole('button', { name: /datasetCreation.stepOne.button/i })
+        expect(nextButton).toBeDisabled()
+      })
+
+      it('should not disable next step button when disabled is undefined', () => {
+        // Arrange & Act
+        render(<Actions {...defaultProps} disabled={undefined} />)
+
+        // Assert
+        const nextButton = screen.getByRole('button', { name: /datasetCreation.stepOne.button/i })
+        expect(nextButton).not.toBeDisabled()
+      })
+    })
+
+    describe('showSelect prop', () => {
+      it('should show select all section when showSelect is true', () => {
+        // Arrange & Act
+        render(<Actions {...defaultProps} showSelect={true} onSelectAll={jest.fn()} />)
+
+        // Assert
+        expect(screen.getByText('common.operation.selectAll')).toBeInTheDocument()
+      })
+
+      it('should hide select all section when showSelect is false', () => {
+        // Arrange & Act
+        render(<Actions {...defaultProps} showSelect={false} />)
+
+        // Assert
+        expect(screen.queryByText('common.operation.selectAll')).not.toBeInTheDocument()
+      })
+
+      it('should hide select all section when showSelect defaults to false', () => {
+        // Arrange & Act
+        render(<Actions handleNextStep={jest.fn()} />)
+
+        // Assert
+        expect(screen.queryByText('common.operation.selectAll')).not.toBeInTheDocument()
+      })
+    })
+
+    describe('tip prop', () => {
+      it('should show tip when showSelect is true and tip is provided', () => {
+        // Arrange
+        const tip = 'This is a helpful tip'
+
+        // Act
+        render(<Actions {...defaultProps} showSelect={true} tip={tip} onSelectAll={jest.fn()} />)
+
+        // Assert
+        expect(screen.getByText(tip)).toBeInTheDocument()
+        expect(screen.getByTitle(tip)).toBeInTheDocument()
+      })
+
+      it('should not show tip when showSelect is false even if tip is provided', () => {
+        // Arrange
+        const tip = 'This is a helpful tip'
+
+        // Act
+        render(<Actions {...defaultProps} showSelect={false} tip={tip} />)
+
+        // Assert
+        expect(screen.queryByText(tip)).not.toBeInTheDocument()
+      })
+
+      it('should not show tip when tip is empty string', () => {
+        // Arrange & Act
+        render(<Actions {...defaultProps} showSelect={true} tip="" onSelectAll={jest.fn()} />)
+
+        // Assert
+        const tipElements = screen.queryAllByTitle('')
+        // Empty tip should not render a tip element
+        expect(tipElements.length).toBe(0)
+      })
+
+      it('should use empty string as default tip value', () => {
+        // Arrange & Act
+        render(<Actions {...defaultProps} showSelect={true} onSelectAll={jest.fn()} />)
+
+        // Assert - tip container should not exist when tip defaults to empty string
+        const tipContainer = document.querySelector('.text-text-tertiary.truncate')
+        expect(tipContainer).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  // ==========================================
+  // Event Handlers Testing
+  // ==========================================
+  describe('User Interactions', () => {
+    // Tests for event handlers
+    it('should call handleNextStep when next button is clicked', () => {
+      // Arrange
+      const handleNextStep = jest.fn()
+      render(<Actions {...defaultProps} handleNextStep={handleNextStep} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: /datasetCreation.stepOne.button/i }))
+
+      // Assert
+      expect(handleNextStep).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call handleNextStep when next button is disabled and clicked', () => {
+      // Arrange
+      const handleNextStep = jest.fn()
+      render(<Actions {...defaultProps} handleNextStep={handleNextStep} disabled={true} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: /datasetCreation.stepOne.button/i }))
+
+      // Assert
+      expect(handleNextStep).not.toHaveBeenCalled()
+    })
+
+    it('should call onSelectAll when checkbox is clicked', () => {
+      // Arrange
+      const onSelectAll = jest.fn()
+      render(
+        <Actions
+          {...defaultProps}
+          showSelect={true}
+          onSelectAll={onSelectAll}
+          totalOptions={5}
+          selectedOptions={0}
+        />,
+      )
+
+      // Act - find the checkbox container and click it
+      const selectAllLabel = screen.getByText('common.operation.selectAll')
+      const checkboxContainer = selectAllLabel.closest('.flex.shrink-0.items-center')
+      const checkbox = checkboxContainer?.querySelector('[class*="cursor-pointer"]')
+      if (checkbox)
+        fireEvent.click(checkbox)
+
+      // Assert
+      expect(onSelectAll).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // ==========================================
+  // Memoization Logic Testing
+  // ==========================================
+  describe('Memoization Logic', () => {
+    // Tests for useMemo hooks (indeterminate and checked)
+    describe('indeterminate calculation', () => {
+      it('should return false when showSelect is false', () => {
+        // Arrange & Act
+        render(
+          <Actions
+            {...defaultProps}
+            showSelect={false}
+            totalOptions={5}
+            selectedOptions={2}
+            onSelectAll={jest.fn()}
+          />,
+        )
+
+        // Assert - checkbox not rendered, so can't check indeterminate directly
+        expect(screen.queryByText('common.operation.selectAll')).not.toBeInTheDocument()
+      })
+
+      it('should return false when selectedOptions is undefined', () => {
+        // Arrange & Act
+        const { container } = render(
+          <Actions
+            {...defaultProps}
+            showSelect={true}
+            totalOptions={5}
+            selectedOptions={undefined}
+            onSelectAll={jest.fn()}
+          />,
+        )
+
+        // Assert - checkbox should not be indeterminate
+        const checkbox = container.querySelector('[class*="cursor-pointer"]')
+        expect(checkbox).toBeInTheDocument()
+      })
+
+      it('should return false when totalOptions is undefined', () => {
+        // Arrange & Act
+        const { container } = render(
+          <Actions
+            {...defaultProps}
+            showSelect={true}
+            totalOptions={undefined}
+            selectedOptions={2}
+            onSelectAll={jest.fn()}
+          />,
+        )
+
+        // Assert - checkbox should exist
+        const checkbox = container.querySelector('[class*="cursor-pointer"]')
+        expect(checkbox).toBeInTheDocument()
+      })
+
+      it('should return true when some options are selected (0 < selectedOptions < totalOptions)', () => {
+        // Arrange & Act
+        const { container } = render(
+          <Actions
+            {...defaultProps}
+            showSelect={true}
+            totalOptions={5}
+            selectedOptions={3}
+            onSelectAll={jest.fn()}
+          />,
+        )
+
+        // Assert - checkbox should render in indeterminate state
+        // The checkbox component renders IndeterminateIcon when indeterminate and not checked
+        const selectAllContainer = container.querySelector('.flex.shrink-0.items-center')
+        expect(selectAllContainer).toBeInTheDocument()
+      })
+
+      it('should return false when no options are selected (selectedOptions === 0)', () => {
+        // Arrange & Act
+        const { container } = render(
+          <Actions
+            {...defaultProps}
+            showSelect={true}
+            totalOptions={5}
+            selectedOptions={0}
+            onSelectAll={jest.fn()}
+          />,
+        )
+
+        // Assert - checkbox should be unchecked and not indeterminate
+        const checkbox = container.querySelector('[class*="cursor-pointer"]')
+        expect(checkbox).toBeInTheDocument()
+      })
+
+      it('should return false when all options are selected (selectedOptions === totalOptions)', () => {
+        // Arrange & Act
+        const { container } = render(
+          <Actions
+            {...defaultProps}
+            showSelect={true}
+            totalOptions={5}
+            selectedOptions={5}
+            onSelectAll={jest.fn()}
+          />,
+        )
+
+        // Assert - checkbox should be checked, not indeterminate
+        const checkbox = container.querySelector('[class*="cursor-pointer"]')
+        expect(checkbox).toBeInTheDocument()
+      })
+    })
+
+    describe('checked calculation', () => {
+      it('should return false when showSelect is false', () => {
+        // Arrange & Act
+        render(
+          <Actions
+            {...defaultProps}
+            showSelect={false}
+            totalOptions={5}
+            selectedOptions={5}
+            onSelectAll={jest.fn()}
+          />,
+        )
+
+        // Assert - checkbox not rendered
+        expect(screen.queryByText('common.operation.selectAll')).not.toBeInTheDocument()
+      })
+
+      it('should return false when selectedOptions is undefined', () => {
+        // Arrange & Act
+        const { container } = render(
+          <Actions
+            {...defaultProps}
+            showSelect={true}
+            totalOptions={5}
+            selectedOptions={undefined}
+            onSelectAll={jest.fn()}
+          />,
+        )
+
+        // Assert
+        const checkbox = container.querySelector('[class*="cursor-pointer"]')
+        expect(checkbox).toBeInTheDocument()
+      })
+
+      it('should return false when totalOptions is undefined', () => {
+        // Arrange & Act
+        const { container } = render(
+          <Actions
+            {...defaultProps}
+            showSelect={true}
+            totalOptions={undefined}
+            selectedOptions={5}
+            onSelectAll={jest.fn()}
+          />,
+        )
+
+        // Assert
+        const checkbox = container.querySelector('[class*="cursor-pointer"]')
+        expect(checkbox).toBeInTheDocument()
+      })
+
+      it('should return true when all options are selected (selectedOptions === totalOptions)', () => {
+        // Arrange & Act
+        const { container } = render(
+          <Actions
+            {...defaultProps}
+            showSelect={true}
+            totalOptions={5}
+            selectedOptions={5}
+            onSelectAll={jest.fn()}
+          />,
+        )
+
+        // Assert - checkbox should show checked state (RiCheckLine icon)
+        const checkbox = container.querySelector('[class*="cursor-pointer"]')
+        expect(checkbox).toBeInTheDocument()
+      })
+
+      it('should return false when selectedOptions is 0', () => {
+        // Arrange & Act
+        const { container } = render(
+          <Actions
+            {...defaultProps}
+            showSelect={true}
+            totalOptions={5}
+            selectedOptions={0}
+            onSelectAll={jest.fn()}
+          />,
+        )
+
+        // Assert - checkbox should be unchecked
+        const checkbox = container.querySelector('[class*="cursor-pointer"]')
+        expect(checkbox).toBeInTheDocument()
+      })
+
+      it('should return false when not all options are selected', () => {
+        // Arrange & Act
+        const { container } = render(
+          <Actions
+            {...defaultProps}
+            showSelect={true}
+            totalOptions={5}
+            selectedOptions={4}
+            onSelectAll={jest.fn()}
+          />,
+        )
+
+        // Assert - checkbox should be indeterminate, not checked
+        const checkbox = container.querySelector('[class*="cursor-pointer"]')
+        expect(checkbox).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ==========================================
+  // Component Memoization Testing
+  // ==========================================
+  describe('Component Memoization', () => {
+    // Tests for React.memo behavior
+    it('should be wrapped with React.memo', () => {
+      // Assert - verify component has memo wrapper
+      expect(Actions.$$typeof).toBe(Symbol.for('react.memo'))
+    })
+
+    it('should not re-render when props are the same', () => {
+      // Arrange
+      const handleNextStep = jest.fn()
+      const props = {
+        handleNextStep,
+        disabled: false,
+        showSelect: true,
+        totalOptions: 5,
+        selectedOptions: 3,
+        onSelectAll: jest.fn(),
+        tip: 'Test tip',
+      }
+
+      // Act
+      const { rerender } = render(<Actions {...props} />)
+
+      // Re-render with same props
+      rerender(<Actions {...props} />)
+
+      // Assert - component renders correctly after rerender
+      expect(screen.getByText('common.operation.selectAll')).toBeInTheDocument()
+      expect(screen.getByText('Test tip')).toBeInTheDocument()
+    })
+
+    it('should re-render when props change', () => {
+      // Arrange
+      const handleNextStep = jest.fn()
+      const initialProps = {
+        handleNextStep,
+        disabled: false,
+        showSelect: true,
+        totalOptions: 5,
+        selectedOptions: 0,
+        onSelectAll: jest.fn(),
+        tip: 'Initial tip',
+      }
+
+      // Act
+      const { rerender } = render(<Actions {...initialProps} />)
+      expect(screen.getByText('Initial tip')).toBeInTheDocument()
+
+      // Rerender with different props
+      rerender(<Actions {...initialProps} tip="Updated tip" />)
+
+      // Assert
+      expect(screen.getByText('Updated tip')).toBeInTheDocument()
+      expect(screen.queryByText('Initial tip')).not.toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Edge Cases Testing
+  // ==========================================
+  describe('Edge Cases', () => {
+    // Tests for boundary conditions and unusual inputs
+    it('should handle totalOptions of 0', () => {
+      // Arrange & Act
+      const { container } = render(
+        <Actions
+          {...defaultProps}
+          showSelect={true}
+          totalOptions={0}
+          selectedOptions={0}
+          onSelectAll={jest.fn()}
+        />,
+      )
+
+      // Assert - should render checkbox
+      const checkbox = container.querySelector('[class*="cursor-pointer"]')
+      expect(checkbox).toBeInTheDocument()
+    })
+
+    it('should handle very large totalOptions', () => {
+      // Arrange & Act
+      const { container } = render(
+        <Actions
+          {...defaultProps}
+          showSelect={true}
+          totalOptions={1000000}
+          selectedOptions={500000}
+          onSelectAll={jest.fn()}
+        />,
+      )
+
+      // Assert
+      const checkbox = container.querySelector('[class*="cursor-pointer"]')
+      expect(checkbox).toBeInTheDocument()
+    })
+
+    it('should handle very long tip text', () => {
+      // Arrange
+      const longTip = 'A'.repeat(500)
+
+      // Act
+      render(
+        <Actions
+          {...defaultProps}
+          showSelect={true}
+          tip={longTip}
+          onSelectAll={jest.fn()}
+        />,
+      )
+
+      // Assert - tip should render with truncate class
+      const tipElement = screen.getByTitle(longTip)
+      expect(tipElement).toHaveClass('truncate')
+    })
+
+    it('should handle tip with special characters', () => {
+      // Arrange
+      const specialTip = '<script>alert("xss")</script> & "quotes" \'apostrophes\''
+
+      // Act
+      render(
+        <Actions
+          {...defaultProps}
+          showSelect={true}
+          tip={specialTip}
+          onSelectAll={jest.fn()}
+        />,
+      )
+
+      // Assert - special characters should be rendered safely
+      expect(screen.getByText(specialTip)).toBeInTheDocument()
+    })
+
+    it('should handle tip with unicode characters', () => {
+      // Arrange
+      const unicodeTip = '选中 5 个文件，共 10MB 🚀'
+
+      // Act
+      render(
+        <Actions
+          {...defaultProps}
+          showSelect={true}
+          tip={unicodeTip}
+          onSelectAll={jest.fn()}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText(unicodeTip)).toBeInTheDocument()
+    })
+
+    it('should handle selectedOptions greater than totalOptions', () => {
+      // This is an edge case that shouldn't happen but should be handled gracefully
+      // Arrange & Act
+      const { container } = render(
+        <Actions
+          {...defaultProps}
+          showSelect={true}
+          totalOptions={5}
+          selectedOptions={10}
+          onSelectAll={jest.fn()}
+        />,
+      )
+
+      // Assert - should still render
+      const checkbox = container.querySelector('[class*="cursor-pointer"]')
+      expect(checkbox).toBeInTheDocument()
+    })
+
+    it('should handle negative selectedOptions', () => {
+      // Arrange & Act
+      const { container } = render(
+        <Actions
+          {...defaultProps}
+          showSelect={true}
+          totalOptions={5}
+          selectedOptions={-1}
+          onSelectAll={jest.fn()}
+        />,
+      )
+
+      // Assert - should still render (though this is an invalid state)
+      const checkbox = container.querySelector('[class*="cursor-pointer"]')
+      expect(checkbox).toBeInTheDocument()
+    })
+
+    it('should handle onSelectAll being undefined when showSelect is true', () => {
+      // Arrange & Act
+      const { container } = render(
+        <Actions
+          {...defaultProps}
+          showSelect={true}
+          totalOptions={5}
+          selectedOptions={3}
+          onSelectAll={undefined}
+        />,
+      )
+
+      // Assert - should render checkbox
+      const checkbox = container.querySelector('[class*="cursor-pointer"]')
+      expect(checkbox).toBeInTheDocument()
+
+      // Click should not throw
+      if (checkbox)
+        expect(() => fireEvent.click(checkbox)).not.toThrow()
+    })
+
+    it('should handle empty datasetId from params', () => {
+      // This test verifies the link is constructed even with empty datasetId
+      // Arrange & Act
+      render(<Actions {...defaultProps} />)
+
+      // Assert - link should still be present with the mocked datasetId
+      const cancelLink = screen.getByRole('link')
+      expect(cancelLink).toHaveAttribute('href', '/datasets/test-dataset-id/documents')
+    })
+  })
+
+  // ==========================================
+  // All Prop Combinations Testing
+  // ==========================================
+  describe('Prop Combinations', () => {
+    // Tests for various combinations of props
+    it('should handle disabled=true with showSelect=false', () => {
+      // Arrange & Act
+      render(<Actions {...defaultProps} disabled={true} showSelect={false} />)
+
+      // Assert
+      const nextButton = screen.getByRole('button', { name: /datasetCreation.stepOne.button/i })
+      expect(nextButton).toBeDisabled()
+      expect(screen.queryByText('common.operation.selectAll')).not.toBeInTheDocument()
+    })
+
+    it('should handle disabled=true with showSelect=true', () => {
+      // Arrange & Act
+      render(
+        <Actions
+          {...defaultProps}
+          disabled={true}
+          showSelect={true}
+          totalOptions={5}
+          selectedOptions={3}
+          onSelectAll={jest.fn()}
+        />,
+      )
+
+      // Assert
+      const nextButton = screen.getByRole('button', { name: /datasetCreation.stepOne.button/i })
+      expect(nextButton).toBeDisabled()
+      expect(screen.getByText('common.operation.selectAll')).toBeInTheDocument()
+    })
+
+    it('should render complete component with all props provided', () => {
+      // Arrange
+      const allProps = {
+        disabled: false,
+        handleNextStep: jest.fn(),
+        showSelect: true,
+        totalOptions: 10,
+        selectedOptions: 5,
+        onSelectAll: jest.fn(),
+        tip: 'All props provided',
+      }
+
+      // Act
+      render(<Actions {...allProps} />)
+
+      // Assert
+      expect(screen.getByText('common.operation.selectAll')).toBeInTheDocument()
+      expect(screen.getByText('All props provided')).toBeInTheDocument()
+      expect(screen.getByText('common.operation.cancel')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /datasetCreation.stepOne.button/i })).not.toBeDisabled()
+    })
+
+    it('should render minimal component with only required props', () => {
+      // Arrange & Act
+      render(<Actions handleNextStep={jest.fn()} />)
+
+      // Assert
+      expect(screen.queryByText('common.operation.selectAll')).not.toBeInTheDocument()
+      expect(screen.getByText('common.operation.cancel')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /datasetCreation.stepOne.button/i })).not.toBeDisabled()
+    })
+  })
+
+  // ==========================================
+  // Selection State Variations Testing
+  // ==========================================
+  describe('Selection State Variations', () => {
+    // Tests for different selection states
+    const selectionStates = [
+      { totalOptions: 10, selectedOptions: 0, expectedState: 'unchecked' },
+      { totalOptions: 10, selectedOptions: 5, expectedState: 'indeterminate' },
+      { totalOptions: 10, selectedOptions: 10, expectedState: 'checked' },
+      { totalOptions: 1, selectedOptions: 0, expectedState: 'unchecked' },
+      { totalOptions: 1, selectedOptions: 1, expectedState: 'checked' },
+      { totalOptions: 100, selectedOptions: 1, expectedState: 'indeterminate' },
+      { totalOptions: 100, selectedOptions: 99, expectedState: 'indeterminate' },
+    ]
+
+    it.each(selectionStates)(
+      'should render with $expectedState state when totalOptions=$totalOptions and selectedOptions=$selectedOptions',
+      ({ totalOptions, selectedOptions }) => {
+        // Arrange & Act
+        const { container } = render(
+          <Actions
+            {...defaultProps}
+            showSelect={true}
+            totalOptions={totalOptions}
+            selectedOptions={selectedOptions}
+            onSelectAll={jest.fn()}
+          />,
+        )
+
+        // Assert - component should render without errors
+        const checkbox = container.querySelector('[class*="cursor-pointer"]')
+        expect(checkbox).toBeInTheDocument()
+        expect(screen.getByText('common.operation.selectAll')).toBeInTheDocument()
+      },
+    )
+  })
+
+  // ==========================================
+  // Layout Structure Testing
+  // ==========================================
+  describe('Layout', () => {
+    // Tests for correct layout structure
+    it('should have correct container structure', () => {
+      // Arrange & Act
+      const { container } = render(<Actions {...defaultProps} />)
+
+      // Assert
+      const mainContainer = container.querySelector('.flex.items-center.gap-x-2.overflow-hidden')
+      expect(mainContainer).toBeInTheDocument()
+    })
+
+    it('should have correct button container structure', () => {
+      // Arrange & Act
+      const { container } = render(<Actions {...defaultProps} />)
+
+      // Assert - buttons should be in a flex container
+      const buttonContainer = container.querySelector('.flex.grow.items-center.justify-end.gap-x-2')
+      expect(buttonContainer).toBeInTheDocument()
+    })
+
+    it('should position select all section before buttons when showSelect is true', () => {
+      // Arrange & Act
+      const { container } = render(
+        <Actions
+          {...defaultProps}
+          showSelect={true}
+          totalOptions={5}
+          selectedOptions={3}
+          onSelectAll={jest.fn()}
+        />,
+      )
+
+      // Assert - select all section should exist
+      const selectAllSection = container.querySelector('.flex.shrink-0.items-center')
+      expect(selectAllSection).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/datasource-icon.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/datasource-icon.tsx
index a2fc0caca7..7aef143cc0 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/datasource-icon.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/datasource-icon.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import { memo } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type DatasourceIconProps = {
   size?: string
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/index.spec.tsx
new file mode 100644
index 0000000000..4ae74be9d1
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/index.spec.tsx
@@ -0,0 +1,1662 @@
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { renderHook } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import React from 'react'
+import DataSourceOptions from './index'
+import OptionCard from './option-card'
+import DatasourceIcon from './datasource-icon'
+import { useDatasourceIcon } from './hooks'
+import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
+import { BlockEnum, type Node } from '@/app/components/workflow/types'
+import type { Datasource } from '@/app/components/rag-pipeline/components/panel/test-run/types'
+
+// ==========================================
+// Mock External Dependencies
+// ==========================================
+
+// Mock useDatasourceOptions hook from parent hooks
+const mockUseDatasourceOptions = jest.fn()
+jest.mock('../hooks', () => ({
+  useDatasourceOptions: (nodes: Node<DataSourceNodeType>[]) => mockUseDatasourceOptions(nodes),
+}))
+
+// Mock useDataSourceList API hook
+const mockUseDataSourceList = jest.fn()
+jest.mock('@/service/use-pipeline', () => ({
+  useDataSourceList: (enabled: boolean) => mockUseDataSourceList(enabled),
+}))
+
+// Mock transformDataSourceToTool utility
+const mockTransformDataSourceToTool = jest.fn()
+jest.mock('@/app/components/workflow/block-selector/utils', () => ({
+  transformDataSourceToTool: (item: unknown) => mockTransformDataSourceToTool(item),
+}))
+
+// Mock basePath
+jest.mock('@/utils/var', () => ({
+  basePath: '/mock-base-path',
+}))
+
+// ==========================================
+// Test Data Builders
+// ==========================================
+
+const createMockDataSourceNodeData = (overrides?: Partial<DataSourceNodeType>): DataSourceNodeType => ({
+  title: 'Test Data Source',
+  desc: 'Test description',
+  type: BlockEnum.DataSource,
+  plugin_id: 'test-plugin-id',
+  provider_type: 'local_file',
+  provider_name: 'Test Provider',
+  datasource_name: 'test-datasource',
+  datasource_label: 'Test Datasource Label',
+  datasource_parameters: {},
+  datasource_configurations: {},
+  ...overrides,
+})
+
+const createMockPipelineNode = (overrides?: Partial<Node<DataSourceNodeType>>): Node<DataSourceNodeType> => {
+  const nodeData = createMockDataSourceNodeData(overrides?.data)
+  return {
+    id: `node-${Math.random().toString(36).slice(2, 9)}`,
+    type: 'custom',
+    position: { x: 0, y: 0 },
+    data: nodeData,
+    ...overrides,
+  }
+}
+
+const createMockPipelineNodes = (count = 3): Node<DataSourceNodeType>[] => {
+  return Array.from({ length: count }, (_, i) =>
+    createMockPipelineNode({
+      id: `node-${i + 1}`,
+      data: createMockDataSourceNodeData({
+        title: `Data Source ${i + 1}`,
+        plugin_id: `plugin-${i + 1}`,
+        datasource_name: `datasource-${i + 1}`,
+      }),
+    }),
+  )
+}
+
+const createMockDatasourceOption = (
+  node: Node<DataSourceNodeType>,
+) => ({
+  label: node.data.title,
+  value: node.id,
+  data: node.data,
+})
+
+const createMockDataSourceListItem = (overrides?: Record<string, unknown>) => ({
+  declaration: {
+    identity: {
+      icon: '/icons/test-icon.png',
+      name: 'test-datasource',
+      label: { en_US: 'Test Datasource' },
+    },
+    provider: 'test-provider',
+  },
+  plugin_id: 'test-plugin-id',
+  ...overrides,
+})
+
+// ==========================================
+// Test Utilities
+// ==========================================
+
+const createQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: { retry: false },
+    mutations: { retry: false },
+  },
+})
+
+const renderWithProviders = (
+  ui: React.ReactElement,
+  queryClient?: QueryClient,
+) => {
+  const client = queryClient || createQueryClient()
+  return render(
+    <QueryClientProvider client={client}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
+const createHookWrapper = () => {
+  const queryClient = createQueryClient()
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  )
+}
+
+// ==========================================
+// DatasourceIcon Tests
+// ==========================================
+describe('DatasourceIcon', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      const { container } = render(<DatasourceIcon iconUrl="https://example.com/icon.png" />)
+
+      // Assert
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render icon with background image', () => {
+      // Arrange
+      const iconUrl = 'https://example.com/icon.png'
+
+      // Act
+      const { container } = render(<DatasourceIcon iconUrl={iconUrl} />)
+
+      // Assert
+      const iconDiv = container.querySelector('[style*="background-image"]')
+      expect(iconDiv).toHaveStyle({ backgroundImage: `url(${iconUrl})` })
+    })
+
+    it('should render with default size (sm)', () => {
+      // Arrange & Act
+      const { container } = render(<DatasourceIcon iconUrl="https://example.com/icon.png" />)
+
+      // Assert - Default size is 'sm' which maps to 'w-5 h-5'
+      expect(container.firstChild).toHaveClass('w-5')
+      expect(container.firstChild).toHaveClass('h-5')
+    })
+  })
+
+  describe('Props', () => {
+    describe('size', () => {
+      it('should render with xs size', () => {
+        // Arrange & Act
+        const { container } = render(
+          <DatasourceIcon iconUrl="https://example.com/icon.png" size="xs" />,
+        )
+
+        // Assert
+        expect(container.firstChild).toHaveClass('w-4')
+        expect(container.firstChild).toHaveClass('h-4')
+        expect(container.firstChild).toHaveClass('rounded-[5px]')
+      })
+
+      it('should render with sm size', () => {
+        // Arrange & Act
+        const { container } = render(
+          <DatasourceIcon iconUrl="https://example.com/icon.png" size="sm" />,
+        )
+
+        // Assert
+        expect(container.firstChild).toHaveClass('w-5')
+        expect(container.firstChild).toHaveClass('h-5')
+        expect(container.firstChild).toHaveClass('rounded-md')
+      })
+
+      it('should render with md size', () => {
+        // Arrange & Act
+        const { container } = render(
+          <DatasourceIcon iconUrl="https://example.com/icon.png" size="md" />,
+        )
+
+        // Assert
+        expect(container.firstChild).toHaveClass('w-6')
+        expect(container.firstChild).toHaveClass('h-6')
+        expect(container.firstChild).toHaveClass('rounded-lg')
+      })
+    })
+
+    describe('className', () => {
+      it('should apply custom className', () => {
+        // Arrange & Act
+        const { container } = render(
+          <DatasourceIcon iconUrl="https://example.com/icon.png" className="custom-class" />,
+        )
+
+        // Assert
+        expect(container.firstChild).toHaveClass('custom-class')
+      })
+
+      it('should merge custom className with default classes', () => {
+        // Arrange & Act
+        const { container } = render(
+          <DatasourceIcon iconUrl="https://example.com/icon.png" className="custom-class" size="sm" />,
+        )
+
+        // Assert
+        expect(container.firstChild).toHaveClass('custom-class')
+        expect(container.firstChild).toHaveClass('w-5')
+        expect(container.firstChild).toHaveClass('h-5')
+      })
+    })
+
+    describe('iconUrl', () => {
+      it('should handle empty iconUrl', () => {
+        // Arrange & Act
+        const { container } = render(<DatasourceIcon iconUrl="" />)
+
+        // Assert
+        const iconDiv = container.querySelector('[style*="background-image"]')
+        expect(iconDiv).toHaveStyle({ backgroundImage: 'url()' })
+      })
+
+      it('should handle special characters in iconUrl', () => {
+        // Arrange
+        const iconUrl = 'https://example.com/icon.png?param=value&other=123'
+
+        // Act
+        const { container } = render(<DatasourceIcon iconUrl={iconUrl} />)
+
+        // Assert
+        const iconDiv = container.querySelector('[style*="background-image"]')
+        expect(iconDiv).toHaveStyle({ backgroundImage: `url(${iconUrl})` })
+      })
+
+      it('should handle data URL as iconUrl', () => {
+        // Arrange
+        const dataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=='
+
+        // Act
+        const { container } = render(<DatasourceIcon iconUrl={dataUrl} />)
+
+        // Assert
+        const iconDiv = container.querySelector('[style*="background-image"]')
+        expect(iconDiv).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Styling', () => {
+    it('should have flex container classes', () => {
+      // Arrange & Act
+      const { container } = render(<DatasourceIcon iconUrl="https://example.com/icon.png" />)
+
+      // Assert
+      expect(container.firstChild).toHaveClass('flex')
+      expect(container.firstChild).toHaveClass('items-center')
+      expect(container.firstChild).toHaveClass('justify-center')
+    })
+
+    it('should have shadow-xs class from size map', () => {
+      // Arrange & Act
+      const { container } = render(<DatasourceIcon iconUrl="https://example.com/icon.png" />)
+
+      // Assert - Default size 'sm' has shadow-xs
+      expect(container.firstChild).toHaveClass('shadow-xs')
+    })
+
+    it('should have inner div with bg-cover class', () => {
+      // Arrange & Act
+      const { container } = render(<DatasourceIcon iconUrl="https://example.com/icon.png" />)
+
+      // Assert
+      const innerDiv = container.querySelector('.bg-cover')
+      expect(innerDiv).toBeInTheDocument()
+      expect(innerDiv).toHaveClass('bg-center')
+      expect(innerDiv).toHaveClass('rounded-md')
+    })
+  })
+})
+
+// ==========================================
+// useDatasourceIcon Hook Tests
+// ==========================================
+describe('useDatasourceIcon', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUseDataSourceList.mockReturnValue({
+      data: [],
+      isSuccess: false,
+    })
+    mockTransformDataSourceToTool.mockImplementation(item => ({
+      plugin_id: item.plugin_id,
+      icon: item.declaration?.identity?.icon,
+    }))
+  })
+
+  describe('Loading State', () => {
+    it('should return undefined when data is not loaded', () => {
+      // Arrange
+      mockUseDataSourceList.mockReturnValue({
+        data: undefined,
+        isSuccess: false,
+      })
+      const nodeData = createMockDataSourceNodeData()
+
+      // Act
+      const { result } = renderHook(() => useDatasourceIcon(nodeData), {
+        wrapper: createHookWrapper(),
+      })
+
+      // Assert
+      expect(result.current).toBeUndefined()
+    })
+
+    it('should call useDataSourceList with true', () => {
+      // Arrange
+      const nodeData = createMockDataSourceNodeData()
+
+      // Act
+      renderHook(() => useDatasourceIcon(nodeData), {
+        wrapper: createHookWrapper(),
+      })
+
+      // Assert
+      expect(mockUseDataSourceList).toHaveBeenCalledWith(true)
+    })
+  })
+
+  describe('Success State', () => {
+    it('should return icon when data is loaded and plugin matches', () => {
+      // Arrange
+      const mockDataSourceList = [
+        createMockDataSourceListItem({
+          plugin_id: 'test-plugin-id',
+          declaration: {
+            identity: {
+              icon: '/icons/test-icon.png',
+              name: 'test',
+              label: { en_US: 'Test' },
+            },
+          },
+        }),
+      ]
+      mockUseDataSourceList.mockReturnValue({
+        data: mockDataSourceList,
+        isSuccess: true,
+      })
+      mockTransformDataSourceToTool.mockImplementation(item => ({
+        plugin_id: item.plugin_id,
+        icon: item.declaration?.identity?.icon,
+      }))
+      const nodeData = createMockDataSourceNodeData({ plugin_id: 'test-plugin-id' })
+
+      // Act
+      const { result } = renderHook(() => useDatasourceIcon(nodeData), {
+        wrapper: createHookWrapper(),
+      })
+
+      // Assert - Icon should have basePath prepended
+      expect(result.current).toBe('/mock-base-path/icons/test-icon.png')
+    })
+
+    it('should return undefined when plugin does not match', () => {
+      // Arrange
+      const mockDataSourceList = [
+        createMockDataSourceListItem({
+          plugin_id: 'other-plugin-id',
+        }),
+      ]
+      mockUseDataSourceList.mockReturnValue({
+        data: mockDataSourceList,
+        isSuccess: true,
+      })
+      const nodeData = createMockDataSourceNodeData({ plugin_id: 'test-plugin-id' })
+
+      // Act
+      const { result } = renderHook(() => useDatasourceIcon(nodeData), {
+        wrapper: createHookWrapper(),
+      })
+
+      // Assert
+      expect(result.current).toBeUndefined()
+    })
+
+    it('should prepend basePath to icon when icon does not include basePath', () => {
+      // Arrange
+      const mockDataSourceList = [
+        createMockDataSourceListItem({
+          plugin_id: 'test-plugin-id',
+          declaration: {
+            identity: {
+              icon: '/icons/test-icon.png',
+              name: 'test',
+              label: { en_US: 'Test' },
+            },
+          },
+        }),
+      ]
+      mockUseDataSourceList.mockReturnValue({
+        data: mockDataSourceList,
+        isSuccess: true,
+      })
+      mockTransformDataSourceToTool.mockImplementation(item => ({
+        plugin_id: item.plugin_id,
+        icon: item.declaration?.identity?.icon,
+      }))
+      const nodeData = createMockDataSourceNodeData({ plugin_id: 'test-plugin-id' })
+
+      // Act
+      const { result } = renderHook(() => useDatasourceIcon(nodeData), {
+        wrapper: createHookWrapper(),
+      })
+
+      // Assert - Icon should have basePath prepended
+      expect(result.current).toBe('/mock-base-path/icons/test-icon.png')
+    })
+
+    it('should not prepend basePath when icon already includes basePath', () => {
+      // Arrange
+      const mockDataSourceList = [
+        createMockDataSourceListItem({
+          plugin_id: 'test-plugin-id',
+          declaration: {
+            identity: {
+              icon: '/mock-base-path/icons/test-icon.png',
+              name: 'test',
+              label: { en_US: 'Test' },
+            },
+          },
+        }),
+      ]
+      mockUseDataSourceList.mockReturnValue({
+        data: mockDataSourceList,
+        isSuccess: true,
+      })
+      mockTransformDataSourceToTool.mockImplementation(item => ({
+        plugin_id: item.plugin_id,
+        icon: item.declaration?.identity?.icon,
+      }))
+      const nodeData = createMockDataSourceNodeData({ plugin_id: 'test-plugin-id' })
+
+      // Act
+      const { result } = renderHook(() => useDatasourceIcon(nodeData), {
+        wrapper: createHookWrapper(),
+      })
+
+      // Assert - Icon should not be modified
+      expect(result.current).toBe('/mock-base-path/icons/test-icon.png')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty dataSourceList', () => {
+      // Arrange
+      mockUseDataSourceList.mockReturnValue({
+        data: [],
+        isSuccess: true,
+      })
+      const nodeData = createMockDataSourceNodeData()
+
+      // Act
+      const { result } = renderHook(() => useDatasourceIcon(nodeData), {
+        wrapper: createHookWrapper(),
+      })
+
+      // Assert
+      expect(result.current).toBeUndefined()
+    })
+
+    it('should handle null dataSourceList', () => {
+      // Arrange
+      mockUseDataSourceList.mockReturnValue({
+        data: null,
+        isSuccess: true,
+      })
+      const nodeData = createMockDataSourceNodeData()
+
+      // Act
+      const { result } = renderHook(() => useDatasourceIcon(nodeData), {
+        wrapper: createHookWrapper(),
+      })
+
+      // Assert
+      expect(result.current).toBeUndefined()
+    })
+
+    it('should handle icon as non-string type', () => {
+      // Arrange
+      const mockDataSourceList = [
+        createMockDataSourceListItem({
+          plugin_id: 'test-plugin-id',
+          declaration: {
+            identity: {
+              icon: { url: '/icons/test-icon.png' }, // Object instead of string
+              name: 'test',
+              label: { en_US: 'Test' },
+            },
+          },
+        }),
+      ]
+      mockUseDataSourceList.mockReturnValue({
+        data: mockDataSourceList,
+        isSuccess: true,
+      })
+      mockTransformDataSourceToTool.mockImplementation(item => ({
+        plugin_id: item.plugin_id,
+        icon: item.declaration?.identity?.icon,
+      }))
+      const nodeData = createMockDataSourceNodeData({ plugin_id: 'test-plugin-id' })
+
+      // Act
+      const { result } = renderHook(() => useDatasourceIcon(nodeData), {
+        wrapper: createHookWrapper(),
+      })
+
+      // Assert - Should return the icon object as-is since it's not a string
+      expect(result.current).toEqual({ url: '/icons/test-icon.png' })
+    })
+
+    it('should memoize result based on plugin_id', () => {
+      // Arrange
+      const mockDataSourceList = [
+        createMockDataSourceListItem({
+          plugin_id: 'test-plugin-id',
+        }),
+      ]
+      mockUseDataSourceList.mockReturnValue({
+        data: mockDataSourceList,
+        isSuccess: true,
+      })
+      const nodeData = createMockDataSourceNodeData({ plugin_id: 'test-plugin-id' })
+
+      // Act
+      const { result, rerender } = renderHook(() => useDatasourceIcon(nodeData), {
+        wrapper: createHookWrapper(),
+      })
+      const firstResult = result.current
+
+      // Rerender with same props
+      rerender()
+
+      // Assert - Should return the same memoized result
+      expect(result.current).toBe(firstResult)
+    })
+  })
+})
+
+// ==========================================
+// OptionCard Tests
+// ==========================================
+describe('OptionCard', () => {
+  const defaultProps = {
+    label: 'Test Option',
+    selected: false,
+    nodeData: createMockDataSourceNodeData(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    // Setup default mock for useDatasourceIcon
+    mockUseDataSourceList.mockReturnValue({
+      data: [],
+      isSuccess: true,
+    })
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      renderWithProviders(<OptionCard {...defaultProps} />)
+
+      // Assert
+      expect(screen.getByText('Test Option')).toBeInTheDocument()
+    })
+
+    it('should render label text', () => {
+      // Arrange & Act
+      renderWithProviders(<OptionCard {...defaultProps} label="Custom Label" />)
+
+      // Assert
+      expect(screen.getByText('Custom Label')).toBeInTheDocument()
+    })
+
+    it('should render DatasourceIcon component', () => {
+      // Arrange & Act
+      const { container } = renderWithProviders(<OptionCard {...defaultProps} />)
+
+      // Assert - DatasourceIcon container should exist
+      const iconContainer = container.querySelector('.size-8')
+      expect(iconContainer).toBeInTheDocument()
+    })
+
+    it('should set title attribute for label truncation', () => {
+      // Arrange
+      const longLabel = 'This is a very long label that might be truncated'
+
+      // Act
+      renderWithProviders(<OptionCard {...defaultProps} label={longLabel} />)
+
+      // Assert
+      const labelElement = screen.getByText(longLabel)
+      expect(labelElement).toHaveAttribute('title', longLabel)
+    })
+  })
+
+  describe('Props', () => {
+    describe('selected', () => {
+      it('should apply selected styles when selected is true', () => {
+        // Arrange & Act
+        const { container } = renderWithProviders(
+          <OptionCard {...defaultProps} selected={true} />,
+        )
+
+        // Assert
+        const card = container.firstChild
+        expect(card).toHaveClass('border-components-option-card-option-selected-border')
+        expect(card).toHaveClass('bg-components-option-card-option-selected-bg')
+      })
+
+      it('should apply unselected styles when selected is false', () => {
+        // Arrange & Act
+        const { container } = renderWithProviders(
+          <OptionCard {...defaultProps} selected={false} />,
+        )
+
+        // Assert
+        const card = container.firstChild
+        expect(card).toHaveClass('border-components-option-card-option-border')
+        expect(card).toHaveClass('bg-components-option-card-option-bg')
+      })
+
+      it('should apply text-text-primary to label when selected', () => {
+        // Arrange & Act
+        renderWithProviders(<OptionCard {...defaultProps} selected={true} />)
+
+        // Assert
+        const label = screen.getByText('Test Option')
+        expect(label).toHaveClass('text-text-primary')
+      })
+
+      it('should apply text-text-secondary to label when not selected', () => {
+        // Arrange & Act
+        renderWithProviders(<OptionCard {...defaultProps} selected={false} />)
+
+        // Assert
+        const label = screen.getByText('Test Option')
+        expect(label).toHaveClass('text-text-secondary')
+      })
+    })
+
+    describe('onClick', () => {
+      it('should call onClick when card is clicked', () => {
+        // Arrange
+        const mockOnClick = jest.fn()
+        renderWithProviders(
+          <OptionCard {...defaultProps} onClick={mockOnClick} />,
+        )
+
+        // Act - Click on the label text's parent card
+        const labelElement = screen.getByText('Test Option')
+        const card = labelElement.closest('[class*="cursor-pointer"]')
+        expect(card).toBeInTheDocument()
+        fireEvent.click(card!)
+
+        // Assert
+        expect(mockOnClick).toHaveBeenCalledTimes(1)
+      })
+
+      it('should not crash when onClick is not provided', () => {
+        // Arrange & Act
+        renderWithProviders(
+          <OptionCard {...defaultProps} onClick={undefined} />,
+        )
+
+        // Act - Click on the label text's parent card should not throw
+        const labelElement = screen.getByText('Test Option')
+        const card = labelElement.closest('[class*="cursor-pointer"]')
+        expect(card).toBeInTheDocument()
+        fireEvent.click(card!)
+
+        // Assert - Component should still be rendered
+        expect(screen.getByText('Test Option')).toBeInTheDocument()
+      })
+    })
+
+    describe('nodeData', () => {
+      it('should pass nodeData to useDatasourceIcon hook', () => {
+        // Arrange
+        const customNodeData = createMockDataSourceNodeData({ plugin_id: 'custom-plugin' })
+
+        // Act
+        renderWithProviders(<OptionCard {...defaultProps} nodeData={customNodeData} />)
+
+        // Assert - Hook should be called (via useDataSourceList mock)
+        expect(mockUseDataSourceList).toHaveBeenCalled()
+      })
+    })
+  })
+
+  describe('Styling', () => {
+    it('should have cursor-pointer class', () => {
+      // Arrange & Act
+      const { container } = renderWithProviders(<OptionCard {...defaultProps} />)
+
+      // Assert
+      expect(container.firstChild).toHaveClass('cursor-pointer')
+    })
+
+    it('should have flex layout classes', () => {
+      // Arrange & Act
+      const { container } = renderWithProviders(<OptionCard {...defaultProps} />)
+
+      // Assert
+      expect(container.firstChild).toHaveClass('flex')
+      expect(container.firstChild).toHaveClass('items-center')
+      expect(container.firstChild).toHaveClass('gap-2')
+    })
+
+    it('should have rounded-xl border', () => {
+      // Arrange & Act
+      const { container } = renderWithProviders(<OptionCard {...defaultProps} />)
+
+      // Assert
+      expect(container.firstChild).toHaveClass('rounded-xl')
+      expect(container.firstChild).toHaveClass('border')
+    })
+
+    it('should have padding p-3', () => {
+      // Arrange & Act
+      const { container } = renderWithProviders(<OptionCard {...defaultProps} />)
+
+      // Assert
+      expect(container.firstChild).toHaveClass('p-3')
+    })
+
+    it('should have line-clamp-2 for label truncation', () => {
+      // Arrange & Act
+      renderWithProviders(<OptionCard {...defaultProps} />)
+
+      // Assert
+      const label = screen.getByText('Test Option')
+      expect(label).toHaveClass('line-clamp-2')
+    })
+  })
+
+  describe('Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      // Assert - OptionCard should be a memoized component
+      expect(OptionCard).toBeDefined()
+      // React.memo wraps the component, so we check it renders correctly
+      const { container } = renderWithProviders(<OptionCard {...defaultProps} />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+})
+
+// ==========================================
+// DataSourceOptions Tests
+// ==========================================
+describe('DataSourceOptions', () => {
+  const defaultNodes = createMockPipelineNodes(3)
+  const defaultOptions = defaultNodes.map(createMockDatasourceOption)
+
+  const defaultProps = {
+    pipelineNodes: defaultNodes,
+    datasourceNodeId: '',
+    onSelect: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUseDatasourceOptions.mockReturnValue(defaultOptions)
+    mockUseDataSourceList.mockReturnValue({
+      data: [],
+      isSuccess: true,
+    })
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      renderWithProviders(<DataSourceOptions {...defaultProps} />)
+
+      // Assert
+      expect(screen.getByText('Data Source 1')).toBeInTheDocument()
+      expect(screen.getByText('Data Source 2')).toBeInTheDocument()
+      expect(screen.getByText('Data Source 3')).toBeInTheDocument()
+    })
+
+    it('should render correct number of option cards', () => {
+      // Arrange & Act
+      renderWithProviders(<DataSourceOptions {...defaultProps} />)
+
+      // Assert
+      expect(screen.getByText('Data Source 1')).toBeInTheDocument()
+      expect(screen.getByText('Data Source 2')).toBeInTheDocument()
+      expect(screen.getByText('Data Source 3')).toBeInTheDocument()
+    })
+
+    it('should render with grid layout', () => {
+      // Arrange & Act
+      const { container } = renderWithProviders(<DataSourceOptions {...defaultProps} />)
+
+      // Assert
+      const gridContainer = container.firstChild
+      expect(gridContainer).toHaveClass('grid')
+      expect(gridContainer).toHaveClass('w-full')
+      expect(gridContainer).toHaveClass('grid-cols-4')
+      expect(gridContainer).toHaveClass('gap-1')
+    })
+
+    it('should render no option cards when options is empty', () => {
+      // Arrange
+      mockUseDatasourceOptions.mockReturnValue([])
+
+      // Act
+      const { container } = renderWithProviders(<DataSourceOptions {...defaultProps} />)
+
+      // Assert
+      expect(screen.queryByText('Data Source')).not.toBeInTheDocument()
+      // Grid container should still exist
+      expect(container.firstChild).toHaveClass('grid')
+    })
+
+    it('should render single option card when only one option exists', () => {
+      // Arrange
+      const singleOption = [createMockDatasourceOption(defaultNodes[0])]
+      mockUseDatasourceOptions.mockReturnValue(singleOption)
+
+      // Act
+      renderWithProviders(<DataSourceOptions {...defaultProps} />)
+
+      // Assert
+      expect(screen.getByText('Data Source 1')).toBeInTheDocument()
+      expect(screen.queryByText('Data Source 2')).not.toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Props Tests
+  // ==========================================
+  describe('Props', () => {
+    describe('pipelineNodes', () => {
+      it('should pass pipelineNodes to useDatasourceOptions hook', () => {
+        // Arrange
+        const customNodes = createMockPipelineNodes(2)
+        mockUseDatasourceOptions.mockReturnValue(customNodes.map(createMockDatasourceOption))
+
+        // Act
+        renderWithProviders(
+          <DataSourceOptions {...defaultProps} pipelineNodes={customNodes} />,
+        )
+
+        // Assert
+        expect(mockUseDatasourceOptions).toHaveBeenCalledWith(customNodes)
+      })
+
+      it('should handle empty pipelineNodes array', () => {
+        // Arrange
+        mockUseDatasourceOptions.mockReturnValue([])
+
+        // Act
+        renderWithProviders(
+          <DataSourceOptions {...defaultProps} pipelineNodes={[]} />,
+        )
+
+        // Assert
+        expect(mockUseDatasourceOptions).toHaveBeenCalledWith([])
+      })
+    })
+
+    describe('datasourceNodeId', () => {
+      it('should mark corresponding option as selected', () => {
+        // Arrange & Act
+        const { container } = renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            datasourceNodeId="node-2"
+          />,
+        )
+
+        // Assert - Check for selected styling on second card
+        const cards = container.querySelectorAll('.rounded-xl.border')
+        expect(cards[1]).toHaveClass('border-components-option-card-option-selected-border')
+      })
+
+      it('should show no selection when datasourceNodeId is empty', () => {
+        // Arrange & Act
+        const { container } = renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            datasourceNodeId=""
+          />,
+        )
+
+        // Assert - No card should have selected styling
+        const selectedCards = container.querySelectorAll('.border-components-option-card-option-selected-border')
+        expect(selectedCards).toHaveLength(0)
+      })
+
+      it('should show no selection when datasourceNodeId does not match any option', () => {
+        // Arrange & Act
+        const { container } = renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            datasourceNodeId="non-existent-node"
+          />,
+        )
+
+        // Assert
+        const selectedCards = container.querySelectorAll('.border-components-option-card-option-selected-border')
+        expect(selectedCards).toHaveLength(0)
+      })
+
+      it('should update selection when datasourceNodeId changes', () => {
+        // Arrange
+        const { container, rerender } = renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            datasourceNodeId="node-1"
+          />,
+        )
+
+        // Assert initial selection
+        let cards = container.querySelectorAll('.rounded-xl.border')
+        expect(cards[0]).toHaveClass('border-components-option-card-option-selected-border')
+
+        // Act - Change selection
+        rerender(
+          <QueryClientProvider client={createQueryClient()}>
+            <DataSourceOptions
+              {...defaultProps}
+              datasourceNodeId="node-2"
+            />
+          </QueryClientProvider>,
+        )
+
+        // Assert new selection
+        cards = container.querySelectorAll('.rounded-xl.border')
+        expect(cards[0]).not.toHaveClass('border-components-option-card-option-selected-border')
+        expect(cards[1]).toHaveClass('border-components-option-card-option-selected-border')
+      })
+    })
+
+    describe('onSelect', () => {
+      it('should receive onSelect callback', () => {
+        // Arrange
+        const mockOnSelect = jest.fn()
+
+        // Act
+        renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            onSelect={mockOnSelect}
+          />,
+        )
+
+        // Assert - Component renders without error
+        expect(screen.getByText('Data Source 1')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ==========================================
+  // Side Effects and Cleanup Tests
+  // ==========================================
+  describe('Side Effects and Cleanup', () => {
+    describe('useEffect - Auto-select first option', () => {
+      it('should auto-select first option when options exist and no datasourceNodeId', () => {
+        // Arrange
+        const mockOnSelect = jest.fn()
+
+        // Act
+        renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            datasourceNodeId=""
+            onSelect={mockOnSelect}
+          />,
+        )
+
+        // Assert - Should auto-select first option on mount
+        expect(mockOnSelect).toHaveBeenCalledTimes(1)
+        expect(mockOnSelect).toHaveBeenCalledWith({
+          nodeId: 'node-1',
+          nodeData: defaultOptions[0].data,
+        } satisfies Datasource)
+      })
+
+      it('should NOT auto-select when datasourceNodeId is provided', () => {
+        // Arrange
+        const mockOnSelect = jest.fn()
+
+        // Act
+        renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            datasourceNodeId="node-2"
+            onSelect={mockOnSelect}
+          />,
+        )
+
+        // Assert - Should not auto-select because datasourceNodeId is provided
+        expect(mockOnSelect).not.toHaveBeenCalled()
+      })
+
+      it('should NOT auto-select when options array is empty', () => {
+        // Arrange
+        mockUseDatasourceOptions.mockReturnValue([])
+        const mockOnSelect = jest.fn()
+
+        // Act
+        renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            pipelineNodes={[]}
+            datasourceNodeId=""
+            onSelect={mockOnSelect}
+          />,
+        )
+
+        // Assert
+        expect(mockOnSelect).not.toHaveBeenCalled()
+      })
+
+      it('should only run useEffect once on initial mount', () => {
+        // Arrange
+        const mockOnSelect = jest.fn()
+        const { rerender } = renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            datasourceNodeId=""
+            onSelect={mockOnSelect}
+          />,
+        )
+
+        // Assert - Called once on mount
+        expect(mockOnSelect).toHaveBeenCalledTimes(1)
+
+        // Act - Rerender with same props
+        rerender(
+          <QueryClientProvider client={createQueryClient()}>
+            <DataSourceOptions
+              {...defaultProps}
+              datasourceNodeId=""
+              onSelect={mockOnSelect}
+            />
+          </QueryClientProvider>,
+        )
+
+        // Assert - Still called only once (useEffect has empty dependency array)
+        expect(mockOnSelect).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+
+  // ==========================================
+  // Callback Stability and Memoization Tests
+  // ==========================================
+  describe('Callback Stability and Memoization', () => {
+    it('should maintain callback reference stability across renders with same props', () => {
+      // Arrange
+      const mockOnSelect = jest.fn()
+
+      const { rerender } = renderWithProviders(
+        <DataSourceOptions
+          {...defaultProps}
+          onSelect={mockOnSelect}
+        />,
+      )
+
+      // Get initial click handlers
+      expect(screen.getByText('Data Source 1')).toBeInTheDocument()
+
+      // Trigger clicks to test handlers work
+      fireEvent.click(screen.getByText('Data Source 1'))
+      expect(mockOnSelect).toHaveBeenCalledTimes(2) // 1 auto-select + 1 click
+
+      // Act - Rerender with same onSelect reference
+      rerender(
+        <QueryClientProvider client={createQueryClient()}>
+          <DataSourceOptions
+            {...defaultProps}
+            onSelect={mockOnSelect}
+          />
+        </QueryClientProvider>,
+      )
+
+      // Assert - Component still works after rerender
+      fireEvent.click(screen.getByText('Data Source 2'))
+      expect(mockOnSelect).toHaveBeenCalledTimes(3)
+    })
+
+    it('should update callback when onSelect changes', () => {
+      // Arrange
+      const mockOnSelect1 = jest.fn()
+      const mockOnSelect2 = jest.fn()
+
+      const { rerender } = renderWithProviders(
+        <DataSourceOptions
+          {...defaultProps}
+          datasourceNodeId="node-1"
+          onSelect={mockOnSelect1}
+        />,
+      )
+
+      // Act - Click with first callback
+      fireEvent.click(screen.getByText('Data Source 2'))
+      expect(mockOnSelect1).toHaveBeenCalledTimes(1)
+
+      // Act - Change callback
+      rerender(
+        <QueryClientProvider client={createQueryClient()}>
+          <DataSourceOptions
+            {...defaultProps}
+            datasourceNodeId="node-1"
+            onSelect={mockOnSelect2}
+          />
+        </QueryClientProvider>,
+      )
+
+      // Act - Click with new callback
+      fireEvent.click(screen.getByText('Data Source 3'))
+
+      // Assert - New callback should be called
+      expect(mockOnSelect2).toHaveBeenCalledTimes(1)
+      expect(mockOnSelect2).toHaveBeenCalledWith({
+        nodeId: 'node-3',
+        nodeData: defaultOptions[2].data,
+      })
+    })
+
+    it('should update callback when options change', () => {
+      // Arrange
+      const mockOnSelect = jest.fn()
+
+      const { rerender } = renderWithProviders(
+        <DataSourceOptions
+          {...defaultProps}
+          datasourceNodeId="node-1"
+          onSelect={mockOnSelect}
+        />,
+      )
+
+      // Act - Click first option
+      fireEvent.click(screen.getByText('Data Source 1'))
+      expect(mockOnSelect).toHaveBeenCalledWith({
+        nodeId: 'node-1',
+        nodeData: defaultOptions[0].data,
+      })
+
+      // Act - Change options
+      const newNodes = createMockPipelineNodes(2)
+      const newOptions = newNodes.map(node => createMockDatasourceOption(node))
+      mockUseDatasourceOptions.mockReturnValue(newOptions)
+
+      rerender(
+        <QueryClientProvider client={createQueryClient()}>
+          <DataSourceOptions
+            pipelineNodes={newNodes}
+            datasourceNodeId="node-1"
+            onSelect={mockOnSelect}
+          />
+        </QueryClientProvider>,
+      )
+
+      // Act - Click updated first option
+      fireEvent.click(screen.getByText('Data Source 1'))
+
+      // Assert - Callback receives new option data
+      expect(mockOnSelect).toHaveBeenLastCalledWith({
+        nodeId: newOptions[0].value,
+        nodeData: newOptions[0].data,
+      })
+    })
+  })
+
+  // ==========================================
+  // User Interactions and Event Handlers Tests
+  // ==========================================
+  describe('User Interactions and Event Handlers', () => {
+    describe('Option Selection', () => {
+      it('should call onSelect with correct datasource when clicking an option', () => {
+        // Arrange
+        const mockOnSelect = jest.fn()
+        renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            datasourceNodeId="node-1"
+            onSelect={mockOnSelect}
+          />,
+        )
+
+        // Act - Click second option
+        fireEvent.click(screen.getByText('Data Source 2'))
+
+        // Assert
+        expect(mockOnSelect).toHaveBeenCalledTimes(1)
+        expect(mockOnSelect).toHaveBeenCalledWith({
+          nodeId: 'node-2',
+          nodeData: defaultOptions[1].data,
+        } satisfies Datasource)
+      })
+
+      it('should allow selecting already selected option', () => {
+        // Arrange
+        const mockOnSelect = jest.fn()
+        renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            datasourceNodeId="node-1"
+            onSelect={mockOnSelect}
+          />,
+        )
+
+        // Act - Click already selected option
+        fireEvent.click(screen.getByText('Data Source 1'))
+
+        // Assert
+        expect(mockOnSelect).toHaveBeenCalledTimes(1)
+        expect(mockOnSelect).toHaveBeenCalledWith({
+          nodeId: 'node-1',
+          nodeData: defaultOptions[0].data,
+        })
+      })
+
+      it('should allow multiple sequential selections', () => {
+        // Arrange
+        const mockOnSelect = jest.fn()
+        renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            datasourceNodeId="node-1"
+            onSelect={mockOnSelect}
+          />,
+        )
+
+        // Act - Click options sequentially
+        fireEvent.click(screen.getByText('Data Source 1'))
+        fireEvent.click(screen.getByText('Data Source 2'))
+        fireEvent.click(screen.getByText('Data Source 3'))
+
+        // Assert
+        expect(mockOnSelect).toHaveBeenCalledTimes(3)
+        expect(mockOnSelect).toHaveBeenNthCalledWith(1, {
+          nodeId: 'node-1',
+          nodeData: defaultOptions[0].data,
+        })
+        expect(mockOnSelect).toHaveBeenNthCalledWith(2, {
+          nodeId: 'node-2',
+          nodeData: defaultOptions[1].data,
+        })
+        expect(mockOnSelect).toHaveBeenNthCalledWith(3, {
+          nodeId: 'node-3',
+          nodeData: defaultOptions[2].data,
+        })
+      })
+    })
+
+    describe('handelSelect Internal Logic', () => {
+      it('should handle rapid successive clicks', async () => {
+        // Arrange
+        const mockOnSelect = jest.fn()
+        renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            datasourceNodeId="node-1"
+            onSelect={mockOnSelect}
+          />,
+        )
+
+        // Act - Rapid clicks
+        await act(async () => {
+          fireEvent.click(screen.getByText('Data Source 1'))
+          fireEvent.click(screen.getByText('Data Source 2'))
+          fireEvent.click(screen.getByText('Data Source 3'))
+          fireEvent.click(screen.getByText('Data Source 1'))
+          fireEvent.click(screen.getByText('Data Source 2'))
+        })
+
+        // Assert - All clicks should be registered
+        expect(mockOnSelect).toHaveBeenCalledTimes(5)
+      })
+    })
+  })
+
+  // ==========================================
+  // Edge Cases and Error Handling Tests
+  // ==========================================
+  describe('Edge Cases and Error Handling', () => {
+    describe('Empty States', () => {
+      it('should handle empty options array gracefully', () => {
+        // Arrange
+        mockUseDatasourceOptions.mockReturnValue([])
+
+        // Act
+        const { container } = renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            pipelineNodes={[]}
+          />,
+        )
+
+        // Assert
+        expect(container.firstChild).toBeInTheDocument()
+      })
+
+      it('should not crash when datasourceNodeId is undefined', () => {
+        // Arrange & Act
+        renderWithProviders(
+          <DataSourceOptions
+            pipelineNodes={defaultNodes}
+            datasourceNodeId={undefined as unknown as string}
+            onSelect={jest.fn()}
+          />,
+        )
+
+        // Assert
+        expect(screen.getByText('Data Source 1')).toBeInTheDocument()
+      })
+    })
+
+    describe('Null/Undefined Values', () => {
+      it('should handle option with missing data properties', () => {
+        // Arrange
+        const optionWithMinimalData = [{
+          label: 'Minimal Option',
+          value: 'minimal-1',
+          data: {
+            title: 'Minimal',
+            desc: '',
+            type: BlockEnum.DataSource,
+            plugin_id: '',
+            provider_type: '',
+            provider_name: '',
+            datasource_name: '',
+            datasource_label: '',
+            datasource_parameters: {},
+            datasource_configurations: {},
+          } as DataSourceNodeType,
+        }]
+        mockUseDatasourceOptions.mockReturnValue(optionWithMinimalData)
+
+        // Act
+        renderWithProviders(<DataSourceOptions {...defaultProps} />)
+
+        // Assert
+        expect(screen.getByText('Minimal Option')).toBeInTheDocument()
+      })
+    })
+
+    describe('Large Data Sets', () => {
+      it('should handle large number of options', () => {
+        // Arrange
+        const manyNodes = createMockPipelineNodes(50)
+        const manyOptions = manyNodes.map(createMockDatasourceOption)
+        mockUseDatasourceOptions.mockReturnValue(manyOptions)
+
+        // Act
+        renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            pipelineNodes={manyNodes}
+          />,
+        )
+
+        // Assert
+        expect(screen.getByText('Data Source 1')).toBeInTheDocument()
+        expect(screen.getByText('Data Source 50')).toBeInTheDocument()
+      })
+    })
+
+    describe('Special Characters in Data', () => {
+      it('should handle special characters in option labels', () => {
+        // Arrange
+        const specialNode = createMockPipelineNode({
+          id: 'special-node',
+          data: createMockDataSourceNodeData({
+            title: 'Data Source <script>alert("xss")</script>',
+          }),
+        })
+        const specialOptions = [createMockDatasourceOption(specialNode)]
+        mockUseDatasourceOptions.mockReturnValue(specialOptions)
+
+        // Act
+        renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            pipelineNodes={[specialNode]}
+          />,
+        )
+
+        // Assert - Special characters should be escaped/rendered safely
+        expect(screen.getByText('Data Source <script>alert("xss")</script>')).toBeInTheDocument()
+      })
+
+      it('should handle unicode characters in option labels', () => {
+        // Arrange
+        const unicodeNode = createMockPipelineNode({
+          id: 'unicode-node',
+          data: createMockDataSourceNodeData({
+            title: '数据源 📁 Source émoji',
+          }),
+        })
+        const unicodeOptions = [createMockDatasourceOption(unicodeNode)]
+        mockUseDatasourceOptions.mockReturnValue(unicodeOptions)
+
+        // Act
+        renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            pipelineNodes={[unicodeNode]}
+          />,
+        )
+
+        // Assert
+        expect(screen.getByText('数据源 📁 Source émoji')).toBeInTheDocument()
+      })
+
+      it('should handle empty string as option value', () => {
+        // Arrange
+        const emptyValueOption = [{
+          label: 'Empty Value Option',
+          value: '',
+          data: createMockDataSourceNodeData(),
+        }]
+        mockUseDatasourceOptions.mockReturnValue(emptyValueOption)
+
+        // Act
+        renderWithProviders(<DataSourceOptions {...defaultProps} />)
+
+        // Assert
+        expect(screen.getByText('Empty Value Option')).toBeInTheDocument()
+      })
+    })
+
+    describe('Boundary Conditions', () => {
+      it('should handle single option selection correctly', () => {
+        // Arrange
+        const singleOption = [createMockDatasourceOption(defaultNodes[0])]
+        mockUseDatasourceOptions.mockReturnValue(singleOption)
+        const mockOnSelect = jest.fn()
+
+        // Act
+        renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            datasourceNodeId="node-1"
+            onSelect={mockOnSelect}
+          />,
+        )
+
+        // Assert - Click should still work
+        fireEvent.click(screen.getByText('Data Source 1'))
+        expect(mockOnSelect).toHaveBeenCalledTimes(1)
+      })
+
+      it('should handle options with same labels but different values', () => {
+        // Arrange
+        const duplicateLabelOptions = [
+          {
+            label: 'Duplicate Label',
+            value: 'node-a',
+            data: createMockDataSourceNodeData({ plugin_id: 'plugin-a' }),
+          },
+          {
+            label: 'Duplicate Label',
+            value: 'node-b',
+            data: createMockDataSourceNodeData({ plugin_id: 'plugin-b' }),
+          },
+        ]
+        mockUseDatasourceOptions.mockReturnValue(duplicateLabelOptions)
+        const mockOnSelect = jest.fn()
+
+        // Act
+        renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            datasourceNodeId="node-a"
+            onSelect={mockOnSelect}
+          />,
+        )
+
+        // Assert - Both should render
+        const labels = screen.getAllByText('Duplicate Label')
+        expect(labels).toHaveLength(2)
+
+        // Click second one
+        fireEvent.click(labels[1])
+        expect(mockOnSelect).toHaveBeenCalledWith({
+          nodeId: 'node-b',
+          nodeData: expect.objectContaining({ plugin_id: 'plugin-b' }),
+        })
+      })
+    })
+
+    describe('Component Unmounting', () => {
+      it('should handle unmounting without errors', () => {
+        // Arrange
+        const mockOnSelect = jest.fn()
+        const { unmount } = renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            onSelect={mockOnSelect}
+          />,
+        )
+
+        // Act
+        unmount()
+
+        // Assert - No errors thrown, component cleanly unmounted
+        expect(screen.queryByText('Data Source 1')).not.toBeInTheDocument()
+      })
+
+      it('should handle unmounting during rapid interactions', async () => {
+        // Arrange
+        const mockOnSelect = jest.fn()
+        const { unmount } = renderWithProviders(
+          <DataSourceOptions
+            {...defaultProps}
+            datasourceNodeId="node-1"
+            onSelect={mockOnSelect}
+          />,
+        )
+
+        // Act - Start interactions then unmount
+        fireEvent.click(screen.getByText('Data Source 1'))
+
+        // Unmount during/after interaction
+        unmount()
+
+        // Assert - Should not throw
+        expect(screen.queryByText('Data Source 1')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  // ==========================================
+  // Integration Tests
+  // ==========================================
+  describe('Integration', () => {
+    it('should render OptionCard with correct props', () => {
+      // Arrange & Act
+      const { container } = renderWithProviders(<DataSourceOptions {...defaultProps} />)
+
+      // Assert - Verify real OptionCard components are rendered
+      const cards = container.querySelectorAll('.rounded-xl.border')
+      expect(cards).toHaveLength(3)
+    })
+
+    it('should correctly pass selected state to OptionCard', () => {
+      // Arrange & Act
+      const { container } = renderWithProviders(
+        <DataSourceOptions
+          {...defaultProps}
+          datasourceNodeId="node-2"
+        />,
+      )
+
+      // Assert
+      const cards = container.querySelectorAll('.rounded-xl.border')
+      expect(cards[0]).not.toHaveClass('border-components-option-card-option-selected-border')
+      expect(cards[1]).toHaveClass('border-components-option-card-option-selected-border')
+      expect(cards[2]).not.toHaveClass('border-components-option-card-option-selected-border')
+    })
+
+    it('should use option.value as key for React rendering', () => {
+      // This test verifies that React doesn't throw duplicate key warnings
+      // Arrange
+      const uniqueValueOptions = createMockPipelineNodes(5).map(createMockDatasourceOption)
+      mockUseDatasourceOptions.mockReturnValue(uniqueValueOptions)
+
+      // Act - Should render without console warnings about duplicate keys
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(jest.fn())
+      renderWithProviders(<DataSourceOptions {...defaultProps} />)
+
+      // Assert
+      expect(consoleSpy).not.toHaveBeenCalledWith(
+        expect.stringContaining('key'),
+      )
+      consoleSpy.mockRestore()
+    })
+  })
+
+  // ==========================================
+  // All Prop Variations Tests
+  // ==========================================
+  describe('All Prop Variations', () => {
+    it.each([
+      { datasourceNodeId: '', description: 'empty string' },
+      { datasourceNodeId: 'node-1', description: 'first node' },
+      { datasourceNodeId: 'node-2', description: 'middle node' },
+      { datasourceNodeId: 'node-3', description: 'last node' },
+      { datasourceNodeId: 'non-existent', description: 'non-existent node' },
+    ])('should handle datasourceNodeId as $description', ({ datasourceNodeId }) => {
+      // Arrange & Act
+      renderWithProviders(
+        <DataSourceOptions
+          {...defaultProps}
+          datasourceNodeId={datasourceNodeId}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('Data Source 1')).toBeInTheDocument()
+    })
+
+    it.each([
+      { count: 0, description: 'zero options' },
+      { count: 1, description: 'single option' },
+      { count: 3, description: 'few options' },
+      { count: 10, description: 'many options' },
+    ])('should render correctly with $description', ({ count }) => {
+      // Arrange
+      const nodes = createMockPipelineNodes(count)
+      const options = nodes.map(createMockDatasourceOption)
+      mockUseDatasourceOptions.mockReturnValue(options)
+
+      // Act
+      renderWithProviders(
+        <DataSourceOptions
+          pipelineNodes={nodes}
+          datasourceNodeId=""
+          onSelect={jest.fn()}
+        />,
+      )
+
+      // Assert
+      if (count > 0)
+        expect(screen.getByText('Data Source 1')).toBeInTheDocument()
+      else
+        expect(screen.queryByText('Data Source 1')).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx
index a3ea97ac42..2f862ce435 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 import DatasourceIcon from './datasource-icon'
 import { useDatasourceIcon } from './hooks'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/index.spec.tsx
new file mode 100644
index 0000000000..2e370c5cbc
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/index.spec.tsx
@@ -0,0 +1,1056 @@
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import React from 'react'
+import CredentialSelector from './index'
+import type { CredentialSelectorProps } from './index'
+import type { DataSourceCredential } from '@/types/pipeline'
+
+// Mock CredentialTypeEnum to avoid deep import chain issues
+enum MockCredentialTypeEnum {
+  OAUTH2 = 'oauth2',
+  API_KEY = 'api_key',
+}
+
+// Mock plugin-auth module to avoid deep import chain issues
+jest.mock('@/app/components/plugins/plugin-auth', () => ({
+  CredentialTypeEnum: {
+    OAUTH2: 'oauth2',
+    API_KEY: 'api_key',
+  },
+}))
+
+// Mock portal-to-follow-elem - use React state to properly handle open/close
+jest.mock('@/app/components/base/portal-to-follow-elem', () => {
+  const MockPortalToFollowElem = ({ children, open }: any) => {
+    return (
+      <div data-testid="portal-root" data-open={open}>
+        {React.Children.map(children, (child: any) => {
+          if (!child)
+            return null
+          // Pass open state to children via context-like prop cloning
+          return React.cloneElement(child, { __portalOpen: open })
+        })}
+      </div>
+    )
+  }
+
+  const MockPortalToFollowElemTrigger = ({ children, onClick, className, __portalOpen }: any) => (
+    <div data-testid="portal-trigger" onClick={onClick} className={className} data-open={__portalOpen}>
+      {children}
+    </div>
+  )
+
+  const MockPortalToFollowElemContent = ({ children, className, __portalOpen }: any) => {
+    // Match actual behavior: returns null when not open
+    if (!__portalOpen)
+      return null
+    return (
+      <div data-testid="portal-content" className={className}>
+        {children}
+      </div>
+    )
+  }
+
+  return {
+    PortalToFollowElem: MockPortalToFollowElem,
+    PortalToFollowElemTrigger: MockPortalToFollowElemTrigger,
+    PortalToFollowElemContent: MockPortalToFollowElemContent,
+  }
+})
+
+// CredentialIcon - imported directly (not mocked)
+// This is a simple UI component with no external dependencies
+
+// ==========================================
+// Test Data Builders
+// ==========================================
+const createMockCredential = (overrides?: Partial<DataSourceCredential>): DataSourceCredential => ({
+  id: 'cred-1',
+  name: 'Test Credential',
+  avatar_url: 'https://example.com/avatar.png',
+  credential: { key: 'value' },
+  is_default: false,
+  type: MockCredentialTypeEnum.OAUTH2 as unknown as DataSourceCredential['type'],
+  ...overrides,
+})
+
+const createMockCredentials = (count: number = 3): DataSourceCredential[] =>
+  Array.from({ length: count }, (_, i) =>
+    createMockCredential({
+      id: `cred-${i + 1}`,
+      name: `Credential ${i + 1}`,
+      avatar_url: `https://example.com/avatar-${i + 1}.png`,
+      is_default: i === 0,
+    }),
+  )
+
+const createDefaultProps = (overrides?: Partial<CredentialSelectorProps>): CredentialSelectorProps => ({
+  currentCredentialId: 'cred-1',
+  onCredentialChange: jest.fn(),
+  credentials: createMockCredentials(),
+  ...overrides,
+})
+
+describe('CredentialSelector', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // ==========================================
+  // Rendering Tests - Verify component renders correctly
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<CredentialSelector {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('portal-root')).toBeInTheDocument()
+      expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
+    })
+
+    it('should render current credential name in trigger', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<CredentialSelector {...props} />)
+
+      // Assert
+      expect(screen.getByText('Credential 1')).toBeInTheDocument()
+    })
+
+    it('should render credential icon with correct props', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<CredentialSelector {...props} />)
+
+      // Assert - CredentialIcon renders an img when avatarUrl is provided
+      const iconImg = container.querySelector('img')
+      expect(iconImg).toBeInTheDocument()
+      expect(iconImg).toHaveAttribute('src', 'https://example.com/avatar-1.png')
+    })
+
+    it('should render dropdown arrow icon', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<CredentialSelector {...props} />)
+
+      // Assert
+      const svgIcon = container.querySelector('svg')
+      expect(svgIcon).toBeInTheDocument()
+    })
+
+    it('should not render dropdown content initially', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<CredentialSelector {...props} />)
+
+      // Assert
+      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+    })
+
+    it('should render all credentials in dropdown when opened', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<CredentialSelector {...props} />)
+
+      // Act - Click trigger to open dropdown
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      // Assert - All credentials should be visible (current credential appears in both trigger and list)
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+      // 3 in dropdown list + 1 in trigger (current) = 4 total
+      expect(screen.getAllByText(/Credential \d/)).toHaveLength(4)
+    })
+  })
+
+  // ==========================================
+  // Props Testing - Verify all prop variations
+  // ==========================================
+  describe('Props', () => {
+    describe('currentCredentialId prop', () => {
+      it('should display first credential when currentCredentialId matches first', () => {
+        // Arrange
+        const props = createDefaultProps({ currentCredentialId: 'cred-1' })
+
+        // Act
+        render(<CredentialSelector {...props} />)
+
+        // Assert
+        expect(screen.getByText('Credential 1')).toBeInTheDocument()
+      })
+
+      it('should display second credential when currentCredentialId matches second', () => {
+        // Arrange
+        const props = createDefaultProps({ currentCredentialId: 'cred-2' })
+
+        // Act
+        render(<CredentialSelector {...props} />)
+
+        // Assert
+        expect(screen.getByText('Credential 2')).toBeInTheDocument()
+      })
+
+      it('should display third credential when currentCredentialId matches third', () => {
+        // Arrange
+        const props = createDefaultProps({ currentCredentialId: 'cred-3' })
+
+        // Act
+        render(<CredentialSelector {...props} />)
+
+        // Assert
+        expect(screen.getByText('Credential 3')).toBeInTheDocument()
+      })
+
+      it.each([
+        ['cred-1', 'Credential 1'],
+        ['cred-2', 'Credential 2'],
+        ['cred-3', 'Credential 3'],
+      ])('should display %s credential name when currentCredentialId is %s', (credId, expectedName) => {
+        // Arrange
+        const props = createDefaultProps({ currentCredentialId: credId })
+
+        // Act
+        render(<CredentialSelector {...props} />)
+
+        // Assert
+        expect(screen.getByText(expectedName)).toBeInTheDocument()
+      })
+    })
+
+    describe('credentials prop', () => {
+      it('should render single credential correctly', () => {
+        // Arrange
+        const props = createDefaultProps({
+          credentials: [createMockCredential()],
+          currentCredentialId: 'cred-1',
+        })
+
+        // Act
+        render(<CredentialSelector {...props} />)
+
+        // Assert
+        expect(screen.getByText('Test Credential')).toBeInTheDocument()
+      })
+
+      it('should render multiple credentials in dropdown', () => {
+        // Arrange
+        const props = createDefaultProps({
+          credentials: createMockCredentials(5),
+          currentCredentialId: 'cred-1',
+        })
+        render(<CredentialSelector {...props} />)
+
+        // Act
+        const trigger = screen.getByTestId('portal-trigger')
+        fireEvent.click(trigger)
+
+        // Assert - 5 in dropdown + 1 in trigger (current credential appears twice)
+        expect(screen.getAllByText(/Credential \d/).length).toBe(6)
+      })
+
+      it('should handle credentials with special characters in name', () => {
+        // Arrange
+        const props = createDefaultProps({
+          credentials: [createMockCredential({ id: 'cred-special', name: 'Test & Credential <special>' })],
+          currentCredentialId: 'cred-special',
+        })
+
+        // Act
+        render(<CredentialSelector {...props} />)
+
+        // Assert
+        expect(screen.getByText('Test & Credential <special>')).toBeInTheDocument()
+      })
+    })
+
+    describe('onCredentialChange prop', () => {
+      it('should be called when selecting a credential', () => {
+        // Arrange
+        const mockOnChange = jest.fn()
+        const props = createDefaultProps({ onCredentialChange: mockOnChange })
+        render(<CredentialSelector {...props} />)
+
+        // Act - Open dropdown
+        const trigger = screen.getByTestId('portal-trigger')
+        fireEvent.click(trigger)
+
+        // Click on second credential
+        const credential2 = screen.getByText('Credential 2')
+        fireEvent.click(credential2)
+
+        // Assert
+        expect(mockOnChange).toHaveBeenCalledWith('cred-2')
+      })
+
+      it.each([
+        ['cred-2', 'Credential 2'],
+        ['cred-3', 'Credential 3'],
+      ])('should call onCredentialChange with %s when selecting %s', (credId, credentialName) => {
+        // Arrange
+        const mockOnChange = jest.fn()
+        const props = createDefaultProps({ onCredentialChange: mockOnChange })
+        render(<CredentialSelector {...props} />)
+
+        // Act - Open dropdown and select credential
+        const trigger = screen.getByTestId('portal-trigger')
+        fireEvent.click(trigger)
+
+        // Get the dropdown item using within() to scope query to portal content
+        const portalContent = screen.getByTestId('portal-content')
+        const credentialOption = within(portalContent).getByText(credentialName)
+        fireEvent.click(credentialOption)
+
+        // Assert
+        expect(mockOnChange).toHaveBeenCalledWith(credId)
+      })
+
+      it('should call onCredentialChange with cred-1 when selecting Credential 1 in dropdown', () => {
+        // Arrange - Start with cred-2 selected so cred-1 is only in dropdown
+        const mockOnChange = jest.fn()
+        const props = createDefaultProps({
+          onCredentialChange: mockOnChange,
+          currentCredentialId: 'cred-2',
+        })
+        render(<CredentialSelector {...props} />)
+
+        // Act - Open dropdown and select Credential 1
+        const trigger = screen.getByTestId('portal-trigger')
+        fireEvent.click(trigger)
+
+        const credential1 = screen.getByText('Credential 1')
+        fireEvent.click(credential1)
+
+        // Assert
+        expect(mockOnChange).toHaveBeenCalledWith('cred-1')
+      })
+    })
+  })
+
+  // ==========================================
+  // User Interactions - Test event handlers
+  // ==========================================
+  describe('User Interactions', () => {
+    it('should toggle dropdown open when trigger is clicked', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<CredentialSelector {...props} />)
+
+      // Assert - Initially closed
+      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+
+      // Act - Click trigger
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      // Assert - Now open
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+    })
+
+    it('should call onCredentialChange when clicking a credential item', () => {
+      // Arrange
+      const mockOnChange = jest.fn()
+      const props = createDefaultProps({ onCredentialChange: mockOnChange })
+      render(<CredentialSelector {...props} />)
+
+      // Act
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+      const credential2 = screen.getByText('Credential 2')
+      fireEvent.click(credential2)
+
+      // Assert
+      expect(mockOnChange).toHaveBeenCalledTimes(1)
+      expect(mockOnChange).toHaveBeenCalledWith('cred-2')
+    })
+
+    it('should close dropdown after selecting a credential', () => {
+      // Arrange
+      const mockOnChange = jest.fn()
+      const props = createDefaultProps({ onCredentialChange: mockOnChange })
+      render(<CredentialSelector {...props} />)
+
+      // Act - Open and select
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+
+      const credential2 = screen.getByText('Credential 2')
+      fireEvent.click(credential2)
+
+      // Assert - The handleCredentialChange calls toggle(), which should change the open state
+      expect(mockOnChange).toHaveBeenCalled()
+    })
+
+    it('should handle rapid consecutive clicks on trigger', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<CredentialSelector {...props} />)
+
+      // Act - Rapid clicks
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+      fireEvent.click(trigger)
+      fireEvent.click(trigger)
+
+      // Assert - Should not crash
+      expect(trigger).toBeInTheDocument()
+    })
+
+    it('should allow selecting credentials multiple times', () => {
+      // Arrange - Start with cred-2 selected so we can select other credentials
+      const mockOnChange = jest.fn()
+      const props = createDefaultProps({
+        onCredentialChange: mockOnChange,
+        currentCredentialId: 'cred-2',
+      })
+
+      render(<CredentialSelector {...props} />)
+
+      // Act & Assert - Select Credential 1 (different from current)
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      const credential1 = screen.getByText('Credential 1')
+      fireEvent.click(credential1)
+
+      expect(mockOnChange).toHaveBeenCalledWith('cred-1')
+    })
+  })
+
+  // ==========================================
+  // Side Effects and Cleanup - Test useEffect behavior
+  // ==========================================
+  describe('Side Effects and Cleanup', () => {
+    it('should auto-select first credential when currentCredential is not found and credentials exist', () => {
+      // Arrange
+      const mockOnChange = jest.fn()
+      const props = createDefaultProps({
+        currentCredentialId: 'non-existent-id',
+        onCredentialChange: mockOnChange,
+      })
+
+      // Act
+      render(<CredentialSelector {...props} />)
+
+      // Assert - Should auto-select first credential
+      expect(mockOnChange).toHaveBeenCalledWith('cred-1')
+    })
+
+    it('should not call onCredentialChange when currentCredential is found', () => {
+      // Arrange
+      const mockOnChange = jest.fn()
+      const props = createDefaultProps({
+        currentCredentialId: 'cred-2',
+        onCredentialChange: mockOnChange,
+      })
+
+      // Act
+      render(<CredentialSelector {...props} />)
+
+      // Assert - Should not auto-select
+      expect(mockOnChange).not.toHaveBeenCalled()
+    })
+
+    it('should not call onCredentialChange when credentials array is empty', () => {
+      // Arrange
+      const mockOnChange = jest.fn()
+      const props = createDefaultProps({
+        currentCredentialId: 'cred-1',
+        credentials: [],
+        onCredentialChange: mockOnChange,
+      })
+
+      // Act
+      render(<CredentialSelector {...props} />)
+
+      // Assert - Should not call since no credentials to select
+      expect(mockOnChange).not.toHaveBeenCalled()
+    })
+
+    it('should auto-select when credentials change and currentCredential becomes invalid', async () => {
+      // Arrange
+      const mockOnChange = jest.fn()
+      const initialCredentials = createMockCredentials(3)
+      const props = createDefaultProps({
+        currentCredentialId: 'cred-1',
+        credentials: initialCredentials,
+        onCredentialChange: mockOnChange,
+      })
+
+      const { rerender } = render(<CredentialSelector {...props} />)
+      expect(mockOnChange).not.toHaveBeenCalled()
+
+      // Act - Change credentials to not include current
+      const newCredentials = [
+        createMockCredential({ id: 'cred-4', name: 'New Credential 4' }),
+        createMockCredential({ id: 'cred-5', name: 'New Credential 5' }),
+      ]
+      rerender(
+        <CredentialSelector
+          {...props}
+          credentials={newCredentials}
+        />,
+      )
+
+      // Assert - Should auto-select first of new credentials
+      await waitFor(() => {
+        expect(mockOnChange).toHaveBeenCalledWith('cred-4')
+      })
+    })
+
+    it('should not trigger auto-select effect on every render with same props', () => {
+      // Arrange
+      const mockOnChange = jest.fn()
+      const props = createDefaultProps({ onCredentialChange: mockOnChange })
+
+      // Act - Render and rerender with same props
+      const { rerender } = render(<CredentialSelector {...props} />)
+      rerender(<CredentialSelector {...props} />)
+      rerender(<CredentialSelector {...props} />)
+
+      // Assert - onCredentialChange should not be called for auto-selection
+      expect(mockOnChange).not.toHaveBeenCalled()
+    })
+  })
+
+  // ==========================================
+  // Callback Stability and Memoization - Test useCallback behavior
+  // ==========================================
+  describe('Callback Stability and Memoization', () => {
+    it('should have stable handleCredentialChange callback', () => {
+      // Arrange
+      const mockOnChange = jest.fn()
+      const props = createDefaultProps({ onCredentialChange: mockOnChange })
+      render(<CredentialSelector {...props} />)
+
+      // Act - Open dropdown and select
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+      const credential = screen.getByText('Credential 2')
+      fireEvent.click(credential)
+
+      // Assert - Callback should work correctly
+      expect(mockOnChange).toHaveBeenCalledWith('cred-2')
+    })
+
+    it('should update handleCredentialChange when onCredentialChange changes', () => {
+      // Arrange
+      const mockOnChange1 = jest.fn()
+      const mockOnChange2 = jest.fn()
+      const props = createDefaultProps({ onCredentialChange: mockOnChange1 })
+
+      const { rerender } = render(<CredentialSelector {...props} />)
+
+      // Act - Update onCredentialChange prop
+      rerender(<CredentialSelector {...props} onCredentialChange={mockOnChange2} />)
+
+      // Open and select
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+      const credential = screen.getByText('Credential 2')
+      fireEvent.click(credential)
+
+      // Assert - New callback should be used
+      expect(mockOnChange1).not.toHaveBeenCalled()
+      expect(mockOnChange2).toHaveBeenCalledWith('cred-2')
+    })
+  })
+
+  // ==========================================
+  // Memoization Logic and Dependencies - Test useMemo behavior
+  // ==========================================
+  describe('Memoization Logic and Dependencies', () => {
+    it('should find currentCredential by id', () => {
+      // Arrange
+      const props = createDefaultProps({ currentCredentialId: 'cred-2' })
+
+      // Act
+      render(<CredentialSelector {...props} />)
+
+      // Assert - Should display credential 2
+      expect(screen.getByText('Credential 2')).toBeInTheDocument()
+    })
+
+    it('should update currentCredential when currentCredentialId changes', () => {
+      // Arrange
+      const props = createDefaultProps({ currentCredentialId: 'cred-1' })
+      const { rerender } = render(<CredentialSelector {...props} />)
+
+      // Assert initial
+      expect(screen.getByText('Credential 1')).toBeInTheDocument()
+
+      // Act - Change currentCredentialId
+      rerender(<CredentialSelector {...props} currentCredentialId="cred-3" />)
+
+      // Assert - Should now display credential 3
+      expect(screen.getByText('Credential 3')).toBeInTheDocument()
+    })
+
+    it('should update currentCredential when credentials array changes', () => {
+      // Arrange
+      const props = createDefaultProps({ currentCredentialId: 'cred-1' })
+      const { rerender } = render(<CredentialSelector {...props} />)
+
+      // Assert initial
+      expect(screen.getByText('Credential 1')).toBeInTheDocument()
+
+      // Act - Change credentials
+      const newCredentials = [
+        createMockCredential({ id: 'cred-1', name: 'Updated Credential 1' }),
+      ]
+      rerender(<CredentialSelector {...props} credentials={newCredentials} />)
+
+      // Assert - Should display updated name
+      expect(screen.getByText('Updated Credential 1')).toBeInTheDocument()
+    })
+
+    it('should return undefined currentCredential when id not found', () => {
+      // Arrange
+      const mockOnChange = jest.fn()
+      const props = createDefaultProps({
+        currentCredentialId: 'non-existent',
+        onCredentialChange: mockOnChange,
+      })
+
+      // Act
+      render(<CredentialSelector {...props} />)
+
+      // Assert - Should trigger auto-select effect
+      expect(mockOnChange).toHaveBeenCalledWith('cred-1')
+    })
+  })
+
+  // ==========================================
+  // Component Memoization - Test React.memo behavior
+  // ==========================================
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      // Assert
+      expect(CredentialSelector.$$typeof).toBe(Symbol.for('react.memo'))
+    })
+
+    it('should not re-render when props remain the same', () => {
+      // Arrange
+      const mockOnChange = jest.fn()
+      const props = createDefaultProps({ onCredentialChange: mockOnChange })
+      const renderSpy = jest.fn()
+
+      const TrackedCredentialSelector: React.FC<CredentialSelectorProps> = (trackedProps) => {
+        renderSpy()
+        return <CredentialSelector {...trackedProps} />
+      }
+      const MemoizedTracked = React.memo(TrackedCredentialSelector)
+
+      // Act
+      const { rerender } = render(<MemoizedTracked {...props} />)
+      rerender(<MemoizedTracked {...props} />)
+
+      // Assert - Should only render once due to same props
+      expect(renderSpy).toHaveBeenCalledTimes(1)
+    })
+
+    it('should re-render when currentCredentialId changes', () => {
+      // Arrange
+      const props = createDefaultProps({ currentCredentialId: 'cred-1' })
+      const { rerender } = render(<CredentialSelector {...props} />)
+
+      // Assert initial
+      expect(screen.getByText('Credential 1')).toBeInTheDocument()
+
+      // Act
+      rerender(<CredentialSelector {...props} currentCredentialId="cred-2" />)
+
+      // Assert
+      expect(screen.getByText('Credential 2')).toBeInTheDocument()
+    })
+
+    it('should re-render when credentials array reference changes', () => {
+      // Arrange
+      const props = createDefaultProps()
+      const { rerender } = render(<CredentialSelector {...props} />)
+
+      // Act - Create new credentials array with different data
+      const newCredentials = [
+        createMockCredential({ id: 'cred-1', name: 'New Name 1' }),
+      ]
+      rerender(<CredentialSelector {...props} credentials={newCredentials} />)
+
+      // Assert
+      expect(screen.getByText('New Name 1')).toBeInTheDocument()
+    })
+
+    it('should re-render when onCredentialChange reference changes', () => {
+      // Arrange
+      const mockOnChange1 = jest.fn()
+      const mockOnChange2 = jest.fn()
+      const props = createDefaultProps({ onCredentialChange: mockOnChange1 })
+      const { rerender } = render(<CredentialSelector {...props} />)
+
+      // Act - Change callback reference
+      rerender(<CredentialSelector {...props} onCredentialChange={mockOnChange2} />)
+
+      // Open and select
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+      const credential = screen.getByText('Credential 2')
+      fireEvent.click(credential)
+
+      // Assert - New callback should be used
+      expect(mockOnChange2).toHaveBeenCalledWith('cred-2')
+    })
+  })
+
+  // ==========================================
+  // Edge Cases and Error Handling
+  // ==========================================
+  describe('Edge Cases and Error Handling', () => {
+    it('should handle empty credentials array', () => {
+      // Arrange
+      const props = createDefaultProps({
+        credentials: [],
+        currentCredentialId: 'cred-1',
+      })
+
+      // Act
+      render(<CredentialSelector {...props} />)
+
+      // Assert - Should render without crashing
+      expect(screen.getByTestId('portal-root')).toBeInTheDocument()
+    })
+
+    it('should handle undefined avatar_url in credential', () => {
+      // Arrange
+      const credentialWithoutAvatar = createMockCredential({
+        id: 'cred-no-avatar',
+        name: 'No Avatar Credential',
+        avatar_url: undefined,
+      })
+      const props = createDefaultProps({
+        credentials: [credentialWithoutAvatar],
+        currentCredentialId: 'cred-no-avatar',
+      })
+
+      // Act
+      const { container } = render(<CredentialSelector {...props} />)
+
+      // Assert - Should render without crashing and show first letter fallback
+      expect(screen.getByText('No Avatar Credential')).toBeInTheDocument()
+      // When avatar_url is undefined, CredentialIcon shows first letter instead of img
+      const iconImg = container.querySelector('img')
+      expect(iconImg).not.toBeInTheDocument()
+      // First letter 'N' should be displayed
+      expect(screen.getByText('N')).toBeInTheDocument()
+    })
+
+    it('should handle empty string name in credential', () => {
+      // Arrange
+      const credentialWithEmptyName = createMockCredential({
+        id: 'cred-empty-name',
+        name: '',
+      })
+      const props = createDefaultProps({
+        credentials: [credentialWithEmptyName],
+        currentCredentialId: 'cred-empty-name',
+      })
+
+      // Act
+      render(<CredentialSelector {...props} />)
+
+      // Assert - Should render without crashing
+      expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
+    })
+
+    it('should handle very long credential name', () => {
+      // Arrange
+      const longName = 'A'.repeat(200)
+      const credentialWithLongName = createMockCredential({
+        id: 'cred-long-name',
+        name: longName,
+      })
+      const props = createDefaultProps({
+        credentials: [credentialWithLongName],
+        currentCredentialId: 'cred-long-name',
+      })
+
+      // Act
+      render(<CredentialSelector {...props} />)
+
+      // Assert
+      expect(screen.getByText(longName)).toBeInTheDocument()
+    })
+
+    it('should handle special characters in credential name', () => {
+      // Arrange
+      const specialName = '测试 Credential <script>alert("xss")</script> & "quoted"'
+      const credentialWithSpecialName = createMockCredential({
+        id: 'cred-special',
+        name: specialName,
+      })
+      const props = createDefaultProps({
+        credentials: [credentialWithSpecialName],
+        currentCredentialId: 'cred-special',
+      })
+
+      // Act
+      render(<CredentialSelector {...props} />)
+
+      // Assert
+      expect(screen.getByText(specialName)).toBeInTheDocument()
+    })
+
+    it('should handle numeric id as string', () => {
+      // Arrange
+      const credentialWithNumericId = createMockCredential({
+        id: '123456',
+        name: 'Numeric ID Credential',
+      })
+      const props = createDefaultProps({
+        credentials: [credentialWithNumericId],
+        currentCredentialId: '123456',
+      })
+
+      // Act
+      render(<CredentialSelector {...props} />)
+
+      // Assert
+      expect(screen.getByText('Numeric ID Credential')).toBeInTheDocument()
+    })
+
+    it('should handle large number of credentials', () => {
+      // Arrange
+      const manyCredentials = createMockCredentials(100)
+      const props = createDefaultProps({
+        credentials: manyCredentials,
+        currentCredentialId: 'cred-50',
+      })
+
+      // Act
+      render(<CredentialSelector {...props} />)
+
+      // Assert
+      expect(screen.getByText('Credential 50')).toBeInTheDocument()
+    })
+
+    it('should handle credential selection with duplicate names', () => {
+      // Arrange
+      const mockOnChange = jest.fn()
+      const duplicateCredentials = [
+        createMockCredential({ id: 'cred-1', name: 'Same Name' }),
+        createMockCredential({ id: 'cred-2', name: 'Same Name' }),
+      ]
+      const props = createDefaultProps({
+        credentials: duplicateCredentials,
+        currentCredentialId: 'cred-1',
+        onCredentialChange: mockOnChange,
+      })
+
+      // Act
+      render(<CredentialSelector {...props} />)
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      // Get all "Same Name" elements
+      // 1 in trigger (current) + 2 in dropdown (both credentials) = 3 total
+      const sameNameElements = screen.getAllByText('Same Name')
+      expect(sameNameElements.length).toBe(3)
+
+      // Click the last dropdown item (cred-2 in dropdown)
+      fireEvent.click(sameNameElements[2])
+
+      // Assert - Should call with the correct id even with duplicate names
+      expect(mockOnChange).toHaveBeenCalledWith('cred-2')
+    })
+
+    it('should not crash when clicking credential after unmount', () => {
+      // Arrange
+      const mockOnChange = jest.fn()
+      const props = createDefaultProps({ onCredentialChange: mockOnChange })
+      const { unmount } = render(<CredentialSelector {...props} />)
+
+      // Act
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      unmount()
+
+      // Assert - Should not throw
+      expect(() => {
+        // Any cleanup should have happened
+      }).not.toThrow()
+    })
+
+    it('should handle whitespace-only credential name', () => {
+      // Arrange
+      const credentialWithWhitespace = createMockCredential({
+        id: 'cred-whitespace',
+        name: '   ',
+      })
+      const props = createDefaultProps({
+        credentials: [credentialWithWhitespace],
+        currentCredentialId: 'cred-whitespace',
+      })
+
+      // Act
+      render(<CredentialSelector {...props} />)
+
+      // Assert - Should render without crashing
+      expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Styling and CSS Classes
+  // ==========================================
+  describe('Styling', () => {
+    it('should apply overflow-hidden class to trigger', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<CredentialSelector {...props} />)
+
+      // Assert
+      const trigger = screen.getByTestId('portal-trigger')
+      expect(trigger).toHaveClass('overflow-hidden')
+    })
+
+    it('should apply grow class to trigger', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<CredentialSelector {...props} />)
+
+      // Assert
+      const trigger = screen.getByTestId('portal-trigger')
+      expect(trigger).toHaveClass('grow')
+    })
+
+    it('should apply z-10 class to dropdown content', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<CredentialSelector {...props} />)
+
+      // Act
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      // Assert
+      const content = screen.getByTestId('portal-content')
+      expect(content).toHaveClass('z-10')
+    })
+  })
+
+  // ==========================================
+  // Integration with Child Components
+  // ==========================================
+  describe('Integration with Child Components', () => {
+    it('should pass currentCredential to Trigger component', () => {
+      // Arrange
+      const props = createDefaultProps({ currentCredentialId: 'cred-2' })
+
+      // Act
+      render(<CredentialSelector {...props} />)
+
+      // Assert - Trigger should display the correct credential
+      expect(screen.getByText('Credential 2')).toBeInTheDocument()
+    })
+
+    it('should pass isOpen state to Trigger component', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<CredentialSelector {...props} />)
+
+      // Assert - Initially closed
+      const portalRoot = screen.getByTestId('portal-root')
+      expect(portalRoot).toHaveAttribute('data-open', 'false')
+
+      // Act - Open
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      // Assert - Now open
+      expect(portalRoot).toHaveAttribute('data-open', 'true')
+    })
+
+    it('should pass credentials to List component', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<CredentialSelector {...props} />)
+
+      // Act
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      // Assert - All credentials should be rendered in list
+      // 3 in dropdown + 1 in trigger (current credential appears twice) = 4 total
+      const credentialNames = screen.getAllByText(/Credential \d/)
+      expect(credentialNames.length).toBe(4)
+    })
+
+    it('should pass currentCredentialId to List component', () => {
+      // Arrange
+      const props = createDefaultProps({ currentCredentialId: 'cred-2' })
+      render(<CredentialSelector {...props} />)
+
+      // Act
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      // Assert - Current credential (Credential 2) appears twice:
+      // once in trigger and once in dropdown list
+      const credential2Elements = screen.getAllByText('Credential 2')
+      expect(credential2Elements.length).toBe(2)
+    })
+
+    it('should pass handleCredentialChange to List component', () => {
+      // Arrange
+      const mockOnChange = jest.fn()
+      const props = createDefaultProps({ onCredentialChange: mockOnChange })
+      render(<CredentialSelector {...props} />)
+
+      // Act
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+      const credential3 = screen.getByText('Credential 3')
+      fireEvent.click(credential3)
+
+      // Assert - handleCredentialChange should propagate the call
+      expect(mockOnChange).toHaveBeenCalledWith('cred-3')
+    })
+  })
+
+  // ==========================================
+  // Portal Configuration
+  // ==========================================
+  describe('Portal Configuration', () => {
+    it('should configure PortalToFollowElem with placement bottom-start', () => {
+      // This test verifies the portal is configured correctly
+      // The actual placement is handled by the mock, but we verify the component renders
+      const props = createDefaultProps()
+      render(<CredentialSelector {...props} />)
+
+      expect(screen.getByTestId('portal-root')).toBeInTheDocument()
+    })
+
+    it('should configure PortalToFollowElem with offset mainAxis 4', () => {
+      // This test verifies the offset configuration doesn't break rendering
+      const props = createDefaultProps()
+      render(<CredentialSelector {...props} />)
+
+      expect(screen.getByTestId('portal-root')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.tsx
index dc328ef87f..7ab4f25256 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import type { DataSourceCredential } from '@/types/pipeline'
 import { RiArrowDownSLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { CredentialIcon } from '@/app/components/datasets/common/credential-icon'
 
 type TriggerProps = {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.spec.tsx
new file mode 100644
index 0000000000..089f1f2810
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.spec.tsx
@@ -0,0 +1,659 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import Header from './header'
+import type { DataSourceCredential } from '@/types/pipeline'
+
+// Mock CredentialTypeEnum to avoid deep import chain issues
+enum MockCredentialTypeEnum {
+  OAUTH2 = 'oauth2',
+  API_KEY = 'api_key',
+}
+
+// Mock plugin-auth module to avoid deep import chain issues
+jest.mock('@/app/components/plugins/plugin-auth', () => ({
+  CredentialTypeEnum: {
+    OAUTH2: 'oauth2',
+    API_KEY: 'api_key',
+  },
+}))
+
+// Mock portal-to-follow-elem - required for CredentialSelector
+jest.mock('@/app/components/base/portal-to-follow-elem', () => {
+  const MockPortalToFollowElem = ({ children, open }: any) => {
+    return (
+      <div data-testid="portal-root" data-open={open}>
+        {React.Children.map(children, (child: any) => {
+          if (!child)
+            return null
+          return React.cloneElement(child, { __portalOpen: open })
+        })}
+      </div>
+    )
+  }
+
+  const MockPortalToFollowElemTrigger = ({ children, onClick, className, __portalOpen }: any) => (
+    <div data-testid="portal-trigger" onClick={onClick} className={className} data-open={__portalOpen}>
+      {children}
+    </div>
+  )
+
+  const MockPortalToFollowElemContent = ({ children, className, __portalOpen }: any) => {
+    if (!__portalOpen)
+      return null
+    return (
+      <div data-testid="portal-content" className={className}>
+        {children}
+      </div>
+    )
+  }
+
+  return {
+    PortalToFollowElem: MockPortalToFollowElem,
+    PortalToFollowElemTrigger: MockPortalToFollowElemTrigger,
+    PortalToFollowElemContent: MockPortalToFollowElemContent,
+  }
+})
+
+// ==========================================
+// Test Data Builders
+// ==========================================
+const createMockCredential = (overrides?: Partial<DataSourceCredential>): DataSourceCredential => ({
+  id: 'cred-1',
+  name: 'Test Credential',
+  avatar_url: 'https://example.com/avatar.png',
+  credential: { key: 'value' },
+  is_default: false,
+  type: MockCredentialTypeEnum.OAUTH2 as unknown as DataSourceCredential['type'],
+  ...overrides,
+})
+
+const createMockCredentials = (count: number = 3): DataSourceCredential[] =>
+  Array.from({ length: count }, (_, i) =>
+    createMockCredential({
+      id: `cred-${i + 1}`,
+      name: `Credential ${i + 1}`,
+      avatar_url: `https://example.com/avatar-${i + 1}.png`,
+      is_default: i === 0,
+    }),
+  )
+
+type HeaderProps = React.ComponentProps<typeof Header>
+
+const createDefaultProps = (overrides?: Partial<HeaderProps>): HeaderProps => ({
+  docTitle: 'Documentation',
+  docLink: 'https://docs.example.com',
+  pluginName: 'Test Plugin',
+  currentCredentialId: 'cred-1',
+  onCredentialChange: jest.fn(),
+  credentials: createMockCredentials(),
+  ...overrides,
+})
+
+describe('Header', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      expect(screen.getByText('Documentation')).toBeInTheDocument()
+    })
+
+    it('should render documentation link with correct attributes', () => {
+      // Arrange
+      const props = createDefaultProps({
+        docTitle: 'API Docs',
+        docLink: 'https://api.example.com/docs',
+      })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      const link = screen.getByRole('link', { name: /API Docs/i })
+      expect(link).toHaveAttribute('href', 'https://api.example.com/docs')
+      expect(link).toHaveAttribute('target', '_blank')
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+
+    it('should render document title with title attribute', () => {
+      // Arrange
+      const props = createDefaultProps({ docTitle: 'My Documentation' })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      const titleSpan = screen.getByText('My Documentation')
+      expect(titleSpan).toHaveAttribute('title', 'My Documentation')
+    })
+
+    it('should render CredentialSelector with correct props', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert - CredentialSelector should render current credential name
+      expect(screen.getByText('Credential 1')).toBeInTheDocument()
+    })
+
+    it('should render configuration button', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should render book icon in documentation link', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert - RiBookOpenLine renders as SVG
+      const link = screen.getByRole('link')
+      const svg = link.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should render divider between credential selector and configuration button', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<Header {...props} />)
+
+      // Assert - Divider component should be rendered
+      // Divider typically renders as a div with specific styling
+      const divider = container.querySelector('[class*="divider"]') || container.querySelector('.mx-1.h-3\\.5')
+      expect(divider).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Props Testing
+  // ==========================================
+  describe('Props', () => {
+    describe('docTitle prop', () => {
+      it('should display the document title', () => {
+        // Arrange
+        const props = createDefaultProps({ docTitle: 'Getting Started Guide' })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        expect(screen.getByText('Getting Started Guide')).toBeInTheDocument()
+      })
+
+      it.each([
+        'Quick Start',
+        'API Reference',
+        'Configuration Guide',
+        'Plugin Documentation',
+      ])('should display "%s" as document title', (title) => {
+        // Arrange
+        const props = createDefaultProps({ docTitle: title })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        expect(screen.getByText(title)).toBeInTheDocument()
+      })
+    })
+
+    describe('docLink prop', () => {
+      it('should set correct href on documentation link', () => {
+        // Arrange
+        const props = createDefaultProps({ docLink: 'https://custom.docs.com/guide' })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        const link = screen.getByRole('link')
+        expect(link).toHaveAttribute('href', 'https://custom.docs.com/guide')
+      })
+
+      it.each([
+        'https://docs.dify.ai',
+        'https://example.com/api',
+        '/local/docs',
+      ])('should accept "%s" as docLink', (link) => {
+        // Arrange
+        const props = createDefaultProps({ docLink: link })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        expect(screen.getByRole('link')).toHaveAttribute('href', link)
+      })
+    })
+
+    describe('pluginName prop', () => {
+      it('should pass pluginName to translation function', () => {
+        // Arrange
+        const props = createDefaultProps({ pluginName: 'MyPlugin' })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert - The translation mock returns the key with options
+        // Tooltip uses the translated content
+        expect(screen.getByRole('button')).toBeInTheDocument()
+      })
+    })
+
+    describe('onClickConfiguration prop', () => {
+      it('should call onClickConfiguration when configuration icon is clicked', () => {
+        // Arrange
+        const mockOnClick = jest.fn()
+        const props = createDefaultProps({ onClickConfiguration: mockOnClick })
+        render(<Header {...props} />)
+
+        // Act - Find the configuration button and click the icon inside
+        // The button contains the RiEqualizer2Line icon with onClick handler
+        const configButton = screen.getByRole('button')
+        const configIcon = configButton.querySelector('svg')
+        expect(configIcon).toBeInTheDocument()
+        fireEvent.click(configIcon!)
+
+        // Assert
+        expect(mockOnClick).toHaveBeenCalledTimes(1)
+      })
+
+      it('should not crash when onClickConfiguration is undefined', () => {
+        // Arrange
+        const props = createDefaultProps({ onClickConfiguration: undefined })
+        render(<Header {...props} />)
+
+        // Act - Find the configuration button and click the icon inside
+        const configButton = screen.getByRole('button')
+        const configIcon = configButton.querySelector('svg')
+        expect(configIcon).toBeInTheDocument()
+        fireEvent.click(configIcon!)
+
+        // Assert - Component should still be rendered (no crash)
+        expect(screen.getByRole('button')).toBeInTheDocument()
+      })
+    })
+
+    describe('CredentialSelector props passthrough', () => {
+      it('should pass currentCredentialId to CredentialSelector', () => {
+        // Arrange
+        const props = createDefaultProps({ currentCredentialId: 'cred-2' })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert - Should display the second credential
+        expect(screen.getByText('Credential 2')).toBeInTheDocument()
+      })
+
+      it('should pass credentials to CredentialSelector', () => {
+        // Arrange
+        const customCredentials = [
+          createMockCredential({ id: 'custom-1', name: 'Custom Credential' }),
+        ]
+        const props = createDefaultProps({
+          credentials: customCredentials,
+          currentCredentialId: 'custom-1',
+        })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        expect(screen.getByText('Custom Credential')).toBeInTheDocument()
+      })
+
+      it('should pass onCredentialChange to CredentialSelector', () => {
+        // Arrange
+        const mockOnChange = jest.fn()
+        const props = createDefaultProps({ onCredentialChange: mockOnChange })
+        render(<Header {...props} />)
+
+        // Act - Open dropdown and select a credential
+        // Use getAllByTestId and select the first one (CredentialSelector's trigger)
+        const triggers = screen.getAllByTestId('portal-trigger')
+        fireEvent.click(triggers[0])
+        const credential2 = screen.getByText('Credential 2')
+        fireEvent.click(credential2)
+
+        // Assert
+        expect(mockOnChange).toHaveBeenCalledWith('cred-2')
+      })
+    })
+  })
+
+  // ==========================================
+  // User Interactions
+  // ==========================================
+  describe('User Interactions', () => {
+    it('should open external link in new tab when clicking documentation link', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert - Link has target="_blank" for new tab
+      const link = screen.getByRole('link')
+      expect(link).toHaveAttribute('target', '_blank')
+    })
+
+    it('should allow credential selection through CredentialSelector', () => {
+      // Arrange
+      const mockOnChange = jest.fn()
+      const props = createDefaultProps({ onCredentialChange: mockOnChange })
+      render(<Header {...props} />)
+
+      // Act - Open dropdown (use first trigger which is CredentialSelector's)
+      const triggers = screen.getAllByTestId('portal-trigger')
+      fireEvent.click(triggers[0])
+
+      // Assert - Dropdown should be open
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+    })
+
+    it('should trigger configuration callback when clicking config icon', () => {
+      // Arrange
+      const mockOnConfig = jest.fn()
+      const props = createDefaultProps({ onClickConfiguration: mockOnConfig })
+      const { container } = render(<Header {...props} />)
+
+      // Act
+      const configIcon = container.querySelector('.h-4.w-4')
+      fireEvent.click(configIcon!)
+
+      // Assert
+      expect(mockOnConfig).toHaveBeenCalled()
+    })
+  })
+
+  // ==========================================
+  // Component Memoization
+  // ==========================================
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      // Assert
+      expect(Header.$$typeof).toBe(Symbol.for('react.memo'))
+    })
+
+    it('should not re-render when props remain the same', () => {
+      // Arrange
+      const props = createDefaultProps()
+      const renderSpy = jest.fn()
+
+      const TrackedHeader: React.FC<HeaderProps> = (trackedProps) => {
+        renderSpy()
+        return <Header {...trackedProps} />
+      }
+      const MemoizedTracked = React.memo(TrackedHeader)
+
+      // Act
+      const { rerender } = render(<MemoizedTracked {...props} />)
+      rerender(<MemoizedTracked {...props} />)
+
+      // Assert - Should only render once due to same props
+      expect(renderSpy).toHaveBeenCalledTimes(1)
+    })
+
+    it('should re-render when docTitle changes', () => {
+      // Arrange
+      const props = createDefaultProps({ docTitle: 'Original Title' })
+      const { rerender } = render(<Header {...props} />)
+
+      // Assert initial
+      expect(screen.getByText('Original Title')).toBeInTheDocument()
+
+      // Act
+      rerender(<Header {...props} docTitle="Updated Title" />)
+
+      // Assert
+      expect(screen.getByText('Updated Title')).toBeInTheDocument()
+    })
+
+    it('should re-render when currentCredentialId changes', () => {
+      // Arrange
+      const props = createDefaultProps({ currentCredentialId: 'cred-1' })
+      const { rerender } = render(<Header {...props} />)
+
+      // Assert initial
+      expect(screen.getByText('Credential 1')).toBeInTheDocument()
+
+      // Act
+      rerender(<Header {...props} currentCredentialId="cred-2" />)
+
+      // Assert
+      expect(screen.getByText('Credential 2')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Edge Cases
+  // ==========================================
+  describe('Edge Cases', () => {
+    it('should handle empty docTitle', () => {
+      // Arrange
+      const props = createDefaultProps({ docTitle: '' })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert - Should render without crashing
+      const link = screen.getByRole('link')
+      expect(link).toBeInTheDocument()
+    })
+
+    it('should handle very long docTitle', () => {
+      // Arrange
+      const longTitle = 'A'.repeat(200)
+      const props = createDefaultProps({ docTitle: longTitle })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      expect(screen.getByText(longTitle)).toBeInTheDocument()
+    })
+
+    it('should handle special characters in docTitle', () => {
+      // Arrange
+      const specialTitle = 'Docs & Guide <v2> "Special"'
+      const props = createDefaultProps({ docTitle: specialTitle })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      expect(screen.getByText(specialTitle)).toBeInTheDocument()
+    })
+
+    it('should handle empty credentials array', () => {
+      // Arrange
+      const props = createDefaultProps({
+        credentials: [],
+        currentCredentialId: '',
+      })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert - Should render without crashing
+      expect(screen.getByRole('link')).toBeInTheDocument()
+    })
+
+    it('should handle special characters in pluginName', () => {
+      // Arrange
+      const props = createDefaultProps({ pluginName: 'Plugin & Tool <v1>' })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert - Should render without crashing
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should handle unicode characters in docTitle', () => {
+      // Arrange
+      const props = createDefaultProps({ docTitle: '文档说明 📚' })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      expect(screen.getByText('文档说明 📚')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Styling
+  // ==========================================
+  describe('Styling', () => {
+    it('should apply correct classes to container', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<Header {...props} />)
+
+      // Assert
+      const rootDiv = container.firstChild as HTMLElement
+      expect(rootDiv).toHaveClass('flex', 'items-center', 'justify-between', 'gap-x-2')
+    })
+
+    it('should apply correct classes to documentation link', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      const link = screen.getByRole('link')
+      expect(link).toHaveClass('system-xs-medium', 'text-text-accent')
+    })
+
+    it('should apply shrink-0 to documentation link', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      const link = screen.getByRole('link')
+      expect(link).toHaveClass('shrink-0')
+    })
+  })
+
+  // ==========================================
+  // Integration Tests
+  // ==========================================
+  describe('Integration', () => {
+    it('should work with full credential workflow', () => {
+      // Arrange
+      const mockOnCredentialChange = jest.fn()
+      const props = createDefaultProps({
+        onCredentialChange: mockOnCredentialChange,
+        currentCredentialId: 'cred-1',
+      })
+      render(<Header {...props} />)
+
+      // Assert initial state
+      expect(screen.getByText('Credential 1')).toBeInTheDocument()
+
+      // Act - Open dropdown and select different credential
+      // Use first trigger which is CredentialSelector's
+      const triggers = screen.getAllByTestId('portal-trigger')
+      fireEvent.click(triggers[0])
+
+      const credential3 = screen.getByText('Credential 3')
+      fireEvent.click(credential3)
+
+      // Assert
+      expect(mockOnCredentialChange).toHaveBeenCalledWith('cred-3')
+    })
+
+    it('should display all components together correctly', () => {
+      // Arrange
+      const mockOnConfig = jest.fn()
+      const props = createDefaultProps({
+        docTitle: 'Integration Test Docs',
+        docLink: 'https://test.com/docs',
+        pluginName: 'TestPlugin',
+        onClickConfiguration: mockOnConfig,
+      })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert - All main elements present
+      expect(screen.getByText('Credential 1')).toBeInTheDocument() // CredentialSelector
+      expect(screen.getByRole('button')).toBeInTheDocument() // Config button
+      expect(screen.getByText('Integration Test Docs')).toBeInTheDocument() // Doc link
+      expect(screen.getByRole('link')).toHaveAttribute('href', 'https://test.com/docs')
+    })
+  })
+
+  // ==========================================
+  // Accessibility
+  // ==========================================
+  describe('Accessibility', () => {
+    it('should have accessible link', () => {
+      // Arrange
+      const props = createDefaultProps({ docTitle: 'Accessible Docs' })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      const link = screen.getByRole('link', { name: /Accessible Docs/i })
+      expect(link).toBeInTheDocument()
+    })
+
+    it('should have accessible button for configuration', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      const button = screen.getByRole('button')
+      expect(button).toBeInTheDocument()
+    })
+
+    it('should have noopener noreferrer for security on external links', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      const link = screen.getByRole('link')
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx
index f25f02fdbd..cb5899ab28 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { RiDeleteBinLine, RiErrorWarningFill, RiUploadCloud2Line } from '@remixicon/react'
 import DocumentFileIcon from '@/app/components/datasets/common/document-file-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CustomFile as File, FileItem } from '@/models/datasets'
 import { ToastContext } from '@/app/components/base/toast'
 import { upload } from '@/service/base'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.spec.tsx
new file mode 100644
index 0000000000..467f6d9816
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.spec.tsx
@@ -0,0 +1,1357 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import OnlineDocuments from './index'
+import type { DataSourceNotionWorkspace, NotionPage } from '@/models/common'
+import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
+import { VarKindType } from '@/app/components/workflow/nodes/_base/types'
+
+// ==========================================
+// Mock Modules
+// ==========================================
+
+// Note: react-i18next uses global mock from web/__mocks__/react-i18next.ts
+
+// Mock useDocLink - context hook requires mocking
+const mockDocLink = jest.fn((path?: string) => `https://docs.example.com${path || ''}`)
+jest.mock('@/context/i18n', () => ({
+  useDocLink: () => mockDocLink,
+}))
+
+// Mock dataset-detail context - context provider requires mocking
+let mockPipelineId = 'pipeline-123'
+jest.mock('@/context/dataset-detail', () => ({
+  useDatasetDetailContextWithSelector: (selector: (s: any) => any) => selector({ dataset: { pipeline_id: mockPipelineId } }),
+}))
+
+// Mock modal context - context provider requires mocking
+const mockSetShowAccountSettingModal = jest.fn()
+jest.mock('@/context/modal-context', () => ({
+  useModalContextSelector: (selector: (s: any) => any) => selector({ setShowAccountSettingModal: mockSetShowAccountSettingModal }),
+}))
+
+// Mock ssePost - API service requires mocking
+const mockSsePost = jest.fn()
+jest.mock('@/service/base', () => ({
+  ssePost: (...args: any[]) => mockSsePost(...args),
+}))
+
+// Mock Toast.notify - static method that manipulates DOM, needs mocking to verify calls
+const mockToastNotify = jest.fn()
+jest.mock('@/app/components/base/toast', () => ({
+  __esModule: true,
+  default: {
+    notify: (options: any) => mockToastNotify(options),
+  },
+}))
+
+// Mock useGetDataSourceAuth - API service hook requires mocking
+const mockUseGetDataSourceAuth = jest.fn()
+jest.mock('@/service/use-datasource', () => ({
+  useGetDataSourceAuth: (params: any) => mockUseGetDataSourceAuth(params),
+}))
+
+// Note: zustand/react/shallow useShallow is imported directly (simple utility function)
+
+// Mock store
+const mockStoreState = {
+  documentsData: [] as DataSourceNotionWorkspace[],
+  searchValue: '',
+  selectedPagesId: new Set<string>(),
+  currentCredentialId: '',
+  setDocumentsData: jest.fn(),
+  setSearchValue: jest.fn(),
+  setSelectedPagesId: jest.fn(),
+  setOnlineDocuments: jest.fn(),
+  setCurrentDocument: jest.fn(),
+}
+
+const mockGetState = jest.fn(() => mockStoreState)
+const mockDataSourceStore = { getState: mockGetState }
+
+jest.mock('../store', () => ({
+  useDataSourceStoreWithSelector: (selector: (s: any) => any) => selector(mockStoreState),
+  useDataSourceStore: () => mockDataSourceStore,
+}))
+
+// Mock Header component
+jest.mock('../base/header', () => {
+  const MockHeader = (props: any) => (
+    <div data-testid="header">
+      <span data-testid="header-doc-title">{props.docTitle}</span>
+      <span data-testid="header-doc-link">{props.docLink}</span>
+      <span data-testid="header-plugin-name">{props.pluginName}</span>
+      <span data-testid="header-credential-id">{props.currentCredentialId}</span>
+      <button data-testid="header-config-btn" onClick={props.onClickConfiguration}>Configure</button>
+      <button data-testid="header-credential-change" onClick={() => props.onCredentialChange('new-cred-id')}>Change Credential</button>
+      <span data-testid="header-credentials-count">{props.credentials?.length || 0}</span>
+    </div>
+  )
+  return MockHeader
+})
+
+// Mock SearchInput component
+jest.mock('@/app/components/base/notion-page-selector/search-input', () => {
+  const MockSearchInput = ({ value, onChange }: { value: string; onChange: (v: string) => void }) => (
+    <div data-testid="search-input">
+      <input
+        data-testid="search-input-field"
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        placeholder="Search"
+      />
+    </div>
+  )
+  return MockSearchInput
+})
+
+// Mock PageSelector component
+jest.mock('./page-selector', () => {
+  const MockPageSelector = (props: any) => (
+    <div data-testid="page-selector">
+      <span data-testid="page-selector-checked-count">{props.checkedIds?.size || 0}</span>
+      <span data-testid="page-selector-search-value">{props.searchValue}</span>
+      <span data-testid="page-selector-can-preview">{String(props.canPreview)}</span>
+      <span data-testid="page-selector-multiple-choice">{String(props.isMultipleChoice)}</span>
+      <span data-testid="page-selector-credential-id">{props.currentCredentialId}</span>
+      <button
+        data-testid="page-selector-select-btn"
+        onClick={() => props.onSelect(new Set(['page-1', 'page-2']))}
+      >
+        Select Pages
+      </button>
+      <button
+        data-testid="page-selector-preview-btn"
+        onClick={() => props.onPreview?.('page-1')}
+      >
+        Preview Page
+      </button>
+    </div>
+  )
+  return MockPageSelector
+})
+
+// Mock Title component
+jest.mock('./title', () => {
+  const MockTitle = ({ name }: { name: string }) => (
+    <div data-testid="title">
+      <span data-testid="title-name">{name}</span>
+    </div>
+  )
+  return MockTitle
+})
+
+// Mock Loading component
+jest.mock('@/app/components/base/loading', () => {
+  const MockLoading = ({ type }: { type: string }) => (
+    <div data-testid="loading" data-type={type}>Loading...</div>
+  )
+  return MockLoading
+})
+
+// ==========================================
+// Test Data Builders
+// ==========================================
+const createMockNodeData = (overrides?: Partial<DataSourceNodeType>): DataSourceNodeType => ({
+  title: 'Test Node',
+  plugin_id: 'plugin-123',
+  provider_type: 'notion',
+  provider_name: 'notion-provider',
+  datasource_name: 'notion-ds',
+  datasource_label: 'Notion',
+  datasource_parameters: {},
+  datasource_configurations: {},
+  ...overrides,
+} as DataSourceNodeType)
+
+const createMockPage = (overrides?: Partial<NotionPage>): NotionPage => ({
+  page_id: 'page-1',
+  page_name: 'Test Page',
+  page_icon: null,
+  is_bound: false,
+  parent_id: 'root',
+  type: 'page',
+  workspace_id: 'workspace-1',
+  ...overrides,
+})
+
+const createMockWorkspace = (overrides?: Partial<DataSourceNotionWorkspace>): DataSourceNotionWorkspace => ({
+  workspace_id: 'workspace-1',
+  workspace_name: 'Test Workspace',
+  workspace_icon: null,
+  pages: [createMockPage()],
+  ...overrides,
+})
+
+const createMockCredential = (overrides?: Partial<{ id: string; name: string }>) => ({
+  id: 'cred-1',
+  name: 'Test Credential',
+  avatar_url: 'https://example.com/avatar.png',
+  credential: {},
+  is_default: false,
+  type: 'oauth2',
+  ...overrides,
+})
+
+type OnlineDocumentsProps = React.ComponentProps<typeof OnlineDocuments>
+
+const createDefaultProps = (overrides?: Partial<OnlineDocumentsProps>): OnlineDocumentsProps => ({
+  nodeId: 'node-1',
+  nodeData: createMockNodeData(),
+  onCredentialChange: jest.fn(),
+  isInPipeline: false,
+  supportBatchUpload: true,
+  ...overrides,
+})
+
+// ==========================================
+// Test Suites
+// ==========================================
+describe('OnlineDocuments', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+
+    // Reset store state
+    mockStoreState.documentsData = []
+    mockStoreState.searchValue = ''
+    mockStoreState.selectedPagesId = new Set()
+    mockStoreState.currentCredentialId = ''
+    mockStoreState.setDocumentsData = jest.fn()
+    mockStoreState.setSearchValue = jest.fn()
+    mockStoreState.setSelectedPagesId = jest.fn()
+    mockStoreState.setOnlineDocuments = jest.fn()
+    mockStoreState.setCurrentDocument = jest.fn()
+
+    // Reset context values
+    mockPipelineId = 'pipeline-123'
+    mockSetShowAccountSettingModal.mockClear()
+
+    // Default mock return values
+    mockUseGetDataSourceAuth.mockReturnValue({
+      data: { result: [createMockCredential()] },
+    })
+
+    mockGetState.mockReturnValue(mockStoreState)
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('header')).toBeInTheDocument()
+    })
+
+    it('should render Header with correct props', () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-123'
+      const props = createDefaultProps({
+        nodeData: createMockNodeData({ datasource_label: 'My Notion' }),
+      })
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('header-doc-title')).toHaveTextContent('Docs')
+      expect(screen.getByTestId('header-plugin-name')).toHaveTextContent('My Notion')
+      expect(screen.getByTestId('header-credential-id')).toHaveTextContent('cred-123')
+    })
+
+    it('should render Loading when documentsData is empty', () => {
+      // Arrange
+      mockStoreState.documentsData = []
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('loading')).toBeInTheDocument()
+      expect(screen.getByTestId('loading')).toHaveAttribute('data-type', 'app')
+    })
+
+    it('should render PageSelector when documentsData has content', () => {
+      // Arrange
+      mockStoreState.documentsData = [createMockWorkspace()]
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('page-selector')).toBeInTheDocument()
+      expect(screen.queryByTestId('loading')).not.toBeInTheDocument()
+    })
+
+    it('should render Title with datasource_label', () => {
+      // Arrange
+      mockStoreState.documentsData = [createMockWorkspace()]
+      const props = createDefaultProps({
+        nodeData: createMockNodeData({ datasource_label: 'Notion Integration' }),
+      })
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('title-name')).toHaveTextContent('Notion Integration')
+    })
+
+    it('should render SearchInput with current searchValue', () => {
+      // Arrange
+      mockStoreState.searchValue = 'test search'
+      mockStoreState.documentsData = [createMockWorkspace()]
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      const searchInput = screen.getByTestId('search-input-field') as HTMLInputElement
+      expect(searchInput.value).toBe('test search')
+    })
+  })
+
+  // ==========================================
+  // Props Testing
+  // ==========================================
+  describe('Props', () => {
+    describe('nodeId prop', () => {
+      it('should use nodeId in datasourceNodeRunURL for non-pipeline mode', () => {
+        // Arrange
+        mockStoreState.currentCredentialId = 'cred-1'
+        const props = createDefaultProps({
+          nodeId: 'custom-node-id',
+          isInPipeline: false,
+        })
+
+        // Act
+        render(<OnlineDocuments {...props} />)
+
+        // Assert - Effect triggers ssePost with correct URL
+        expect(mockSsePost).toHaveBeenCalledWith(
+          expect.stringContaining('/nodes/custom-node-id/run'),
+          expect.any(Object),
+          expect.any(Object),
+        )
+      })
+    })
+
+    describe('nodeData prop', () => {
+      it('should pass datasource_parameters to ssePost', () => {
+        // Arrange
+        mockStoreState.currentCredentialId = 'cred-1'
+        const nodeData = createMockNodeData({
+          datasource_parameters: {
+            param1: { type: VarKindType.constant, value: 'value1' },
+            param2: { type: VarKindType.constant, value: 'value2' },
+          },
+        })
+        const props = createDefaultProps({ nodeData })
+
+        // Act
+        render(<OnlineDocuments {...props} />)
+
+        // Assert
+        expect(mockSsePost).toHaveBeenCalledWith(
+          expect.any(String),
+          expect.objectContaining({
+            body: expect.objectContaining({
+              inputs: { param1: 'value1', param2: 'value2' },
+            }),
+          }),
+          expect.any(Object),
+        )
+      })
+
+      it('should pass plugin_id and provider_name to useGetDataSourceAuth', () => {
+        // Arrange
+        const nodeData = createMockNodeData({
+          plugin_id: 'my-plugin-id',
+          provider_name: 'my-provider',
+        })
+        const props = createDefaultProps({ nodeData })
+
+        // Act
+        render(<OnlineDocuments {...props} />)
+
+        // Assert
+        expect(mockUseGetDataSourceAuth).toHaveBeenCalledWith({
+          pluginId: 'my-plugin-id',
+          provider: 'my-provider',
+        })
+      })
+    })
+
+    describe('isInPipeline prop', () => {
+      it('should use draft URL when isInPipeline is true', () => {
+        // Arrange
+        mockStoreState.currentCredentialId = 'cred-1'
+        const props = createDefaultProps({ isInPipeline: true })
+
+        // Act
+        render(<OnlineDocuments {...props} />)
+
+        // Assert
+        expect(mockSsePost).toHaveBeenCalledWith(
+          expect.stringContaining('/workflows/draft/'),
+          expect.any(Object),
+          expect.any(Object),
+        )
+      })
+
+      it('should use published URL when isInPipeline is false', () => {
+        // Arrange
+        mockStoreState.currentCredentialId = 'cred-1'
+        const props = createDefaultProps({ isInPipeline: false })
+
+        // Act
+        render(<OnlineDocuments {...props} />)
+
+        // Assert
+        expect(mockSsePost).toHaveBeenCalledWith(
+          expect.stringContaining('/workflows/published/'),
+          expect.any(Object),
+          expect.any(Object),
+        )
+      })
+
+      it('should pass canPreview as false to PageSelector when isInPipeline is true', () => {
+        // Arrange
+        mockStoreState.documentsData = [createMockWorkspace()]
+        const props = createDefaultProps({ isInPipeline: true })
+
+        // Act
+        render(<OnlineDocuments {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('page-selector-can-preview')).toHaveTextContent('false')
+      })
+
+      it('should pass canPreview as true to PageSelector when isInPipeline is false', () => {
+        // Arrange
+        mockStoreState.documentsData = [createMockWorkspace()]
+        const props = createDefaultProps({ isInPipeline: false })
+
+        // Act
+        render(<OnlineDocuments {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('page-selector-can-preview')).toHaveTextContent('true')
+      })
+    })
+
+    describe('supportBatchUpload prop', () => {
+      it('should pass isMultipleChoice as true to PageSelector when supportBatchUpload is true', () => {
+        // Arrange
+        mockStoreState.documentsData = [createMockWorkspace()]
+        const props = createDefaultProps({ supportBatchUpload: true })
+
+        // Act
+        render(<OnlineDocuments {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('page-selector-multiple-choice')).toHaveTextContent('true')
+      })
+
+      it('should pass isMultipleChoice as false to PageSelector when supportBatchUpload is false', () => {
+        // Arrange
+        mockStoreState.documentsData = [createMockWorkspace()]
+        const props = createDefaultProps({ supportBatchUpload: false })
+
+        // Act
+        render(<OnlineDocuments {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('page-selector-multiple-choice')).toHaveTextContent('false')
+      })
+
+      it.each([
+        [true, 'true'],
+        [false, 'false'],
+        [undefined, 'true'], // Default value
+      ])('should handle supportBatchUpload=%s correctly', (value, expected) => {
+        // Arrange
+        mockStoreState.documentsData = [createMockWorkspace()]
+        const props = createDefaultProps({ supportBatchUpload: value })
+
+        // Act
+        render(<OnlineDocuments {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('page-selector-multiple-choice')).toHaveTextContent(expected)
+      })
+    })
+
+    describe('onCredentialChange prop', () => {
+      it('should pass onCredentialChange to Header', () => {
+        // Arrange
+        const mockOnCredentialChange = jest.fn()
+        const props = createDefaultProps({ onCredentialChange: mockOnCredentialChange })
+
+        // Act
+        render(<OnlineDocuments {...props} />)
+        fireEvent.click(screen.getByTestId('header-credential-change'))
+
+        // Assert
+        expect(mockOnCredentialChange).toHaveBeenCalledWith('new-cred-id')
+      })
+    })
+  })
+
+  // ==========================================
+  // Side Effects and Cleanup
+  // ==========================================
+  describe('Side Effects and Cleanup', () => {
+    it('should call getOnlineDocuments when currentCredentialId changes', () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(mockSsePost).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call getOnlineDocuments when currentCredentialId is empty', () => {
+      // Arrange
+      mockStoreState.currentCredentialId = ''
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(mockSsePost).not.toHaveBeenCalled()
+    })
+
+    it('should pass correct body parameters to ssePost', () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-123'
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(mockSsePost).toHaveBeenCalledWith(
+        expect.any(String),
+        {
+          body: {
+            inputs: {},
+            credential_id: 'cred-123',
+            datasource_type: 'online_document',
+          },
+        },
+        expect.any(Object),
+      )
+    })
+
+    it('should handle onDataSourceNodeCompleted callback correctly', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      const mockWorkspaces = [createMockWorkspace()]
+
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        // Simulate successful response
+        callbacks.onDataSourceNodeCompleted({
+          event: 'datasource_completed',
+          data: mockWorkspaces,
+          time_consuming: 1000,
+        })
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockStoreState.setDocumentsData).toHaveBeenCalledWith(mockWorkspaces)
+      })
+    })
+
+    it('should handle onDataSourceNodeError callback correctly', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        // Simulate error response
+        callbacks.onDataSourceNodeError({
+          event: 'datasource_error',
+          error: 'Something went wrong',
+        })
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockToastNotify).toHaveBeenCalledWith({
+          type: 'error',
+          message: 'Something went wrong',
+        })
+      })
+    })
+
+    it('should construct correct URL for draft workflow', () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      mockPipelineId = 'pipeline-456'
+      const props = createDefaultProps({
+        nodeId: 'node-789',
+        isInPipeline: true,
+      })
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(mockSsePost).toHaveBeenCalledWith(
+        '/rag/pipelines/pipeline-456/workflows/draft/datasource/nodes/node-789/run',
+        expect.any(Object),
+        expect.any(Object),
+      )
+    })
+
+    it('should construct correct URL for published workflow', () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      mockPipelineId = 'pipeline-456'
+      const props = createDefaultProps({
+        nodeId: 'node-789',
+        isInPipeline: false,
+      })
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(mockSsePost).toHaveBeenCalledWith(
+        '/rag/pipelines/pipeline-456/workflows/published/datasource/nodes/node-789/run',
+        expect.any(Object),
+        expect.any(Object),
+      )
+    })
+  })
+
+  // ==========================================
+  // Callback Stability and Memoization
+  // ==========================================
+  describe('Callback Stability and Memoization', () => {
+    it('should have stable handleSearchValueChange that updates store', () => {
+      // Arrange
+      mockStoreState.documentsData = [createMockWorkspace()]
+      const props = createDefaultProps()
+      render(<OnlineDocuments {...props} />)
+
+      // Act
+      const searchInput = screen.getByTestId('search-input-field')
+      fireEvent.change(searchInput, { target: { value: 'new search value' } })
+
+      // Assert
+      expect(mockStoreState.setSearchValue).toHaveBeenCalledWith('new search value')
+    })
+
+    it('should have stable handleSelectPages that updates store', () => {
+      // Arrange
+      mockStoreState.documentsData = [createMockWorkspace()]
+      const props = createDefaultProps()
+      render(<OnlineDocuments {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('page-selector-select-btn'))
+
+      // Assert
+      expect(mockStoreState.setSelectedPagesId).toHaveBeenCalled()
+      expect(mockStoreState.setOnlineDocuments).toHaveBeenCalled()
+    })
+
+    it('should have stable handlePreviewPage that updates store', () => {
+      // Arrange
+      const mockPages = [
+        createMockPage({ page_id: 'page-1', page_name: 'Page 1' }),
+      ]
+      mockStoreState.documentsData = [createMockWorkspace({ pages: mockPages })]
+      const props = createDefaultProps()
+      render(<OnlineDocuments {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('page-selector-preview-btn'))
+
+      // Assert
+      expect(mockStoreState.setCurrentDocument).toHaveBeenCalled()
+    })
+
+    it('should have stable handleSetting callback', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<OnlineDocuments {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('header-config-btn'))
+
+      // Assert
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({
+        payload: 'data-source',
+      })
+    })
+  })
+
+  // ==========================================
+  // Memoization Logic and Dependencies
+  // ==========================================
+  describe('Memoization Logic and Dependencies', () => {
+    it('should compute PagesMapAndSelectedPagesId correctly from documentsData', () => {
+      // Arrange
+      const mockPages = [
+        createMockPage({ page_id: 'page-1', page_name: 'Page 1' }),
+        createMockPage({ page_id: 'page-2', page_name: 'Page 2' }),
+      ]
+      mockStoreState.documentsData = [
+        createMockWorkspace({ workspace_id: 'ws-1', pages: mockPages }),
+      ]
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert - PageSelector receives the pagesMap (verified via mock)
+      expect(screen.getByTestId('page-selector')).toBeInTheDocument()
+    })
+
+    it('should recompute PagesMapAndSelectedPagesId when documentsData changes', () => {
+      // Arrange
+      const initialPages = [createMockPage({ page_id: 'page-1' })]
+      mockStoreState.documentsData = [createMockWorkspace({ pages: initialPages })]
+      const props = createDefaultProps()
+      const { rerender } = render(<OnlineDocuments {...props} />)
+
+      // Act - Update documentsData
+      const newPages = [
+        createMockPage({ page_id: 'page-1' }),
+        createMockPage({ page_id: 'page-2' }),
+      ]
+      mockStoreState.documentsData = [createMockWorkspace({ pages: newPages })]
+      rerender(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('page-selector')).toBeInTheDocument()
+    })
+
+    it('should handle empty documentsData in PagesMapAndSelectedPagesId computation', () => {
+      // Arrange
+      mockStoreState.documentsData = []
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert - Should show loading instead of PageSelector
+      expect(screen.getByTestId('loading')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // User Interactions and Event Handlers
+  // ==========================================
+  describe('User Interactions and Event Handlers', () => {
+    it('should handle search input changes', () => {
+      // Arrange
+      mockStoreState.documentsData = [createMockWorkspace()]
+      const props = createDefaultProps()
+      render(<OnlineDocuments {...props} />)
+
+      // Act
+      const searchInput = screen.getByTestId('search-input-field')
+      fireEvent.change(searchInput, { target: { value: 'search query' } })
+
+      // Assert
+      expect(mockStoreState.setSearchValue).toHaveBeenCalledWith('search query')
+    })
+
+    it('should handle page selection', () => {
+      // Arrange
+      const mockPages = [
+        createMockPage({ page_id: 'page-1', page_name: 'Page 1' }),
+        createMockPage({ page_id: 'page-2', page_name: 'Page 2' }),
+      ]
+      mockStoreState.documentsData = [createMockWorkspace({ pages: mockPages })]
+      const props = createDefaultProps()
+      render(<OnlineDocuments {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('page-selector-select-btn'))
+
+      // Assert
+      expect(mockStoreState.setSelectedPagesId).toHaveBeenCalled()
+      expect(mockStoreState.setOnlineDocuments).toHaveBeenCalled()
+    })
+
+    it('should handle page preview', () => {
+      // Arrange
+      const mockPages = [createMockPage({ page_id: 'page-1', page_name: 'Page 1' })]
+      mockStoreState.documentsData = [createMockWorkspace({ pages: mockPages })]
+      const props = createDefaultProps()
+      render(<OnlineDocuments {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('page-selector-preview-btn'))
+
+      // Assert
+      expect(mockStoreState.setCurrentDocument).toHaveBeenCalled()
+    })
+
+    it('should handle configuration button click', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<OnlineDocuments {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('header-config-btn'))
+
+      // Assert
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({
+        payload: 'data-source',
+      })
+    })
+
+    it('should handle credential change', () => {
+      // Arrange
+      const mockOnCredentialChange = jest.fn()
+      const props = createDefaultProps({ onCredentialChange: mockOnCredentialChange })
+      render(<OnlineDocuments {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('header-credential-change'))
+
+      // Assert
+      expect(mockOnCredentialChange).toHaveBeenCalledWith('new-cred-id')
+    })
+  })
+
+  // ==========================================
+  // API Calls Mocking
+  // ==========================================
+  describe('API Calls', () => {
+    it('should call ssePost with correct parameters', () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'test-cred'
+      const props = createDefaultProps({
+        nodeData: createMockNodeData({
+          datasource_parameters: {
+            workspace: { type: VarKindType.constant, value: 'ws-123' },
+            database: { type: VarKindType.constant, value: 'db-456' },
+          },
+        }),
+      })
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(mockSsePost).toHaveBeenCalledWith(
+        expect.any(String),
+        {
+          body: {
+            inputs: { workspace: 'ws-123', database: 'db-456' },
+            credential_id: 'test-cred',
+            datasource_type: 'online_document',
+          },
+        },
+        expect.objectContaining({
+          onDataSourceNodeCompleted: expect.any(Function),
+          onDataSourceNodeError: expect.any(Function),
+        }),
+      )
+    })
+
+    it('should handle successful API response', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      const mockData = [createMockWorkspace()]
+
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        callbacks.onDataSourceNodeCompleted({
+          event: 'datasource_completed',
+          data: mockData,
+          time_consuming: 500,
+        })
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockStoreState.setDocumentsData).toHaveBeenCalledWith(mockData)
+      })
+    })
+
+    it('should handle API error response', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        callbacks.onDataSourceNodeError({
+          event: 'datasource_error',
+          error: 'API Error Message',
+        })
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockToastNotify).toHaveBeenCalledWith({
+          type: 'error',
+          message: 'API Error Message',
+        })
+      })
+    })
+
+    it('should use useGetDataSourceAuth with correct parameters', () => {
+      // Arrange
+      const nodeData = createMockNodeData({
+        plugin_id: 'notion-plugin',
+        provider_name: 'notion-provider',
+      })
+      const props = createDefaultProps({ nodeData })
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(mockUseGetDataSourceAuth).toHaveBeenCalledWith({
+        pluginId: 'notion-plugin',
+        provider: 'notion-provider',
+      })
+    })
+
+    it('should pass credentials from useGetDataSourceAuth to Header', () => {
+      // Arrange
+      const mockCredentials = [
+        createMockCredential({ id: 'cred-1', name: 'Credential 1' }),
+        createMockCredential({ id: 'cred-2', name: 'Credential 2' }),
+      ]
+      mockUseGetDataSourceAuth.mockReturnValue({
+        data: { result: mockCredentials },
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('header-credentials-count')).toHaveTextContent('2')
+    })
+  })
+
+  // ==========================================
+  // Edge Cases and Error Handling
+  // ==========================================
+  describe('Edge Cases and Error Handling', () => {
+    it('should handle empty credentials array', () => {
+      // Arrange
+      mockUseGetDataSourceAuth.mockReturnValue({
+        data: { result: [] },
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('header-credentials-count')).toHaveTextContent('0')
+    })
+
+    it('should handle undefined dataSourceAuth result', () => {
+      // Arrange
+      mockUseGetDataSourceAuth.mockReturnValue({
+        data: { result: undefined },
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('header-credentials-count')).toHaveTextContent('0')
+    })
+
+    it('should handle null dataSourceAuth data', () => {
+      // Arrange
+      mockUseGetDataSourceAuth.mockReturnValue({
+        data: null,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('header-credentials-count')).toHaveTextContent('0')
+    })
+
+    it('should handle documentsData with empty pages array', () => {
+      // Arrange
+      mockStoreState.documentsData = [createMockWorkspace({ pages: [] })]
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('page-selector')).toBeInTheDocument()
+    })
+
+    it('should handle undefined documentsData in useMemo (line 59 branch)', () => {
+      // Arrange - Set documentsData to undefined to test the || [] fallback
+      mockStoreState.documentsData = undefined as unknown as DataSourceNotionWorkspace[]
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert - Should show loading when documentsData is undefined
+      expect(screen.getByTestId('loading')).toBeInTheDocument()
+    })
+
+    it('should handle undefined datasource_parameters (line 79 branch)', () => {
+      // Arrange - Set datasource_parameters to undefined to test the || {} fallback
+      mockStoreState.currentCredentialId = 'cred-1'
+      const nodeData = createMockNodeData()
+      // @ts-expect-error - Testing undefined case for branch coverage
+      nodeData.datasource_parameters = undefined
+      const props = createDefaultProps({ nodeData })
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert - ssePost should be called with empty inputs
+      expect(mockSsePost).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.objectContaining({
+            inputs: {},
+          }),
+        }),
+        expect.any(Object),
+      )
+    })
+
+    it('should handle datasource_parameters value without value property (line 80 else branch)', () => {
+      // Arrange - Test the else branch where value is not an object with 'value' property
+      // This tests: typeof value === 'object' && value !== null && 'value' in value ? value.value : value
+      // The else branch (: value) is executed when value is a primitive or object without 'value' key
+      mockStoreState.currentCredentialId = 'cred-1'
+      const nodeData = createMockNodeData({
+        datasource_parameters: {
+          // Object without 'value' key - should use the object itself
+          objWithoutValue: { type: VarKindType.constant, other: 'data' } as any,
+        },
+      })
+      const props = createDefaultProps({ nodeData })
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert - The object without 'value' property should be passed as-is
+      expect(mockSsePost).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.objectContaining({
+            inputs: expect.objectContaining({
+              objWithoutValue: expect.objectContaining({ type: VarKindType.constant, other: 'data' }),
+            }),
+          }),
+        }),
+        expect.any(Object),
+      )
+    })
+
+    it('should handle multiple workspaces in documentsData', () => {
+      // Arrange
+      mockStoreState.documentsData = [
+        createMockWorkspace({ workspace_id: 'ws-1', pages: [createMockPage({ page_id: 'page-1' })] }),
+        createMockWorkspace({ workspace_id: 'ws-2', pages: [createMockPage({ page_id: 'page-2' })] }),
+      ]
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('page-selector')).toBeInTheDocument()
+    })
+
+    it('should handle special characters in searchValue', () => {
+      // Arrange
+      mockStoreState.documentsData = [createMockWorkspace()]
+      const props = createDefaultProps()
+      render(<OnlineDocuments {...props} />)
+
+      // Act
+      const searchInput = screen.getByTestId('search-input-field')
+      fireEvent.change(searchInput, { target: { value: 'test<script>alert("xss")</script>' } })
+
+      // Assert
+      expect(mockStoreState.setSearchValue).toHaveBeenCalledWith('test<script>alert("xss")</script>')
+    })
+
+    it('should handle unicode characters in searchValue', () => {
+      // Arrange
+      mockStoreState.documentsData = [createMockWorkspace()]
+      const props = createDefaultProps()
+      render(<OnlineDocuments {...props} />)
+
+      // Act
+      const searchInput = screen.getByTestId('search-input-field')
+      fireEvent.change(searchInput, { target: { value: '测试搜索 🔍' } })
+
+      // Assert
+      expect(mockStoreState.setSearchValue).toHaveBeenCalledWith('测试搜索 🔍')
+    })
+
+    it('should handle empty string currentCredentialId', () => {
+      // Arrange
+      mockStoreState.currentCredentialId = ''
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(mockSsePost).not.toHaveBeenCalled()
+    })
+
+    it('should handle complex datasource_parameters with nested objects', () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      const nodeData = createMockNodeData({
+        datasource_parameters: {
+          simple: { type: VarKindType.constant, value: 'value' },
+          nested: { type: VarKindType.constant, value: 'nested-value' },
+        },
+      })
+      const props = createDefaultProps({ nodeData })
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(mockSsePost).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.objectContaining({
+            inputs: expect.objectContaining({
+              simple: 'value',
+              nested: 'nested-value',
+            }),
+          }),
+        }),
+        expect.any(Object),
+      )
+    })
+
+    it('should handle undefined pipelineId gracefully', () => {
+      // Arrange
+      mockPipelineId = undefined as any
+      mockStoreState.currentCredentialId = 'cred-1'
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert - Should still call ssePost with undefined in URL
+      expect(mockSsePost).toHaveBeenCalled()
+    })
+  })
+
+  // ==========================================
+  // All Prop Variations
+  // ==========================================
+  describe('Prop Variations', () => {
+    it.each([
+      [{ isInPipeline: true, supportBatchUpload: true }],
+      [{ isInPipeline: true, supportBatchUpload: false }],
+      [{ isInPipeline: false, supportBatchUpload: true }],
+      [{ isInPipeline: false, supportBatchUpload: false }],
+    ])('should render correctly with props %o', (propVariation) => {
+      // Arrange
+      mockStoreState.documentsData = [createMockWorkspace()]
+      const props = createDefaultProps(propVariation)
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('page-selector')).toBeInTheDocument()
+      expect(screen.getByTestId('page-selector-can-preview')).toHaveTextContent(
+        String(!propVariation.isInPipeline),
+      )
+      expect(screen.getByTestId('page-selector-multiple-choice')).toHaveTextContent(
+        String(propVariation.supportBatchUpload),
+      )
+    })
+
+    it('should use default values for optional props', () => {
+      // Arrange
+      mockStoreState.documentsData = [createMockWorkspace()]
+      const props: OnlineDocumentsProps = {
+        nodeId: 'node-1',
+        nodeData: createMockNodeData(),
+        onCredentialChange: jest.fn(),
+        // isInPipeline and supportBatchUpload are not provided
+      }
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert - Default values: isInPipeline = false, supportBatchUpload = true
+      expect(screen.getByTestId('page-selector-can-preview')).toHaveTextContent('true')
+      expect(screen.getByTestId('page-selector-multiple-choice')).toHaveTextContent('true')
+    })
+  })
+
+  // ==========================================
+  // Integration Tests
+  // ==========================================
+  describe('Integration', () => {
+    it('should complete full workflow: load data -> search -> select -> preview', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      const mockPages = [
+        createMockPage({ page_id: 'page-1', page_name: 'Test Page 1' }),
+        createMockPage({ page_id: 'page-2', page_name: 'Test Page 2' }),
+      ]
+      const mockWorkspace = createMockWorkspace({ pages: mockPages })
+
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        callbacks.onDataSourceNodeCompleted({
+          event: 'datasource_completed',
+          data: [mockWorkspace],
+          time_consuming: 100,
+        })
+      })
+
+      // Update store state after API call
+      mockStoreState.documentsData = [mockWorkspace]
+
+      const props = createDefaultProps()
+      render(<OnlineDocuments {...props} />)
+
+      // Assert - Data loaded and PageSelector shown
+      await waitFor(() => {
+        expect(mockStoreState.setDocumentsData).toHaveBeenCalled()
+      })
+
+      // Act - Search
+      const searchInput = screen.getByTestId('search-input-field')
+      fireEvent.change(searchInput, { target: { value: 'Test' } })
+      expect(mockStoreState.setSearchValue).toHaveBeenCalledWith('Test')
+
+      // Act - Select pages
+      fireEvent.click(screen.getByTestId('page-selector-select-btn'))
+      expect(mockStoreState.setSelectedPagesId).toHaveBeenCalled()
+
+      // Act - Preview page
+      fireEvent.click(screen.getByTestId('page-selector-preview-btn'))
+      expect(mockStoreState.setCurrentDocument).toHaveBeenCalled()
+    })
+
+    it('should handle error flow correctly', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        callbacks.onDataSourceNodeError({
+          event: 'datasource_error',
+          error: 'Failed to fetch documents',
+        })
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockToastNotify).toHaveBeenCalledWith({
+          type: 'error',
+          message: 'Failed to fetch documents',
+        })
+      })
+
+      // Should still show loading since documentsData is empty
+      expect(screen.getByTestId('loading')).toBeInTheDocument()
+    })
+
+    it('should handle credential change and refetch documents', () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'initial-cred'
+      const mockOnCredentialChange = jest.fn()
+      const props = createDefaultProps({ onCredentialChange: mockOnCredentialChange })
+
+      // Act
+      render(<OnlineDocuments {...props} />)
+
+      // Initial fetch
+      expect(mockSsePost).toHaveBeenCalledTimes(1)
+
+      // Change credential
+      fireEvent.click(screen.getByTestId('header-credential-change'))
+      expect(mockOnCredentialChange).toHaveBeenCalledWith('new-cred-id')
+    })
+  })
+
+  // ==========================================
+  // Styling
+  // ==========================================
+  describe('Styling', () => {
+    it('should apply correct container classes', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<OnlineDocuments {...props} />)
+
+      // Assert
+      const rootDiv = container.firstChild as HTMLElement
+      expect(rootDiv).toHaveClass('flex', 'flex-col', 'gap-y-2')
+    })
+
+    it('should apply correct classes to main content container', () => {
+      // Arrange
+      mockStoreState.documentsData = [createMockWorkspace()]
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<OnlineDocuments {...props} />)
+
+      // Assert
+      const contentContainer = container.querySelector('.rounded-xl.border')
+      expect(contentContainer).toBeInTheDocument()
+      expect(contentContainer).toHaveClass('border-components-panel-border', 'bg-background-default-subtle')
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/index.spec.tsx
new file mode 100644
index 0000000000..7307ef7a6f
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/index.spec.tsx
@@ -0,0 +1,1633 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import PageSelector from './index'
+import type { NotionPageTreeItem, NotionPageTreeMap } from './index'
+import type { DataSourceNotionPage, DataSourceNotionPageMap } from '@/models/common'
+import { recursivePushInParentDescendants } from './utils'
+
+// ==========================================
+// Mock Modules
+// ==========================================
+
+// Note: react-i18next uses global mock from web/__mocks__/react-i18next.ts
+
+// Mock react-window FixedSizeList - renders items directly for testing
+jest.mock('react-window', () => ({
+  FixedSizeList: ({ children: ItemComponent, itemCount, itemData, itemKey }: any) => (
+    <div data-testid="virtual-list">
+      {Array.from({ length: itemCount }).map((_, index) => (
+        <ItemComponent
+          key={itemKey?.(index, itemData) || index}
+          index={index}
+          style={{ top: index * 28, left: 0, right: 0, width: '100%', position: 'absolute' }}
+          data={itemData}
+        />
+      ))}
+    </div>
+  ),
+}))
+
+// Note: NotionIcon from @/app/components/base/ is NOT mocked - using real component per testing guidelines
+
+// ==========================================
+// Helper Functions for Base Components
+// ==========================================
+// Get checkbox element (uses data-testid pattern from base Checkbox component)
+const getCheckbox = () => document.querySelector('[data-testid^="checkbox-"]') as HTMLElement
+const getAllCheckboxes = () => document.querySelectorAll('[data-testid^="checkbox-"]')
+
+// Get radio element (uses size-4 rounded-full class pattern from base Radio component)
+const getRadio = () => document.querySelector('.size-4.rounded-full') as HTMLElement
+const getAllRadios = () => document.querySelectorAll('.size-4.rounded-full')
+
+// Check if checkbox is checked by looking for check icon
+const isCheckboxChecked = (checkbox: Element) => checkbox.querySelector('[data-testid^="check-icon-"]') !== null
+
+// Check if checkbox is disabled by looking for disabled class
+const isCheckboxDisabled = (checkbox: Element) => checkbox.classList.contains('cursor-not-allowed')
+
+// ==========================================
+// Test Data Builders
+// ==========================================
+const createMockPage = (overrides?: Partial<DataSourceNotionPage>): DataSourceNotionPage => ({
+  page_id: 'page-1',
+  page_name: 'Test Page',
+  page_icon: null,
+  is_bound: false,
+  parent_id: 'root',
+  type: 'page',
+  ...overrides,
+})
+
+const createMockPagesMap = (pages: DataSourceNotionPage[]): DataSourceNotionPageMap => {
+  return pages.reduce((acc, page) => {
+    acc[page.page_id] = { ...page, workspace_id: 'workspace-1' }
+    return acc
+  }, {} as DataSourceNotionPageMap)
+}
+
+type PageSelectorProps = React.ComponentProps<typeof PageSelector>
+
+const createDefaultProps = (overrides?: Partial<PageSelectorProps>): PageSelectorProps => {
+  const defaultList = [createMockPage()]
+  return {
+    checkedIds: new Set<string>(),
+    disabledValue: new Set<string>(),
+    searchValue: '',
+    pagesMap: createMockPagesMap(defaultList),
+    list: defaultList,
+    onSelect: jest.fn(),
+    canPreview: true,
+    onPreview: jest.fn(),
+    isMultipleChoice: true,
+    currentCredentialId: 'cred-1',
+    ...overrides,
+  }
+}
+
+// Helper to create hierarchical page structure
+const createHierarchicalPages = () => {
+  const rootPage = createMockPage({ page_id: 'root-page', page_name: 'Root Page', parent_id: 'root' })
+  const childPage1 = createMockPage({ page_id: 'child-1', page_name: 'Child 1', parent_id: 'root-page' })
+  const childPage2 = createMockPage({ page_id: 'child-2', page_name: 'Child 2', parent_id: 'root-page' })
+  const grandChild = createMockPage({ page_id: 'grandchild-1', page_name: 'Grandchild 1', parent_id: 'child-1' })
+
+  const list = [rootPage, childPage1, childPage2, grandChild]
+  const pagesMap = createMockPagesMap(list)
+
+  return { list, pagesMap, rootPage, childPage1, childPage2, grandChild }
+}
+
+// ==========================================
+// Test Suites
+// ==========================================
+describe('PageSelector', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('virtual-list')).toBeInTheDocument()
+    })
+
+    it('should render empty state when list is empty', () => {
+      // Arrange
+      const props = createDefaultProps({
+        list: [],
+        pagesMap: {},
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert
+      expect(screen.getByText('common.dataSource.notion.selector.noSearchResult')).toBeInTheDocument()
+      expect(screen.queryByTestId('virtual-list')).not.toBeInTheDocument()
+    })
+
+    it('should render items using FixedSizeList', () => {
+      // Arrange
+      const pages = [
+        createMockPage({ page_id: 'page-1', page_name: 'Page 1' }),
+        createMockPage({ page_id: 'page-2', page_name: 'Page 2' }),
+      ]
+      const props = createDefaultProps({
+        list: pages,
+        pagesMap: createMockPagesMap(pages),
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert
+      expect(screen.getByText('Page 1')).toBeInTheDocument()
+      expect(screen.getByText('Page 2')).toBeInTheDocument()
+    })
+
+    it('should render checkboxes when isMultipleChoice is true', () => {
+      // Arrange
+      const props = createDefaultProps({ isMultipleChoice: true })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert
+      expect(getCheckbox()).toBeInTheDocument()
+    })
+
+    it('should render radio buttons when isMultipleChoice is false', () => {
+      // Arrange
+      const props = createDefaultProps({ isMultipleChoice: false })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert
+      expect(getRadio()).toBeInTheDocument()
+    })
+
+    it('should render preview button when canPreview is true', () => {
+      // Arrange
+      const props = createDefaultProps({ canPreview: true })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert
+      expect(screen.getByText('common.dataSource.notion.selector.preview')).toBeInTheDocument()
+    })
+
+    it('should not render preview button when canPreview is false', () => {
+      // Arrange
+      const props = createDefaultProps({ canPreview: false })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert
+      expect(screen.queryByText('common.dataSource.notion.selector.preview')).not.toBeInTheDocument()
+    })
+
+    it('should render NotionIcon for each page', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert - NotionIcon renders svg when page_icon is null
+      const notionIcon = document.querySelector('.h-5.w-5')
+      expect(notionIcon).toBeInTheDocument()
+    })
+
+    it('should render page name', () => {
+      // Arrange
+      const props = createDefaultProps({
+        list: [createMockPage({ page_name: 'My Custom Page' })],
+        pagesMap: createMockPagesMap([createMockPage({ page_name: 'My Custom Page' })]),
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert
+      expect(screen.getByText('My Custom Page')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Props Testing
+  // ==========================================
+  describe('Props', () => {
+    describe('checkedIds prop', () => {
+      it('should mark checkbox as checked when page is in checkedIds', () => {
+        // Arrange
+        const page = createMockPage({ page_id: 'page-1' })
+        const props = createDefaultProps({
+          list: [page],
+          pagesMap: createMockPagesMap([page]),
+          checkedIds: new Set(['page-1']),
+        })
+
+        // Act
+        render(<PageSelector {...props} />)
+
+        // Assert
+        const checkbox = getCheckbox()
+        expect(checkbox).toBeInTheDocument()
+        expect(isCheckboxChecked(checkbox)).toBe(true)
+      })
+
+      it('should mark checkbox as unchecked when page is not in checkedIds', () => {
+        // Arrange
+        const page = createMockPage({ page_id: 'page-1' })
+        const props = createDefaultProps({
+          list: [page],
+          pagesMap: createMockPagesMap([page]),
+          checkedIds: new Set(),
+        })
+
+        // Act
+        render(<PageSelector {...props} />)
+
+        // Assert
+        const checkbox = getCheckbox()
+        expect(checkbox).toBeInTheDocument()
+        expect(isCheckboxChecked(checkbox)).toBe(false)
+      })
+
+      it('should handle empty checkedIds', () => {
+        // Arrange
+        const props = createDefaultProps({ checkedIds: new Set() })
+
+        // Act
+        render(<PageSelector {...props} />)
+
+        // Assert
+        const checkbox = getCheckbox()
+        expect(checkbox).toBeInTheDocument()
+        expect(isCheckboxChecked(checkbox)).toBe(false)
+      })
+
+      it('should handle multiple checked items', () => {
+        // Arrange
+        const pages = [
+          createMockPage({ page_id: 'page-1', page_name: 'Page 1' }),
+          createMockPage({ page_id: 'page-2', page_name: 'Page 2' }),
+          createMockPage({ page_id: 'page-3', page_name: 'Page 3' }),
+        ]
+        const props = createDefaultProps({
+          list: pages,
+          pagesMap: createMockPagesMap(pages),
+          checkedIds: new Set(['page-1', 'page-3']),
+        })
+
+        // Act
+        render(<PageSelector {...props} />)
+
+        // Assert
+        const checkboxes = getAllCheckboxes()
+        expect(isCheckboxChecked(checkboxes[0])).toBe(true)
+        expect(isCheckboxChecked(checkboxes[1])).toBe(false)
+        expect(isCheckboxChecked(checkboxes[2])).toBe(true)
+      })
+    })
+
+    describe('disabledValue prop', () => {
+      it('should disable checkbox when page is in disabledValue', () => {
+        // Arrange
+        const page = createMockPage({ page_id: 'page-1' })
+        const props = createDefaultProps({
+          list: [page],
+          pagesMap: createMockPagesMap([page]),
+          disabledValue: new Set(['page-1']),
+        })
+
+        // Act
+        render(<PageSelector {...props} />)
+
+        // Assert
+        const checkbox = getCheckbox()
+        expect(checkbox).toBeInTheDocument()
+        expect(isCheckboxDisabled(checkbox)).toBe(true)
+      })
+
+      it('should not disable checkbox when page is not in disabledValue', () => {
+        // Arrange
+        const page = createMockPage({ page_id: 'page-1' })
+        const props = createDefaultProps({
+          list: [page],
+          pagesMap: createMockPagesMap([page]),
+          disabledValue: new Set(),
+        })
+
+        // Act
+        render(<PageSelector {...props} />)
+
+        // Assert
+        const checkbox = getCheckbox()
+        expect(checkbox).toBeInTheDocument()
+        expect(isCheckboxDisabled(checkbox)).toBe(false)
+      })
+
+      it('should handle partial disabled items', () => {
+        // Arrange
+        const pages = [
+          createMockPage({ page_id: 'page-1', page_name: 'Page 1' }),
+          createMockPage({ page_id: 'page-2', page_name: 'Page 2' }),
+        ]
+        const props = createDefaultProps({
+          list: pages,
+          pagesMap: createMockPagesMap(pages),
+          disabledValue: new Set(['page-1']),
+        })
+
+        // Act
+        render(<PageSelector {...props} />)
+
+        // Assert
+        const checkboxes = getAllCheckboxes()
+        expect(isCheckboxDisabled(checkboxes[0])).toBe(true)
+        expect(isCheckboxDisabled(checkboxes[1])).toBe(false)
+      })
+    })
+
+    describe('searchValue prop', () => {
+      it('should filter pages by search value', () => {
+        // Arrange
+        const pages = [
+          createMockPage({ page_id: 'page-1', page_name: 'Apple Page' }),
+          createMockPage({ page_id: 'page-2', page_name: 'Banana Page' }),
+          createMockPage({ page_id: 'page-3', page_name: 'Apple Pie' }),
+        ]
+        const props = createDefaultProps({
+          list: pages,
+          pagesMap: createMockPagesMap(pages),
+          searchValue: 'Apple',
+        })
+
+        // Act
+        render(<PageSelector {...props} />)
+
+        // Assert - Only pages containing "Apple" should be visible
+        // Use getAllByText since the page name appears in both title div and breadcrumbs
+        expect(screen.getAllByText('Apple Page').length).toBeGreaterThan(0)
+        expect(screen.getAllByText('Apple Pie').length).toBeGreaterThan(0)
+        // Banana Page is filtered out because it doesn't contain "Apple"
+        expect(screen.queryByText('Banana Page')).not.toBeInTheDocument()
+      })
+
+      it('should show empty state when no pages match search', () => {
+        // Arrange
+        const pages = [createMockPage({ page_id: 'page-1', page_name: 'Test Page' })]
+        const props = createDefaultProps({
+          list: pages,
+          pagesMap: createMockPagesMap(pages),
+          searchValue: 'NonExistent',
+        })
+
+        // Act
+        render(<PageSelector {...props} />)
+
+        // Assert
+        expect(screen.getByText('common.dataSource.notion.selector.noSearchResult')).toBeInTheDocument()
+      })
+
+      it('should show all pages when searchValue is empty', () => {
+        // Arrange
+        const pages = [
+          createMockPage({ page_id: 'page-1', page_name: 'Page 1' }),
+          createMockPage({ page_id: 'page-2', page_name: 'Page 2' }),
+        ]
+        const props = createDefaultProps({
+          list: pages,
+          pagesMap: createMockPagesMap(pages),
+          searchValue: '',
+        })
+
+        // Act
+        render(<PageSelector {...props} />)
+
+        // Assert
+        expect(screen.getByText('Page 1')).toBeInTheDocument()
+        expect(screen.getByText('Page 2')).toBeInTheDocument()
+      })
+
+      it('should show breadcrumbs when searchValue is present', () => {
+        // Arrange
+        const { list, pagesMap } = createHierarchicalPages()
+        const props = createDefaultProps({
+          list,
+          pagesMap,
+          searchValue: 'Grandchild',
+        })
+
+        // Act
+        render(<PageSelector {...props} />)
+
+        // Assert - page name should be visible
+        expect(screen.getByText('Grandchild 1')).toBeInTheDocument()
+      })
+
+      it('should perform case-sensitive search', () => {
+        // Arrange
+        const pages = [
+          createMockPage({ page_id: 'page-1', page_name: 'Apple Page' }),
+          createMockPage({ page_id: 'page-2', page_name: 'apple page' }),
+        ]
+        const props = createDefaultProps({
+          list: pages,
+          pagesMap: createMockPagesMap(pages),
+          searchValue: 'Apple',
+        })
+
+        // Act
+        render(<PageSelector {...props} />)
+
+        // Assert - Only 'Apple Page' should match (case-sensitive)
+        // Use getAllByText since the page name appears in both title div and breadcrumbs
+        expect(screen.getAllByText('Apple Page').length).toBeGreaterThan(0)
+        expect(screen.queryByText('apple page')).not.toBeInTheDocument()
+      })
+    })
+
+    describe('canPreview prop', () => {
+      it('should show preview button when canPreview is true', () => {
+        // Arrange
+        const props = createDefaultProps({ canPreview: true })
+
+        // Act
+        render(<PageSelector {...props} />)
+
+        // Assert
+        expect(screen.getByText('common.dataSource.notion.selector.preview')).toBeInTheDocument()
+      })
+
+      it('should hide preview button when canPreview is false', () => {
+        // Arrange
+        const props = createDefaultProps({ canPreview: false })
+
+        // Act
+        render(<PageSelector {...props} />)
+
+        // Assert
+        expect(screen.queryByText('common.dataSource.notion.selector.preview')).not.toBeInTheDocument()
+      })
+
+      it('should use default value true when canPreview is not provided', () => {
+        // Arrange
+        const props = createDefaultProps()
+        delete (props as any).canPreview
+
+        // Act
+        render(<PageSelector {...props} />)
+
+        // Assert
+        expect(screen.getByText('common.dataSource.notion.selector.preview')).toBeInTheDocument()
+      })
+    })
+
+    describe('isMultipleChoice prop', () => {
+      it('should render checkbox when isMultipleChoice is true', () => {
+        // Arrange
+        const props = createDefaultProps({ isMultipleChoice: true })
+
+        // Act
+        render(<PageSelector {...props} />)
+
+        // Assert
+        expect(getCheckbox()).toBeInTheDocument()
+        expect(getRadio()).not.toBeInTheDocument()
+      })
+
+      it('should render radio when isMultipleChoice is false', () => {
+        // Arrange
+        const props = createDefaultProps({ isMultipleChoice: false })
+
+        // Act
+        render(<PageSelector {...props} />)
+
+        // Assert
+        expect(getRadio()).toBeInTheDocument()
+        expect(getCheckbox()).not.toBeInTheDocument()
+      })
+
+      it('should use default value true when isMultipleChoice is not provided', () => {
+        // Arrange
+        const props = createDefaultProps()
+        delete (props as any).isMultipleChoice
+
+        // Act
+        render(<PageSelector {...props} />)
+
+        // Assert
+        expect(getCheckbox()).toBeInTheDocument()
+      })
+    })
+
+    describe('onSelect prop', () => {
+      it('should call onSelect when checkbox is clicked', () => {
+        // Arrange
+        const mockOnSelect = jest.fn()
+        const props = createDefaultProps({ onSelect: mockOnSelect })
+
+        // Act
+        render(<PageSelector {...props} />)
+        fireEvent.click(getCheckbox())
+
+        // Assert
+        expect(mockOnSelect).toHaveBeenCalledTimes(1)
+        expect(mockOnSelect).toHaveBeenCalledWith(expect.any(Set))
+      })
+
+      it('should pass updated set to onSelect', () => {
+        // Arrange
+        const mockOnSelect = jest.fn()
+        const page = createMockPage({ page_id: 'page-1' })
+        const props = createDefaultProps({
+          list: [page],
+          pagesMap: createMockPagesMap([page]),
+          checkedIds: new Set(),
+          onSelect: mockOnSelect,
+        })
+
+        // Act
+        render(<PageSelector {...props} />)
+        fireEvent.click(getCheckbox())
+
+        // Assert
+        const calledSet = mockOnSelect.mock.calls[0][0] as Set<string>
+        expect(calledSet.has('page-1')).toBe(true)
+      })
+    })
+
+    describe('onPreview prop', () => {
+      it('should call onPreview when preview button is clicked', () => {
+        // Arrange
+        const mockOnPreview = jest.fn()
+        const page = createMockPage({ page_id: 'page-1' })
+        const props = createDefaultProps({
+          list: [page],
+          pagesMap: createMockPagesMap([page]),
+          onPreview: mockOnPreview,
+          canPreview: true,
+        })
+
+        // Act
+        render(<PageSelector {...props} />)
+        fireEvent.click(screen.getByText('common.dataSource.notion.selector.preview'))
+
+        // Assert
+        expect(mockOnPreview).toHaveBeenCalledWith('page-1')
+      })
+
+      it('should not throw when onPreview is undefined', () => {
+        // Arrange
+        const props = createDefaultProps({
+          onPreview: undefined,
+          canPreview: true,
+        })
+
+        // Act & Assert
+        expect(() => {
+          render(<PageSelector {...props} />)
+          fireEvent.click(screen.getByText('common.dataSource.notion.selector.preview'))
+        }).not.toThrow()
+      })
+    })
+
+    describe('currentCredentialId prop', () => {
+      it('should reset dataList when currentCredentialId changes', () => {
+        // Arrange
+        const pages = [
+          createMockPage({ page_id: 'page-1', page_name: 'Page 1' }),
+        ]
+        const props = createDefaultProps({
+          list: pages,
+          pagesMap: createMockPagesMap(pages),
+          currentCredentialId: 'cred-1',
+        })
+
+        // Act
+        const { rerender } = render(<PageSelector {...props} />)
+
+        // Assert - Initial render
+        expect(screen.getByText('Page 1')).toBeInTheDocument()
+
+        // Rerender with new credential
+        rerender(<PageSelector {...props} currentCredentialId="cred-2" />)
+
+        // Assert - Should still show pages (reset and rebuild)
+        expect(screen.getByText('Page 1')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ==========================================
+  // State Management and Updates
+  // ==========================================
+  describe('State Management and Updates', () => {
+    it('should initialize dataList with root level pages', () => {
+      // Arrange
+      const { list, pagesMap, rootPage, childPage1 } = createHierarchicalPages()
+      const props = createDefaultProps({
+        list,
+        pagesMap,
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert - Only root level page should be visible initially
+      expect(screen.getByText(rootPage.page_name)).toBeInTheDocument()
+      // Child pages should not be visible until expanded
+      expect(screen.queryByText(childPage1.page_name)).not.toBeInTheDocument()
+    })
+
+    it('should update dataList when expanding a page with children', () => {
+      // Arrange
+      const { list, pagesMap, rootPage, childPage1, childPage2 } = createHierarchicalPages()
+      const props = createDefaultProps({
+        list,
+        pagesMap,
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Find and click the expand arrow (uses hover:bg-components-button-ghost-bg-hover class)
+      const arrowButton = document.querySelector('[class*="hover:bg-components-button-ghost-bg-hover"]')
+      if (arrowButton)
+        fireEvent.click(arrowButton)
+
+      // Assert
+      expect(screen.getByText(rootPage.page_name)).toBeInTheDocument()
+      expect(screen.getByText(childPage1.page_name)).toBeInTheDocument()
+      expect(screen.getByText(childPage2.page_name)).toBeInTheDocument()
+    })
+
+    it('should maintain currentPreviewPageId state', () => {
+      // Arrange
+      const mockOnPreview = jest.fn()
+      const pages = [
+        createMockPage({ page_id: 'page-1', page_name: 'Page 1' }),
+        createMockPage({ page_id: 'page-2', page_name: 'Page 2' }),
+      ]
+      const props = createDefaultProps({
+        list: pages,
+        pagesMap: createMockPagesMap(pages),
+        onPreview: mockOnPreview,
+        canPreview: true,
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+      const previewButtons = screen.getAllByText('common.dataSource.notion.selector.preview')
+      fireEvent.click(previewButtons[0])
+
+      // Assert
+      expect(mockOnPreview).toHaveBeenCalledWith('page-1')
+    })
+
+    it('should use searchDataList when searchValue is present', () => {
+      // Arrange
+      const pages = [
+        createMockPage({ page_id: 'page-1', page_name: 'Apple' }),
+        createMockPage({ page_id: 'page-2', page_name: 'Banana' }),
+      ]
+      const props = createDefaultProps({
+        list: pages,
+        pagesMap: createMockPagesMap(pages),
+        searchValue: 'Apple',
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert - Only pages matching search should be visible
+      // Use getAllByText since the page name appears in both title div and breadcrumbs
+      expect(screen.getAllByText('Apple').length).toBeGreaterThan(0)
+      expect(screen.queryByText('Banana')).not.toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Side Effects and Cleanup
+  // ==========================================
+  describe('Side Effects and Cleanup', () => {
+    it('should reinitialize dataList when currentCredentialId changes', () => {
+      // Arrange
+      const pages = [createMockPage({ page_id: 'page-1', page_name: 'Page 1' })]
+      const props = createDefaultProps({
+        list: pages,
+        pagesMap: createMockPagesMap(pages),
+        currentCredentialId: 'cred-1',
+      })
+
+      // Act
+      const { rerender } = render(<PageSelector {...props} />)
+      expect(screen.getByText('Page 1')).toBeInTheDocument()
+
+      // Change credential
+      rerender(<PageSelector {...props} currentCredentialId="cred-2" />)
+
+      // Assert - Component should still render correctly
+      expect(screen.getByText('Page 1')).toBeInTheDocument()
+    })
+
+    it('should filter root pages correctly on initialization', () => {
+      // Arrange
+      const { list, pagesMap, rootPage, childPage1 } = createHierarchicalPages()
+      const props = createDefaultProps({
+        list,
+        pagesMap,
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert - Only root level pages visible
+      expect(screen.getByText(rootPage.page_name)).toBeInTheDocument()
+      expect(screen.queryByText(childPage1.page_name)).not.toBeInTheDocument()
+    })
+
+    it('should include pages whose parent is not in pagesMap', () => {
+      // Arrange
+      const orphanPage = createMockPage({
+        page_id: 'orphan-page',
+        page_name: 'Orphan Page',
+        parent_id: 'non-existent-parent',
+      })
+      const props = createDefaultProps({
+        list: [orphanPage],
+        pagesMap: createMockPagesMap([orphanPage]),
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert - Orphan page should be visible at root level
+      expect(screen.getByText('Orphan Page')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Callback Stability and Memoization
+  // ==========================================
+  describe('Callback Stability and Memoization', () => {
+    it('should have stable handleToggle that expands children', () => {
+      // Arrange
+      const { list, pagesMap, childPage1, childPage2 } = createHierarchicalPages()
+      const props = createDefaultProps({
+        list,
+        pagesMap,
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Find expand arrow for root page (has RiArrowRightSLine icon)
+      const expandArrow = document.querySelector('[class*="hover:bg-components-button-ghost-bg-hover"]')
+      if (expandArrow)
+        fireEvent.click(expandArrow)
+
+      // Assert - Children should be visible
+      expect(screen.getByText(childPage1.page_name)).toBeInTheDocument()
+      expect(screen.getByText(childPage2.page_name)).toBeInTheDocument()
+    })
+
+    it('should have stable handleToggle that collapses descendants', () => {
+      // Arrange
+      const { list, pagesMap, childPage1, childPage2 } = createHierarchicalPages()
+      const props = createDefaultProps({
+        list,
+        pagesMap,
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // First expand
+      const expandArrow = document.querySelector('[class*="hover:bg-components-button-ghost-bg-hover"]')
+      if (expandArrow) {
+        fireEvent.click(expandArrow)
+        // Then collapse
+        fireEvent.click(expandArrow)
+      }
+
+      // Assert - Children should be hidden again
+      expect(screen.queryByText(childPage1.page_name)).not.toBeInTheDocument()
+      expect(screen.queryByText(childPage2.page_name)).not.toBeInTheDocument()
+    })
+
+    it('should have stable handleCheck that adds page and descendants to selection', () => {
+      // Arrange
+      const mockOnSelect = jest.fn()
+      const { list, pagesMap } = createHierarchicalPages()
+      const props = createDefaultProps({
+        list,
+        pagesMap,
+        onSelect: mockOnSelect,
+        checkedIds: new Set(),
+        isMultipleChoice: true,
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Check the root page
+      fireEvent.click(getCheckbox())
+
+      // Assert - onSelect should be called with the page and its descendants
+      expect(mockOnSelect).toHaveBeenCalled()
+      const selectedSet = mockOnSelect.mock.calls[0][0] as Set<string>
+      expect(selectedSet.has('root-page')).toBe(true)
+    })
+
+    it('should have stable handleCheck that removes page and descendants from selection', () => {
+      // Arrange
+      const mockOnSelect = jest.fn()
+      const { list, pagesMap } = createHierarchicalPages()
+      const props = createDefaultProps({
+        list,
+        pagesMap,
+        onSelect: mockOnSelect,
+        checkedIds: new Set(['root-page', 'child-1', 'child-2', 'grandchild-1']),
+        isMultipleChoice: true,
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Uncheck the root page
+      fireEvent.click(getCheckbox())
+
+      // Assert - onSelect should be called with empty/reduced set
+      expect(mockOnSelect).toHaveBeenCalled()
+    })
+
+    it('should have stable handlePreview that updates currentPreviewPageId', () => {
+      // Arrange
+      const mockOnPreview = jest.fn()
+      const page = createMockPage({ page_id: 'preview-page' })
+      const props = createDefaultProps({
+        list: [page],
+        pagesMap: createMockPagesMap([page]),
+        onPreview: mockOnPreview,
+        canPreview: true,
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+      fireEvent.click(screen.getByText('common.dataSource.notion.selector.preview'))
+
+      // Assert
+      expect(mockOnPreview).toHaveBeenCalledWith('preview-page')
+    })
+  })
+
+  // ==========================================
+  // Memoization Logic and Dependencies
+  // ==========================================
+  describe('Memoization Logic and Dependencies', () => {
+    it('should compute listMapWithChildrenAndDescendants correctly', () => {
+      // Arrange
+      const { list, pagesMap } = createHierarchicalPages()
+      const props = createDefaultProps({
+        list,
+        pagesMap,
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert - Tree structure should be built (verified by expand functionality)
+      const expandArrow = document.querySelector('[class*="hover:bg-components-button-ghost-bg-hover"]')
+      expect(expandArrow).toBeInTheDocument() // Root page has children
+    })
+
+    it('should recompute listMapWithChildrenAndDescendants when list changes', () => {
+      // Arrange
+      const initialList = [createMockPage({ page_id: 'page-1', page_name: 'Page 1' })]
+      const props = createDefaultProps({
+        list: initialList,
+        pagesMap: createMockPagesMap(initialList),
+      })
+
+      // Act
+      const { rerender } = render(<PageSelector {...props} />)
+      expect(screen.getByText('Page 1')).toBeInTheDocument()
+
+      // Update with new list
+      const newList = [
+        createMockPage({ page_id: 'page-1', page_name: 'Page 1' }),
+        createMockPage({ page_id: 'page-2', page_name: 'Page 2' }),
+      ]
+      rerender(<PageSelector {...props} list={newList} pagesMap={createMockPagesMap(newList)} />)
+
+      // Assert
+      expect(screen.getByText('Page 1')).toBeInTheDocument()
+      // Page 2 won't show because dataList state hasn't updated (only resets on credentialId change)
+    })
+
+    it('should recompute listMapWithChildrenAndDescendants when pagesMap changes', () => {
+      // Arrange
+      const initialList = [createMockPage({ page_id: 'page-1', page_name: 'Page 1' })]
+      const props = createDefaultProps({
+        list: initialList,
+        pagesMap: createMockPagesMap(initialList),
+      })
+
+      // Act
+      const { rerender } = render(<PageSelector {...props} />)
+
+      // Update pagesMap
+      const newPagesMap = {
+        ...createMockPagesMap(initialList),
+        'page-2': { ...createMockPage({ page_id: 'page-2' }), workspace_id: 'ws-1' },
+      }
+      rerender(<PageSelector {...props} pagesMap={newPagesMap} />)
+
+      // Assert - Should not throw
+      expect(screen.getByText('Page 1')).toBeInTheDocument()
+    })
+
+    it('should handle empty list in memoization', () => {
+      // Arrange
+      const props = createDefaultProps({
+        list: [],
+        pagesMap: {},
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert
+      expect(screen.getByText('common.dataSource.notion.selector.noSearchResult')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // User Interactions and Event Handlers
+  // ==========================================
+  describe('User Interactions and Event Handlers', () => {
+    it('should toggle expansion when clicking arrow button', () => {
+      // Arrange
+      const { list, pagesMap, childPage1 } = createHierarchicalPages()
+      const props = createDefaultProps({
+        list,
+        pagesMap,
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Initially children are hidden
+      expect(screen.queryByText(childPage1.page_name)).not.toBeInTheDocument()
+
+      // Click to expand
+      const expandArrow = document.querySelector('[class*="hover:bg-components-button-ghost-bg-hover"]')
+      if (expandArrow)
+        fireEvent.click(expandArrow)
+
+      // Children become visible
+      expect(screen.getByText(childPage1.page_name)).toBeInTheDocument()
+    })
+
+    it('should check/uncheck page when clicking checkbox', () => {
+      // Arrange
+      const mockOnSelect = jest.fn()
+      const props = createDefaultProps({
+        onSelect: mockOnSelect,
+        checkedIds: new Set(),
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+      fireEvent.click(getCheckbox())
+
+      // Assert
+      expect(mockOnSelect).toHaveBeenCalled()
+    })
+
+    it('should select radio when clicking in single choice mode', () => {
+      // Arrange
+      const mockOnSelect = jest.fn()
+      const props = createDefaultProps({
+        onSelect: mockOnSelect,
+        isMultipleChoice: false,
+        checkedIds: new Set(),
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+      fireEvent.click(getRadio())
+
+      // Assert
+      expect(mockOnSelect).toHaveBeenCalled()
+    })
+
+    it('should clear previous selection in single choice mode', () => {
+      // Arrange
+      const mockOnSelect = jest.fn()
+      const pages = [
+        createMockPage({ page_id: 'page-1', page_name: 'Page 1' }),
+        createMockPage({ page_id: 'page-2', page_name: 'Page 2' }),
+      ]
+      const props = createDefaultProps({
+        list: pages,
+        pagesMap: createMockPagesMap(pages),
+        onSelect: mockOnSelect,
+        isMultipleChoice: false,
+        checkedIds: new Set(['page-1']),
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+      const radios = getAllRadios()
+      fireEvent.click(radios[1]) // Click on page-2
+
+      // Assert - Should clear page-1 and select page-2
+      expect(mockOnSelect).toHaveBeenCalled()
+      const selectedSet = mockOnSelect.mock.calls[0][0] as Set<string>
+      expect(selectedSet.has('page-2')).toBe(true)
+      expect(selectedSet.has('page-1')).toBe(false)
+    })
+
+    it('should trigger preview when clicking preview button', () => {
+      // Arrange
+      const mockOnPreview = jest.fn()
+      const props = createDefaultProps({
+        onPreview: mockOnPreview,
+        canPreview: true,
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+      fireEvent.click(screen.getByText('common.dataSource.notion.selector.preview'))
+
+      // Assert
+      expect(mockOnPreview).toHaveBeenCalledWith('page-1')
+    })
+
+    it('should not cascade selection in search mode', () => {
+      // Arrange
+      const mockOnSelect = jest.fn()
+      const { list, pagesMap } = createHierarchicalPages()
+      const props = createDefaultProps({
+        list,
+        pagesMap,
+        onSelect: mockOnSelect,
+        checkedIds: new Set(),
+        searchValue: 'Root',
+        isMultipleChoice: true,
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+      fireEvent.click(getCheckbox())
+
+      // Assert - Only the clicked page should be selected (no descendants)
+      expect(mockOnSelect).toHaveBeenCalled()
+      const selectedSet = mockOnSelect.mock.calls[0][0] as Set<string>
+      expect(selectedSet.size).toBe(1)
+      expect(selectedSet.has('root-page')).toBe(true)
+    })
+  })
+
+  // ==========================================
+  // Edge Cases and Error Handling
+  // ==========================================
+  describe('Edge Cases and Error Handling', () => {
+    it('should handle empty list', () => {
+      // Arrange
+      const props = createDefaultProps({
+        list: [],
+        pagesMap: {},
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert
+      expect(screen.getByText('common.dataSource.notion.selector.noSearchResult')).toBeInTheDocument()
+    })
+
+    it('should handle null page_icon', () => {
+      // Arrange
+      const page = createMockPage({ page_icon: null })
+      const props = createDefaultProps({
+        list: [page],
+        pagesMap: createMockPagesMap([page]),
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert - NotionIcon renders svg (RiFileTextLine) when page_icon is null
+      const notionIcon = document.querySelector('.h-5.w-5')
+      expect(notionIcon).toBeInTheDocument()
+    })
+
+    it('should handle page_icon with all properties', () => {
+      // Arrange
+      const page = createMockPage({
+        page_icon: { type: 'emoji', url: null, emoji: '📄' },
+      })
+      const props = createDefaultProps({
+        list: [page],
+        pagesMap: createMockPagesMap([page]),
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert - NotionIcon renders the emoji
+      expect(screen.getByText('📄')).toBeInTheDocument()
+    })
+
+    it('should handle empty searchValue correctly', () => {
+      // Arrange
+      const props = createDefaultProps({ searchValue: '' })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('virtual-list')).toBeInTheDocument()
+    })
+
+    it('should handle special characters in page name', () => {
+      // Arrange
+      const page = createMockPage({ page_name: 'Test <script>alert("xss")</script>' })
+      const props = createDefaultProps({
+        list: [page],
+        pagesMap: createMockPagesMap([page]),
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert
+      expect(screen.getByText('Test <script>alert("xss")</script>')).toBeInTheDocument()
+    })
+
+    it('should handle unicode characters in page name', () => {
+      // Arrange
+      const page = createMockPage({ page_name: '测试页面 🔍 привет' })
+      const props = createDefaultProps({
+        list: [page],
+        pagesMap: createMockPagesMap([page]),
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert
+      expect(screen.getByText('测试页面 🔍 привет')).toBeInTheDocument()
+    })
+
+    it('should handle very long page names', () => {
+      // Arrange
+      const longName = 'A'.repeat(500)
+      const page = createMockPage({ page_name: longName })
+      const props = createDefaultProps({
+        list: [page],
+        pagesMap: createMockPagesMap([page]),
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert
+      expect(screen.getByText(longName)).toBeInTheDocument()
+    })
+
+    it('should handle deeply nested hierarchy', () => {
+      // Arrange - Create 5 levels deep
+      const pages: DataSourceNotionPage[] = []
+      let parentId = 'root'
+
+      for (let i = 0; i < 5; i++) {
+        const page = createMockPage({
+          page_id: `level-${i}`,
+          page_name: `Level ${i}`,
+          parent_id: parentId,
+        })
+        pages.push(page)
+        parentId = page.page_id
+      }
+
+      const props = createDefaultProps({
+        list: pages,
+        pagesMap: createMockPagesMap(pages),
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert - Only root level visible
+      expect(screen.getByText('Level 0')).toBeInTheDocument()
+      expect(screen.queryByText('Level 1')).not.toBeInTheDocument()
+    })
+
+    it('should handle page with missing parent reference gracefully', () => {
+      // Arrange - Page whose parent doesn't exist in pagesMap (valid edge case)
+      const orphanPage = createMockPage({
+        page_id: 'orphan',
+        page_name: 'Orphan Page',
+        parent_id: 'non-existent-parent',
+      })
+      // Create pagesMap without the parent
+      const pagesMap = createMockPagesMap([orphanPage])
+      const props = createDefaultProps({
+        list: [orphanPage],
+        pagesMap,
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert - Should render the orphan page at root level
+      expect(screen.getByText('Orphan Page')).toBeInTheDocument()
+    })
+
+    it('should handle empty checkedIds Set', () => {
+      // Arrange
+      const props = createDefaultProps({ checkedIds: new Set() })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert
+      const checkbox = getCheckbox()
+      expect(checkbox).toBeInTheDocument()
+      expect(isCheckboxChecked(checkbox)).toBe(false)
+    })
+
+    it('should handle empty disabledValue Set', () => {
+      // Arrange
+      const props = createDefaultProps({ disabledValue: new Set() })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert
+      const checkbox = getCheckbox()
+      expect(checkbox).toBeInTheDocument()
+      expect(isCheckboxDisabled(checkbox)).toBe(false)
+    })
+
+    it('should handle undefined onPreview gracefully', () => {
+      // Arrange
+      const props = createDefaultProps({
+        onPreview: undefined,
+        canPreview: true,
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert - Click should not throw
+      expect(() => {
+        fireEvent.click(screen.getByText('common.dataSource.notion.selector.preview'))
+      }).not.toThrow()
+    })
+
+    it('should handle page without descendants correctly', () => {
+      // Arrange
+      const leafPage = createMockPage({ page_id: 'leaf', page_name: 'Leaf Page' })
+      const props = createDefaultProps({
+        list: [leafPage],
+        pagesMap: createMockPagesMap([leafPage]),
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert - No expand arrow for leaf pages
+      const arrowButton = document.querySelector('[class*="hover:bg-components-button-ghost-bg-hover"]')
+      expect(arrowButton).not.toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // All Prop Variations
+  // ==========================================
+  describe('Prop Variations', () => {
+    it.each([
+      [{ canPreview: true, isMultipleChoice: true }],
+      [{ canPreview: true, isMultipleChoice: false }],
+      [{ canPreview: false, isMultipleChoice: true }],
+      [{ canPreview: false, isMultipleChoice: false }],
+    ])('should render correctly with props %o', (propVariation) => {
+      // Arrange
+      const props = createDefaultProps(propVariation)
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('virtual-list')).toBeInTheDocument()
+      if (propVariation.canPreview)
+        expect(screen.getByText('common.dataSource.notion.selector.preview')).toBeInTheDocument()
+      else
+        expect(screen.queryByText('common.dataSource.notion.selector.preview')).not.toBeInTheDocument()
+
+      if (propVariation.isMultipleChoice)
+        expect(getCheckbox()).toBeInTheDocument()
+      else
+        expect(getRadio()).toBeInTheDocument()
+    })
+
+    it('should handle all default prop values', () => {
+      // Arrange
+      const minimalProps: PageSelectorProps = {
+        checkedIds: new Set(),
+        disabledValue: new Set(),
+        searchValue: '',
+        pagesMap: createMockPagesMap([createMockPage()]),
+        list: [createMockPage()],
+        onSelect: jest.fn(),
+        currentCredentialId: 'cred-1',
+        // canPreview defaults to true
+        // isMultipleChoice defaults to true
+      }
+
+      // Act
+      render(<PageSelector {...minimalProps} />)
+
+      // Assert - Defaults should be applied
+      expect(getCheckbox()).toBeInTheDocument()
+      expect(screen.getByText('common.dataSource.notion.selector.preview')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Utils Function Tests
+  // ==========================================
+  describe('Utils - recursivePushInParentDescendants', () => {
+    it('should build tree structure for simple parent-child relationship', () => {
+      // Arrange
+      const parent = createMockPage({ page_id: 'parent', page_name: 'Parent', parent_id: 'root' })
+      const child = createMockPage({ page_id: 'child', page_name: 'Child', parent_id: 'parent' })
+      const pagesMap = createMockPagesMap([parent, child])
+      const listTreeMap: NotionPageTreeMap = {}
+
+      // Create initial entry for child
+      const childEntry: NotionPageTreeItem = {
+        ...child,
+        children: new Set(),
+        descendants: new Set(),
+        depth: 0,
+        ancestors: [],
+      }
+      listTreeMap[child.page_id] = childEntry
+
+      // Act
+      recursivePushInParentDescendants(pagesMap, listTreeMap, childEntry, childEntry)
+
+      // Assert
+      expect(listTreeMap.parent).toBeDefined()
+      expect(listTreeMap.parent.children.has('child')).toBe(true)
+      expect(listTreeMap.parent.descendants.has('child')).toBe(true)
+      expect(childEntry.depth).toBe(1)
+      expect(childEntry.ancestors).toContain('Parent')
+    })
+
+    it('should handle root level pages', () => {
+      // Arrange
+      const rootPage = createMockPage({ page_id: 'root-page', parent_id: 'root' })
+      const pagesMap = createMockPagesMap([rootPage])
+      const listTreeMap: NotionPageTreeMap = {}
+
+      const rootEntry: NotionPageTreeItem = {
+        ...rootPage,
+        children: new Set(),
+        descendants: new Set(),
+        depth: 0,
+        ancestors: [],
+      }
+      listTreeMap[rootPage.page_id] = rootEntry
+
+      // Act
+      recursivePushInParentDescendants(pagesMap, listTreeMap, rootEntry, rootEntry)
+
+      // Assert - No parent should be created for root level
+      expect(Object.keys(listTreeMap)).toHaveLength(1)
+      expect(rootEntry.depth).toBe(0)
+      expect(rootEntry.ancestors).toHaveLength(0)
+    })
+
+    it('should handle missing parent in pagesMap', () => {
+      // Arrange
+      const orphan = createMockPage({ page_id: 'orphan', parent_id: 'missing-parent' })
+      const pagesMap = createMockPagesMap([orphan])
+      const listTreeMap: NotionPageTreeMap = {}
+
+      const orphanEntry: NotionPageTreeItem = {
+        ...orphan,
+        children: new Set(),
+        descendants: new Set(),
+        depth: 0,
+        ancestors: [],
+      }
+      listTreeMap[orphan.page_id] = orphanEntry
+
+      // Act
+      recursivePushInParentDescendants(pagesMap, listTreeMap, orphanEntry, orphanEntry)
+
+      // Assert - Should not create parent entry for missing parent
+      expect(listTreeMap['missing-parent']).toBeUndefined()
+    })
+
+    it('should handle null parent_id', () => {
+      // Arrange
+      const page = createMockPage({ page_id: 'page', parent_id: '' })
+      const pagesMap = createMockPagesMap([page])
+      const listTreeMap: NotionPageTreeMap = {}
+
+      const pageEntry: NotionPageTreeItem = {
+        ...page,
+        children: new Set(),
+        descendants: new Set(),
+        depth: 0,
+        ancestors: [],
+      }
+      listTreeMap[page.page_id] = pageEntry
+
+      // Act
+      recursivePushInParentDescendants(pagesMap, listTreeMap, pageEntry, pageEntry)
+
+      // Assert - Early return, no changes
+      expect(Object.keys(listTreeMap)).toHaveLength(1)
+    })
+
+    it('should accumulate depth for deeply nested pages', () => {
+      // Arrange - 3 levels deep
+      const level0 = createMockPage({ page_id: 'l0', page_name: 'Level 0', parent_id: 'root' })
+      const level1 = createMockPage({ page_id: 'l1', page_name: 'Level 1', parent_id: 'l0' })
+      const level2 = createMockPage({ page_id: 'l2', page_name: 'Level 2', parent_id: 'l1' })
+      const pagesMap = createMockPagesMap([level0, level1, level2])
+      const listTreeMap: NotionPageTreeMap = {}
+
+      // Add all levels
+      const l0Entry: NotionPageTreeItem = {
+        ...level0,
+        children: new Set(),
+        descendants: new Set(),
+        depth: 0,
+        ancestors: [],
+      }
+      const l1Entry: NotionPageTreeItem = {
+        ...level1,
+        children: new Set(),
+        descendants: new Set(),
+        depth: 0,
+        ancestors: [],
+      }
+      const l2Entry: NotionPageTreeItem = {
+        ...level2,
+        children: new Set(),
+        descendants: new Set(),
+        depth: 0,
+        ancestors: [],
+      }
+
+      listTreeMap[level0.page_id] = l0Entry
+      listTreeMap[level1.page_id] = l1Entry
+      listTreeMap[level2.page_id] = l2Entry
+
+      // Act - Process from leaf to root
+      recursivePushInParentDescendants(pagesMap, listTreeMap, l2Entry, l2Entry)
+
+      // Assert
+      expect(l2Entry.depth).toBe(2)
+      expect(l2Entry.ancestors).toEqual(['Level 0', 'Level 1'])
+      expect(listTreeMap.l1.children.has('l2')).toBe(true)
+      expect(listTreeMap.l0.descendants.has('l2')).toBe(true)
+    })
+
+    it('should update existing parent entry', () => {
+      // Arrange
+      const parent = createMockPage({ page_id: 'parent', page_name: 'Parent', parent_id: 'root' })
+      const child1 = createMockPage({ page_id: 'child1', parent_id: 'parent' })
+      const child2 = createMockPage({ page_id: 'child2', parent_id: 'parent' })
+      const pagesMap = createMockPagesMap([parent, child1, child2])
+      const listTreeMap: NotionPageTreeMap = {}
+
+      // Pre-create parent entry
+      listTreeMap.parent = {
+        ...parent,
+        children: new Set(['child1']),
+        descendants: new Set(['child1']),
+        depth: 0,
+        ancestors: [],
+      }
+
+      const child2Entry: NotionPageTreeItem = {
+        ...child2,
+        children: new Set(),
+        descendants: new Set(),
+        depth: 0,
+        ancestors: [],
+      }
+      listTreeMap[child2.page_id] = child2Entry
+
+      // Act
+      recursivePushInParentDescendants(pagesMap, listTreeMap, child2Entry, child2Entry)
+
+      // Assert - Should add child2 to existing parent
+      expect(listTreeMap.parent.children.has('child1')).toBe(true)
+      expect(listTreeMap.parent.children.has('child2')).toBe(true)
+      expect(listTreeMap.parent.descendants.has('child1')).toBe(true)
+      expect(listTreeMap.parent.descendants.has('child2')).toBe(true)
+    })
+  })
+
+  // ==========================================
+  // Item Component Integration Tests
+  // ==========================================
+  describe('Item Component Integration', () => {
+    it('should render item with correct styling for preview state', () => {
+      // Arrange
+      const page = createMockPage({ page_id: 'page-1', page_name: 'Test Page' })
+      const props = createDefaultProps({
+        list: [page],
+        pagesMap: createMockPagesMap([page]),
+        canPreview: true,
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Click preview to set currentPreviewPageId
+      fireEvent.click(screen.getByText('common.dataSource.notion.selector.preview'))
+
+      // Assert - Item should have preview styling class
+      const itemContainer = screen.getByText('Test Page').closest('[class*="group"]')
+      expect(itemContainer).toHaveClass('bg-state-base-hover')
+    })
+
+    it('should show arrow for pages with children', () => {
+      // Arrange
+      const { list, pagesMap } = createHierarchicalPages()
+      const props = createDefaultProps({
+        list,
+        pagesMap,
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert - Root page should have expand arrow
+      const arrowContainer = document.querySelector('[class*="hover:bg-components-button-ghost-bg-hover"]')
+      expect(arrowContainer).toBeInTheDocument()
+    })
+
+    it('should not show arrow for leaf pages', () => {
+      // Arrange
+      const leafPage = createMockPage({ page_id: 'leaf', page_name: 'Leaf' })
+      const props = createDefaultProps({
+        list: [leafPage],
+        pagesMap: createMockPagesMap([leafPage]),
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert - No expand arrow for leaf pages
+      const arrowContainer = document.querySelector('[class*="hover:bg-components-button-ghost-bg-hover"]')
+      expect(arrowContainer).not.toBeInTheDocument()
+    })
+
+    it('should hide arrows in search mode', () => {
+      // Arrange
+      const { list, pagesMap } = createHierarchicalPages()
+      const props = createDefaultProps({
+        list,
+        pagesMap,
+        searchValue: 'Root',
+      })
+
+      // Act
+      render(<PageSelector {...props} />)
+
+      // Assert - No expand arrows in search mode (renderArrow returns null when searchValue)
+      // The arrows are only shown when !searchValue
+      const arrowContainer = document.querySelector('[class*="hover:bg-components-button-ghost-bg-hover"]')
+      expect(arrowContainer).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/item.tsx
index 8c14ab1949..fcb390c43c 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/item.tsx
@@ -5,7 +5,7 @@ import type { ListChildComponentProps } from 'react-window'
 import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import Checkbox from '@/app/components/base/checkbox'
 import NotionIcon from '@/app/components/base/notion-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { DataSourceNotionPage, DataSourceNotionPageMap } from '@/models/common'
 import Radio from '@/app/components/base/radio/ui'
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.spec.tsx
new file mode 100644
index 0000000000..8475a01fa8
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.spec.tsx
@@ -0,0 +1,622 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import Connect from './index'
+import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
+
+// ==========================================
+// Mock Modules
+// ==========================================
+
+// Note: react-i18next uses global mock from web/__mocks__/react-i18next.ts
+
+// Mock useToolIcon - hook has complex dependencies (API calls, stores)
+const mockUseToolIcon = jest.fn()
+jest.mock('@/app/components/workflow/hooks', () => ({
+  useToolIcon: (data: any) => mockUseToolIcon(data),
+}))
+
+// ==========================================
+// Test Data Builders
+// ==========================================
+const createMockNodeData = (overrides?: Partial<DataSourceNodeType>): DataSourceNodeType => ({
+  title: 'Test Node',
+  plugin_id: 'plugin-123',
+  provider_type: 'online_drive',
+  provider_name: 'online-drive-provider',
+  datasource_name: 'online-drive-ds',
+  datasource_label: 'Online Drive',
+  datasource_parameters: {},
+  datasource_configurations: {},
+  ...overrides,
+} as DataSourceNodeType)
+
+type ConnectProps = React.ComponentProps<typeof Connect>
+
+const createDefaultProps = (overrides?: Partial<ConnectProps>): ConnectProps => ({
+  nodeData: createMockNodeData(),
+  onSetting: jest.fn(),
+  ...overrides,
+})
+
+// ==========================================
+// Test Suites
+// ==========================================
+describe('Connect', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+
+    // Default mock return values
+    mockUseToolIcon.mockReturnValue('https://example.com/icon.png')
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Connect {...props} />)
+
+      // Assert - Component should render with connect button
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should render the BlockIcon component', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<Connect {...props} />)
+
+      // Assert - BlockIcon container should exist
+      const iconContainer = container.querySelector('.size-12')
+      expect(iconContainer).toBeInTheDocument()
+    })
+
+    it('should render the not connected message with node title', () => {
+      // Arrange
+      const props = createDefaultProps({
+        nodeData: createMockNodeData({ title: 'My Google Drive' }),
+      })
+
+      // Act
+      render(<Connect {...props} />)
+
+      // Assert - Should show translation key with interpolated name (use getAllBy since both messages contain similar text)
+      const messages = screen.getAllByText(/datasetPipeline\.onlineDrive\.notConnected/)
+      expect(messages.length).toBeGreaterThanOrEqual(1)
+    })
+
+    it('should render the not connected tip message', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Connect {...props} />)
+
+      // Assert - Should show tip translation key
+      expect(screen.getByText(/datasetPipeline\.onlineDrive\.notConnectedTip/)).toBeInTheDocument()
+    })
+
+    it('should render the connect button with correct text', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Connect {...props} />)
+
+      // Assert - Button should have connect text
+      const button = screen.getByRole('button')
+      expect(button).toHaveTextContent('datasetCreation.stepOne.connect')
+    })
+
+    it('should render with primary button variant', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Connect {...props} />)
+
+      // Assert - Button should be primary variant
+      const button = screen.getByRole('button')
+      expect(button).toBeInTheDocument()
+    })
+
+    it('should render Icon3Dots component', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<Connect {...props} />)
+
+      // Assert - Icon3Dots should be rendered (it's an SVG element)
+      const iconElement = container.querySelector('svg')
+      expect(iconElement).toBeInTheDocument()
+    })
+
+    it('should apply correct container styling', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<Connect {...props} />)
+
+      // Assert - Container should have expected classes
+      const mainContainer = container.firstChild
+      expect(mainContainer).toHaveClass('flex', 'flex-col', 'items-start', 'gap-y-2', 'rounded-xl', 'p-6')
+    })
+  })
+
+  // ==========================================
+  // Props Testing
+  // ==========================================
+  describe('Props', () => {
+    describe('nodeData prop', () => {
+      it('should pass nodeData to useToolIcon hook', () => {
+        // Arrange
+        const nodeData = createMockNodeData({ plugin_id: 'my-plugin' })
+        const props = createDefaultProps({ nodeData })
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert
+        expect(mockUseToolIcon).toHaveBeenCalledWith(nodeData)
+      })
+
+      it('should display node title in not connected message', () => {
+        // Arrange
+        const props = createDefaultProps({
+          nodeData: createMockNodeData({ title: 'Dropbox Storage' }),
+        })
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert - Translation key should be in document (mock returns key)
+        const messages = screen.getAllByText(/datasetPipeline\.onlineDrive\.notConnected/)
+        expect(messages.length).toBeGreaterThanOrEqual(1)
+      })
+
+      it('should display node title in tip message', () => {
+        // Arrange
+        const props = createDefaultProps({
+          nodeData: createMockNodeData({ title: 'OneDrive Connector' }),
+        })
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert - Translation key should be in document
+        expect(screen.getByText(/datasetPipeline\.onlineDrive\.notConnectedTip/)).toBeInTheDocument()
+      })
+
+      it.each([
+        { title: 'Google Drive' },
+        { title: 'Dropbox' },
+        { title: 'OneDrive' },
+        { title: 'Amazon S3' },
+        { title: '' },
+      ])('should handle nodeData with title=$title', ({ title }) => {
+        // Arrange
+        const props = createDefaultProps({
+          nodeData: createMockNodeData({ title }),
+        })
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert - Should render without error
+        expect(screen.getByRole('button')).toBeInTheDocument()
+      })
+    })
+
+    describe('onSetting prop', () => {
+      it('should call onSetting when connect button is clicked', () => {
+        // Arrange
+        const mockOnSetting = jest.fn()
+        const props = createDefaultProps({ onSetting: mockOnSetting })
+
+        // Act
+        render(<Connect {...props} />)
+        fireEvent.click(screen.getByRole('button'))
+
+        // Assert
+        expect(mockOnSetting).toHaveBeenCalledTimes(1)
+      })
+
+      it('should call onSetting when button clicked', () => {
+        // Arrange
+        const mockOnSetting = jest.fn()
+        const props = createDefaultProps({ onSetting: mockOnSetting })
+
+        // Act
+        render(<Connect {...props} />)
+        fireEvent.click(screen.getByRole('button'))
+
+        // Assert - onClick handler receives the click event from React
+        expect(mockOnSetting).toHaveBeenCalled()
+        expect(mockOnSetting.mock.calls[0]).toBeDefined()
+      })
+
+      it('should call onSetting on each button click', () => {
+        // Arrange
+        const mockOnSetting = jest.fn()
+        const props = createDefaultProps({ onSetting: mockOnSetting })
+
+        // Act
+        render(<Connect {...props} />)
+        const button = screen.getByRole('button')
+        fireEvent.click(button)
+        fireEvent.click(button)
+        fireEvent.click(button)
+
+        // Assert
+        expect(mockOnSetting).toHaveBeenCalledTimes(3)
+      })
+    })
+  })
+
+  // ==========================================
+  // User Interactions and Event Handlers
+  // ==========================================
+  describe('User Interactions', () => {
+    describe('Connect Button', () => {
+      it('should trigger onSetting callback on click', () => {
+        // Arrange
+        const mockOnSetting = jest.fn()
+        const props = createDefaultProps({ onSetting: mockOnSetting })
+        render(<Connect {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByRole('button'))
+
+        // Assert
+        expect(mockOnSetting).toHaveBeenCalled()
+      })
+
+      it('should be interactive and focusable', () => {
+        // Arrange
+        const props = createDefaultProps()
+
+        // Act
+        render(<Connect {...props} />)
+        const button = screen.getByRole('button')
+
+        // Assert
+        expect(button).not.toBeDisabled()
+      })
+
+      it('should handle keyboard interaction (Enter key)', () => {
+        // Arrange
+        const mockOnSetting = jest.fn()
+        const props = createDefaultProps({ onSetting: mockOnSetting })
+        render(<Connect {...props} />)
+
+        // Act
+        const button = screen.getByRole('button')
+        fireEvent.keyDown(button, { key: 'Enter' })
+
+        // Assert - Button should be present and interactive
+        expect(button).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ==========================================
+  // Hook Integration Tests
+  // ==========================================
+  describe('Hook Integration', () => {
+    describe('useToolIcon', () => {
+      it('should call useToolIcon with nodeData', () => {
+        // Arrange
+        const nodeData = createMockNodeData()
+        const props = createDefaultProps({ nodeData })
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert
+        expect(mockUseToolIcon).toHaveBeenCalledWith(nodeData)
+      })
+
+      it('should use toolIcon result from useToolIcon', () => {
+        // Arrange
+        mockUseToolIcon.mockReturnValue('custom-icon-url')
+        const props = createDefaultProps()
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert - The hook should be called and its return value used
+        expect(mockUseToolIcon).toHaveBeenCalled()
+      })
+
+      it('should handle empty string icon', () => {
+        // Arrange
+        mockUseToolIcon.mockReturnValue('')
+        const props = createDefaultProps()
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert - Should still render without crashing
+        expect(screen.getByRole('button')).toBeInTheDocument()
+      })
+
+      it('should handle undefined icon', () => {
+        // Arrange
+        mockUseToolIcon.mockReturnValue(undefined)
+        const props = createDefaultProps()
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert - Should still render without crashing
+        expect(screen.getByRole('button')).toBeInTheDocument()
+      })
+    })
+
+    describe('useTranslation', () => {
+      it('should use correct translation keys for not connected message', () => {
+        // Arrange
+        const props = createDefaultProps()
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert - Should use the correct translation key (both notConnected and notConnectedTip contain similar pattern)
+        const messages = screen.getAllByText(/datasetPipeline\.onlineDrive\.notConnected/)
+        expect(messages.length).toBeGreaterThanOrEqual(1)
+      })
+
+      it('should use correct translation key for tip message', () => {
+        // Arrange
+        const props = createDefaultProps()
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert
+        expect(screen.getByText(/datasetPipeline\.onlineDrive\.notConnectedTip/)).toBeInTheDocument()
+      })
+
+      it('should use correct translation key for connect button', () => {
+        // Arrange
+        const props = createDefaultProps()
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert
+        expect(screen.getByRole('button')).toHaveTextContent('datasetCreation.stepOne.connect')
+      })
+    })
+  })
+
+  // ==========================================
+  // Edge Cases and Error Handling
+  // ==========================================
+  describe('Edge Cases and Error Handling', () => {
+    describe('Empty/Null Values', () => {
+      it('should handle empty title in nodeData', () => {
+        // Arrange
+        const props = createDefaultProps({
+          nodeData: createMockNodeData({ title: '' }),
+        })
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert
+        expect(screen.getByRole('button')).toBeInTheDocument()
+      })
+
+      it('should handle undefined optional fields in nodeData', () => {
+        // Arrange
+        const minimalNodeData = {
+          title: 'Test',
+          plugin_id: 'test',
+          provider_type: 'online_drive',
+          provider_name: 'provider',
+          datasource_name: 'ds',
+          datasource_label: 'Label',
+          datasource_parameters: {},
+          datasource_configurations: {},
+        } as DataSourceNodeType
+        const props = createDefaultProps({ nodeData: minimalNodeData })
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert
+        expect(screen.getByRole('button')).toBeInTheDocument()
+      })
+
+      it('should handle empty plugin_id', () => {
+        // Arrange
+        const props = createDefaultProps({
+          nodeData: createMockNodeData({ plugin_id: '' }),
+        })
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert
+        expect(screen.getByRole('button')).toBeInTheDocument()
+      })
+    })
+
+    describe('Special Characters', () => {
+      it('should handle special characters in title', () => {
+        // Arrange
+        const props = createDefaultProps({
+          nodeData: createMockNodeData({ title: 'Drive <script>alert("xss")</script>' }),
+        })
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert - Should render safely without executing script
+        expect(screen.getByRole('button')).toBeInTheDocument()
+      })
+
+      it('should handle unicode characters in title', () => {
+        // Arrange
+        const props = createDefaultProps({
+          nodeData: createMockNodeData({ title: '云盘存储 🌐' }),
+        })
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert
+        expect(screen.getByRole('button')).toBeInTheDocument()
+      })
+
+      it('should handle very long title', () => {
+        // Arrange
+        const longTitle = 'A'.repeat(500)
+        const props = createDefaultProps({
+          nodeData: createMockNodeData({ title: longTitle }),
+        })
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert
+        expect(screen.getByRole('button')).toBeInTheDocument()
+      })
+    })
+
+    describe('Icon Variations', () => {
+      it('should handle string icon URL', () => {
+        // Arrange
+        mockUseToolIcon.mockReturnValue('https://cdn.example.com/icon.png')
+        const props = createDefaultProps()
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert
+        expect(screen.getByRole('button')).toBeInTheDocument()
+      })
+
+      it('should handle object icon with url property', () => {
+        // Arrange
+        mockUseToolIcon.mockReturnValue({ url: 'https://cdn.example.com/icon.png' })
+        const props = createDefaultProps()
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert
+        expect(screen.getByRole('button')).toBeInTheDocument()
+      })
+
+      it('should handle null icon', () => {
+        // Arrange
+        mockUseToolIcon.mockReturnValue(null)
+        const props = createDefaultProps()
+
+        // Act
+        render(<Connect {...props} />)
+
+        // Assert
+        expect(screen.getByRole('button')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ==========================================
+  // All Prop Variations Tests
+  // ==========================================
+  describe('Prop Variations', () => {
+    it.each([
+      { title: 'Google Drive', plugin_id: 'google-drive' },
+      { title: 'Dropbox', plugin_id: 'dropbox' },
+      { title: 'OneDrive', plugin_id: 'onedrive' },
+      { title: 'Amazon S3', plugin_id: 's3' },
+      { title: 'Box', plugin_id: 'box' },
+    ])('should render correctly with title=$title and plugin_id=$plugin_id', ({ title, plugin_id }) => {
+      // Arrange
+      const props = createDefaultProps({
+        nodeData: createMockNodeData({ title, plugin_id }),
+      })
+
+      // Act
+      render(<Connect {...props} />)
+
+      // Assert
+      expect(screen.getByRole('button')).toBeInTheDocument()
+      expect(mockUseToolIcon).toHaveBeenCalledWith(
+        expect.objectContaining({ title, plugin_id }),
+      )
+    })
+
+    it.each([
+      { provider_type: 'online_drive' },
+      { provider_type: 'cloud_storage' },
+      { provider_type: 'file_system' },
+    ])('should render correctly with provider_type=$provider_type', ({ provider_type }) => {
+      // Arrange
+      const props = createDefaultProps({
+        nodeData: createMockNodeData({ provider_type }),
+      })
+
+      // Act
+      render(<Connect {...props} />)
+
+      // Assert
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it.each([
+      { datasource_label: 'Google Drive Storage' },
+      { datasource_label: 'Dropbox Files' },
+      { datasource_label: '' },
+      { datasource_label: 'S3 Bucket' },
+    ])('should render correctly with datasource_label=$datasource_label', ({ datasource_label }) => {
+      // Arrange
+      const props = createDefaultProps({
+        nodeData: createMockNodeData({ datasource_label }),
+      })
+
+      // Act
+      render(<Connect {...props} />)
+
+      // Assert
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Accessibility Tests
+  // ==========================================
+  describe('Accessibility', () => {
+    it('should have an accessible button', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Connect {...props} />)
+
+      // Assert - Button should be accessible by role
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should have proper text content for screen readers', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Connect {...props} />)
+
+      // Assert - Text content should be present
+      const messages = screen.getAllByText(/datasetPipeline\.onlineDrive\.notConnected/)
+      expect(messages.length).toBe(2) // Both notConnected and notConnectedTip
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx
index a9d2e769ad..291d9088a6 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react'
 import { BucketsGray } from '@/app/components/base/icons/src/public/knowledge/online-drive'
 import Tooltip from '@/app/components/base/tooltip'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type BucketProps = {
   bucketName: string
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx
index 096dc5c232..78ba1d56de 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 type DriveProps = {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.spec.tsx
new file mode 100644
index 0000000000..887ca856cc
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.spec.tsx
@@ -0,0 +1,865 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import Dropdown from './index'
+
+// ==========================================
+// Note: react-i18next uses global mock from web/__mocks__/react-i18next.ts
+// ==========================================
+
+// ==========================================
+// Test Data Builders
+// ==========================================
+type DropdownProps = React.ComponentProps<typeof Dropdown>
+
+const createDefaultProps = (overrides?: Partial<DropdownProps>): DropdownProps => ({
+  startIndex: 0,
+  breadcrumbs: ['folder1', 'folder2'],
+  onBreadcrumbClick: jest.fn(),
+  ...overrides,
+})
+
+// ==========================================
+// Test Suites
+// ==========================================
+describe('Dropdown', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Dropdown {...props} />)
+
+      // Assert - Trigger button should be visible
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should render trigger button with more icon', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<Dropdown {...props} />)
+
+      // Assert - Button should have RiMoreFill icon (rendered as svg)
+      const button = screen.getByRole('button')
+      expect(button).toBeInTheDocument()
+      expect(container.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('should render separator after dropdown', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Dropdown {...props} />)
+
+      // Assert - Separator "/" should be visible
+      expect(screen.getByText('/')).toBeInTheDocument()
+    })
+
+    it('should render trigger button with correct default styles', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Dropdown {...props} />)
+
+      // Assert
+      const button = screen.getByRole('button')
+      expect(button).toHaveClass('flex')
+      expect(button).toHaveClass('size-6')
+      expect(button).toHaveClass('items-center')
+      expect(button).toHaveClass('justify-center')
+      expect(button).toHaveClass('rounded-md')
+    })
+
+    it('should not render menu content when closed', () => {
+      // Arrange
+      const props = createDefaultProps({ breadcrumbs: ['visible-folder'] })
+
+      // Act
+      render(<Dropdown {...props} />)
+
+      // Assert - Menu content should not be visible when dropdown is closed
+      expect(screen.queryByText('visible-folder')).not.toBeInTheDocument()
+    })
+
+    it('should render menu content when opened', async () => {
+      // Arrange
+      const props = createDefaultProps({ breadcrumbs: ['test-folder1', 'test-folder2'] })
+      render(<Dropdown {...props} />)
+
+      // Act - Open dropdown
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert - Menu items should be visible
+      await waitFor(() => {
+        expect(screen.getByText('test-folder1')).toBeInTheDocument()
+        expect(screen.getByText('test-folder2')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ==========================================
+  // Props Testing
+  // ==========================================
+  describe('Props', () => {
+    describe('startIndex prop', () => {
+      it('should pass startIndex to Menu component', async () => {
+        // Arrange
+        const mockOnBreadcrumbClick = jest.fn()
+        const props = createDefaultProps({
+          startIndex: 5,
+          breadcrumbs: ['folder1'],
+          onBreadcrumbClick: mockOnBreadcrumbClick,
+        })
+        render(<Dropdown {...props} />)
+
+        // Act - Open dropdown and click on item
+        fireEvent.click(screen.getByRole('button'))
+
+        await waitFor(() => {
+          expect(screen.getByText('folder1')).toBeInTheDocument()
+        })
+
+        fireEvent.click(screen.getByText('folder1'))
+
+        // Assert - Should be called with startIndex (5) + item index (0) = 5
+        expect(mockOnBreadcrumbClick).toHaveBeenCalledWith(5)
+      })
+
+      it('should calculate correct index for second item', async () => {
+        // Arrange
+        const mockOnBreadcrumbClick = jest.fn()
+        const props = createDefaultProps({
+          startIndex: 3,
+          breadcrumbs: ['folder1', 'folder2'],
+          onBreadcrumbClick: mockOnBreadcrumbClick,
+        })
+        render(<Dropdown {...props} />)
+
+        // Act - Open dropdown and click on second item
+        fireEvent.click(screen.getByRole('button'))
+
+        await waitFor(() => {
+          expect(screen.getByText('folder2')).toBeInTheDocument()
+        })
+
+        fireEvent.click(screen.getByText('folder2'))
+
+        // Assert - Should be called with startIndex (3) + item index (1) = 4
+        expect(mockOnBreadcrumbClick).toHaveBeenCalledWith(4)
+      })
+    })
+
+    describe('breadcrumbs prop', () => {
+      it('should render all breadcrumbs in menu', async () => {
+        // Arrange
+        const props = createDefaultProps({
+          breadcrumbs: ['folder-a', 'folder-b', 'folder-c'],
+        })
+        render(<Dropdown {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByRole('button'))
+
+        // Assert
+        await waitFor(() => {
+          expect(screen.getByText('folder-a')).toBeInTheDocument()
+          expect(screen.getByText('folder-b')).toBeInTheDocument()
+          expect(screen.getByText('folder-c')).toBeInTheDocument()
+        })
+      })
+
+      it('should handle single breadcrumb', async () => {
+        // Arrange
+        const props = createDefaultProps({
+          breadcrumbs: ['single-folder'],
+        })
+        render(<Dropdown {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByRole('button'))
+
+        // Assert
+        await waitFor(() => {
+          expect(screen.getByText('single-folder')).toBeInTheDocument()
+        })
+      })
+
+      it('should handle empty breadcrumbs array', async () => {
+        // Arrange
+        const props = createDefaultProps({
+          breadcrumbs: [],
+        })
+        render(<Dropdown {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByRole('button'))
+
+        // Assert - Menu should be rendered but with no items
+        await waitFor(() => {
+          // The menu container should exist but be empty
+          expect(screen.getByRole('button')).toBeInTheDocument()
+        })
+      })
+
+      it('should handle breadcrumbs with special characters', async () => {
+        // Arrange
+        const props = createDefaultProps({
+          breadcrumbs: ['folder [1]', 'folder (copy)', 'folder-v2.0'],
+        })
+        render(<Dropdown {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByRole('button'))
+
+        // Assert
+        await waitFor(() => {
+          expect(screen.getByText('folder [1]')).toBeInTheDocument()
+          expect(screen.getByText('folder (copy)')).toBeInTheDocument()
+          expect(screen.getByText('folder-v2.0')).toBeInTheDocument()
+        })
+      })
+
+      it('should handle breadcrumbs with unicode characters', async () => {
+        // Arrange
+        const props = createDefaultProps({
+          breadcrumbs: ['文件夹', 'フォルダ', 'Папка'],
+        })
+        render(<Dropdown {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByRole('button'))
+
+        // Assert
+        await waitFor(() => {
+          expect(screen.getByText('文件夹')).toBeInTheDocument()
+          expect(screen.getByText('フォルダ')).toBeInTheDocument()
+          expect(screen.getByText('Папка')).toBeInTheDocument()
+        })
+      })
+    })
+
+    describe('onBreadcrumbClick prop', () => {
+      it('should call onBreadcrumbClick with correct index when item clicked', async () => {
+        // Arrange
+        const mockOnBreadcrumbClick = jest.fn()
+        const props = createDefaultProps({
+          startIndex: 0,
+          breadcrumbs: ['folder1'],
+          onBreadcrumbClick: mockOnBreadcrumbClick,
+        })
+        render(<Dropdown {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByRole('button'))
+
+        await waitFor(() => {
+          expect(screen.getByText('folder1')).toBeInTheDocument()
+        })
+
+        fireEvent.click(screen.getByText('folder1'))
+
+        // Assert
+        expect(mockOnBreadcrumbClick).toHaveBeenCalledWith(0)
+        expect(mockOnBreadcrumbClick).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+
+  // ==========================================
+  // State Management Tests
+  // ==========================================
+  describe('State Management', () => {
+    describe('open state', () => {
+      it('should initialize with closed state', () => {
+        // Arrange
+        const props = createDefaultProps({ breadcrumbs: ['test-folder'] })
+
+        // Act
+        render(<Dropdown {...props} />)
+
+        // Assert - Menu content should not be visible
+        expect(screen.queryByText('test-folder')).not.toBeInTheDocument()
+      })
+
+      it('should toggle to open state when trigger is clicked', async () => {
+        // Arrange
+        const props = createDefaultProps({ breadcrumbs: ['test-folder'] })
+        render(<Dropdown {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByRole('button'))
+
+        // Assert
+        await waitFor(() => {
+          expect(screen.getByText('test-folder')).toBeInTheDocument()
+        })
+      })
+
+      it('should toggle to closed state when trigger is clicked again', async () => {
+        // Arrange
+        const props = createDefaultProps({ breadcrumbs: ['test-folder'] })
+        render(<Dropdown {...props} />)
+
+        // Act - Open and then close
+        fireEvent.click(screen.getByRole('button'))
+        await waitFor(() => {
+          expect(screen.getByText('test-folder')).toBeInTheDocument()
+        })
+
+        fireEvent.click(screen.getByRole('button'))
+
+        // Assert
+        await waitFor(() => {
+          expect(screen.queryByText('test-folder')).not.toBeInTheDocument()
+        })
+      })
+
+      it('should close when breadcrumb item is clicked', async () => {
+        // Arrange
+        const mockOnBreadcrumbClick = jest.fn()
+        const props = createDefaultProps({
+          breadcrumbs: ['test-folder'],
+          onBreadcrumbClick: mockOnBreadcrumbClick,
+        })
+        render(<Dropdown {...props} />)
+
+        // Act - Open dropdown
+        fireEvent.click(screen.getByRole('button'))
+
+        await waitFor(() => {
+          expect(screen.getByText('test-folder')).toBeInTheDocument()
+        })
+
+        // Click on breadcrumb item
+        fireEvent.click(screen.getByText('test-folder'))
+
+        // Assert - Menu should close
+        await waitFor(() => {
+          expect(screen.queryByText('test-folder')).not.toBeInTheDocument()
+        })
+      })
+
+      it('should apply correct button styles based on open state', async () => {
+        // Arrange
+        const props = createDefaultProps({ breadcrumbs: ['test-folder'] })
+        render(<Dropdown {...props} />)
+        const button = screen.getByRole('button')
+
+        // Assert - Initial state (closed): should have hover:bg-state-base-hover
+        expect(button).toHaveClass('hover:bg-state-base-hover')
+
+        // Act - Open dropdown
+        fireEvent.click(button)
+
+        // Assert - Open state: should have bg-state-base-hover
+        await waitFor(() => {
+          expect(button).toHaveClass('bg-state-base-hover')
+        })
+      })
+    })
+  })
+
+  // ==========================================
+  // Event Handlers Tests
+  // ==========================================
+  describe('Event Handlers', () => {
+    describe('handleTrigger', () => {
+      it('should toggle open state when trigger is clicked', async () => {
+        // Arrange
+        const props = createDefaultProps({ breadcrumbs: ['folder'] })
+        render(<Dropdown {...props} />)
+
+        // Act & Assert - Initially closed
+        expect(screen.queryByText('folder')).not.toBeInTheDocument()
+
+        // Act - Click to open
+        fireEvent.click(screen.getByRole('button'))
+
+        // Assert - Now open
+        await waitFor(() => {
+          expect(screen.getByText('folder')).toBeInTheDocument()
+        })
+      })
+
+      it('should toggle multiple times correctly', async () => {
+        // Arrange
+        const props = createDefaultProps({ breadcrumbs: ['folder'] })
+        render(<Dropdown {...props} />)
+        const button = screen.getByRole('button')
+
+        // Act & Assert - Toggle multiple times
+        // 1st click - open
+        fireEvent.click(button)
+        await waitFor(() => {
+          expect(screen.getByText('folder')).toBeInTheDocument()
+        })
+
+        // 2nd click - close
+        fireEvent.click(button)
+        await waitFor(() => {
+          expect(screen.queryByText('folder')).not.toBeInTheDocument()
+        })
+
+        // 3rd click - open again
+        fireEvent.click(button)
+        await waitFor(() => {
+          expect(screen.getByText('folder')).toBeInTheDocument()
+        })
+      })
+    })
+
+    describe('handleBreadCrumbClick', () => {
+      it('should call onBreadcrumbClick and close menu', async () => {
+        // Arrange
+        const mockOnBreadcrumbClick = jest.fn()
+        const props = createDefaultProps({
+          breadcrumbs: ['folder1'],
+          onBreadcrumbClick: mockOnBreadcrumbClick,
+        })
+        render(<Dropdown {...props} />)
+
+        // Act - Open dropdown
+        fireEvent.click(screen.getByRole('button'))
+
+        await waitFor(() => {
+          expect(screen.getByText('folder1')).toBeInTheDocument()
+        })
+
+        // Click on breadcrumb
+        fireEvent.click(screen.getByText('folder1'))
+
+        // Assert
+        expect(mockOnBreadcrumbClick).toHaveBeenCalledTimes(1)
+
+        // Menu should close
+        await waitFor(() => {
+          expect(screen.queryByText('folder1')).not.toBeInTheDocument()
+        })
+      })
+
+      it('should pass correct index to onBreadcrumbClick for each item', async () => {
+        // Arrange
+        const mockOnBreadcrumbClick = jest.fn()
+        const props = createDefaultProps({
+          startIndex: 2,
+          breadcrumbs: ['folder1', 'folder2', 'folder3'],
+          onBreadcrumbClick: mockOnBreadcrumbClick,
+        })
+        render(<Dropdown {...props} />)
+
+        // Act - Open dropdown and click first item
+        fireEvent.click(screen.getByRole('button'))
+
+        await waitFor(() => {
+          expect(screen.getByText('folder1')).toBeInTheDocument()
+        })
+
+        fireEvent.click(screen.getByText('folder1'))
+
+        // Assert - Index should be startIndex (2) + item index (0) = 2
+        expect(mockOnBreadcrumbClick).toHaveBeenCalledWith(2)
+      })
+    })
+  })
+
+  // ==========================================
+  // Callback Stability and Memoization Tests
+  // ==========================================
+  describe('Callback Stability and Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      // Assert - Dropdown component should be memoized
+      expect(Dropdown).toHaveProperty('$$typeof', Symbol.for('react.memo'))
+    })
+
+    it('should maintain stable callback after rerender with same props', async () => {
+      // Arrange
+      const mockOnBreadcrumbClick = jest.fn()
+      const props = createDefaultProps({
+        breadcrumbs: ['folder'],
+        onBreadcrumbClick: mockOnBreadcrumbClick,
+      })
+      const { rerender } = render(<Dropdown {...props} />)
+
+      // Act - Open and click
+      fireEvent.click(screen.getByRole('button'))
+      await waitFor(() => {
+        expect(screen.getByText('folder')).toBeInTheDocument()
+      })
+      fireEvent.click(screen.getByText('folder'))
+
+      // Rerender with same props and click again
+      rerender(<Dropdown {...props} />)
+      fireEvent.click(screen.getByRole('button'))
+      await waitFor(() => {
+        expect(screen.getByText('folder')).toBeInTheDocument()
+      })
+      fireEvent.click(screen.getByText('folder'))
+
+      // Assert
+      expect(mockOnBreadcrumbClick).toHaveBeenCalledTimes(2)
+    })
+
+    it('should update callback when onBreadcrumbClick prop changes', async () => {
+      // Arrange
+      const mockOnBreadcrumbClick1 = jest.fn()
+      const mockOnBreadcrumbClick2 = jest.fn()
+      const props = createDefaultProps({
+        breadcrumbs: ['folder'],
+        onBreadcrumbClick: mockOnBreadcrumbClick1,
+      })
+      const { rerender } = render(<Dropdown {...props} />)
+
+      // Act - Open and click with first callback
+      fireEvent.click(screen.getByRole('button'))
+      await waitFor(() => {
+        expect(screen.getByText('folder')).toBeInTheDocument()
+      })
+      fireEvent.click(screen.getByText('folder'))
+
+      // Rerender with different callback
+      rerender(<Dropdown {...createDefaultProps({
+        breadcrumbs: ['folder'],
+        onBreadcrumbClick: mockOnBreadcrumbClick2,
+      })} />)
+
+      // Open and click with second callback
+      fireEvent.click(screen.getByRole('button'))
+      await waitFor(() => {
+        expect(screen.getByText('folder')).toBeInTheDocument()
+      })
+      fireEvent.click(screen.getByText('folder'))
+
+      // Assert
+      expect(mockOnBreadcrumbClick1).toHaveBeenCalledTimes(1)
+      expect(mockOnBreadcrumbClick2).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not re-render when props are the same', () => {
+      // Arrange
+      const props = createDefaultProps()
+      const { rerender } = render(<Dropdown {...props} />)
+
+      // Act - Rerender with same props
+      rerender(<Dropdown {...props} />)
+
+      // Assert - Component should render without errors
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Edge Cases and Error Handling
+  // ==========================================
+  describe('Edge Cases and Error Handling', () => {
+    it('should handle rapid toggle clicks', async () => {
+      // Arrange
+      const props = createDefaultProps({ breadcrumbs: ['folder'] })
+      render(<Dropdown {...props} />)
+      const button = screen.getByRole('button')
+
+      // Act - Rapid clicks
+      fireEvent.click(button)
+      fireEvent.click(button)
+      fireEvent.click(button)
+
+      // Assert - Should handle gracefully (open after odd number of clicks)
+      await waitFor(() => {
+        expect(screen.getByText('folder')).toBeInTheDocument()
+      })
+    })
+
+    it('should handle very long folder names', async () => {
+      // Arrange
+      const longName = 'a'.repeat(100)
+      const props = createDefaultProps({
+        breadcrumbs: [longName],
+      })
+      render(<Dropdown {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText(longName)).toBeInTheDocument()
+      })
+    })
+
+    it('should handle many breadcrumbs', async () => {
+      // Arrange
+      const manyBreadcrumbs = Array.from({ length: 20 }, (_, i) => `folder-${i}`)
+      const props = createDefaultProps({
+        breadcrumbs: manyBreadcrumbs,
+      })
+      render(<Dropdown {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert - First and last items should be visible
+      await waitFor(() => {
+        expect(screen.getByText('folder-0')).toBeInTheDocument()
+        expect(screen.getByText('folder-19')).toBeInTheDocument()
+      })
+    })
+
+    it('should handle startIndex of 0', async () => {
+      // Arrange
+      const mockOnBreadcrumbClick = jest.fn()
+      const props = createDefaultProps({
+        startIndex: 0,
+        breadcrumbs: ['folder'],
+        onBreadcrumbClick: mockOnBreadcrumbClick,
+      })
+      render(<Dropdown {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+      await waitFor(() => {
+        expect(screen.getByText('folder')).toBeInTheDocument()
+      })
+      fireEvent.click(screen.getByText('folder'))
+
+      // Assert
+      expect(mockOnBreadcrumbClick).toHaveBeenCalledWith(0)
+    })
+
+    it('should handle large startIndex values', async () => {
+      // Arrange
+      const mockOnBreadcrumbClick = jest.fn()
+      const props = createDefaultProps({
+        startIndex: 999,
+        breadcrumbs: ['folder'],
+        onBreadcrumbClick: mockOnBreadcrumbClick,
+      })
+      render(<Dropdown {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+      await waitFor(() => {
+        expect(screen.getByText('folder')).toBeInTheDocument()
+      })
+      fireEvent.click(screen.getByText('folder'))
+
+      // Assert
+      expect(mockOnBreadcrumbClick).toHaveBeenCalledWith(999)
+    })
+
+    it('should handle breadcrumbs with whitespace-only names', async () => {
+      // Arrange
+      const props = createDefaultProps({
+        breadcrumbs: ['   ', 'normal-folder'],
+      })
+      render(<Dropdown {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('normal-folder')).toBeInTheDocument()
+      })
+    })
+
+    it('should handle breadcrumbs with empty string', async () => {
+      // Arrange
+      const props = createDefaultProps({
+        breadcrumbs: ['', 'folder'],
+      })
+      render(<Dropdown {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('folder')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ==========================================
+  // All Prop Variations Tests
+  // ==========================================
+  describe('Prop Variations', () => {
+    it.each([
+      { startIndex: 0, breadcrumbs: ['a'], expectedIndex: 0 },
+      { startIndex: 1, breadcrumbs: ['a'], expectedIndex: 1 },
+      { startIndex: 5, breadcrumbs: ['a'], expectedIndex: 5 },
+      { startIndex: 10, breadcrumbs: ['a', 'b'], expectedIndex: 10 },
+    ])('should handle startIndex=$startIndex correctly', async ({ startIndex, breadcrumbs, expectedIndex }) => {
+      // Arrange
+      const mockOnBreadcrumbClick = jest.fn()
+      const props = createDefaultProps({
+        startIndex,
+        breadcrumbs,
+        onBreadcrumbClick: mockOnBreadcrumbClick,
+      })
+      render(<Dropdown {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+      await waitFor(() => {
+        expect(screen.getByText(breadcrumbs[0])).toBeInTheDocument()
+      })
+      fireEvent.click(screen.getByText(breadcrumbs[0]))
+
+      // Assert
+      expect(mockOnBreadcrumbClick).toHaveBeenCalledWith(expectedIndex)
+    })
+
+    it.each([
+      { breadcrumbs: [], description: 'empty array' },
+      { breadcrumbs: ['single'], description: 'single item' },
+      { breadcrumbs: ['a', 'b'], description: 'two items' },
+      { breadcrumbs: ['a', 'b', 'c', 'd', 'e'], description: 'five items' },
+    ])('should render correctly with $description breadcrumbs', async ({ breadcrumbs }) => {
+      // Arrange
+      const props = createDefaultProps({ breadcrumbs })
+
+      // Act
+      render(<Dropdown {...props} />)
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert - Should render without errors
+      await waitFor(() => {
+        if (breadcrumbs.length > 0)
+          expect(screen.getByText(breadcrumbs[0])).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ==========================================
+  // Integration Tests (Menu and Item)
+  // ==========================================
+  describe('Integration with Menu and Item', () => {
+    it('should render all menu items with correct content', async () => {
+      // Arrange
+      const props = createDefaultProps({
+        breadcrumbs: ['Documents', 'Projects', 'Archive'],
+      })
+      render(<Dropdown {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('Documents')).toBeInTheDocument()
+        expect(screen.getByText('Projects')).toBeInTheDocument()
+        expect(screen.getByText('Archive')).toBeInTheDocument()
+      })
+    })
+
+    it('should handle click on any menu item', async () => {
+      // Arrange
+      const mockOnBreadcrumbClick = jest.fn()
+      const props = createDefaultProps({
+        startIndex: 0,
+        breadcrumbs: ['first', 'second', 'third'],
+        onBreadcrumbClick: mockOnBreadcrumbClick,
+      })
+      render(<Dropdown {...props} />)
+
+      // Act - Open and click on second item
+      fireEvent.click(screen.getByRole('button'))
+      await waitFor(() => {
+        expect(screen.getByText('second')).toBeInTheDocument()
+      })
+      fireEvent.click(screen.getByText('second'))
+
+      // Assert - Index should be 1 (second item)
+      expect(mockOnBreadcrumbClick).toHaveBeenCalledWith(1)
+    })
+
+    it('should close menu after any item click', async () => {
+      // Arrange
+      const mockOnBreadcrumbClick = jest.fn()
+      const props = createDefaultProps({
+        breadcrumbs: ['item1', 'item2', 'item3'],
+        onBreadcrumbClick: mockOnBreadcrumbClick,
+      })
+      render(<Dropdown {...props} />)
+
+      // Act - Open and click on middle item
+      fireEvent.click(screen.getByRole('button'))
+      await waitFor(() => {
+        expect(screen.getByText('item2')).toBeInTheDocument()
+      })
+      fireEvent.click(screen.getByText('item2'))
+
+      // Assert - Menu should close
+      await waitFor(() => {
+        expect(screen.queryByText('item1')).not.toBeInTheDocument()
+        expect(screen.queryByText('item2')).not.toBeInTheDocument()
+        expect(screen.queryByText('item3')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should correctly calculate index for each item based on startIndex', async () => {
+      // Arrange
+      const mockOnBreadcrumbClick = jest.fn()
+      const props = createDefaultProps({
+        startIndex: 3,
+        breadcrumbs: ['folder-a', 'folder-b', 'folder-c'],
+        onBreadcrumbClick: mockOnBreadcrumbClick,
+      })
+
+      // Test clicking each item
+      for (let i = 0; i < 3; i++) {
+        mockOnBreadcrumbClick.mockClear()
+        const { unmount } = render(<Dropdown {...props} />)
+
+        fireEvent.click(screen.getByRole('button'))
+        await waitFor(() => {
+          expect(screen.getByText(`folder-${String.fromCharCode(97 + i)}`)).toBeInTheDocument()
+        })
+        fireEvent.click(screen.getByText(`folder-${String.fromCharCode(97 + i)}`))
+
+        expect(mockOnBreadcrumbClick).toHaveBeenCalledWith(3 + i)
+        unmount()
+      }
+    })
+  })
+
+  // ==========================================
+  // Accessibility Tests
+  // ==========================================
+  describe('Accessibility', () => {
+    it('should render trigger as button element', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Dropdown {...props} />)
+
+      // Assert
+      const button = screen.getByRole('button')
+      expect(button).toBeInTheDocument()
+      expect(button.tagName).toBe('BUTTON')
+    })
+
+    it('should have type="button" attribute', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Dropdown {...props} />)
+
+      // Assert
+      const button = screen.getByRole('button')
+      expect(button).toHaveAttribute('type', 'button')
+    })
+  })
+})
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 69b393ed58..7e03049e6f 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
@@ -5,7 +5,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { RiMoreFill } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Menu from './menu'
 
 type DropdownProps = {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/index.spec.tsx
new file mode 100644
index 0000000000..2ccb460a06
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/index.spec.tsx
@@ -0,0 +1,1079 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import Breadcrumbs from './index'
+
+// ==========================================
+// Mock Modules
+// ==========================================
+
+// Note: react-i18next uses global mock from web/__mocks__/react-i18next.ts
+
+// Mock store - context provider requires mocking
+const mockStoreState = {
+  hasBucket: false,
+  breadcrumbs: [] as string[],
+  prefix: [] as string[],
+  setOnlineDriveFileList: jest.fn(),
+  setSelectedFileIds: jest.fn(),
+  setBreadcrumbs: jest.fn(),
+  setPrefix: jest.fn(),
+  setBucket: jest.fn(),
+}
+
+const mockGetState = jest.fn(() => mockStoreState)
+const mockDataSourceStore = { getState: mockGetState }
+
+jest.mock('../../../../store', () => ({
+  useDataSourceStore: () => mockDataSourceStore,
+  useDataSourceStoreWithSelector: (selector: (s: typeof mockStoreState) => unknown) => selector(mockStoreState),
+}))
+
+// ==========================================
+// Test Data Builders
+// ==========================================
+type BreadcrumbsProps = React.ComponentProps<typeof Breadcrumbs>
+
+const createDefaultProps = (overrides?: Partial<BreadcrumbsProps>): BreadcrumbsProps => ({
+  breadcrumbs: [],
+  keywords: '',
+  bucket: '',
+  searchResultsLength: 0,
+  isInPipeline: false,
+  ...overrides,
+})
+
+// ==========================================
+// Helper Functions
+// ==========================================
+const resetMockStoreState = () => {
+  mockStoreState.hasBucket = false
+  mockStoreState.breadcrumbs = []
+  mockStoreState.prefix = []
+  mockStoreState.setOnlineDriveFileList = jest.fn()
+  mockStoreState.setSelectedFileIds = jest.fn()
+  mockStoreState.setBreadcrumbs = jest.fn()
+  mockStoreState.setPrefix = jest.fn()
+  mockStoreState.setBucket = jest.fn()
+}
+
+// ==========================================
+// Test Suites
+// ==========================================
+describe('Breadcrumbs', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    resetMockStoreState()
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Breadcrumbs {...props} />)
+
+      // Assert - Container should be in the document
+      const container = document.querySelector('.flex.grow')
+      expect(container).toBeInTheDocument()
+    })
+
+    it('should render with correct container styles', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<Breadcrumbs {...props} />)
+
+      // Assert
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('flex')
+      expect(wrapper).toHaveClass('grow')
+      expect(wrapper).toHaveClass('items-center')
+      expect(wrapper).toHaveClass('overflow-hidden')
+    })
+
+    describe('Search Results Display', () => {
+      it('should show search results when keywords and searchResultsLength > 0', () => {
+        // Arrange
+        const props = createDefaultProps({
+          keywords: 'test',
+          searchResultsLength: 5,
+          breadcrumbs: ['folder1'],
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - Search result text should be displayed
+        expect(screen.getByText(/datasetPipeline\.onlineDrive\.breadcrumbs\.searchResult/)).toBeInTheDocument()
+      })
+
+      it('should not show search results when keywords is empty', () => {
+        // Arrange
+        const props = createDefaultProps({
+          keywords: '',
+          searchResultsLength: 5,
+          breadcrumbs: ['folder1'],
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert
+        expect(screen.queryByText(/searchResult/)).not.toBeInTheDocument()
+      })
+
+      it('should not show search results when searchResultsLength is 0', () => {
+        // Arrange
+        const props = createDefaultProps({
+          keywords: 'test',
+          searchResultsLength: 0,
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert
+        expect(screen.queryByText(/searchResult/)).not.toBeInTheDocument()
+      })
+
+      it('should use bucket as folderName when breadcrumbs is empty', () => {
+        // Arrange
+        const props = createDefaultProps({
+          keywords: 'test',
+          searchResultsLength: 5,
+          breadcrumbs: [],
+          bucket: 'my-bucket',
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - Should use bucket name in search result
+        expect(screen.getByText(/searchResult.*my-bucket/i)).toBeInTheDocument()
+      })
+
+      it('should use last breadcrumb as folderName when breadcrumbs exist', () => {
+        // Arrange
+        const props = createDefaultProps({
+          keywords: 'test',
+          searchResultsLength: 5,
+          breadcrumbs: ['folder1', 'folder2'],
+          bucket: 'my-bucket',
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - Should use last breadcrumb in search result
+        expect(screen.getByText(/searchResult.*folder2/i)).toBeInTheDocument()
+      })
+    })
+
+    describe('All Buckets Title Display', () => {
+      it('should show all buckets title when hasBucket=true, bucket is empty, and no breadcrumbs', () => {
+        // Arrange
+        mockStoreState.hasBucket = true
+        const props = createDefaultProps({
+          breadcrumbs: [],
+          bucket: '',
+          keywords: '',
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert
+        expect(screen.getByText('datasetPipeline.onlineDrive.breadcrumbs.allBuckets')).toBeInTheDocument()
+      })
+
+      it('should not show all buckets title when breadcrumbs exist', () => {
+        // Arrange
+        mockStoreState.hasBucket = true
+        const props = createDefaultProps({
+          breadcrumbs: ['folder1'],
+          bucket: '',
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert
+        expect(screen.queryByText('datasetPipeline.onlineDrive.breadcrumbs.allBuckets')).not.toBeInTheDocument()
+      })
+
+      it('should not show all buckets title when bucket is set', () => {
+        // Arrange
+        mockStoreState.hasBucket = true
+        const props = createDefaultProps({
+          breadcrumbs: [],
+          bucket: 'my-bucket',
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - Should show bucket name instead
+        expect(screen.queryByText('datasetPipeline.onlineDrive.breadcrumbs.allBuckets')).not.toBeInTheDocument()
+      })
+    })
+
+    describe('Bucket Component Display', () => {
+      it('should render Bucket component when hasBucket and bucket are set', () => {
+        // Arrange
+        mockStoreState.hasBucket = true
+        const props = createDefaultProps({
+          bucket: 'test-bucket',
+          breadcrumbs: [],
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - Bucket name should be displayed
+        expect(screen.getByText('test-bucket')).toBeInTheDocument()
+      })
+
+      it('should not render Bucket when hasBucket is false', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          bucket: 'test-bucket',
+          breadcrumbs: [],
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - Bucket should not be displayed, Drive should be shown instead
+        expect(screen.queryByText('test-bucket')).not.toBeInTheDocument()
+      })
+    })
+
+    describe('Drive Component Display', () => {
+      it('should render Drive component when hasBucket is false', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          breadcrumbs: [],
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - "All Files" should be displayed
+        expect(screen.getByText('datasetPipeline.onlineDrive.breadcrumbs.allFiles')).toBeInTheDocument()
+      })
+
+      it('should not render Drive component when hasBucket is true', () => {
+        // Arrange
+        mockStoreState.hasBucket = true
+        const props = createDefaultProps({
+          bucket: 'test-bucket',
+          breadcrumbs: [],
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert
+        expect(screen.queryByText('datasetPipeline.onlineDrive.breadcrumbs.allFiles')).not.toBeInTheDocument()
+      })
+    })
+
+    describe('BreadcrumbItem Display', () => {
+      it('should render all breadcrumbs when not collapsed', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          breadcrumbs: ['folder1', 'folder2'],
+          isInPipeline: false,
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert
+        expect(screen.getByText('folder1')).toBeInTheDocument()
+        expect(screen.getByText('folder2')).toBeInTheDocument()
+      })
+
+      it('should render last breadcrumb as active', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          breadcrumbs: ['folder1', 'folder2'],
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - Last breadcrumb should have active styles
+        const lastBreadcrumb = screen.getByText('folder2')
+        expect(lastBreadcrumb).toHaveClass('system-sm-medium')
+        expect(lastBreadcrumb).toHaveClass('text-text-secondary')
+      })
+
+      it('should render non-last breadcrumbs with tertiary styles', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          breadcrumbs: ['folder1', 'folder2'],
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - First breadcrumb should have tertiary styles
+        const firstBreadcrumb = screen.getByText('folder1')
+        expect(firstBreadcrumb).toHaveClass('system-sm-regular')
+        expect(firstBreadcrumb).toHaveClass('text-text-tertiary')
+      })
+    })
+
+    describe('Collapsed Breadcrumbs (Dropdown)', () => {
+      it('should show dropdown when breadcrumbs exceed displayBreadcrumbNum', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          breadcrumbs: ['folder1', 'folder2', 'folder3', 'folder4'],
+          isInPipeline: false, // displayBreadcrumbNum = 3
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - Dropdown trigger (more button) should be present
+        expect(screen.getByRole('button', { name: '' })).toBeInTheDocument()
+      })
+
+      it('should not show dropdown when breadcrumbs do not exceed displayBreadcrumbNum', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          breadcrumbs: ['folder1', 'folder2'],
+          isInPipeline: false, // displayBreadcrumbNum = 3
+        })
+
+        // Act
+        const { container } = render(<Breadcrumbs {...props} />)
+
+        // Assert - Should not have dropdown, just regular breadcrumbs
+        // All breadcrumbs should be directly visible
+        expect(screen.getByText('folder1')).toBeInTheDocument()
+        expect(screen.getByText('folder2')).toBeInTheDocument()
+        // Count buttons - should be 3 (allFiles + folder1 + folder2)
+        const buttons = container.querySelectorAll('button')
+        expect(buttons.length).toBe(3)
+      })
+
+      it('should show prefix breadcrumbs and last breadcrumb when collapsed', async () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          breadcrumbs: ['folder1', 'folder2', 'folder3', 'folder4', 'folder5'],
+          isInPipeline: false, // displayBreadcrumbNum = 3
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - First breadcrumb and last breadcrumb should be visible
+        expect(screen.getByText('folder1')).toBeInTheDocument()
+        expect(screen.getByText('folder2')).toBeInTheDocument()
+        expect(screen.getByText('folder5')).toBeInTheDocument()
+        // Middle breadcrumbs should be in dropdown
+        expect(screen.queryByText('folder3')).not.toBeInTheDocument()
+        expect(screen.queryByText('folder4')).not.toBeInTheDocument()
+      })
+
+      it('should show collapsed breadcrumbs in dropdown when clicked', async () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          breadcrumbs: ['folder1', 'folder2', 'folder3', 'folder4', 'folder5'],
+          isInPipeline: false,
+        })
+        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)
+
+        // Assert - Collapsed breadcrumbs should be visible
+        await waitFor(() => {
+          expect(screen.getByText('folder3')).toBeInTheDocument()
+          expect(screen.getByText('folder4')).toBeInTheDocument()
+        })
+      })
+    })
+  })
+
+  // ==========================================
+  // Props Testing
+  // ==========================================
+  describe('Props', () => {
+    describe('breadcrumbs prop', () => {
+      it('should handle empty breadcrumbs array', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({ breadcrumbs: [] })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - Only Drive should be visible
+        expect(screen.getByText('datasetPipeline.onlineDrive.breadcrumbs.allFiles')).toBeInTheDocument()
+      })
+
+      it('should handle single breadcrumb', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({ breadcrumbs: ['single-folder'] })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert
+        expect(screen.getByText('single-folder')).toBeInTheDocument()
+      })
+
+      it('should handle breadcrumbs with special characters', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          breadcrumbs: ['folder [1]', 'folder (copy)'],
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert
+        expect(screen.getByText('folder [1]')).toBeInTheDocument()
+        expect(screen.getByText('folder (copy)')).toBeInTheDocument()
+      })
+
+      it('should handle breadcrumbs with unicode characters', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          breadcrumbs: ['文件夹', 'フォルダ'],
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert
+        expect(screen.getByText('文件夹')).toBeInTheDocument()
+        expect(screen.getByText('フォルダ')).toBeInTheDocument()
+      })
+    })
+
+    describe('keywords prop', () => {
+      it('should show search results when keywords is non-empty with results', () => {
+        // Arrange
+        const props = createDefaultProps({
+          keywords: 'search-term',
+          searchResultsLength: 10,
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert
+        expect(screen.getByText(/searchResult/)).toBeInTheDocument()
+      })
+
+      it('should handle whitespace keywords', () => {
+        // Arrange
+        const props = createDefaultProps({
+          keywords: '   ',
+          searchResultsLength: 5,
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - Whitespace is truthy, so should show search results
+        expect(screen.getByText(/searchResult/)).toBeInTheDocument()
+      })
+    })
+
+    describe('bucket prop', () => {
+      it('should display bucket name when hasBucket and bucket are set', () => {
+        // Arrange
+        mockStoreState.hasBucket = true
+        const props = createDefaultProps({
+          bucket: 'production-bucket',
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert
+        expect(screen.getByText('production-bucket')).toBeInTheDocument()
+      })
+
+      it('should handle bucket with special characters', () => {
+        // Arrange
+        mockStoreState.hasBucket = true
+        const props = createDefaultProps({
+          bucket: 'bucket-v2.0_backup',
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert
+        expect(screen.getByText('bucket-v2.0_backup')).toBeInTheDocument()
+      })
+    })
+
+    describe('searchResultsLength prop', () => {
+      it('should handle zero searchResultsLength', () => {
+        // Arrange
+        const props = createDefaultProps({
+          keywords: 'test',
+          searchResultsLength: 0,
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - Should not show search results
+        expect(screen.queryByText(/searchResult/)).not.toBeInTheDocument()
+      })
+
+      it('should handle large searchResultsLength', () => {
+        // Arrange
+        const props = createDefaultProps({
+          keywords: 'test',
+          searchResultsLength: 10000,
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert
+        expect(screen.getByText(/searchResult.*10000/)).toBeInTheDocument()
+      })
+    })
+
+    describe('isInPipeline prop', () => {
+      it('should use displayBreadcrumbNum=2 when isInPipeline is true', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          breadcrumbs: ['folder1', 'folder2', 'folder3'],
+          isInPipeline: true, // displayBreadcrumbNum = 2
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // 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)
+      })
+
+      it('should use displayBreadcrumbNum=3 when isInPipeline is false', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          breadcrumbs: ['folder1', 'folder2', 'folder3'],
+          isInPipeline: false, // displayBreadcrumbNum = 3
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - Should NOT collapse because 3 <= 3
+        expect(screen.getByText('folder1')).toBeInTheDocument()
+        expect(screen.getByText('folder2')).toBeInTheDocument()
+        expect(screen.getByText('folder3')).toBeInTheDocument()
+      })
+
+      it('should reduce displayBreadcrumbNum by 1 when bucket is set', () => {
+        // Arrange
+        mockStoreState.hasBucket = true
+        const props = createDefaultProps({
+          breadcrumbs: ['folder1', 'folder2', 'folder3'],
+          bucket: 'my-bucket',
+          isInPipeline: false, // displayBreadcrumbNum = 3 - 1 = 2
+        })
+
+        // Act
+        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)
+      })
+    })
+  })
+
+  // ==========================================
+  // Memoization Logic and Dependencies Tests
+  // ==========================================
+  describe('Memoization Logic and Dependencies', () => {
+    describe('displayBreadcrumbNum useMemo', () => {
+      it('should calculate correct value when isInPipeline=false and no bucket', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          breadcrumbs: ['a', 'b', 'c', 'd'],
+          isInPipeline: false,
+          bucket: '',
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - displayBreadcrumbNum = 3, so 4 breadcrumbs should collapse
+        // First 2 visible, dropdown, last 1 visible
+        expect(screen.getByText('a')).toBeInTheDocument()
+        expect(screen.getByText('b')).toBeInTheDocument()
+        expect(screen.getByText('d')).toBeInTheDocument()
+        expect(screen.queryByText('c')).not.toBeInTheDocument()
+      })
+
+      it('should calculate correct value when isInPipeline=true and no bucket', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          breadcrumbs: ['a', 'b', 'c'],
+          isInPipeline: true,
+          bucket: '',
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - displayBreadcrumbNum = 2, so 3 breadcrumbs should collapse
+        expect(screen.getByText('a')).toBeInTheDocument()
+        expect(screen.getByText('c')).toBeInTheDocument()
+        expect(screen.queryByText('b')).not.toBeInTheDocument()
+      })
+
+      it('should calculate correct value when isInPipeline=false and bucket exists', () => {
+        // Arrange
+        mockStoreState.hasBucket = true
+        const props = createDefaultProps({
+          breadcrumbs: ['a', 'b', 'c'],
+          isInPipeline: false,
+          bucket: 'my-bucket',
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - displayBreadcrumbNum = 3 - 1 = 2, so 3 breadcrumbs should collapse
+        expect(screen.getByText('a')).toBeInTheDocument()
+        expect(screen.getByText('c')).toBeInTheDocument()
+        expect(screen.queryByText('b')).not.toBeInTheDocument()
+      })
+    })
+
+    describe('breadcrumbsConfig useMemo', () => {
+      it('should correctly split breadcrumbs when collapsed', async () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          breadcrumbs: ['f1', 'f2', 'f3', 'f4', 'f5'],
+          isInPipeline: false, // displayBreadcrumbNum = 3
+        })
+        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)
+
+        // Assert
+        // 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()
+        })
+      })
+
+      it('should not collapse when breadcrumbs.length <= displayBreadcrumbNum', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          breadcrumbs: ['f1', 'f2'],
+          isInPipeline: false, // displayBreadcrumbNum = 3
+        })
+
+        // Act
+        render(<Breadcrumbs {...props} />)
+
+        // Assert - All breadcrumbs should be visible
+        expect(screen.getByText('f1')).toBeInTheDocument()
+        expect(screen.getByText('f2')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ==========================================
+  // Callback Stability and Event Handlers Tests
+  // ==========================================
+  describe('Callback Stability and Event Handlers', () => {
+    describe('handleBackToBucketList', () => {
+      it('should reset store state when called', () => {
+        // Arrange
+        mockStoreState.hasBucket = true
+        const props = createDefaultProps({
+          bucket: 'my-bucket',
+          breadcrumbs: [],
+        })
+        render(<Breadcrumbs {...props} />)
+
+        // Act - Click bucket icon button (first button in Bucket component)
+        const buttons = screen.getAllByRole('button')
+        fireEvent.click(buttons[0]) // Bucket icon button
+
+        // Assert
+        expect(mockStoreState.setOnlineDriveFileList).toHaveBeenCalledWith([])
+        expect(mockStoreState.setSelectedFileIds).toHaveBeenCalledWith([])
+        expect(mockStoreState.setBucket).toHaveBeenCalledWith('')
+        expect(mockStoreState.setBreadcrumbs).toHaveBeenCalledWith([])
+        expect(mockStoreState.setPrefix).toHaveBeenCalledWith([])
+      })
+    })
+
+    describe('handleClickBucketName', () => {
+      it('should reset breadcrumbs and prefix when bucket name is clicked', () => {
+        // Arrange
+        mockStoreState.hasBucket = true
+        const props = createDefaultProps({
+          bucket: 'my-bucket',
+          breadcrumbs: ['folder1'],
+        })
+        render(<Breadcrumbs {...props} />)
+
+        // Act - Click bucket name button
+        const bucketButton = screen.getByText('my-bucket')
+        fireEvent.click(bucketButton)
+
+        // Assert
+        expect(mockStoreState.setOnlineDriveFileList).toHaveBeenCalledWith([])
+        expect(mockStoreState.setSelectedFileIds).toHaveBeenCalledWith([])
+        expect(mockStoreState.setBreadcrumbs).toHaveBeenCalledWith([])
+        expect(mockStoreState.setPrefix).toHaveBeenCalledWith([])
+      })
+
+      it('should not call handler when bucket is disabled (no breadcrumbs)', () => {
+        // Arrange
+        mockStoreState.hasBucket = true
+        const props = createDefaultProps({
+          bucket: 'my-bucket',
+          breadcrumbs: [], // disabled when no breadcrumbs
+        })
+        render(<Breadcrumbs {...props} />)
+
+        // Act - Click bucket name button (should be disabled)
+        const bucketButton = screen.getByText('my-bucket')
+        fireEvent.click(bucketButton)
+
+        // Assert - Store methods should NOT be called because button is disabled
+        expect(mockStoreState.setOnlineDriveFileList).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('handleBackToRoot', () => {
+      it('should reset state when Drive button is clicked', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          breadcrumbs: ['folder1'],
+        })
+        render(<Breadcrumbs {...props} />)
+
+        // Act - Click "All Files" button
+        const driveButton = screen.getByText('datasetPipeline.onlineDrive.breadcrumbs.allFiles')
+        fireEvent.click(driveButton)
+
+        // Assert
+        expect(mockStoreState.setOnlineDriveFileList).toHaveBeenCalledWith([])
+        expect(mockStoreState.setSelectedFileIds).toHaveBeenCalledWith([])
+        expect(mockStoreState.setBreadcrumbs).toHaveBeenCalledWith([])
+        expect(mockStoreState.setPrefix).toHaveBeenCalledWith([])
+      })
+    })
+
+    describe('handleClickBreadcrumb', () => {
+      it('should slice breadcrumbs and prefix when breadcrumb is clicked', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        mockStoreState.breadcrumbs = ['folder1', 'folder2', 'folder3']
+        mockStoreState.prefix = ['prefix1', 'prefix2', 'prefix3']
+        const props = createDefaultProps({
+          breadcrumbs: ['folder1', 'folder2', 'folder3'],
+        })
+        render(<Breadcrumbs {...props} />)
+
+        // Act - Click on first breadcrumb (index 0)
+        const firstBreadcrumb = screen.getByText('folder1')
+        fireEvent.click(firstBreadcrumb)
+
+        // Assert - Should slice to index 0 + 1 = 1
+        expect(mockStoreState.setOnlineDriveFileList).toHaveBeenCalledWith([])
+        expect(mockStoreState.setSelectedFileIds).toHaveBeenCalledWith([])
+        expect(mockStoreState.setBreadcrumbs).toHaveBeenCalledWith(['folder1'])
+        expect(mockStoreState.setPrefix).toHaveBeenCalledWith(['prefix1'])
+      })
+
+      it('should not call handler when last breadcrumb is clicked (disabled)', () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        const props = createDefaultProps({
+          breadcrumbs: ['folder1', 'folder2'],
+        })
+        render(<Breadcrumbs {...props} />)
+
+        // Act - Click on last breadcrumb (should be disabled)
+        const lastBreadcrumb = screen.getByText('folder2')
+        fireEvent.click(lastBreadcrumb)
+
+        // Assert - Store methods should NOT be called
+        expect(mockStoreState.setBreadcrumbs).not.toHaveBeenCalled()
+      })
+
+      it('should handle click on collapsed breadcrumb from dropdown', async () => {
+        // Arrange
+        mockStoreState.hasBucket = false
+        mockStoreState.breadcrumbs = ['f1', 'f2', 'f3', 'f4', 'f5']
+        mockStoreState.prefix = ['p1', 'p2', 'p3', 'p4', 'p5']
+        const props = createDefaultProps({
+          breadcrumbs: ['f1', 'f2', 'f3', 'f4', 'f5'],
+          isInPipeline: false,
+        })
+        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'))
+
+        // Assert - Should slice to index 2 + 1 = 3
+        expect(mockStoreState.setBreadcrumbs).toHaveBeenCalledWith(['f1', 'f2', 'f3'])
+        expect(mockStoreState.setPrefix).toHaveBeenCalledWith(['p1', 'p2', 'p3'])
+      })
+    })
+  })
+
+  // ==========================================
+  // Component Memoization Tests
+  // ==========================================
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      // Assert
+      expect(Breadcrumbs).toHaveProperty('$$typeof', Symbol.for('react.memo'))
+    })
+
+    it('should not re-render when props are the same', () => {
+      // Arrange
+      const props = createDefaultProps()
+      const { rerender } = render(<Breadcrumbs {...props} />)
+
+      // Act - Rerender with same props
+      rerender(<Breadcrumbs {...props} />)
+
+      // Assert - Component should render without errors
+      const container = document.querySelector('.flex.grow')
+      expect(container).toBeInTheDocument()
+    })
+
+    it('should re-render when breadcrumbs change', () => {
+      // Arrange
+      mockStoreState.hasBucket = false
+      const props = createDefaultProps({ breadcrumbs: ['folder1'] })
+      const { rerender } = render(<Breadcrumbs {...props} />)
+      expect(screen.getByText('folder1')).toBeInTheDocument()
+
+      // Act - Rerender with different breadcrumbs
+      rerender(<Breadcrumbs {...createDefaultProps({ breadcrumbs: ['folder2'] })} />)
+
+      // Assert
+      expect(screen.getByText('folder2')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Edge Cases and Error Handling Tests
+  // ==========================================
+  describe('Edge Cases and Error Handling', () => {
+    it('should handle very long breadcrumb names', () => {
+      // Arrange
+      mockStoreState.hasBucket = false
+      const longName = 'a'.repeat(100)
+      const props = createDefaultProps({
+        breadcrumbs: [longName],
+      })
+
+      // Act
+      render(<Breadcrumbs {...props} />)
+
+      // Assert
+      expect(screen.getByText(longName)).toBeInTheDocument()
+    })
+
+    it('should handle many breadcrumbs', async () => {
+      // Arrange
+      mockStoreState.hasBucket = false
+      const manyBreadcrumbs = Array.from({ length: 20 }, (_, i) => `folder-${i}`)
+      const props = createDefaultProps({
+        breadcrumbs: manyBreadcrumbs,
+      })
+      render(<Breadcrumbs {...props} />)
+
+      // Act - Open dropdown
+      const dropdownTrigger = screen.getAllByRole('button').find(btn => btn.querySelector('svg'))
+      if (dropdownTrigger)
+        fireEvent.click(dropdownTrigger)
+
+      // 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()
+      })
+    })
+
+    it('should handle empty bucket string', () => {
+      // Arrange
+      mockStoreState.hasBucket = true
+      const props = createDefaultProps({
+        bucket: '',
+        breadcrumbs: [],
+      })
+
+      // Act
+      render(<Breadcrumbs {...props} />)
+
+      // Assert - Should show all buckets title
+      expect(screen.getByText('datasetPipeline.onlineDrive.breadcrumbs.allBuckets')).toBeInTheDocument()
+    })
+
+    it('should handle breadcrumb with only whitespace', () => {
+      // Arrange
+      mockStoreState.hasBucket = false
+      const props = createDefaultProps({
+        breadcrumbs: ['   ', 'normal-folder'],
+      })
+
+      // Act
+      render(<Breadcrumbs {...props} />)
+
+      // Assert - Both should be rendered
+      expect(screen.getByText('normal-folder')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // All Prop Variations Tests
+  // ==========================================
+  describe('Prop Variations', () => {
+    it.each([
+      { hasBucket: true, bucket: 'b1', breadcrumbs: [], expected: 'bucket visible' },
+      { hasBucket: true, bucket: '', breadcrumbs: [], expected: 'all buckets title' },
+      { hasBucket: false, bucket: '', breadcrumbs: [], expected: 'all files' },
+      { hasBucket: false, bucket: '', breadcrumbs: ['f1'], expected: 'drive with breadcrumb' },
+    ])('should render correctly for $expected', ({ hasBucket, bucket, breadcrumbs }) => {
+      // Arrange
+      mockStoreState.hasBucket = hasBucket
+      const props = createDefaultProps({ bucket, breadcrumbs })
+
+      // Act
+      render(<Breadcrumbs {...props} />)
+
+      // Assert - Component should render without errors
+      const container = document.querySelector('.flex.grow')
+      expect(container).toBeInTheDocument()
+    })
+
+    it.each([
+      { isInPipeline: true, bucket: '', expectedNum: 2 },
+      { isInPipeline: false, bucket: '', expectedNum: 3 },
+      { isInPipeline: true, bucket: 'b', expectedNum: 1 },
+      { isInPipeline: false, bucket: 'b', expectedNum: 2 },
+    ])('should calculate displayBreadcrumbNum=$expectedNum when isInPipeline=$isInPipeline and bucket=$bucket', ({ isInPipeline, bucket, expectedNum }) => {
+      // Arrange
+      mockStoreState.hasBucket = !!bucket
+      const breadcrumbs = Array.from({ length: expectedNum + 2 }, (_, i) => `f${i}`)
+      const props = createDefaultProps({ isInPipeline, bucket, breadcrumbs })
+
+      // Act
+      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)
+    })
+  })
+
+  // ==========================================
+  // Integration Tests
+  // ==========================================
+  describe('Integration', () => {
+    it('should handle full navigation flow: bucket -> folders -> navigation back', () => {
+      // Arrange
+      mockStoreState.hasBucket = true
+      mockStoreState.breadcrumbs = ['folder1', 'folder2']
+      mockStoreState.prefix = ['prefix1', 'prefix2']
+      const props = createDefaultProps({
+        bucket: 'my-bucket',
+        breadcrumbs: ['folder1', 'folder2'],
+      })
+      render(<Breadcrumbs {...props} />)
+
+      // Act - Click on first folder to navigate back
+      const firstFolder = screen.getByText('folder1')
+      fireEvent.click(firstFolder)
+
+      // Assert
+      expect(mockStoreState.setBreadcrumbs).toHaveBeenCalledWith(['folder1'])
+      expect(mockStoreState.setPrefix).toHaveBeenCalledWith(['prefix1'])
+    })
+
+    it('should handle search result display with navigation elements hidden', () => {
+      // Arrange
+      mockStoreState.hasBucket = true
+      const props = createDefaultProps({
+        keywords: 'test',
+        searchResultsLength: 5,
+        bucket: 'my-bucket',
+        breadcrumbs: ['folder1'],
+      })
+
+      // Act
+      render(<Breadcrumbs {...props} />)
+
+      // Assert - Search result should be shown, navigation elements should be hidden
+      expect(screen.getByText(/searchResult/)).toBeInTheDocument()
+      expect(screen.queryByText('my-bucket')).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx
index 2117bb3ace..bbdee474ba 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type BreadcrumbItemProps = {
   name: string
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/index.spec.tsx
new file mode 100644
index 0000000000..3982fd4243
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/index.spec.tsx
@@ -0,0 +1,727 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import Header from './index'
+
+// ==========================================
+// Mock Modules
+// ==========================================
+
+// Note: react-i18next uses global mock from web/__mocks__/react-i18next.ts
+
+// Mock store - required by Breadcrumbs component
+const mockStoreState = {
+  hasBucket: false,
+  setOnlineDriveFileList: jest.fn(),
+  setSelectedFileIds: jest.fn(),
+  setBreadcrumbs: jest.fn(),
+  setPrefix: jest.fn(),
+  setBucket: jest.fn(),
+  breadcrumbs: [],
+  prefix: [],
+}
+
+const mockGetState = jest.fn(() => mockStoreState)
+const mockDataSourceStore = { getState: mockGetState }
+
+jest.mock('../../../store', () => ({
+  useDataSourceStore: () => mockDataSourceStore,
+  useDataSourceStoreWithSelector: (selector: (s: typeof mockStoreState) => unknown) => selector(mockStoreState),
+}))
+
+// ==========================================
+// Test Data Builders
+// ==========================================
+type HeaderProps = React.ComponentProps<typeof Header>
+
+const createDefaultProps = (overrides?: Partial<HeaderProps>): HeaderProps => ({
+  breadcrumbs: [],
+  inputValue: '',
+  keywords: '',
+  bucket: '',
+  searchResultsLength: 0,
+  handleInputChange: jest.fn(),
+  handleResetKeywords: jest.fn(),
+  isInPipeline: false,
+  ...overrides,
+})
+
+// ==========================================
+// Helper Functions
+// ==========================================
+const resetMockStoreState = () => {
+  mockStoreState.hasBucket = false
+  mockStoreState.setOnlineDriveFileList = jest.fn()
+  mockStoreState.setSelectedFileIds = jest.fn()
+  mockStoreState.setBreadcrumbs = jest.fn()
+  mockStoreState.setPrefix = jest.fn()
+  mockStoreState.setBucket = jest.fn()
+  mockStoreState.breadcrumbs = []
+  mockStoreState.prefix = []
+}
+
+// ==========================================
+// Test Suites
+// ==========================================
+describe('Header', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    resetMockStoreState()
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert - search input should be visible
+      expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+    })
+
+    it('should render with correct container styles', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<Header {...props} />)
+
+      // Assert - container should have correct class names
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('flex')
+      expect(wrapper).toHaveClass('items-center')
+      expect(wrapper).toHaveClass('gap-x-2')
+      expect(wrapper).toHaveClass('bg-components-panel-bg')
+      expect(wrapper).toHaveClass('p-1')
+      expect(wrapper).toHaveClass('pl-3')
+    })
+
+    it('should render Input component with correct props', () => {
+      // Arrange
+      const props = createDefaultProps({ inputValue: 'test-value' })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+      expect(input).toBeInTheDocument()
+      expect(input).toHaveValue('test-value')
+    })
+
+    it('should render Input with search icon', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<Header {...props} />)
+
+      // Assert - Input should have search icon (RiSearchLine is rendered as svg)
+      const searchIcon = container.querySelector('svg.h-4.w-4')
+      expect(searchIcon).toBeInTheDocument()
+    })
+
+    it('should render Input with correct wrapper width', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<Header {...props} />)
+
+      // Assert - Input wrapper should have w-[200px] class
+      const inputWrapper = container.querySelector('.w-\\[200px\\]')
+      expect(inputWrapper).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Props Testing
+  // ==========================================
+  describe('Props', () => {
+    describe('inputValue prop', () => {
+      it('should display empty input when inputValue is empty string', () => {
+        // Arrange
+        const props = createDefaultProps({ inputValue: '' })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+        expect(input).toHaveValue('')
+      })
+
+      it('should display input value correctly', () => {
+        // Arrange
+        const props = createDefaultProps({ inputValue: 'search-query' })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+        expect(input).toHaveValue('search-query')
+      })
+
+      it('should handle special characters in inputValue', () => {
+        // Arrange
+        const specialChars = 'test[file].txt (copy)'
+        const props = createDefaultProps({ inputValue: specialChars })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+        expect(input).toHaveValue(specialChars)
+      })
+
+      it('should handle unicode characters in inputValue', () => {
+        // Arrange
+        const unicodeValue = '文件搜索 日本語'
+        const props = createDefaultProps({ inputValue: unicodeValue })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+        expect(input).toHaveValue(unicodeValue)
+      })
+    })
+
+    describe('breadcrumbs prop', () => {
+      it('should render with empty breadcrumbs', () => {
+        // Arrange
+        const props = createDefaultProps({ breadcrumbs: [] })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert - Component should render without errors
+        expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+      })
+
+      it('should render with single breadcrumb', () => {
+        // Arrange
+        const props = createDefaultProps({ breadcrumbs: ['folder1'] })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+      })
+
+      it('should render with multiple breadcrumbs', () => {
+        // Arrange
+        const props = createDefaultProps({ breadcrumbs: ['folder1', 'folder2', 'folder3'] })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+      })
+    })
+
+    describe('keywords prop', () => {
+      it('should pass keywords to Breadcrumbs', () => {
+        // Arrange
+        const props = createDefaultProps({ keywords: 'search-keyword' })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert - keywords are passed through, component renders
+        expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+      })
+    })
+
+    describe('bucket prop', () => {
+      it('should render with empty bucket', () => {
+        // Arrange
+        const props = createDefaultProps({ bucket: '' })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+      })
+
+      it('should render with bucket value', () => {
+        // Arrange
+        const props = createDefaultProps({ bucket: 'my-bucket' })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+      })
+    })
+
+    describe('searchResultsLength prop', () => {
+      it('should handle zero search results', () => {
+        // Arrange
+        const props = createDefaultProps({ searchResultsLength: 0 })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+      })
+
+      it('should handle positive search results', () => {
+        // Arrange
+        const props = createDefaultProps({ searchResultsLength: 10, keywords: 'test' })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert - Breadcrumbs will show search results text when keywords exist and results > 0
+        expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+      })
+
+      it('should handle large search results count', () => {
+        // Arrange
+        const props = createDefaultProps({ searchResultsLength: 1000, keywords: 'test' })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+      })
+    })
+
+    describe('isInPipeline prop', () => {
+      it('should render correctly when isInPipeline is false', () => {
+        // Arrange
+        const props = createDefaultProps({ isInPipeline: false })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+      })
+
+      it('should render correctly when isInPipeline is true', () => {
+        // Arrange
+        const props = createDefaultProps({ isInPipeline: true })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ==========================================
+  // Event Handlers Tests
+  // ==========================================
+  describe('Event Handlers', () => {
+    describe('handleInputChange', () => {
+      it('should call handleInputChange when input value changes', () => {
+        // Arrange
+        const mockHandleInputChange = jest.fn()
+        const props = createDefaultProps({ handleInputChange: mockHandleInputChange })
+        render(<Header {...props} />)
+        const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+
+        // Act
+        fireEvent.change(input, { target: { value: 'new-value' } })
+
+        // Assert
+        expect(mockHandleInputChange).toHaveBeenCalledTimes(1)
+        // Verify that onChange event was triggered (React's synthetic event structure)
+        expect(mockHandleInputChange.mock.calls[0][0]).toHaveProperty('type', 'change')
+      })
+
+      it('should call handleInputChange on each keystroke', () => {
+        // Arrange
+        const mockHandleInputChange = jest.fn()
+        const props = createDefaultProps({ handleInputChange: mockHandleInputChange })
+        render(<Header {...props} />)
+        const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+
+        // Act
+        fireEvent.change(input, { target: { value: 'a' } })
+        fireEvent.change(input, { target: { value: 'ab' } })
+        fireEvent.change(input, { target: { value: 'abc' } })
+
+        // Assert
+        expect(mockHandleInputChange).toHaveBeenCalledTimes(3)
+      })
+
+      it('should handle empty string input', () => {
+        // Arrange
+        const mockHandleInputChange = jest.fn()
+        const props = createDefaultProps({ inputValue: 'existing', handleInputChange: mockHandleInputChange })
+        render(<Header {...props} />)
+        const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+
+        // Act
+        fireEvent.change(input, { target: { value: '' } })
+
+        // Assert
+        expect(mockHandleInputChange).toHaveBeenCalledTimes(1)
+        expect(mockHandleInputChange.mock.calls[0][0]).toHaveProperty('type', 'change')
+      })
+
+      it('should handle whitespace-only input', () => {
+        // Arrange
+        const mockHandleInputChange = jest.fn()
+        const props = createDefaultProps({ handleInputChange: mockHandleInputChange })
+        render(<Header {...props} />)
+        const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+
+        // Act
+        fireEvent.change(input, { target: { value: '   ' } })
+
+        // Assert
+        expect(mockHandleInputChange).toHaveBeenCalledTimes(1)
+        expect(mockHandleInputChange.mock.calls[0][0]).toHaveProperty('type', 'change')
+      })
+    })
+
+    describe('handleResetKeywords', () => {
+      it('should call handleResetKeywords when clear icon is clicked', () => {
+        // Arrange
+        const mockHandleResetKeywords = jest.fn()
+        const props = createDefaultProps({
+          inputValue: 'to-clear',
+          handleResetKeywords: mockHandleResetKeywords,
+        })
+        const { container } = render(<Header {...props} />)
+
+        // Act - Find and click the clear icon container
+        const clearButton = container.querySelector('[class*="cursor-pointer"] svg[class*="h-3.5"]')?.parentElement
+        expect(clearButton).toBeInTheDocument()
+        fireEvent.click(clearButton!)
+
+        // Assert
+        expect(mockHandleResetKeywords).toHaveBeenCalledTimes(1)
+      })
+
+      it('should not show clear icon when inputValue is empty', () => {
+        // Arrange
+        const props = createDefaultProps({ inputValue: '' })
+        const { container } = render(<Header {...props} />)
+
+        // Act & Assert - Clear icon should not be visible
+        const clearIcon = container.querySelector('[class*="cursor-pointer"] svg[class*="h-3.5"]')
+        expect(clearIcon).not.toBeInTheDocument()
+      })
+
+      it('should show clear icon when inputValue is not empty', () => {
+        // Arrange
+        const props = createDefaultProps({ inputValue: 'some-value' })
+        const { container } = render(<Header {...props} />)
+
+        // Act & Assert - Clear icon should be visible
+        const clearIcon = container.querySelector('[class*="cursor-pointer"] svg[class*="h-3.5"]')
+        expect(clearIcon).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ==========================================
+  // Component Memoization Tests
+  // ==========================================
+  describe('Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      // Assert - Header component should be memoized
+      expect(Header).toHaveProperty('$$typeof', Symbol.for('react.memo'))
+    })
+
+    it('should not re-render when props are the same', () => {
+      // Arrange
+      const mockHandleInputChange = jest.fn()
+      const mockHandleResetKeywords = jest.fn()
+      const props = createDefaultProps({
+        handleInputChange: mockHandleInputChange,
+        handleResetKeywords: mockHandleResetKeywords,
+      })
+
+      // Act - Initial render
+      const { rerender } = render(<Header {...props} />)
+
+      // Rerender with same props
+      rerender(<Header {...props} />)
+
+      // Assert - Component renders without errors
+      expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+    })
+
+    it('should re-render when inputValue changes', () => {
+      // Arrange
+      const props = createDefaultProps({ inputValue: 'initial' })
+      const { rerender } = render(<Header {...props} />)
+      const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+      expect(input).toHaveValue('initial')
+
+      // Act - Rerender with different inputValue
+      const newProps = createDefaultProps({ inputValue: 'changed' })
+      rerender(<Header {...newProps} />)
+
+      // Assert - Input value should be updated
+      expect(input).toHaveValue('changed')
+    })
+
+    it('should re-render when breadcrumbs change', () => {
+      // Arrange
+      const props = createDefaultProps({ breadcrumbs: [] })
+      const { rerender } = render(<Header {...props} />)
+
+      // Act - Rerender with different breadcrumbs
+      const newProps = createDefaultProps({ breadcrumbs: ['folder1', 'folder2'] })
+      rerender(<Header {...newProps} />)
+
+      // Assert - Component renders without errors
+      expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+    })
+
+    it('should re-render when keywords change', () => {
+      // Arrange
+      const props = createDefaultProps({ keywords: '' })
+      const { rerender } = render(<Header {...props} />)
+
+      // Act - Rerender with different keywords
+      const newProps = createDefaultProps({ keywords: 'search-term' })
+      rerender(<Header {...newProps} />)
+
+      // Assert - Component renders without errors
+      expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Edge Cases and Error Handling
+  // ==========================================
+  describe('Edge Cases and Error Handling', () => {
+    it('should handle very long inputValue', () => {
+      // Arrange
+      const longValue = 'a'.repeat(500)
+      const props = createDefaultProps({ inputValue: longValue })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+      expect(input).toHaveValue(longValue)
+    })
+
+    it('should handle very long breadcrumb paths', () => {
+      // Arrange
+      const longBreadcrumbs = Array.from({ length: 20 }, (_, i) => `folder-${i}`)
+      const props = createDefaultProps({ breadcrumbs: longBreadcrumbs })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+    })
+
+    it('should handle breadcrumbs with special characters', () => {
+      // Arrange
+      const specialBreadcrumbs = ['folder [1]', 'folder (2)', 'folder-3.backup']
+      const props = createDefaultProps({ breadcrumbs: specialBreadcrumbs })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+    })
+
+    it('should handle breadcrumbs with unicode names', () => {
+      // Arrange
+      const unicodeBreadcrumbs = ['文件夹', 'フォルダ', 'Папка']
+      const props = createDefaultProps({ breadcrumbs: unicodeBreadcrumbs })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+    })
+
+    it('should handle bucket with special characters', () => {
+      // Arrange
+      const props = createDefaultProps({ bucket: 'my-bucket_2024.backup' })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+    })
+
+    it('should pass the event object to handleInputChange callback', () => {
+      // Arrange
+      const mockHandleInputChange = jest.fn()
+      const props = createDefaultProps({ handleInputChange: mockHandleInputChange })
+      render(<Header {...props} />)
+      const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+
+      // Act
+      fireEvent.change(input, { target: { value: 'test-value' } })
+
+      // Assert - Verify the event object is passed correctly
+      expect(mockHandleInputChange).toHaveBeenCalledTimes(1)
+      const eventArg = mockHandleInputChange.mock.calls[0][0]
+      expect(eventArg).toHaveProperty('type', 'change')
+      expect(eventArg).toHaveProperty('target')
+    })
+  })
+
+  // ==========================================
+  // All Prop Variations Tests
+  // ==========================================
+  describe('Prop Variations', () => {
+    it.each([
+      { isInPipeline: true, bucket: '' },
+      { isInPipeline: true, bucket: 'my-bucket' },
+      { isInPipeline: false, bucket: '' },
+      { isInPipeline: false, bucket: 'my-bucket' },
+    ])('should render correctly with isInPipeline=$isInPipeline and bucket=$bucket', (propVariation) => {
+      // Arrange
+      const props = createDefaultProps(propVariation)
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+    })
+
+    it.each([
+      { keywords: '', searchResultsLength: 0, description: 'no search' },
+      { keywords: 'test', searchResultsLength: 0, description: 'search with no results' },
+      { keywords: 'test', searchResultsLength: 5, description: 'search with results' },
+      { keywords: '', searchResultsLength: 5, description: 'no keywords but has results count' },
+    ])('should render correctly with $description', ({ keywords, searchResultsLength }) => {
+      // Arrange
+      const props = createDefaultProps({ keywords, searchResultsLength })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+    })
+
+    it.each([
+      { breadcrumbs: [], inputValue: '', expected: 'empty state' },
+      { breadcrumbs: ['root'], inputValue: 'search', expected: 'single breadcrumb with search' },
+      { breadcrumbs: ['a', 'b', 'c'], inputValue: '', expected: 'multiple breadcrumbs no search' },
+      { breadcrumbs: ['a', 'b', 'c', 'd', 'e'], inputValue: 'query', expected: 'many breadcrumbs with search' },
+    ])('should handle $expected correctly', ({ breadcrumbs, inputValue }) => {
+      // Arrange
+      const props = createDefaultProps({ breadcrumbs, inputValue })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+      expect(input).toHaveValue(inputValue)
+    })
+  })
+
+  // ==========================================
+  // Integration with Child Components
+  // ==========================================
+  describe('Integration with Child Components', () => {
+    it('should pass all required props to Breadcrumbs', () => {
+      // Arrange
+      const props = createDefaultProps({
+        breadcrumbs: ['folder1', 'folder2'],
+        keywords: 'test-keyword',
+        bucket: 'test-bucket',
+        searchResultsLength: 10,
+        isInPipeline: true,
+      })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert - Component should render successfully, meaning props are passed correctly
+      expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+    })
+
+    it('should pass correct props to Input component', () => {
+      // Arrange
+      const mockHandleInputChange = jest.fn()
+      const mockHandleResetKeywords = jest.fn()
+      const props = createDefaultProps({
+        inputValue: 'test-input',
+        handleInputChange: mockHandleInputChange,
+        handleResetKeywords: mockHandleResetKeywords,
+      })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+      expect(input).toHaveValue('test-input')
+
+      // Test onChange handler
+      fireEvent.change(input, { target: { value: 'new-value' } })
+      expect(mockHandleInputChange).toHaveBeenCalled()
+    })
+  })
+
+  // ==========================================
+  // Callback Stability Tests
+  // ==========================================
+  describe('Callback Stability', () => {
+    it('should maintain stable handleInputChange callback after rerender', () => {
+      // Arrange
+      const mockHandleInputChange = jest.fn()
+      const props = createDefaultProps({ handleInputChange: mockHandleInputChange })
+      const { rerender } = render(<Header {...props} />)
+      const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+
+      // Act - Fire change event, rerender, fire again
+      fireEvent.change(input, { target: { value: 'first' } })
+      rerender(<Header {...props} />)
+      fireEvent.change(input, { target: { value: 'second' } })
+
+      // Assert
+      expect(mockHandleInputChange).toHaveBeenCalledTimes(2)
+    })
+
+    it('should maintain stable handleResetKeywords callback after rerender', () => {
+      // Arrange
+      const mockHandleResetKeywords = jest.fn()
+      const props = createDefaultProps({
+        inputValue: 'to-clear',
+        handleResetKeywords: mockHandleResetKeywords,
+      })
+      const { container, rerender } = render(<Header {...props} />)
+
+      // Act - Click clear, rerender, click again
+      const clearButton = container.querySelector('[class*="cursor-pointer"] svg[class*="h-3.5"]')?.parentElement
+      fireEvent.click(clearButton!)
+      rerender(<Header {...props} />)
+      fireEvent.click(clearButton!)
+
+      // Assert
+      expect(mockHandleResetKeywords).toHaveBeenCalledTimes(2)
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/index.spec.tsx
new file mode 100644
index 0000000000..e8e0930e44
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/index.spec.tsx
@@ -0,0 +1,757 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import FileList from './index'
+import type { OnlineDriveFile } from '@/models/pipeline'
+import { OnlineDriveFileType } from '@/models/pipeline'
+
+// ==========================================
+// Mock Modules
+// ==========================================
+
+// Note: react-i18next uses global mock from web/__mocks__/react-i18next.ts
+
+// Mock ahooks useDebounceFn - third-party library requires mocking
+const mockDebounceFnRun = jest.fn()
+jest.mock('ahooks', () => ({
+  useDebounceFn: (fn: (...args: any[]) => void) => {
+    mockDebounceFnRun.mockImplementation(fn)
+    return { run: mockDebounceFnRun }
+  },
+}))
+
+// Mock store - context provider requires mocking
+const mockStoreState = {
+  setNextPageParameters: jest.fn(),
+  currentNextPageParametersRef: { current: {} },
+  isTruncated: { current: false },
+  hasBucket: false,
+  setOnlineDriveFileList: jest.fn(),
+  setSelectedFileIds: jest.fn(),
+  setBreadcrumbs: jest.fn(),
+  setPrefix: jest.fn(),
+  setBucket: jest.fn(),
+}
+
+const mockGetState = jest.fn(() => mockStoreState)
+const mockDataSourceStore = { getState: mockGetState }
+
+jest.mock('../../store', () => ({
+  useDataSourceStore: () => mockDataSourceStore,
+  useDataSourceStoreWithSelector: (selector: (s: any) => any) => selector(mockStoreState),
+}))
+
+// ==========================================
+// Test Data Builders
+// ==========================================
+const createMockOnlineDriveFile = (overrides?: Partial<OnlineDriveFile>): OnlineDriveFile => ({
+  id: 'file-1',
+  name: 'test-file.txt',
+  size: 1024,
+  type: OnlineDriveFileType.file,
+  ...overrides,
+})
+
+type FileListProps = React.ComponentProps<typeof FileList>
+
+const createDefaultProps = (overrides?: Partial<FileListProps>): FileListProps => ({
+  fileList: [],
+  selectedFileIds: [],
+  breadcrumbs: [],
+  keywords: '',
+  bucket: '',
+  isInPipeline: false,
+  resetKeywords: jest.fn(),
+  updateKeywords: jest.fn(),
+  searchResultsLength: 0,
+  handleSelectFile: jest.fn(),
+  handleOpenFolder: jest.fn(),
+  isLoading: false,
+  supportBatchUpload: true,
+  ...overrides,
+})
+
+// ==========================================
+// Helper Functions
+// ==========================================
+const resetMockStoreState = () => {
+  mockStoreState.setNextPageParameters = jest.fn()
+  mockStoreState.currentNextPageParametersRef = { current: {} }
+  mockStoreState.isTruncated = { current: false }
+  mockStoreState.hasBucket = false
+  mockStoreState.setOnlineDriveFileList = jest.fn()
+  mockStoreState.setSelectedFileIds = jest.fn()
+  mockStoreState.setBreadcrumbs = jest.fn()
+  mockStoreState.setPrefix = jest.fn()
+  mockStoreState.setBucket = jest.fn()
+}
+
+// ==========================================
+// Test Suites
+// ==========================================
+describe('FileList', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    resetMockStoreState()
+    mockDebounceFnRun.mockClear()
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<FileList {...props} />)
+
+      // Assert - search input should be visible
+      expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+    })
+
+    it('should render with correct container styles', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<FileList {...props} />)
+
+      // Assert
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('flex')
+      expect(wrapper).toHaveClass('h-[400px]')
+      expect(wrapper).toHaveClass('flex-col')
+      expect(wrapper).toHaveClass('overflow-hidden')
+      expect(wrapper).toHaveClass('rounded-xl')
+    })
+
+    it('should render Header component with search input', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<FileList {...props} />)
+
+      // Assert
+      const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+      expect(input).toBeInTheDocument()
+    })
+
+    it('should render files when fileList has items', () => {
+      // Arrange
+      const fileList = [
+        createMockOnlineDriveFile({ id: 'file-1', name: 'file1.txt' }),
+        createMockOnlineDriveFile({ id: 'file-2', name: 'file2.txt' }),
+      ]
+      const props = createDefaultProps({ fileList })
+
+      // Act
+      render(<FileList {...props} />)
+
+      // Assert
+      expect(screen.getByText('file1.txt')).toBeInTheDocument()
+      expect(screen.getByText('file2.txt')).toBeInTheDocument()
+    })
+
+    it('should show loading state when isLoading is true and fileList is empty', () => {
+      // Arrange
+      const props = createDefaultProps({ isLoading: true, fileList: [] })
+
+      // Act
+      const { container } = render(<FileList {...props} />)
+
+      // Assert - Loading component should be rendered with spin-animation class
+      expect(container.querySelector('.spin-animation')).toBeInTheDocument()
+    })
+
+    it('should show empty folder state when not loading and fileList is empty', () => {
+      // Arrange
+      const props = createDefaultProps({ isLoading: false, fileList: [], keywords: '' })
+
+      // Act
+      render(<FileList {...props} />)
+
+      // Assert
+      expect(screen.getByText('datasetPipeline.onlineDrive.emptyFolder')).toBeInTheDocument()
+    })
+
+    it('should show empty search result when not loading, fileList is empty, and keywords exist', () => {
+      // Arrange
+      const props = createDefaultProps({ isLoading: false, fileList: [], keywords: 'search-term' })
+
+      // Act
+      render(<FileList {...props} />)
+
+      // Assert
+      expect(screen.getByText('datasetPipeline.onlineDrive.emptySearchResult')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Props Testing
+  // ==========================================
+  describe('Props', () => {
+    describe('fileList prop', () => {
+      it('should render all files from fileList', () => {
+        // Arrange
+        const fileList = [
+          createMockOnlineDriveFile({ id: '1', name: 'a.txt' }),
+          createMockOnlineDriveFile({ id: '2', name: 'b.txt' }),
+          createMockOnlineDriveFile({ id: '3', name: 'c.txt' }),
+        ]
+        const props = createDefaultProps({ fileList })
+
+        // Act
+        render(<FileList {...props} />)
+
+        // Assert
+        expect(screen.getByText('a.txt')).toBeInTheDocument()
+        expect(screen.getByText('b.txt')).toBeInTheDocument()
+        expect(screen.getByText('c.txt')).toBeInTheDocument()
+      })
+
+      it('should handle empty fileList', () => {
+        // Arrange
+        const props = createDefaultProps({ fileList: [] })
+
+        // Act
+        render(<FileList {...props} />)
+
+        // Assert - Should show empty folder state
+        expect(screen.getByText('datasetPipeline.onlineDrive.emptyFolder')).toBeInTheDocument()
+      })
+    })
+
+    describe('selectedFileIds prop', () => {
+      it('should mark files as selected based on selectedFileIds', () => {
+        // Arrange
+        const fileList = [
+          createMockOnlineDriveFile({ id: 'file-1', name: 'file1.txt' }),
+          createMockOnlineDriveFile({ id: 'file-2', name: 'file2.txt' }),
+        ]
+        const props = createDefaultProps({ fileList, selectedFileIds: ['file-1'] })
+
+        // Act
+        render(<FileList {...props} />)
+
+        // Assert - The checkbox for file-1 should be checked (check icon present)
+        expect(screen.getByTestId('checkbox-file-1')).toBeInTheDocument()
+        expect(screen.getByTestId('check-icon-file-1')).toBeInTheDocument()
+        expect(screen.getByTestId('checkbox-file-2')).toBeInTheDocument()
+        expect(screen.queryByTestId('check-icon-file-2')).not.toBeInTheDocument()
+      })
+    })
+
+    describe('keywords prop', () => {
+      it('should initialize input with keywords value', () => {
+        // Arrange
+        const props = createDefaultProps({ keywords: 'my-search' })
+
+        // Act
+        render(<FileList {...props} />)
+
+        // Assert
+        const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+        expect(input).toHaveValue('my-search')
+      })
+    })
+
+    describe('isLoading prop', () => {
+      it('should show loading when isLoading is true with empty list', () => {
+        // Arrange
+        const props = createDefaultProps({ isLoading: true, fileList: [] })
+
+        // Act
+        const { container } = render(<FileList {...props} />)
+
+        // Assert - Loading component with spin-animation class
+        expect(container.querySelector('.spin-animation')).toBeInTheDocument()
+      })
+
+      it('should show loading indicator at bottom when isLoading is true with files', () => {
+        // Arrange
+        const fileList = [createMockOnlineDriveFile()]
+        const props = createDefaultProps({ isLoading: true, fileList })
+
+        // Act
+        const { container } = render(<FileList {...props} />)
+
+        // Assert - Should show spinner icon at the bottom
+        expect(container.querySelector('.animation-spin')).toBeInTheDocument()
+      })
+    })
+
+    describe('supportBatchUpload prop', () => {
+      it('should render checkboxes when supportBatchUpload is true', () => {
+        // Arrange
+        const fileList = [createMockOnlineDriveFile({ id: 'file-1', name: 'file1.txt' })]
+        const props = createDefaultProps({ fileList, supportBatchUpload: true })
+
+        // Act
+        render(<FileList {...props} />)
+
+        // Assert - Checkbox component has data-testid="checkbox-{id}"
+        expect(screen.getByTestId('checkbox-file-1')).toBeInTheDocument()
+      })
+
+      it('should render radio buttons when supportBatchUpload is false', () => {
+        // Arrange
+        const fileList = [createMockOnlineDriveFile({ id: 'file-1', name: 'file1.txt' })]
+        const props = createDefaultProps({ fileList, supportBatchUpload: false })
+
+        // Act
+        const { container } = render(<FileList {...props} />)
+
+        // Assert - Radio is rendered as a div with rounded-full class
+        expect(container.querySelector('.rounded-full')).toBeInTheDocument()
+        // And checkbox should not be present
+        expect(screen.queryByTestId('checkbox-file-1')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  // ==========================================
+  // State Management Tests
+  // ==========================================
+  describe('State Management', () => {
+    describe('inputValue state', () => {
+      it('should initialize inputValue with keywords prop', () => {
+        // Arrange
+        const props = createDefaultProps({ keywords: 'initial-keyword' })
+
+        // Act
+        render(<FileList {...props} />)
+
+        // Assert
+        const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+        expect(input).toHaveValue('initial-keyword')
+      })
+
+      it('should update inputValue when input changes', () => {
+        // Arrange
+        const props = createDefaultProps({ keywords: '' })
+        render(<FileList {...props} />)
+        const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+
+        // Act
+        fireEvent.change(input, { target: { value: 'new-value' } })
+
+        // Assert
+        expect(input).toHaveValue('new-value')
+      })
+    })
+
+    describe('debounced keywords update', () => {
+      it('should call updateKeywords with debounce when input changes', () => {
+        // Arrange
+        const mockUpdateKeywords = jest.fn()
+        const props = createDefaultProps({ updateKeywords: mockUpdateKeywords })
+        render(<FileList {...props} />)
+        const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+
+        // Act
+        fireEvent.change(input, { target: { value: 'debounced-value' } })
+
+        // Assert
+        expect(mockDebounceFnRun).toHaveBeenCalledWith('debounced-value')
+      })
+    })
+  })
+
+  // ==========================================
+  // Event Handlers Tests
+  // ==========================================
+  describe('Event Handlers', () => {
+    describe('handleInputChange', () => {
+      it('should update inputValue on input change', () => {
+        // Arrange
+        const props = createDefaultProps()
+        render(<FileList {...props} />)
+        const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+
+        // Act
+        fireEvent.change(input, { target: { value: 'typed-text' } })
+
+        // Assert
+        expect(input).toHaveValue('typed-text')
+      })
+
+      it('should trigger debounced updateKeywords on input change', () => {
+        // Arrange
+        const mockUpdateKeywords = jest.fn()
+        const props = createDefaultProps({ updateKeywords: mockUpdateKeywords })
+        render(<FileList {...props} />)
+        const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+
+        // Act
+        fireEvent.change(input, { target: { value: 'search-term' } })
+
+        // Assert
+        expect(mockDebounceFnRun).toHaveBeenCalledWith('search-term')
+      })
+
+      it('should handle multiple sequential input changes', () => {
+        // Arrange
+        const mockUpdateKeywords = jest.fn()
+        const props = createDefaultProps({ updateKeywords: mockUpdateKeywords })
+        render(<FileList {...props} />)
+        const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+
+        // Act
+        fireEvent.change(input, { target: { value: 'a' } })
+        fireEvent.change(input, { target: { value: 'ab' } })
+        fireEvent.change(input, { target: { value: 'abc' } })
+
+        // Assert
+        expect(mockDebounceFnRun).toHaveBeenCalledTimes(3)
+        expect(mockDebounceFnRun).toHaveBeenLastCalledWith('abc')
+        expect(input).toHaveValue('abc')
+      })
+    })
+
+    describe('handleResetKeywords', () => {
+      it('should call resetKeywords prop when clear button is clicked', () => {
+        // Arrange
+        const mockResetKeywords = jest.fn()
+        const props = createDefaultProps({ resetKeywords: mockResetKeywords, keywords: 'to-reset' })
+        const { container } = render(<FileList {...props} />)
+
+        // Act - Click the clear icon div (it contains RiCloseCircleFill icon)
+        const clearButton = container.querySelector('[class*="cursor-pointer"] svg[class*="h-3.5"]')?.parentElement
+        expect(clearButton).toBeInTheDocument()
+        fireEvent.click(clearButton!)
+
+        // Assert
+        expect(mockResetKeywords).toHaveBeenCalledTimes(1)
+      })
+
+      it('should reset inputValue to empty string when clear is clicked', () => {
+        // Arrange
+        const props = createDefaultProps({ keywords: 'to-be-reset' })
+        const { container } = render(<FileList {...props} />)
+        const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+        fireEvent.change(input, { target: { value: 'some-search' } })
+
+        // Act - Find and click the clear icon
+        const clearButton = container.querySelector('[class*="cursor-pointer"] svg[class*="h-3.5"]')?.parentElement
+        expect(clearButton).toBeInTheDocument()
+        fireEvent.click(clearButton!)
+
+        // Assert
+        expect(input).toHaveValue('')
+      })
+    })
+
+    describe('handleSelectFile', () => {
+      it('should call handleSelectFile when file item is clicked', () => {
+        // Arrange
+        const mockHandleSelectFile = jest.fn()
+        const fileList = [createMockOnlineDriveFile({ id: 'file-1', name: 'test.txt' })]
+        const props = createDefaultProps({ handleSelectFile: mockHandleSelectFile, fileList })
+        render(<FileList {...props} />)
+
+        // Act - Click on the file item
+        const fileItem = screen.getByText('test.txt')
+        fireEvent.click(fileItem.closest('[class*="cursor-pointer"]')!)
+
+        // Assert
+        expect(mockHandleSelectFile).toHaveBeenCalledWith(expect.objectContaining({
+          id: 'file-1',
+          name: 'test.txt',
+          type: OnlineDriveFileType.file,
+        }))
+      })
+    })
+
+    describe('handleOpenFolder', () => {
+      it('should call handleOpenFolder when folder item is clicked', () => {
+        // Arrange
+        const mockHandleOpenFolder = jest.fn()
+        const fileList = [createMockOnlineDriveFile({ id: 'folder-1', name: 'my-folder', type: OnlineDriveFileType.folder })]
+        const props = createDefaultProps({ handleOpenFolder: mockHandleOpenFolder, fileList })
+        render(<FileList {...props} />)
+
+        // Act - Click on the folder item
+        const folderItem = screen.getByText('my-folder')
+        fireEvent.click(folderItem.closest('[class*="cursor-pointer"]')!)
+
+        // Assert
+        expect(mockHandleOpenFolder).toHaveBeenCalledWith(expect.objectContaining({
+          id: 'folder-1',
+          name: 'my-folder',
+          type: OnlineDriveFileType.folder,
+        }))
+      })
+    })
+  })
+
+  // ==========================================
+  // Edge Cases and Error Handling
+  // ==========================================
+  describe('Edge Cases and Error Handling', () => {
+    it('should handle empty string keywords', () => {
+      // Arrange
+      const props = createDefaultProps({ keywords: '' })
+
+      // Act
+      render(<FileList {...props} />)
+
+      // Assert
+      const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+      expect(input).toHaveValue('')
+    })
+
+    it('should handle special characters in keywords', () => {
+      // Arrange
+      const specialChars = 'test[file].txt (copy)'
+      const props = createDefaultProps({ keywords: specialChars })
+
+      // Act
+      render(<FileList {...props} />)
+
+      // Assert
+      const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+      expect(input).toHaveValue(specialChars)
+    })
+
+    it('should handle unicode characters in keywords', () => {
+      // Arrange
+      const unicodeKeywords = '文件搜索 日本語'
+      const props = createDefaultProps({ keywords: unicodeKeywords })
+
+      // Act
+      render(<FileList {...props} />)
+
+      // Assert
+      const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+      expect(input).toHaveValue(unicodeKeywords)
+    })
+
+    it('should handle very long file names in fileList', () => {
+      // Arrange
+      const longName = `${'a'.repeat(100)}.txt`
+      const fileList = [createMockOnlineDriveFile({ id: '1', name: longName })]
+      const props = createDefaultProps({ fileList })
+
+      // Act
+      render(<FileList {...props} />)
+
+      // Assert
+      expect(screen.getByText(longName)).toBeInTheDocument()
+    })
+
+    it('should handle large number of files', () => {
+      // Arrange
+      const fileList = Array.from({ length: 50 }, (_, i) =>
+        createMockOnlineDriveFile({ id: `file-${i}`, name: `file-${i}.txt` }),
+      )
+      const props = createDefaultProps({ fileList })
+
+      // Act
+      render(<FileList {...props} />)
+
+      // Assert - Check a few files exist
+      expect(screen.getByText('file-0.txt')).toBeInTheDocument()
+      expect(screen.getByText('file-49.txt')).toBeInTheDocument()
+    })
+
+    it('should handle whitespace-only keywords input', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<FileList {...props} />)
+      const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+
+      // Act
+      fireEvent.change(input, { target: { value: '   ' } })
+
+      // Assert
+      expect(input).toHaveValue('   ')
+      expect(mockDebounceFnRun).toHaveBeenCalledWith('   ')
+    })
+  })
+
+  // ==========================================
+  // All Prop Variations Tests
+  // ==========================================
+  describe('Prop Variations', () => {
+    it.each([
+      { isInPipeline: true, supportBatchUpload: true },
+      { isInPipeline: true, supportBatchUpload: false },
+      { isInPipeline: false, supportBatchUpload: true },
+      { isInPipeline: false, supportBatchUpload: false },
+    ])('should render correctly with isInPipeline=$isInPipeline and supportBatchUpload=$supportBatchUpload', (propVariation) => {
+      // Arrange
+      const props = createDefaultProps(propVariation)
+
+      // Act
+      render(<FileList {...props} />)
+
+      // Assert - Component should render without crashing
+      expect(screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')).toBeInTheDocument()
+    })
+
+    it.each([
+      { isLoading: true, fileCount: 0, description: 'loading state with no files' },
+      { isLoading: false, fileCount: 0, description: 'not loading with no files' },
+      { isLoading: false, fileCount: 3, description: 'not loading with files' },
+    ])('should handle $description correctly', ({ isLoading, fileCount }) => {
+      // Arrange
+      const fileList = Array.from({ length: fileCount }, (_, i) =>
+        createMockOnlineDriveFile({ id: `file-${i}`, name: `file-${i}.txt` }),
+      )
+      const props = createDefaultProps({ isLoading, fileList })
+
+      // Act
+      const { container } = render(<FileList {...props} />)
+
+      // Assert
+      if (isLoading && fileCount === 0)
+        expect(container.querySelector('.spin-animation')).toBeInTheDocument()
+
+      else if (!isLoading && fileCount === 0)
+        expect(screen.getByText('datasetPipeline.onlineDrive.emptyFolder')).toBeInTheDocument()
+
+      else
+        expect(screen.getByText('file-0.txt')).toBeInTheDocument()
+    })
+
+    it.each([
+      { keywords: '', searchResultsLength: 0 },
+      { keywords: 'test', searchResultsLength: 5 },
+      { keywords: 'not-found', searchResultsLength: 0 },
+    ])('should render correctly with keywords="$keywords" and searchResultsLength=$searchResultsLength', ({ keywords, searchResultsLength }) => {
+      // Arrange
+      const props = createDefaultProps({ keywords, searchResultsLength })
+
+      // Act
+      render(<FileList {...props} />)
+
+      // Assert
+      const input = screen.getByPlaceholderText('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')
+      expect(input).toHaveValue(keywords)
+    })
+  })
+
+  // ==========================================
+  // File Type Variations
+  // ==========================================
+  describe('File Type Variations', () => {
+    it('should render folder type correctly', () => {
+      // Arrange
+      const fileList = [createMockOnlineDriveFile({ id: 'folder-1', name: 'my-folder', type: OnlineDriveFileType.folder })]
+      const props = createDefaultProps({ fileList })
+
+      // Act
+      render(<FileList {...props} />)
+
+      // Assert
+      expect(screen.getByText('my-folder')).toBeInTheDocument()
+    })
+
+    it('should render bucket type correctly', () => {
+      // Arrange
+      const fileList = [createMockOnlineDriveFile({ id: 'bucket-1', name: 'my-bucket', type: OnlineDriveFileType.bucket })]
+      const props = createDefaultProps({ fileList })
+
+      // Act
+      render(<FileList {...props} />)
+
+      // Assert
+      expect(screen.getByText('my-bucket')).toBeInTheDocument()
+    })
+
+    it('should render file with size', () => {
+      // Arrange
+      const fileList = [createMockOnlineDriveFile({ id: 'file-1', name: 'test.txt', size: 1024 })]
+      const props = createDefaultProps({ fileList })
+
+      // Act
+      render(<FileList {...props} />)
+
+      // Assert
+      expect(screen.getByText('test.txt')).toBeInTheDocument()
+      // formatFileSize returns '1.00 KB' for 1024 bytes
+      expect(screen.getByText('1.00 KB')).toBeInTheDocument()
+    })
+
+    it('should not show checkbox for bucket type', () => {
+      // Arrange
+      const fileList = [createMockOnlineDriveFile({ id: 'bucket-1', name: 'my-bucket', type: OnlineDriveFileType.bucket })]
+      const props = createDefaultProps({ fileList, supportBatchUpload: true })
+
+      // Act
+      render(<FileList {...props} />)
+
+      // Assert - No checkbox should be rendered for bucket
+      expect(screen.queryByRole('checkbox')).not.toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Search Results Display
+  // ==========================================
+  describe('Search Results Display', () => {
+    it('should show search results count when keywords and results exist', () => {
+      // Arrange
+      const props = createDefaultProps({
+        keywords: 'test',
+        searchResultsLength: 5,
+        breadcrumbs: ['folder1'],
+      })
+
+      // Act
+      render(<FileList {...props} />)
+
+      // Assert
+      expect(screen.getByText(/datasetPipeline\.onlineDrive\.breadcrumbs\.searchResult/)).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Callback Stability
+  // ==========================================
+  describe('Callback Stability', () => {
+    it('should maintain stable handleSelectFile callback', () => {
+      // Arrange
+      const mockHandleSelectFile = jest.fn()
+      const fileList = [createMockOnlineDriveFile({ id: 'file-1', name: 'test.txt' })]
+      const props = createDefaultProps({ handleSelectFile: mockHandleSelectFile, fileList })
+      const { rerender } = render(<FileList {...props} />)
+
+      // Act - Click once
+      const fileItem = screen.getByText('test.txt')
+      fireEvent.click(fileItem.closest('[class*="cursor-pointer"]')!)
+
+      // Rerender with same props
+      rerender(<FileList {...props} />)
+
+      // Click again
+      fireEvent.click(fileItem.closest('[class*="cursor-pointer"]')!)
+
+      // Assert
+      expect(mockHandleSelectFile).toHaveBeenCalledTimes(2)
+    })
+
+    it('should maintain stable handleOpenFolder callback', () => {
+      // Arrange
+      const mockHandleOpenFolder = jest.fn()
+      const fileList = [createMockOnlineDriveFile({ id: 'folder-1', name: 'my-folder', type: OnlineDriveFileType.folder })]
+      const props = createDefaultProps({ handleOpenFolder: mockHandleOpenFolder, fileList })
+      const { rerender } = render(<FileList {...props} />)
+
+      // Act - Click once
+      const folderItem = screen.getByText('my-folder')
+      fireEvent.click(folderItem.closest('[class*="cursor-pointer"]')!)
+
+      // Rerender with same props
+      rerender(<FileList {...props} />)
+
+      // Click again
+      fireEvent.click(folderItem.closest('[class*="cursor-pointer"]')!)
+
+      // Assert
+      expect(mockHandleOpenFolder).toHaveBeenCalledTimes(2)
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx
index e9e14f7e69..d4e710b297 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx
@@ -3,7 +3,7 @@ import { OnlineDriveFileType } from '@/models/pipeline'
 import { BucketsBlue, Folder } from '@/app/components/base/icons/src/public/knowledge/online-drive'
 import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
 import { getFileType } from './utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type FileIconProps = {
   type: OnlineDriveFileType
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/index.spec.tsx
new file mode 100644
index 0000000000..9d27cff4cf
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/index.spec.tsx
@@ -0,0 +1,2071 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import List from './index'
+import type { OnlineDriveFile } from '@/models/pipeline'
+import { OnlineDriveFileType } from '@/models/pipeline'
+
+// ==========================================
+// Mock Modules
+// ==========================================
+
+// Note: react-i18next uses global mock from web/__mocks__/react-i18next.ts
+
+// Mock Loading component - base component with simple render
+jest.mock('@/app/components/base/loading', () => {
+  const MockLoading = ({ type }: { type?: string }) => (
+    <div data-testid="loading" data-type={type}>Loading...</div>
+  )
+  return MockLoading
+})
+
+// Mock Item component for List tests - child component with complex behavior
+jest.mock('./item', () => {
+  const MockItem = ({ file, isSelected, onSelect, onOpen, isMultipleChoice }: {
+    file: OnlineDriveFile
+    isSelected: boolean
+    onSelect: (file: OnlineDriveFile) => void
+    onOpen: (file: OnlineDriveFile) => void
+    isMultipleChoice: boolean
+  }) => {
+    return (
+      <div
+        data-testid={`item-${file.id}`}
+        data-selected={isSelected}
+        data-multiple-choice={isMultipleChoice}
+      >
+        <span data-testid={`item-name-${file.id}`}>{file.name}</span>
+        <button data-testid={`item-select-${file.id}`} onClick={() => onSelect(file)}>Select</button>
+        <button data-testid={`item-open-${file.id}`} onClick={() => onOpen(file)}>Open</button>
+      </div>
+    )
+  }
+  return MockItem
+})
+
+// Mock EmptyFolder component for List tests
+jest.mock('./empty-folder', () => {
+  const MockEmptyFolder = () => (
+    <div data-testid="empty-folder">Empty Folder</div>
+  )
+  return MockEmptyFolder
+})
+
+// Mock EmptySearchResult component for List tests
+jest.mock('./empty-search-result', () => {
+  const MockEmptySearchResult = ({ onResetKeywords }: { onResetKeywords: () => void }) => (
+    <div data-testid="empty-search-result">
+      <span>No results</span>
+      <button data-testid="reset-keywords-btn" onClick={onResetKeywords}>Reset</button>
+    </div>
+  )
+  return MockEmptySearchResult
+})
+
+// Mock store state and refs
+const mockIsTruncated = { current: false }
+const mockCurrentNextPageParametersRef = { current: {} as Record<string, any> }
+const mockSetNextPageParameters = jest.fn()
+
+const mockStoreState = {
+  isTruncated: mockIsTruncated,
+  currentNextPageParametersRef: mockCurrentNextPageParametersRef,
+  setNextPageParameters: mockSetNextPageParameters,
+}
+
+const mockGetState = jest.fn(() => mockStoreState)
+const mockDataSourceStore = { getState: mockGetState }
+
+jest.mock('../../../store', () => ({
+  useDataSourceStore: () => mockDataSourceStore,
+}))
+
+// ==========================================
+// Test Data Builders
+// ==========================================
+const createMockOnlineDriveFile = (overrides?: Partial<OnlineDriveFile>): OnlineDriveFile => ({
+  id: 'file-1',
+  name: 'test-file.txt',
+  size: 1024,
+  type: OnlineDriveFileType.file,
+  ...overrides,
+})
+
+const createMockFileList = (count: number): OnlineDriveFile[] => {
+  return Array.from({ length: count }, (_, index) => createMockOnlineDriveFile({
+    id: `file-${index + 1}`,
+    name: `file-${index + 1}.txt`,
+    size: (index + 1) * 1024,
+  }))
+}
+
+type ListProps = React.ComponentProps<typeof List>
+
+const createDefaultProps = (overrides?: Partial<ListProps>): ListProps => ({
+  fileList: [],
+  selectedFileIds: [],
+  keywords: '',
+  isLoading: false,
+  supportBatchUpload: true,
+  handleResetKeywords: jest.fn(),
+  handleSelectFile: jest.fn(),
+  handleOpenFolder: jest.fn(),
+  ...overrides,
+})
+
+// ==========================================
+// Mock IntersectionObserver
+// ==========================================
+let mockIntersectionObserverCallback: IntersectionObserverCallback | null = null
+let mockIntersectionObserverInstance: {
+  observe: jest.Mock
+  disconnect: jest.Mock
+  unobserve: jest.Mock
+} | null = null
+
+const createMockIntersectionObserver = () => {
+  const instance = {
+    observe: jest.fn(),
+    disconnect: jest.fn(),
+    unobserve: jest.fn(),
+  }
+  mockIntersectionObserverInstance = instance
+
+  return class MockIntersectionObserver {
+    callback: IntersectionObserverCallback
+    options: IntersectionObserverInit
+
+    constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
+      this.callback = callback
+      this.options = options || {}
+      mockIntersectionObserverCallback = callback
+    }
+
+    observe = instance.observe
+    disconnect = instance.disconnect
+    unobserve = instance.unobserve
+  }
+}
+
+// ==========================================
+// Helper Functions
+// ==========================================
+const triggerIntersection = (isIntersecting: boolean) => {
+  if (mockIntersectionObserverCallback) {
+    const entries = [{
+      isIntersecting,
+      boundingClientRect: {} as DOMRectReadOnly,
+      intersectionRatio: isIntersecting ? 1 : 0,
+      intersectionRect: {} as DOMRectReadOnly,
+      rootBounds: null,
+      target: document.createElement('div'),
+      time: Date.now(),
+    }] as IntersectionObserverEntry[]
+    mockIntersectionObserverCallback(entries, {} as IntersectionObserver)
+  }
+}
+
+const resetMockStoreState = () => {
+  mockIsTruncated.current = false
+  mockCurrentNextPageParametersRef.current = {}
+  mockSetNextPageParameters.mockClear()
+  mockGetState.mockClear()
+}
+
+// ==========================================
+// Test Suites
+// ==========================================
+describe('List', () => {
+  const originalIntersectionObserver = window.IntersectionObserver
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    resetMockStoreState()
+    mockIntersectionObserverCallback = null
+    mockIntersectionObserverInstance = null
+
+    // Setup IntersectionObserver mock
+    window.IntersectionObserver = createMockIntersectionObserver() as unknown as typeof IntersectionObserver
+  })
+
+  afterEach(() => {
+    window.IntersectionObserver = originalIntersectionObserver
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<List {...props} />)
+
+      // Assert
+      expect(document.body).toBeInTheDocument()
+    })
+
+    it('should render Loading component when isAllLoading is true', () => {
+      // Arrange
+      const props = createDefaultProps({
+        isLoading: true,
+        fileList: [],
+        keywords: '',
+      })
+
+      // Act
+      render(<List {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('loading')).toBeInTheDocument()
+      expect(screen.getByTestId('loading')).toHaveAttribute('data-type', 'app')
+    })
+
+    it('should render EmptyFolder when folder is empty and not loading', () => {
+      // Arrange
+      const props = createDefaultProps({
+        isLoading: false,
+        fileList: [],
+        keywords: '',
+      })
+
+      // Act
+      render(<List {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('empty-folder')).toBeInTheDocument()
+    })
+
+    it('should render EmptySearchResult when search has no results', () => {
+      // Arrange
+      const props = createDefaultProps({
+        isLoading: false,
+        fileList: [],
+        keywords: 'non-existent-file',
+      })
+
+      // Act
+      render(<List {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('empty-search-result')).toBeInTheDocument()
+    })
+
+    it('should render file list when files exist', () => {
+      // Arrange
+      const fileList = createMockFileList(3)
+      const props = createDefaultProps({ fileList })
+
+      // Act
+      render(<List {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('item-file-1')).toBeInTheDocument()
+      expect(screen.getByTestId('item-file-2')).toBeInTheDocument()
+      expect(screen.getByTestId('item-file-3')).toBeInTheDocument()
+    })
+
+    it('should render partial loading spinner when loading more files', () => {
+      // Arrange
+      const fileList = createMockFileList(2)
+      const props = createDefaultProps({
+        fileList,
+        isLoading: true,
+      })
+
+      // Act
+      const { container } = render(<List {...props} />)
+
+      // Assert - Should show files AND loading spinner (animation-spin class)
+      expect(screen.getByTestId('item-file-1')).toBeInTheDocument()
+      expect(container.querySelector('.animation-spin')).toBeInTheDocument()
+    })
+
+    it('should not render Loading component when partial loading', () => {
+      // Arrange
+      const fileList = createMockFileList(2)
+      const props = createDefaultProps({
+        fileList,
+        isLoading: true,
+      })
+
+      // Act
+      render(<List {...props} />)
+
+      // Assert - Full page loading should not appear
+      expect(screen.queryByTestId('loading')).not.toBeInTheDocument()
+    })
+
+    it('should render anchor div for infinite scroll', () => {
+      // Arrange
+      const fileList = createMockFileList(2)
+      const props = createDefaultProps({ fileList })
+
+      // Act
+      const { container } = render(<List {...props} />)
+
+      // Assert - Anchor div should exist with h-0 class
+      const anchorDiv = container.querySelector('.h-0')
+      expect(anchorDiv).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Props Testing
+  // ==========================================
+  describe('Props', () => {
+    describe('fileList prop', () => {
+      it('should render all files from fileList', () => {
+        // Arrange
+        const fileList = createMockFileList(5)
+        const props = createDefaultProps({ fileList })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        fileList.forEach((file) => {
+          expect(screen.getByTestId(`item-${file.id}`)).toBeInTheDocument()
+          expect(screen.getByTestId(`item-name-${file.id}`)).toHaveTextContent(file.name)
+        })
+      })
+
+      it('should handle empty fileList', () => {
+        // Arrange
+        const props = createDefaultProps({ fileList: [] })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('empty-folder')).toBeInTheDocument()
+      })
+
+      it('should handle single file in fileList', () => {
+        // Arrange
+        const fileList = [createMockOnlineDriveFile()]
+        const props = createDefaultProps({ fileList })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('item-file-1')).toBeInTheDocument()
+      })
+
+      it('should handle large fileList', () => {
+        // Arrange
+        const fileList = createMockFileList(100)
+        const props = createDefaultProps({ fileList })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('item-file-1')).toBeInTheDocument()
+        expect(screen.getByTestId('item-file-100')).toBeInTheDocument()
+      })
+    })
+
+    describe('selectedFileIds prop', () => {
+      it('should mark selected files as selected', () => {
+        // Arrange
+        const fileList = createMockFileList(3)
+        const props = createDefaultProps({
+          fileList,
+          selectedFileIds: ['file-1', 'file-3'],
+        })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('item-file-1')).toHaveAttribute('data-selected', 'true')
+        expect(screen.getByTestId('item-file-2')).toHaveAttribute('data-selected', 'false')
+        expect(screen.getByTestId('item-file-3')).toHaveAttribute('data-selected', 'true')
+      })
+
+      it('should handle empty selectedFileIds', () => {
+        // Arrange
+        const fileList = createMockFileList(3)
+        const props = createDefaultProps({
+          fileList,
+          selectedFileIds: [],
+        })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        fileList.forEach((file) => {
+          expect(screen.getByTestId(`item-${file.id}`)).toHaveAttribute('data-selected', 'false')
+        })
+      })
+
+      it('should handle all files selected', () => {
+        // Arrange
+        const fileList = createMockFileList(3)
+        const props = createDefaultProps({
+          fileList,
+          selectedFileIds: ['file-1', 'file-2', 'file-3'],
+        })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        fileList.forEach((file) => {
+          expect(screen.getByTestId(`item-${file.id}`)).toHaveAttribute('data-selected', 'true')
+        })
+      })
+    })
+
+    describe('keywords prop', () => {
+      it('should show EmptySearchResult when keywords exist but no results', () => {
+        // Arrange
+        const props = createDefaultProps({
+          fileList: [],
+          keywords: 'search-term',
+        })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('empty-search-result')).toBeInTheDocument()
+      })
+
+      it('should show EmptyFolder when keywords is empty and no files', () => {
+        // Arrange
+        const props = createDefaultProps({
+          fileList: [],
+          keywords: '',
+        })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('empty-folder')).toBeInTheDocument()
+      })
+    })
+
+    describe('isLoading prop', () => {
+      it.each([
+        { isLoading: true, fileList: [], keywords: '', expected: 'isAllLoading' },
+        { isLoading: true, fileList: createMockFileList(2), keywords: '', expected: 'isPartialLoading' },
+        { isLoading: false, fileList: [], keywords: '', expected: 'isEmpty' },
+        { isLoading: false, fileList: createMockFileList(2), keywords: '', expected: 'hasFiles' },
+      ])('should render correctly when isLoading=$isLoading with fileList.length=$fileList.length', ({ isLoading, fileList, expected }) => {
+        // Arrange
+        const props = createDefaultProps({ isLoading, fileList })
+
+        // Act
+        const { container } = render(<List {...props} />)
+
+        // Assert
+        switch (expected) {
+          case 'isAllLoading':
+            expect(screen.getByTestId('loading')).toBeInTheDocument()
+            break
+          case 'isPartialLoading':
+            expect(container.querySelector('.animation-spin')).toBeInTheDocument()
+            break
+          case 'isEmpty':
+            expect(screen.getByTestId('empty-folder')).toBeInTheDocument()
+            break
+          case 'hasFiles':
+            expect(screen.getByTestId('item-file-1')).toBeInTheDocument()
+            break
+        }
+      })
+    })
+
+    describe('supportBatchUpload prop', () => {
+      it('should pass supportBatchUpload true to Item components', () => {
+        // Arrange
+        const fileList = createMockFileList(2)
+        const props = createDefaultProps({
+          fileList,
+          supportBatchUpload: true,
+        })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('item-file-1')).toHaveAttribute('data-multiple-choice', 'true')
+      })
+
+      it('should pass supportBatchUpload false to Item components', () => {
+        // Arrange
+        const fileList = createMockFileList(2)
+        const props = createDefaultProps({
+          fileList,
+          supportBatchUpload: false,
+        })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('item-file-1')).toHaveAttribute('data-multiple-choice', 'false')
+      })
+    })
+  })
+
+  // ==========================================
+  // User Interactions and Event Handlers
+  // ==========================================
+  describe('User Interactions', () => {
+    describe('File Selection', () => {
+      it('should call handleSelectFile when selecting a file', () => {
+        // Arrange
+        const handleSelectFile = jest.fn()
+        const fileList = createMockFileList(2)
+        const props = createDefaultProps({
+          fileList,
+          handleSelectFile,
+        })
+        render(<List {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('item-select-file-1'))
+
+        // Assert
+        expect(handleSelectFile).toHaveBeenCalledWith(fileList[0])
+      })
+
+      it('should call handleSelectFile with correct file data', () => {
+        // Arrange
+        const handleSelectFile = jest.fn()
+        const fileList = [
+          createMockOnlineDriveFile({ id: 'unique-id', name: 'special-file.pdf', size: 5000 }),
+        ]
+        const props = createDefaultProps({
+          fileList,
+          handleSelectFile,
+        })
+        render(<List {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('item-select-unique-id'))
+
+        // Assert
+        expect(handleSelectFile).toHaveBeenCalledWith(
+          expect.objectContaining({
+            id: 'unique-id',
+            name: 'special-file.pdf',
+            size: 5000,
+          }),
+        )
+      })
+    })
+
+    describe('Folder Navigation', () => {
+      it('should call handleOpenFolder when opening a folder', () => {
+        // Arrange
+        const handleOpenFolder = jest.fn()
+        const fileList = [
+          createMockOnlineDriveFile({ id: 'folder-1', name: 'Documents', type: OnlineDriveFileType.folder }),
+        ]
+        const props = createDefaultProps({
+          fileList,
+          handleOpenFolder,
+        })
+        render(<List {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('item-open-folder-1'))
+
+        // Assert
+        expect(handleOpenFolder).toHaveBeenCalledWith(fileList[0])
+      })
+    })
+
+    describe('Reset Keywords', () => {
+      it('should call handleResetKeywords when reset button is clicked', () => {
+        // Arrange
+        const handleResetKeywords = jest.fn()
+        const props = createDefaultProps({
+          fileList: [],
+          keywords: 'search-term',
+          handleResetKeywords,
+        })
+        render(<List {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('reset-keywords-btn'))
+
+        // Assert
+        expect(handleResetKeywords).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+
+  // ==========================================
+  // Side Effects and Cleanup Tests (IntersectionObserver)
+  // ==========================================
+  describe('Side Effects and Cleanup', () => {
+    describe('IntersectionObserver Setup', () => {
+      it('should create IntersectionObserver on mount', () => {
+        // Arrange
+        const fileList = createMockFileList(2)
+        const props = createDefaultProps({ fileList })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        expect(mockIntersectionObserverInstance?.observe).toHaveBeenCalled()
+      })
+
+      it('should create IntersectionObserver with correct rootMargin', () => {
+        // Arrange
+        const fileList = createMockFileList(2)
+        const props = createDefaultProps({ fileList })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert - Callback should be set
+        expect(mockIntersectionObserverCallback).toBeDefined()
+      })
+
+      it('should observe the anchor element', () => {
+        // Arrange
+        const fileList = createMockFileList(2)
+        const props = createDefaultProps({ fileList })
+
+        // Act
+        const { container } = render(<List {...props} />)
+
+        // Assert
+        expect(mockIntersectionObserverInstance?.observe).toHaveBeenCalled()
+        const anchorDiv = container.querySelector('.h-0')
+        expect(anchorDiv).toBeInTheDocument()
+      })
+    })
+
+    describe('IntersectionObserver Callback', () => {
+      it('should call setNextPageParameters when intersecting and truncated', async () => {
+        // Arrange
+        mockIsTruncated.current = true
+        mockCurrentNextPageParametersRef.current = { cursor: 'next-cursor' }
+        const fileList = createMockFileList(2)
+        const props = createDefaultProps({
+          fileList,
+          isLoading: false,
+        })
+        render(<List {...props} />)
+
+        // Act
+        triggerIntersection(true)
+
+        // Assert
+        await waitFor(() => {
+          expect(mockSetNextPageParameters).toHaveBeenCalledWith({ cursor: 'next-cursor' })
+        })
+      })
+
+      it('should not call setNextPageParameters when not intersecting', () => {
+        // Arrange
+        mockIsTruncated.current = true
+        mockCurrentNextPageParametersRef.current = { cursor: 'next-cursor' }
+        const fileList = createMockFileList(2)
+        const props = createDefaultProps({
+          fileList,
+          isLoading: false,
+        })
+        render(<List {...props} />)
+
+        // Act
+        triggerIntersection(false)
+
+        // Assert
+        expect(mockSetNextPageParameters).not.toHaveBeenCalled()
+      })
+
+      it('should not call setNextPageParameters when not truncated', () => {
+        // Arrange
+        mockIsTruncated.current = false
+        const fileList = createMockFileList(2)
+        const props = createDefaultProps({
+          fileList,
+          isLoading: false,
+        })
+        render(<List {...props} />)
+
+        // Act
+        triggerIntersection(true)
+
+        // Assert
+        expect(mockSetNextPageParameters).not.toHaveBeenCalled()
+      })
+
+      it('should not call setNextPageParameters when loading', () => {
+        // Arrange
+        mockIsTruncated.current = true
+        mockCurrentNextPageParametersRef.current = { cursor: 'next-cursor' }
+        const fileList = createMockFileList(2)
+        const props = createDefaultProps({
+          fileList,
+          isLoading: true,
+        })
+        render(<List {...props} />)
+
+        // Act
+        triggerIntersection(true)
+
+        // Assert
+        expect(mockSetNextPageParameters).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('IntersectionObserver Cleanup', () => {
+      it('should disconnect IntersectionObserver on unmount', () => {
+        // Arrange
+        const fileList = createMockFileList(2)
+        const props = createDefaultProps({ fileList })
+        const { unmount } = render(<List {...props} />)
+
+        // Act
+        unmount()
+
+        // Assert
+        expect(mockIntersectionObserverInstance?.disconnect).toHaveBeenCalled()
+      })
+
+      it('should cleanup previous observer when dependencies change', () => {
+        // Arrange
+        const fileList = createMockFileList(2)
+        const props = createDefaultProps({
+          fileList,
+          isLoading: false,
+        })
+        const { rerender } = render(<List {...props} />)
+
+        // Act - Trigger re-render with changed isLoading
+        rerender(<List {...props} isLoading={true} />)
+
+        // Assert - Previous observer should be disconnected
+        expect(mockIntersectionObserverInstance?.disconnect).toHaveBeenCalled()
+      })
+    })
+  })
+
+  // ==========================================
+  // Component Memoization Tests
+  // ==========================================
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      // Arrange & Assert
+      // List component should have $$typeof symbol indicating memo wrapper
+      expect(List).toHaveProperty('$$typeof', Symbol.for('react.memo'))
+    })
+
+    it('should not re-render when props are equal', () => {
+      // Arrange
+      const fileList = createMockFileList(2)
+      const props = createDefaultProps({ fileList })
+      const renderSpy = jest.fn()
+
+      // Create a wrapper component to track renders
+      const TestWrapper = ({ testProps }: { testProps: ListProps }) => {
+        renderSpy()
+        return <List {...testProps} />
+      }
+
+      const { rerender } = render(<TestWrapper testProps={props} />)
+      const initialRenderCount = renderSpy.mock.calls.length
+
+      // Act - Rerender with same props
+      rerender(<TestWrapper testProps={props} />)
+
+      // Assert - Should have rendered again (wrapper re-renders, but memo prevents List re-render)
+      expect(renderSpy.mock.calls.length).toBe(initialRenderCount + 1)
+    })
+
+    it('should re-render when fileList changes', () => {
+      // Arrange
+      const fileList1 = createMockFileList(2)
+      const fileList2 = createMockFileList(3)
+      const props1 = createDefaultProps({ fileList: fileList1 })
+      const props2 = createDefaultProps({ fileList: fileList2 })
+
+      const { rerender } = render(<List {...props1} />)
+
+      // Assert initial state
+      expect(screen.getByTestId('item-file-1')).toBeInTheDocument()
+      expect(screen.getByTestId('item-file-2')).toBeInTheDocument()
+      expect(screen.queryByTestId('item-file-3')).not.toBeInTheDocument()
+
+      // Act - Rerender with new fileList
+      rerender(<List {...props2} />)
+
+      // Assert - Should show new file
+      expect(screen.getByTestId('item-file-3')).toBeInTheDocument()
+    })
+
+    it('should re-render when selectedFileIds changes', () => {
+      // Arrange
+      const fileList = createMockFileList(2)
+      const props1 = createDefaultProps({ fileList, selectedFileIds: [] })
+      const props2 = createDefaultProps({ fileList, selectedFileIds: ['file-1'] })
+
+      const { rerender } = render(<List {...props1} />)
+
+      // Assert initial state
+      expect(screen.getByTestId('item-file-1')).toHaveAttribute('data-selected', 'false')
+
+      // Act
+      rerender(<List {...props2} />)
+
+      // Assert
+      expect(screen.getByTestId('item-file-1')).toHaveAttribute('data-selected', 'true')
+    })
+
+    it('should re-render when isLoading changes', () => {
+      // Arrange
+      const fileList = createMockFileList(2)
+      const props1 = createDefaultProps({ fileList, isLoading: false })
+      const props2 = createDefaultProps({ fileList, isLoading: true })
+
+      const { rerender, container } = render(<List {...props1} />)
+
+      // Assert initial state - no loading spinner
+      expect(container.querySelector('.animation-spin')).not.toBeInTheDocument()
+
+      // Act
+      rerender(<List {...props2} />)
+
+      // Assert - loading spinner should appear
+      expect(container.querySelector('.animation-spin')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Edge Cases and Error Handling
+  // ==========================================
+  describe('Edge Cases and Error Handling', () => {
+    describe('Empty/Null Values', () => {
+      it('should handle empty fileList array', () => {
+        // Arrange
+        const props = createDefaultProps({ fileList: [] })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('empty-folder')).toBeInTheDocument()
+      })
+
+      it('should handle empty selectedFileIds array', () => {
+        // Arrange
+        const fileList = createMockFileList(2)
+        const props = createDefaultProps({
+          fileList,
+          selectedFileIds: [],
+        })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('item-file-1')).toHaveAttribute('data-selected', 'false')
+      })
+
+      it('should handle empty keywords string', () => {
+        // Arrange
+        const props = createDefaultProps({
+          fileList: [],
+          keywords: '',
+        })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert - Shows empty folder, not empty search result
+        expect(screen.getByTestId('empty-folder')).toBeInTheDocument()
+        expect(screen.queryByTestId('empty-search-result')).not.toBeInTheDocument()
+      })
+    })
+
+    describe('Boundary Conditions', () => {
+      it('should handle very long file names', () => {
+        // Arrange
+        const longName = `${'a'.repeat(500)}.txt`
+        const fileList = [createMockOnlineDriveFile({ name: longName })]
+        const props = createDefaultProps({ fileList })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('item-name-file-1')).toHaveTextContent(longName)
+      })
+
+      it('should handle special characters in file names', () => {
+        // Arrange
+        const specialName = 'test<script>alert("xss")</script>.txt'
+        const fileList = [createMockOnlineDriveFile({ name: specialName })]
+        const props = createDefaultProps({ fileList })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('item-name-file-1')).toHaveTextContent(specialName)
+      })
+
+      it('should handle unicode characters in file names', () => {
+        // Arrange
+        const unicodeName = '文件_📁_ファイル.txt'
+        const fileList = [createMockOnlineDriveFile({ name: unicodeName })]
+        const props = createDefaultProps({ fileList })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('item-name-file-1')).toHaveTextContent(unicodeName)
+      })
+
+      it('should handle file with zero size', () => {
+        // Arrange
+        const fileList = [createMockOnlineDriveFile({ size: 0 })]
+        const props = createDefaultProps({ fileList })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('item-file-1')).toBeInTheDocument()
+      })
+
+      it('should handle file with undefined size', () => {
+        // Arrange
+        const fileList = [createMockOnlineDriveFile({ size: undefined })]
+        const props = createDefaultProps({ fileList })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('item-file-1')).toBeInTheDocument()
+      })
+    })
+
+    describe('Different File Types', () => {
+      it.each([
+        { type: OnlineDriveFileType.file, name: 'document.pdf' },
+        { type: OnlineDriveFileType.folder, name: 'Documents' },
+        { type: OnlineDriveFileType.bucket, name: 'my-bucket' },
+      ])('should render $type type correctly', ({ type, name }) => {
+        // Arrange
+        const fileList = [createMockOnlineDriveFile({ id: `item-${type}`, type, name })]
+        const props = createDefaultProps({ fileList })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        expect(screen.getByTestId(`item-item-${type}`)).toBeInTheDocument()
+        expect(screen.getByTestId(`item-name-item-${type}`)).toHaveTextContent(name)
+      })
+
+      it('should handle mixed file types in list', () => {
+        // Arrange
+        const fileList = [
+          createMockOnlineDriveFile({ id: 'file-1', type: OnlineDriveFileType.file, name: 'doc.pdf' }),
+          createMockOnlineDriveFile({ id: 'folder-1', type: OnlineDriveFileType.folder, name: 'Documents' }),
+          createMockOnlineDriveFile({ id: 'bucket-1', type: OnlineDriveFileType.bucket, name: 'my-bucket' }),
+        ]
+        const props = createDefaultProps({ fileList })
+
+        // Act
+        render(<List {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('item-file-1')).toBeInTheDocument()
+        expect(screen.getByTestId('item-folder-1')).toBeInTheDocument()
+        expect(screen.getByTestId('item-bucket-1')).toBeInTheDocument()
+      })
+    })
+
+    describe('Loading States Transitions', () => {
+      it('should transition from loading to empty folder', () => {
+        // Arrange
+        const props1 = createDefaultProps({ isLoading: true, fileList: [] })
+        const props2 = createDefaultProps({ isLoading: false, fileList: [] })
+
+        const { rerender } = render(<List {...props1} />)
+
+        // Assert initial loading state
+        expect(screen.getByTestId('loading')).toBeInTheDocument()
+
+        // Act
+        rerender(<List {...props2} />)
+
+        // Assert
+        expect(screen.queryByTestId('loading')).not.toBeInTheDocument()
+        expect(screen.getByTestId('empty-folder')).toBeInTheDocument()
+      })
+
+      it('should transition from loading to file list', () => {
+        // Arrange
+        const fileList = createMockFileList(2)
+        const props1 = createDefaultProps({ isLoading: true, fileList: [] })
+        const props2 = createDefaultProps({ isLoading: false, fileList })
+
+        const { rerender } = render(<List {...props1} />)
+
+        // Assert initial loading state
+        expect(screen.getByTestId('loading')).toBeInTheDocument()
+
+        // Act
+        rerender(<List {...props2} />)
+
+        // Assert
+        expect(screen.queryByTestId('loading')).not.toBeInTheDocument()
+        expect(screen.getByTestId('item-file-1')).toBeInTheDocument()
+      })
+
+      it('should transition from partial loading to loaded', () => {
+        // Arrange
+        const fileList = createMockFileList(2)
+        const props1 = createDefaultProps({ isLoading: true, fileList })
+        const props2 = createDefaultProps({ isLoading: false, fileList })
+
+        const { rerender, container } = render(<List {...props1} />)
+
+        // Assert initial partial loading state
+        expect(container.querySelector('.animation-spin')).toBeInTheDocument()
+
+        // Act
+        rerender(<List {...props2} />)
+
+        // Assert
+        expect(container.querySelector('.animation-spin')).not.toBeInTheDocument()
+      })
+    })
+
+    describe('Store State Edge Cases', () => {
+      it('should handle store state with empty next page parameters', () => {
+        // Arrange
+        mockIsTruncated.current = true
+        mockCurrentNextPageParametersRef.current = {}
+        const fileList = createMockFileList(2)
+        const props = createDefaultProps({
+          fileList,
+          isLoading: false,
+        })
+        render(<List {...props} />)
+
+        // Act
+        triggerIntersection(true)
+
+        // Assert
+        expect(mockSetNextPageParameters).toHaveBeenCalledWith({})
+      })
+
+      it('should handle store state with complex next page parameters', () => {
+        // Arrange
+        const complexParams = {
+          cursor: 'abc123',
+          page: 2,
+          metadata: { nested: { value: true } },
+        }
+        mockIsTruncated.current = true
+        mockCurrentNextPageParametersRef.current = complexParams
+        const fileList = createMockFileList(2)
+        const props = createDefaultProps({
+          fileList,
+          isLoading: false,
+        })
+        render(<List {...props} />)
+
+        // Act
+        triggerIntersection(true)
+
+        // Assert
+        expect(mockSetNextPageParameters).toHaveBeenCalledWith(complexParams)
+      })
+    })
+  })
+
+  // ==========================================
+  // All Prop Variations Tests
+  // ==========================================
+  describe('Prop Variations', () => {
+    it.each([
+      { supportBatchUpload: true },
+      { supportBatchUpload: false },
+    ])('should render correctly with supportBatchUpload=$supportBatchUpload', ({ supportBatchUpload }) => {
+      // Arrange
+      const fileList = createMockFileList(2)
+      const props = createDefaultProps({ fileList, supportBatchUpload })
+
+      // Act
+      render(<List {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('item-file-1')).toHaveAttribute(
+        'data-multiple-choice',
+        String(supportBatchUpload),
+      )
+    })
+
+    it.each([
+      { isLoading: true, fileCount: 0, keywords: '', expectedState: 'all-loading' },
+      { isLoading: true, fileCount: 5, keywords: '', expectedState: 'partial-loading' },
+      { isLoading: false, fileCount: 0, keywords: '', expectedState: 'empty-folder' },
+      { isLoading: false, fileCount: 0, keywords: 'search', expectedState: 'empty-search' },
+      { isLoading: false, fileCount: 5, keywords: '', expectedState: 'file-list' },
+    ])('should render $expectedState when isLoading=$isLoading, fileCount=$fileCount, keywords=$keywords',
+      ({ isLoading, fileCount, keywords, expectedState }) => {
+        // Arrange
+        const fileList = createMockFileList(fileCount)
+        const props = createDefaultProps({ fileList, isLoading, keywords })
+
+        // Act
+        const { container } = render(<List {...props} />)
+
+        // Assert
+        switch (expectedState) {
+          case 'all-loading':
+            expect(screen.getByTestId('loading')).toBeInTheDocument()
+            break
+          case 'partial-loading':
+            expect(container.querySelector('.animation-spin')).toBeInTheDocument()
+            break
+          case 'empty-folder':
+            expect(screen.getByTestId('empty-folder')).toBeInTheDocument()
+            break
+          case 'empty-search':
+            expect(screen.getByTestId('empty-search-result')).toBeInTheDocument()
+            break
+          case 'file-list':
+            expect(screen.getByTestId('item-file-1')).toBeInTheDocument()
+            break
+        }
+      })
+
+    it.each([
+      { selectedCount: 0, expectedSelected: [] },
+      { selectedCount: 1, expectedSelected: ['file-1'] },
+      { selectedCount: 3, expectedSelected: ['file-1', 'file-2', 'file-3'] },
+    ])('should handle $selectedCount selected files', ({ expectedSelected }) => {
+      // Arrange
+      const fileList = createMockFileList(3)
+      const props = createDefaultProps({
+        fileList,
+        selectedFileIds: expectedSelected,
+      })
+
+      // Act
+      render(<List {...props} />)
+
+      // Assert
+      fileList.forEach((file) => {
+        const isSelected = expectedSelected.includes(file.id)
+        expect(screen.getByTestId(`item-${file.id}`)).toHaveAttribute('data-selected', String(isSelected))
+      })
+    })
+  })
+
+  // ==========================================
+  // Accessibility Tests
+  // ==========================================
+  describe('Accessibility', () => {
+    it('should have proper container structure', () => {
+      // Arrange
+      const fileList = createMockFileList(2)
+      const props = createDefaultProps({ fileList })
+
+      // Act
+      const { container } = render(<List {...props} />)
+
+      // Assert - Container should be scrollable
+      const scrollContainer = container.querySelector('.overflow-y-auto')
+      expect(scrollContainer).toBeInTheDocument()
+    })
+
+    it('should allow interaction with reset keywords button in empty search state', () => {
+      // Arrange
+      const handleResetKeywords = jest.fn()
+      const props = createDefaultProps({
+        fileList: [],
+        keywords: 'search-term',
+        handleResetKeywords,
+      })
+
+      // Act
+      render(<List {...props} />)
+      const resetButton = screen.getByTestId('reset-keywords-btn')
+
+      // Assert
+      expect(resetButton).toBeInTheDocument()
+      fireEvent.click(resetButton)
+      expect(handleResetKeywords).toHaveBeenCalled()
+    })
+  })
+})
+
+// ==========================================
+// EmptyFolder Component Tests (using actual component)
+// ==========================================
+describe('EmptyFolder', () => {
+  // Get real component for testing
+  const ActualEmptyFolder = jest.requireActual('./empty-folder').default
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<ActualEmptyFolder />)
+      expect(document.body).toBeInTheDocument()
+    })
+
+    it('should render empty folder message', () => {
+      render(<ActualEmptyFolder />)
+      expect(screen.getByText(/datasetPipeline\.onlineDrive\.emptyFolder/)).toBeInTheDocument()
+    })
+
+    it('should render with correct container classes', () => {
+      const { container } = render(<ActualEmptyFolder />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('flex', 'size-full', 'items-center', 'justify-center')
+    })
+
+    it('should render text with correct styling classes', () => {
+      render(<ActualEmptyFolder />)
+      const textElement = screen.getByText(/datasetPipeline\.onlineDrive\.emptyFolder/)
+      expect(textElement).toHaveClass('system-xs-regular', 'text-text-tertiary')
+    })
+  })
+
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      expect(ActualEmptyFolder).toHaveProperty('$$typeof', Symbol.for('react.memo'))
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have readable text content', () => {
+      render(<ActualEmptyFolder />)
+      const textElement = screen.getByText(/datasetPipeline\.onlineDrive\.emptyFolder/)
+      expect(textElement.tagName).toBe('SPAN')
+    })
+  })
+})
+
+// ==========================================
+// EmptySearchResult Component Tests (using actual component)
+// ==========================================
+describe('EmptySearchResult', () => {
+  // Get real component for testing
+  const ActualEmptySearchResult = jest.requireActual('./empty-search-result').default
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const onResetKeywords = jest.fn()
+      render(<ActualEmptySearchResult onResetKeywords={onResetKeywords} />)
+      expect(document.body).toBeInTheDocument()
+    })
+
+    it('should render empty search result message', () => {
+      const onResetKeywords = jest.fn()
+      render(<ActualEmptySearchResult onResetKeywords={onResetKeywords} />)
+      expect(screen.getByText(/datasetPipeline\.onlineDrive\.emptySearchResult/)).toBeInTheDocument()
+    })
+
+    it('should render reset keywords button', () => {
+      const onResetKeywords = jest.fn()
+      render(<ActualEmptySearchResult onResetKeywords={onResetKeywords} />)
+      expect(screen.getByRole('button')).toBeInTheDocument()
+      expect(screen.getByText(/datasetPipeline\.onlineDrive\.resetKeywords/)).toBeInTheDocument()
+    })
+
+    it('should render search icon', () => {
+      const onResetKeywords = jest.fn()
+      const { container } = render(<ActualEmptySearchResult onResetKeywords={onResetKeywords} />)
+      const svgElement = container.querySelector('svg')
+      expect(svgElement).toBeInTheDocument()
+    })
+
+    it('should render with correct container classes', () => {
+      const onResetKeywords = jest.fn()
+      const { container } = render(<ActualEmptySearchResult onResetKeywords={onResetKeywords} />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('flex', 'size-full', 'flex-col', 'items-center', 'justify-center', 'gap-y-2')
+    })
+  })
+
+  describe('Props', () => {
+    describe('onResetKeywords prop', () => {
+      it('should call onResetKeywords when button is clicked', () => {
+        const onResetKeywords = jest.fn()
+        render(<ActualEmptySearchResult onResetKeywords={onResetKeywords} />)
+        fireEvent.click(screen.getByRole('button'))
+        expect(onResetKeywords).toHaveBeenCalledTimes(1)
+      })
+
+      it('should call onResetKeywords on each click', () => {
+        const onResetKeywords = jest.fn()
+        render(<ActualEmptySearchResult onResetKeywords={onResetKeywords} />)
+        const button = screen.getByRole('button')
+        fireEvent.click(button)
+        fireEvent.click(button)
+        fireEvent.click(button)
+        expect(onResetKeywords).toHaveBeenCalledTimes(3)
+      })
+    })
+  })
+
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      expect(ActualEmptySearchResult).toHaveProperty('$$typeof', Symbol.for('react.memo'))
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have accessible button', () => {
+      const onResetKeywords = jest.fn()
+      render(<ActualEmptySearchResult onResetKeywords={onResetKeywords} />)
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should have readable text content', () => {
+      const onResetKeywords = jest.fn()
+      render(<ActualEmptySearchResult onResetKeywords={onResetKeywords} />)
+      expect(screen.getByText(/datasetPipeline\.onlineDrive\.emptySearchResult/)).toBeInTheDocument()
+    })
+  })
+})
+
+// ==========================================
+// FileIcon Component Tests (using actual component)
+// ==========================================
+describe('FileIcon', () => {
+  // Get real component for testing
+  const ActualFileIcon = jest.requireActual('./file-icon').default
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(
+        <ActualFileIcon type={OnlineDriveFileType.file} fileName="test.txt" />,
+      )
+      expect(container).toBeInTheDocument()
+    })
+
+    it('should render bucket icon for bucket type', () => {
+      const { container } = render(
+        <ActualFileIcon type={OnlineDriveFileType.bucket} fileName="my-bucket" />,
+      )
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should render folder icon for folder type', () => {
+      const { container } = render(
+        <ActualFileIcon type={OnlineDriveFileType.folder} fileName="Documents" />,
+      )
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should render file type icon for file type', () => {
+      const { container } = render(
+        <ActualFileIcon type={OnlineDriveFileType.file} fileName="document.pdf" />,
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    describe('type prop', () => {
+      it.each([
+        { type: OnlineDriveFileType.bucket, fileName: 'bucket-name' },
+        { type: OnlineDriveFileType.folder, fileName: 'folder-name' },
+        { type: OnlineDriveFileType.file, fileName: 'file.txt' },
+      ])('should render correctly for type=$type', ({ type, fileName }) => {
+        const { container } = render(
+          <ActualFileIcon type={type} fileName={fileName} />,
+        )
+        expect(container.firstChild).toBeInTheDocument()
+      })
+    })
+
+    describe('fileName prop', () => {
+      it.each([
+        { fileName: 'document.pdf' },
+        { fileName: 'image.png' },
+        { fileName: 'video.mp4' },
+        { fileName: 'audio.mp3' },
+        { fileName: 'code.json' },
+        { fileName: 'readme.md' },
+        { fileName: 'data.xlsx' },
+        { fileName: 'doc.docx' },
+        { fileName: 'slides.pptx' },
+        { fileName: 'unknown.xyz' },
+      ])('should render icon for $fileName', ({ fileName }) => {
+        const { container } = render(
+          <ActualFileIcon type={OnlineDriveFileType.file} fileName={fileName} />,
+        )
+        expect(container.firstChild).toBeInTheDocument()
+      })
+    })
+
+    describe('size prop', () => {
+      it.each(['sm', 'md', 'lg', 'xl'] as const)('should accept size=%s', (size) => {
+        const { container } = render(
+          <ActualFileIcon type={OnlineDriveFileType.file} fileName="test.pdf" size={size} />,
+        )
+        expect(container.firstChild).toBeInTheDocument()
+      })
+
+      it('should default to md size', () => {
+        const { container } = render(
+          <ActualFileIcon type={OnlineDriveFileType.file} fileName="test.pdf" />,
+        )
+        expect(container.firstChild).toBeInTheDocument()
+      })
+    })
+
+    describe('className prop', () => {
+      it('should apply custom className to bucket icon', () => {
+        const { container } = render(
+          <ActualFileIcon type={OnlineDriveFileType.bucket} fileName="bucket" className="custom-class" />,
+        )
+        const svg = container.querySelector('svg')
+        expect(svg).toHaveClass('custom-class')
+      })
+
+      it('should apply className to folder icon', () => {
+        const { container } = render(
+          <ActualFileIcon type={OnlineDriveFileType.folder} fileName="folder" className="folder-custom" />,
+        )
+        const svg = container.querySelector('svg')
+        expect(svg).toHaveClass('folder-custom')
+      })
+    })
+  })
+
+  describe('Icon Type Determination', () => {
+    it('should render bucket icon regardless of fileName', () => {
+      const { container } = render(
+        <ActualFileIcon type={OnlineDriveFileType.bucket} fileName="file.pdf" />,
+      )
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should render folder icon regardless of fileName', () => {
+      const { container } = render(
+        <ActualFileIcon type={OnlineDriveFileType.folder} fileName="document.pdf" />,
+      )
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should determine file type based on fileName extension', () => {
+      const { container } = render(
+        <ActualFileIcon type={OnlineDriveFileType.file} fileName="image.gif" />,
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      expect(ActualFileIcon).toHaveProperty('$$typeof', Symbol.for('react.memo'))
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty fileName', () => {
+      const { container } = render(
+        <ActualFileIcon type={OnlineDriveFileType.file} fileName="" />,
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should handle fileName without extension', () => {
+      const { container } = render(
+        <ActualFileIcon type={OnlineDriveFileType.file} fileName="README" />,
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should handle special characters in fileName', () => {
+      const { container } = render(
+        <ActualFileIcon type={OnlineDriveFileType.file} fileName="文件 (1).pdf" />,
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should handle very long fileName', () => {
+      const longFileName = `${'a'.repeat(500)}.pdf`
+      const { container } = render(
+        <ActualFileIcon type={OnlineDriveFileType.file} fileName={longFileName} />,
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe('Styling', () => {
+    it('should apply default size class to bucket icon', () => {
+      const { container } = render(
+        <ActualFileIcon type={OnlineDriveFileType.bucket} fileName="bucket" />,
+      )
+      const svg = container.querySelector('svg')
+      expect(svg).toHaveClass('size-[18px]')
+    })
+
+    it('should apply default size class to folder icon', () => {
+      const { container } = render(
+        <ActualFileIcon type={OnlineDriveFileType.folder} fileName="folder" />,
+      )
+      const svg = container.querySelector('svg')
+      expect(svg).toHaveClass('size-[18px]')
+    })
+  })
+})
+
+// ==========================================
+// Item Component Tests (using actual component)
+// ==========================================
+describe('Item', () => {
+  // Get real component for testing
+  const ActualItem = jest.requireActual('./item').default
+
+  type ItemProps = {
+    file: OnlineDriveFile
+    isSelected: boolean
+    disabled?: boolean
+    isMultipleChoice?: boolean
+    onSelect: (file: OnlineDriveFile) => void
+    onOpen: (file: OnlineDriveFile) => void
+  }
+
+  // Reuse createMockOnlineDriveFile from outer scope
+  const createItemProps = (overrides?: Partial<ItemProps>): ItemProps => ({
+    file: createMockOnlineDriveFile(),
+    isSelected: false,
+    onSelect: jest.fn(),
+    onOpen: jest.fn(),
+    ...overrides,
+  })
+
+  // Helper to find custom checkbox element (div-based implementation)
+  const findCheckbox = (container: HTMLElement) => container.querySelector('[data-testid^="checkbox-"]')
+  // Helper to find custom radio element (div-based implementation)
+  const findRadio = (container: HTMLElement) => container.querySelector('.rounded-full.size-4')
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const props = createItemProps()
+      render(<ActualItem {...props} />)
+      expect(screen.getByText('test-file.txt')).toBeInTheDocument()
+    })
+
+    it('should render file name', () => {
+      const props = createItemProps({
+        file: createMockOnlineDriveFile({ name: 'document.pdf' }),
+      })
+      render(<ActualItem {...props} />)
+      expect(screen.getByText('document.pdf')).toBeInTheDocument()
+    })
+
+    it('should render file size for file type', () => {
+      const props = createItemProps({
+        file: createMockOnlineDriveFile({ size: 1024, type: OnlineDriveFileType.file }),
+      })
+      render(<ActualItem {...props} />)
+      expect(screen.getByText('1.00 KB')).toBeInTheDocument()
+    })
+
+    it('should not render file size for folder type', () => {
+      const props = createItemProps({
+        file: createMockOnlineDriveFile({ size: 1024, type: OnlineDriveFileType.folder, name: 'Documents' }),
+      })
+      render(<ActualItem {...props} />)
+      expect(screen.queryByText('1 KB')).not.toBeInTheDocument()
+    })
+
+    it('should render checkbox in multiple choice mode for file', () => {
+      const props = createItemProps({
+        isMultipleChoice: true,
+        file: createMockOnlineDriveFile({ type: OnlineDriveFileType.file }),
+      })
+      const { container } = render(<ActualItem {...props} />)
+      expect(findCheckbox(container)).toBeInTheDocument()
+    })
+
+    it('should render radio in single choice mode for file', () => {
+      const props = createItemProps({
+        isMultipleChoice: false,
+        file: createMockOnlineDriveFile({ type: OnlineDriveFileType.file }),
+      })
+      const { container } = render(<ActualItem {...props} />)
+      expect(findRadio(container)).toBeInTheDocument()
+    })
+
+    it('should not render checkbox or radio for bucket type', () => {
+      const props = createItemProps({
+        file: createMockOnlineDriveFile({ type: OnlineDriveFileType.bucket, name: 'my-bucket' }),
+        isMultipleChoice: true,
+      })
+      const { container } = render(<ActualItem {...props} />)
+      expect(findCheckbox(container)).not.toBeInTheDocument()
+      expect(findRadio(container)).not.toBeInTheDocument()
+    })
+
+    it('should render with title attribute for file name', () => {
+      const props = createItemProps({
+        file: createMockOnlineDriveFile({ name: 'very-long-file-name.txt' }),
+      })
+      render(<ActualItem {...props} />)
+      expect(screen.getByTitle('very-long-file-name.txt')).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    describe('isSelected prop', () => {
+      it('should show checkbox as checked when isSelected is true', () => {
+        const props = createItemProps({ isSelected: true, isMultipleChoice: true })
+        const { container } = render(<ActualItem {...props} />)
+        const checkbox = findCheckbox(container)
+        // Checked checkbox shows check icon
+        expect(checkbox?.querySelector('[data-testid^="check-icon-"]')).toBeInTheDocument()
+      })
+
+      it('should show checkbox as unchecked when isSelected is false', () => {
+        const props = createItemProps({ isSelected: false, isMultipleChoice: true })
+        const { container } = render(<ActualItem {...props} />)
+        const checkbox = findCheckbox(container)
+        // Unchecked checkbox has no check icon
+        expect(checkbox?.querySelector('[data-testid^="check-icon-"]')).not.toBeInTheDocument()
+      })
+
+      it('should show radio as checked when isSelected is true', () => {
+        const props = createItemProps({ isSelected: true, isMultipleChoice: false })
+        const { container } = render(<ActualItem {...props} />)
+        const radio = findRadio(container)
+        // Checked radio has border-[5px] class
+        expect(radio).toHaveClass('border-[5px]')
+      })
+    })
+
+    describe('disabled prop', () => {
+      it('should apply opacity class when disabled', () => {
+        const props = createItemProps({ disabled: true })
+        const { container } = render(<ActualItem {...props} />)
+        expect(container.querySelector('.opacity-30')).toBeInTheDocument()
+      })
+
+      it('should apply disabled styles to checkbox when disabled', () => {
+        const props = createItemProps({ disabled: true, isMultipleChoice: true })
+        const { container } = render(<ActualItem {...props} />)
+        const checkbox = findCheckbox(container)
+        expect(checkbox).toHaveClass('cursor-not-allowed')
+      })
+
+      it('should apply disabled styles to radio when disabled', () => {
+        const props = createItemProps({ disabled: true, isMultipleChoice: false })
+        const { container } = render(<ActualItem {...props} />)
+        const radio = findRadio(container)
+        expect(radio).toHaveClass('border-components-radio-border-disabled')
+      })
+    })
+
+    describe('isMultipleChoice prop', () => {
+      it('should default to true', () => {
+        const props = createItemProps()
+        delete (props as Partial<ItemProps>).isMultipleChoice
+        const { container } = render(<ActualItem {...props} />)
+        expect(findCheckbox(container)).toBeInTheDocument()
+      })
+
+      it('should render checkbox when true', () => {
+        const props = createItemProps({ isMultipleChoice: true })
+        const { container } = render(<ActualItem {...props} />)
+        expect(findCheckbox(container)).toBeInTheDocument()
+        expect(findRadio(container)).not.toBeInTheDocument()
+      })
+
+      it('should render radio when false', () => {
+        const props = createItemProps({ isMultipleChoice: false })
+        const { container } = render(<ActualItem {...props} />)
+        expect(findRadio(container)).toBeInTheDocument()
+        expect(findCheckbox(container)).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('User Interactions', () => {
+    describe('Click on Item', () => {
+      it('should call onSelect when clicking on file item', () => {
+        const onSelect = jest.fn()
+        const file = createMockOnlineDriveFile({ type: OnlineDriveFileType.file })
+        const props = createItemProps({ file, onSelect })
+        render(<ActualItem {...props} />)
+        fireEvent.click(screen.getByText('test-file.txt'))
+        expect(onSelect).toHaveBeenCalledWith(file)
+      })
+
+      it('should call onOpen when clicking on folder item', () => {
+        const onOpen = jest.fn()
+        const file = createMockOnlineDriveFile({ type: OnlineDriveFileType.folder, name: 'Documents' })
+        const props = createItemProps({ file, onOpen })
+        render(<ActualItem {...props} />)
+        fireEvent.click(screen.getByText('Documents'))
+        expect(onOpen).toHaveBeenCalledWith(file)
+      })
+
+      it('should call onOpen when clicking on bucket item', () => {
+        const onOpen = jest.fn()
+        const file = createMockOnlineDriveFile({ type: OnlineDriveFileType.bucket, name: 'my-bucket' })
+        const props = createItemProps({ file, onOpen })
+        render(<ActualItem {...props} />)
+        fireEvent.click(screen.getByText('my-bucket'))
+        expect(onOpen).toHaveBeenCalledWith(file)
+      })
+
+      it('should not call any handler when clicking disabled item', () => {
+        const onSelect = jest.fn()
+        const onOpen = jest.fn()
+        const props = createItemProps({ disabled: true, onSelect, onOpen })
+        render(<ActualItem {...props} />)
+        fireEvent.click(screen.getByText('test-file.txt'))
+        expect(onSelect).not.toHaveBeenCalled()
+        expect(onOpen).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('Click on Checkbox/Radio', () => {
+      it('should call onSelect when clicking checkbox', () => {
+        const onSelect = jest.fn()
+        const file = createMockOnlineDriveFile()
+        const props = createItemProps({ file, onSelect, isMultipleChoice: true })
+        const { container } = render(<ActualItem {...props} />)
+        const checkbox = findCheckbox(container)
+        fireEvent.click(checkbox!)
+        expect(onSelect).toHaveBeenCalledWith(file)
+      })
+
+      it('should call onSelect when clicking radio', () => {
+        const onSelect = jest.fn()
+        const file = createMockOnlineDriveFile()
+        const props = createItemProps({ file, onSelect, isMultipleChoice: false })
+        const { container } = render(<ActualItem {...props} />)
+        const radio = findRadio(container)
+        fireEvent.click(radio!)
+        expect(onSelect).toHaveBeenCalledWith(file)
+      })
+
+      it('should stop event propagation when clicking checkbox', () => {
+        const onSelect = jest.fn()
+        const file = createMockOnlineDriveFile()
+        const props = createItemProps({ file, onSelect, isMultipleChoice: true })
+        const { container } = render(<ActualItem {...props} />)
+        const checkbox = findCheckbox(container)
+        fireEvent.click(checkbox!)
+        expect(onSelect).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      expect(ActualItem).toHaveProperty('$$typeof', Symbol.for('react.memo'))
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty file name', () => {
+      const props = createItemProps({ file: createMockOnlineDriveFile({ name: '' }) })
+      render(<ActualItem {...props} />)
+      expect(document.body).toBeInTheDocument()
+    })
+
+    it('should handle very long file name', () => {
+      const longName = `${'a'.repeat(500)}.txt`
+      const props = createItemProps({ file: createMockOnlineDriveFile({ name: longName }) })
+      render(<ActualItem {...props} />)
+      expect(screen.getByText(longName)).toBeInTheDocument()
+    })
+
+    it('should handle special characters in file name', () => {
+      const specialName = '文件 <test> (1).pdf'
+      const props = createItemProps({ file: createMockOnlineDriveFile({ name: specialName }) })
+      render(<ActualItem {...props} />)
+      expect(screen.getByText(specialName)).toBeInTheDocument()
+    })
+
+    it('should handle zero file size', () => {
+      const props = createItemProps({ file: createMockOnlineDriveFile({ size: 0 }) })
+      render(<ActualItem {...props} />)
+      // formatFileSize returns 0 for size 0
+      expect(screen.getByText('0')).toBeInTheDocument()
+    })
+
+    it('should handle very large file size', () => {
+      const props = createItemProps({ file: createMockOnlineDriveFile({ size: 1024 * 1024 * 1024 * 5 }) })
+      render(<ActualItem {...props} />)
+      expect(screen.getByText('5.00 GB')).toBeInTheDocument()
+    })
+  })
+
+  describe('Styling', () => {
+    it('should have cursor-pointer class', () => {
+      const props = createItemProps()
+      const { container } = render(<ActualItem {...props} />)
+      expect(container.firstChild).toHaveClass('cursor-pointer')
+    })
+
+    it('should have hover class', () => {
+      const props = createItemProps()
+      const { container } = render(<ActualItem {...props} />)
+      expect(container.firstChild).toHaveClass('hover:bg-state-base-hover')
+    })
+
+    it('should truncate file name', () => {
+      const props = createItemProps()
+      render(<ActualItem {...props} />)
+      const nameElement = screen.getByText('test-file.txt')
+      expect(nameElement).toHaveClass('truncate')
+    })
+  })
+
+  describe('Prop Variations', () => {
+    it.each([
+      { isSelected: true, isMultipleChoice: true, disabled: false },
+      { isSelected: true, isMultipleChoice: false, disabled: false },
+      { isSelected: false, isMultipleChoice: true, disabled: false },
+      { isSelected: false, isMultipleChoice: false, disabled: false },
+      { isSelected: true, isMultipleChoice: true, disabled: true },
+      { isSelected: false, isMultipleChoice: false, disabled: true },
+    ])('should render with isSelected=$isSelected, isMultipleChoice=$isMultipleChoice, disabled=$disabled',
+      ({ isSelected, isMultipleChoice, disabled }) => {
+        const props = createItemProps({ isSelected, isMultipleChoice, disabled })
+        const { container } = render(<ActualItem {...props} />)
+        if (isMultipleChoice) {
+          const checkbox = findCheckbox(container)
+          expect(checkbox).toBeInTheDocument()
+          if (isSelected)
+            expect(checkbox?.querySelector('[data-testid^="check-icon-"]')).toBeInTheDocument()
+          if (disabled)
+            expect(checkbox).toHaveClass('cursor-not-allowed')
+        }
+        else {
+          const radio = findRadio(container)
+          expect(radio).toBeInTheDocument()
+          if (isSelected)
+            expect(radio).toHaveClass('border-[5px]')
+          if (disabled)
+            expect(radio).toHaveClass('border-components-radio-border-disabled')
+        }
+      })
+  })
+})
+
+// ==========================================
+// Utils Tests
+// ==========================================
+describe('utils', () => {
+  // Import actual utils functions
+  const { getFileExtension, getFileType } = jest.requireActual('./utils')
+  const { FileAppearanceTypeEnum } = jest.requireActual('@/app/components/base/file-uploader/types')
+
+  describe('getFileExtension', () => {
+    describe('Basic Functionality', () => {
+      it('should return file extension for normal file names', () => {
+        expect(getFileExtension('document.pdf')).toBe('pdf')
+        expect(getFileExtension('image.PNG')).toBe('png')
+        expect(getFileExtension('data.JSON')).toBe('json')
+      })
+
+      it('should return lowercase extension', () => {
+        expect(getFileExtension('FILE.PDF')).toBe('pdf')
+        expect(getFileExtension('IMAGE.JPEG')).toBe('jpeg')
+        expect(getFileExtension('Doc.TXT')).toBe('txt')
+      })
+
+      it('should handle multiple dots in filename', () => {
+        expect(getFileExtension('file.backup.tar.gz')).toBe('gz')
+        expect(getFileExtension('my.document.v2.pdf')).toBe('pdf')
+        expect(getFileExtension('test.spec.ts')).toBe('ts')
+      })
+    })
+
+    describe('Edge Cases', () => {
+      it('should return empty string for empty filename', () => {
+        expect(getFileExtension('')).toBe('')
+      })
+
+      it('should return empty string for filename without extension', () => {
+        expect(getFileExtension('README')).toBe('')
+        expect(getFileExtension('Makefile')).toBe('')
+      })
+
+      it('should return empty string for hidden files without extension', () => {
+        expect(getFileExtension('.gitignore')).toBe('')
+        expect(getFileExtension('.env')).toBe('')
+      })
+
+      it('should handle hidden files with extension', () => {
+        expect(getFileExtension('.eslintrc.json')).toBe('json')
+        expect(getFileExtension('.config.yaml')).toBe('yaml')
+      })
+
+      it('should handle files ending with dot', () => {
+        expect(getFileExtension('file.')).toBe('')
+      })
+
+      it('should handle special characters in filename', () => {
+        expect(getFileExtension('file-name_v1.0.pdf')).toBe('pdf')
+        expect(getFileExtension('data (1).xlsx')).toBe('xlsx')
+      })
+    })
+
+    describe('Boundary Conditions', () => {
+      it('should handle very long file extensions', () => {
+        expect(getFileExtension('file.verylongextension')).toBe('verylongextension')
+      })
+
+      it('should handle single character extensions', () => {
+        expect(getFileExtension('file.a')).toBe('a')
+        expect(getFileExtension('data.c')).toBe('c')
+      })
+
+      it('should handle numeric extensions', () => {
+        expect(getFileExtension('file.001')).toBe('001')
+        expect(getFileExtension('backup.123')).toBe('123')
+      })
+    })
+  })
+
+  describe('getFileType', () => {
+    describe('Image Files', () => {
+      it('should return gif type for gif files', () => {
+        expect(getFileType('animation.gif')).toBe(FileAppearanceTypeEnum.gif)
+        expect(getFileType('image.GIF')).toBe(FileAppearanceTypeEnum.gif)
+      })
+
+      it('should return image type for common image formats', () => {
+        expect(getFileType('photo.jpg')).toBe(FileAppearanceTypeEnum.image)
+        expect(getFileType('photo.jpeg')).toBe(FileAppearanceTypeEnum.image)
+        expect(getFileType('photo.png')).toBe(FileAppearanceTypeEnum.image)
+        expect(getFileType('photo.webp')).toBe(FileAppearanceTypeEnum.image)
+        expect(getFileType('photo.svg')).toBe(FileAppearanceTypeEnum.image)
+      })
+    })
+
+    describe('Video Files', () => {
+      it('should return video type for video formats', () => {
+        expect(getFileType('movie.mp4')).toBe(FileAppearanceTypeEnum.video)
+        expect(getFileType('clip.mov')).toBe(FileAppearanceTypeEnum.video)
+        expect(getFileType('video.webm')).toBe(FileAppearanceTypeEnum.video)
+        expect(getFileType('recording.mpeg')).toBe(FileAppearanceTypeEnum.video)
+      })
+    })
+
+    describe('Audio Files', () => {
+      it('should return audio type for audio formats', () => {
+        expect(getFileType('song.mp3')).toBe(FileAppearanceTypeEnum.audio)
+        expect(getFileType('podcast.wav')).toBe(FileAppearanceTypeEnum.audio)
+        expect(getFileType('audio.m4a')).toBe(FileAppearanceTypeEnum.audio)
+        expect(getFileType('music.mpga')).toBe(FileAppearanceTypeEnum.audio)
+      })
+    })
+
+    describe('Code Files', () => {
+      it('should return code type for code-related formats', () => {
+        expect(getFileType('page.html')).toBe(FileAppearanceTypeEnum.code)
+        expect(getFileType('page.htm')).toBe(FileAppearanceTypeEnum.code)
+        expect(getFileType('config.xml')).toBe(FileAppearanceTypeEnum.code)
+        expect(getFileType('data.json')).toBe(FileAppearanceTypeEnum.code)
+      })
+    })
+
+    describe('Document Files', () => {
+      it('should return pdf type for PDF files', () => {
+        expect(getFileType('document.pdf')).toBe(FileAppearanceTypeEnum.pdf)
+        expect(getFileType('report.PDF')).toBe(FileAppearanceTypeEnum.pdf)
+      })
+
+      it('should return markdown type for markdown files', () => {
+        expect(getFileType('README.md')).toBe(FileAppearanceTypeEnum.markdown)
+        expect(getFileType('doc.markdown')).toBe(FileAppearanceTypeEnum.markdown)
+        expect(getFileType('guide.mdx')).toBe(FileAppearanceTypeEnum.markdown)
+      })
+
+      it('should return excel type for spreadsheet files', () => {
+        expect(getFileType('data.xlsx')).toBe(FileAppearanceTypeEnum.excel)
+        expect(getFileType('data.xls')).toBe(FileAppearanceTypeEnum.excel)
+        expect(getFileType('data.csv')).toBe(FileAppearanceTypeEnum.excel)
+      })
+
+      it('should return word type for Word documents', () => {
+        expect(getFileType('document.docx')).toBe(FileAppearanceTypeEnum.word)
+        expect(getFileType('document.doc')).toBe(FileAppearanceTypeEnum.word)
+      })
+
+      it('should return ppt type for PowerPoint files', () => {
+        expect(getFileType('presentation.pptx')).toBe(FileAppearanceTypeEnum.ppt)
+        expect(getFileType('slides.ppt')).toBe(FileAppearanceTypeEnum.ppt)
+      })
+
+      it('should return document type for text files', () => {
+        expect(getFileType('notes.txt')).toBe(FileAppearanceTypeEnum.document)
+      })
+    })
+
+    describe('Unknown Files', () => {
+      it('should return custom type for unknown extensions', () => {
+        expect(getFileType('file.xyz')).toBe(FileAppearanceTypeEnum.custom)
+        expect(getFileType('data.unknown')).toBe(FileAppearanceTypeEnum.custom)
+        expect(getFileType('binary.bin')).toBe(FileAppearanceTypeEnum.custom)
+      })
+
+      it('should return custom type for files without extension', () => {
+        expect(getFileType('README')).toBe(FileAppearanceTypeEnum.custom)
+        expect(getFileType('Makefile')).toBe(FileAppearanceTypeEnum.custom)
+      })
+
+      it('should return custom type for empty filename', () => {
+        expect(getFileType('')).toBe(FileAppearanceTypeEnum.custom)
+      })
+    })
+
+    describe('Case Insensitivity', () => {
+      it('should handle uppercase extensions', () => {
+        expect(getFileType('file.PDF')).toBe(FileAppearanceTypeEnum.pdf)
+        expect(getFileType('file.DOCX')).toBe(FileAppearanceTypeEnum.word)
+        expect(getFileType('file.XLSX')).toBe(FileAppearanceTypeEnum.excel)
+      })
+
+      it('should handle mixed case extensions', () => {
+        expect(getFileType('file.Pdf')).toBe(FileAppearanceTypeEnum.pdf)
+        expect(getFileType('file.DocX')).toBe(FileAppearanceTypeEnum.word)
+      })
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx
index 85c385d586..8b87718615 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx
@@ -6,7 +6,7 @@ import FileIcon from './file-icon'
 import { formatFileSize } from '@/utils/format'
 import Tooltip from '@/app/components/base/tooltip'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { Placement } from '@floating-ui/react'
 
 type ItemProps = {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.spec.tsx
new file mode 100644
index 0000000000..125a2192aa
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.spec.tsx
@@ -0,0 +1,1895 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import OnlineDrive from './index'
+import Header from './header'
+import { convertOnlineDriveData, isBucketListInitiation, isFile } from './utils'
+import type { OnlineDriveFile } from '@/models/pipeline'
+import { DatasourceType, OnlineDriveFileType } from '@/models/pipeline'
+import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
+import type { OnlineDriveData } from '@/types/pipeline'
+
+// ==========================================
+// Mock Modules
+// ==========================================
+
+// Note: react-i18next uses global mock from web/__mocks__/react-i18next.ts
+
+// Mock useDocLink - context hook requires mocking
+const mockDocLink = jest.fn((path?: string) => `https://docs.example.com${path || ''}`)
+jest.mock('@/context/i18n', () => ({
+  useDocLink: () => mockDocLink,
+}))
+
+// Mock dataset-detail context - context provider requires mocking
+let mockPipelineId: string | undefined = 'pipeline-123'
+jest.mock('@/context/dataset-detail', () => ({
+  useDatasetDetailContextWithSelector: (selector: (s: any) => any) => selector({ dataset: { pipeline_id: mockPipelineId } }),
+}))
+
+// Mock modal context - context provider requires mocking
+const mockSetShowAccountSettingModal = jest.fn()
+jest.mock('@/context/modal-context', () => ({
+  useModalContextSelector: (selector: (s: any) => any) => selector({ setShowAccountSettingModal: mockSetShowAccountSettingModal }),
+}))
+
+// Mock ssePost - API service requires mocking
+const mockSsePost = jest.fn()
+jest.mock('@/service/base', () => ({
+  ssePost: (...args: any[]) => mockSsePost(...args),
+}))
+
+// Mock useGetDataSourceAuth - API service hook requires mocking
+const mockUseGetDataSourceAuth = jest.fn()
+jest.mock('@/service/use-datasource', () => ({
+  useGetDataSourceAuth: (params: any) => mockUseGetDataSourceAuth(params),
+}))
+
+// Mock Toast
+const mockToastNotify = jest.fn()
+jest.mock('@/app/components/base/toast', () => ({
+  __esModule: true,
+  default: {
+    notify: (...args: any[]) => mockToastNotify(...args),
+  },
+}))
+
+// Note: zustand/react/shallow useShallow is imported directly (simple utility function)
+
+// Mock store state
+const mockStoreState = {
+  nextPageParameters: {} as Record<string, any>,
+  breadcrumbs: [] as string[],
+  prefix: [] as string[],
+  keywords: '',
+  bucket: '',
+  selectedFileIds: [] as string[],
+  onlineDriveFileList: [] as OnlineDriveFile[],
+  currentCredentialId: '',
+  isTruncated: { current: false },
+  currentNextPageParametersRef: { current: {} },
+  setOnlineDriveFileList: jest.fn(),
+  setKeywords: jest.fn(),
+  setSelectedFileIds: jest.fn(),
+  setBreadcrumbs: jest.fn(),
+  setPrefix: jest.fn(),
+  setBucket: jest.fn(),
+  setHasBucket: jest.fn(),
+}
+
+const mockGetState = jest.fn(() => mockStoreState)
+const mockDataSourceStore = { getState: mockGetState }
+
+jest.mock('../store', () => ({
+  useDataSourceStoreWithSelector: (selector: (s: any) => any) => selector(mockStoreState),
+  useDataSourceStore: () => mockDataSourceStore,
+}))
+
+// Mock Header component
+jest.mock('../base/header', () => {
+  const MockHeader = (props: any) => (
+    <div data-testid="header">
+      <span data-testid="header-doc-title">{props.docTitle}</span>
+      <span data-testid="header-doc-link">{props.docLink}</span>
+      <span data-testid="header-plugin-name">{props.pluginName}</span>
+      <span data-testid="header-credential-id">{props.currentCredentialId}</span>
+      <button data-testid="header-config-btn" onClick={props.onClickConfiguration}>Configure</button>
+      <button data-testid="header-credential-change" onClick={() => props.onCredentialChange('new-cred-id')}>Change Credential</button>
+      <span data-testid="header-credentials-count">{props.credentials?.length || 0}</span>
+    </div>
+  )
+  return MockHeader
+})
+
+// Mock FileList component
+jest.mock('./file-list', () => {
+  const MockFileList = (props: any) => (
+    <div data-testid="file-list">
+      <span data-testid="file-list-count">{props.fileList?.length || 0}</span>
+      <span data-testid="file-list-selected-count">{props.selectedFileIds?.length || 0}</span>
+      <span data-testid="file-list-breadcrumbs">{props.breadcrumbs?.join('/') || ''}</span>
+      <span data-testid="file-list-keywords">{props.keywords}</span>
+      <span data-testid="file-list-bucket">{props.bucket}</span>
+      <span data-testid="file-list-loading">{String(props.isLoading)}</span>
+      <span data-testid="file-list-is-in-pipeline">{String(props.isInPipeline)}</span>
+      <span data-testid="file-list-support-batch">{String(props.supportBatchUpload)}</span>
+      <input
+        data-testid="file-list-search-input"
+        onChange={e => props.updateKeywords(e.target.value)}
+      />
+      <button data-testid="file-list-reset-keywords" onClick={props.resetKeywords}>Reset</button>
+      <button
+        data-testid="file-list-select-file"
+        onClick={() => {
+          const file: OnlineDriveFile = { id: 'file-1', name: 'test.txt', type: OnlineDriveFileType.file }
+          props.handleSelectFile(file)
+        }}
+      >
+        Select File
+      </button>
+      <button
+        data-testid="file-list-select-bucket"
+        onClick={() => {
+          const file: OnlineDriveFile = { id: 'bucket-1', name: 'my-bucket', type: OnlineDriveFileType.bucket }
+          props.handleSelectFile(file)
+        }}
+      >
+        Select Bucket
+      </button>
+      <button
+        data-testid="file-list-open-folder"
+        onClick={() => {
+          const file: OnlineDriveFile = { id: 'folder-1', name: 'my-folder', type: OnlineDriveFileType.folder }
+          props.handleOpenFolder(file)
+        }}
+      >
+        Open Folder
+      </button>
+      <button
+        data-testid="file-list-open-bucket"
+        onClick={() => {
+          const file: OnlineDriveFile = { id: 'bucket-1', name: 'my-bucket', type: OnlineDriveFileType.bucket }
+          props.handleOpenFolder(file)
+        }}
+      >
+        Open Bucket
+      </button>
+      <button
+        data-testid="file-list-open-file"
+        onClick={() => {
+          const file: OnlineDriveFile = { id: 'file-1', name: 'test.txt', type: OnlineDriveFileType.file }
+          props.handleOpenFolder(file)
+        }}
+      >
+        Open File
+      </button>
+    </div>
+  )
+  return MockFileList
+})
+
+// ==========================================
+// Test Data Builders
+// ==========================================
+const createMockNodeData = (overrides?: Partial<DataSourceNodeType>): DataSourceNodeType => ({
+  title: 'Test Node',
+  plugin_id: 'plugin-123',
+  provider_type: 'online_drive',
+  provider_name: 'online-drive-provider',
+  datasource_name: 'online-drive-ds',
+  datasource_label: 'Online Drive',
+  datasource_parameters: {},
+  datasource_configurations: {},
+  ...overrides,
+} as DataSourceNodeType)
+
+const createMockOnlineDriveFile = (overrides?: Partial<OnlineDriveFile>): OnlineDriveFile => ({
+  id: 'file-1',
+  name: 'test-file.txt',
+  size: 1024,
+  type: OnlineDriveFileType.file,
+  ...overrides,
+})
+
+const createMockCredential = (overrides?: Partial<{ id: string; name: string }>) => ({
+  id: 'cred-1',
+  name: 'Test Credential',
+  avatar_url: 'https://example.com/avatar.png',
+  credential: {},
+  is_default: false,
+  type: 'oauth2',
+  ...overrides,
+})
+
+type OnlineDriveProps = React.ComponentProps<typeof OnlineDrive>
+
+const createDefaultProps = (overrides?: Partial<OnlineDriveProps>): OnlineDriveProps => ({
+  nodeId: 'node-1',
+  nodeData: createMockNodeData(),
+  onCredentialChange: jest.fn(),
+  isInPipeline: false,
+  supportBatchUpload: true,
+  ...overrides,
+})
+
+// ==========================================
+// Helper Functions
+// ==========================================
+const resetMockStoreState = () => {
+  mockStoreState.nextPageParameters = {}
+  mockStoreState.breadcrumbs = []
+  mockStoreState.prefix = []
+  mockStoreState.keywords = ''
+  mockStoreState.bucket = ''
+  mockStoreState.selectedFileIds = []
+  mockStoreState.onlineDriveFileList = []
+  mockStoreState.currentCredentialId = ''
+  mockStoreState.isTruncated = { current: false }
+  mockStoreState.currentNextPageParametersRef = { current: {} }
+  mockStoreState.setOnlineDriveFileList = jest.fn()
+  mockStoreState.setKeywords = jest.fn()
+  mockStoreState.setSelectedFileIds = jest.fn()
+  mockStoreState.setBreadcrumbs = jest.fn()
+  mockStoreState.setPrefix = jest.fn()
+  mockStoreState.setBucket = jest.fn()
+  mockStoreState.setHasBucket = jest.fn()
+}
+
+// ==========================================
+// Test Suites
+// ==========================================
+describe('OnlineDrive', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+
+    // Reset store state
+    resetMockStoreState()
+
+    // Reset context values
+    mockPipelineId = 'pipeline-123'
+    mockSetShowAccountSettingModal.mockClear()
+
+    // Default mock return values
+    mockUseGetDataSourceAuth.mockReturnValue({
+      data: { result: [createMockCredential()] },
+    })
+
+    mockGetState.mockReturnValue(mockStoreState)
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('header')).toBeInTheDocument()
+      expect(screen.getByTestId('file-list')).toBeInTheDocument()
+    })
+
+    it('should render Header with correct props', () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-123'
+      const props = createDefaultProps({
+        nodeData: createMockNodeData({ datasource_label: 'My Online Drive' }),
+      })
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('header-doc-title')).toHaveTextContent('Docs')
+      expect(screen.getByTestId('header-plugin-name')).toHaveTextContent('My Online Drive')
+      expect(screen.getByTestId('header-credential-id')).toHaveTextContent('cred-123')
+    })
+
+    it('should render FileList with correct props', () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      mockStoreState.keywords = 'search-term'
+      mockStoreState.breadcrumbs = ['folder1', 'folder2']
+      mockStoreState.bucket = 'my-bucket'
+      mockStoreState.selectedFileIds = ['file-1', 'file-2']
+      mockStoreState.onlineDriveFileList = [
+        createMockOnlineDriveFile({ id: 'file-1', name: 'file1.txt' }),
+        createMockOnlineDriveFile({ id: 'file-2', name: 'file2.txt' }),
+      ]
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('file-list')).toBeInTheDocument()
+      expect(screen.getByTestId('file-list-keywords')).toHaveTextContent('search-term')
+      expect(screen.getByTestId('file-list-breadcrumbs')).toHaveTextContent('folder1/folder2')
+      expect(screen.getByTestId('file-list-bucket')).toHaveTextContent('my-bucket')
+      expect(screen.getByTestId('file-list-selected-count')).toHaveTextContent('2')
+    })
+
+    it('should pass docLink with correct path to Header', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      expect(mockDocLink).toHaveBeenCalledWith('/guides/knowledge-base/knowledge-pipeline/authorize-data-source')
+    })
+  })
+
+  // ==========================================
+  // Props Testing
+  // ==========================================
+  describe('Props', () => {
+    describe('nodeId prop', () => {
+      it('should use nodeId in datasourceNodeRunURL for non-pipeline mode', async () => {
+        // Arrange
+        mockStoreState.currentCredentialId = 'cred-1'
+        const props = createDefaultProps({
+          nodeId: 'custom-node-id',
+          isInPipeline: false,
+        })
+
+        // Act
+        render(<OnlineDrive {...props} />)
+
+        // Assert - ssePost should be called with correct URL
+        await waitFor(() => {
+          expect(mockSsePost).toHaveBeenCalledWith(
+            expect.stringContaining('/rag/pipelines/pipeline-123/workflows/published/datasource/nodes/custom-node-id/run'),
+            expect.any(Object),
+            expect.any(Object),
+          )
+        })
+      })
+
+      it('should use nodeId in datasourceNodeRunURL for pipeline mode', async () => {
+        // Arrange
+        mockStoreState.currentCredentialId = 'cred-1'
+        const props = createDefaultProps({
+          nodeId: 'custom-node-id',
+          isInPipeline: true,
+        })
+
+        // Act
+        render(<OnlineDrive {...props} />)
+
+        // Assert - ssePost should be called with correct URL for draft
+        await waitFor(() => {
+          expect(mockSsePost).toHaveBeenCalledWith(
+            expect.stringContaining('/rag/pipelines/pipeline-123/workflows/draft/datasource/nodes/custom-node-id/run'),
+            expect.any(Object),
+            expect.any(Object),
+          )
+        })
+      })
+    })
+
+    describe('nodeData prop', () => {
+      it('should pass plugin_id and provider_name to useGetDataSourceAuth', () => {
+        // Arrange
+        const nodeData = createMockNodeData({
+          plugin_id: 'my-plugin-id',
+          provider_name: 'my-provider',
+        })
+        const props = createDefaultProps({ nodeData })
+
+        // Act
+        render(<OnlineDrive {...props} />)
+
+        // Assert
+        expect(mockUseGetDataSourceAuth).toHaveBeenCalledWith({
+          pluginId: 'my-plugin-id',
+          provider: 'my-provider',
+        })
+      })
+
+      it('should pass datasource_label to Header as pluginName', () => {
+        // Arrange
+        const nodeData = createMockNodeData({
+          datasource_label: 'Custom Online Drive',
+        })
+        const props = createDefaultProps({ nodeData })
+
+        // Act
+        render(<OnlineDrive {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('header-plugin-name')).toHaveTextContent('Custom Online Drive')
+      })
+    })
+
+    describe('isInPipeline prop', () => {
+      it('should use draft URL when isInPipeline is true', async () => {
+        // Arrange
+        mockStoreState.currentCredentialId = 'cred-1'
+        const props = createDefaultProps({ isInPipeline: true })
+
+        // Act
+        render(<OnlineDrive {...props} />)
+
+        // Assert
+        await waitFor(() => {
+          expect(mockSsePost).toHaveBeenCalledWith(
+            expect.stringContaining('/workflows/draft/'),
+            expect.any(Object),
+            expect.any(Object),
+          )
+        })
+      })
+
+      it('should use published URL when isInPipeline is false', async () => {
+        // Arrange
+        mockStoreState.currentCredentialId = 'cred-1'
+        const props = createDefaultProps({ isInPipeline: false })
+
+        // Act
+        render(<OnlineDrive {...props} />)
+
+        // Assert
+        await waitFor(() => {
+          expect(mockSsePost).toHaveBeenCalledWith(
+            expect.stringContaining('/workflows/published/'),
+            expect.any(Object),
+            expect.any(Object),
+          )
+        })
+      })
+
+      it('should pass isInPipeline to FileList', () => {
+        // Arrange
+        const props = createDefaultProps({ isInPipeline: true })
+
+        // Act
+        render(<OnlineDrive {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('file-list-is-in-pipeline')).toHaveTextContent('true')
+      })
+    })
+
+    describe('supportBatchUpload prop', () => {
+      it('should pass supportBatchUpload true to FileList when supportBatchUpload is true', () => {
+        // Arrange
+        const props = createDefaultProps({ supportBatchUpload: true })
+
+        // Act
+        render(<OnlineDrive {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('file-list-support-batch')).toHaveTextContent('true')
+      })
+
+      it('should pass supportBatchUpload false to FileList when supportBatchUpload is false', () => {
+        // Arrange
+        const props = createDefaultProps({ supportBatchUpload: false })
+
+        // Act
+        render(<OnlineDrive {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('file-list-support-batch')).toHaveTextContent('false')
+      })
+
+      it.each([
+        [true, 'true'],
+        [false, 'false'],
+        [undefined, 'true'], // Default value
+      ])('should handle supportBatchUpload=%s correctly', (value, expected) => {
+        // Arrange
+        const props = createDefaultProps({ supportBatchUpload: value })
+
+        // Act
+        render(<OnlineDrive {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('file-list-support-batch')).toHaveTextContent(expected)
+      })
+    })
+
+    describe('onCredentialChange prop', () => {
+      it('should call onCredentialChange with credential id', () => {
+        // Arrange
+        const mockOnCredentialChange = jest.fn()
+        const props = createDefaultProps({ onCredentialChange: mockOnCredentialChange })
+
+        // Act
+        render(<OnlineDrive {...props} />)
+        fireEvent.click(screen.getByTestId('header-credential-change'))
+
+        // Assert
+        expect(mockOnCredentialChange).toHaveBeenCalledWith('new-cred-id')
+      })
+    })
+  })
+
+  // ==========================================
+  // State Management Tests
+  // ==========================================
+  describe('State Management', () => {
+    it('should fetch files on initial mount when fileList is empty', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      mockStoreState.onlineDriveFileList = []
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockSsePost).toHaveBeenCalled()
+      })
+    })
+
+    it('should not fetch files on initial mount when fileList is not empty', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      mockStoreState.onlineDriveFileList = [createMockOnlineDriveFile()]
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert - Wait a bit to ensure no call is made
+      await new Promise(resolve => setTimeout(resolve, 100))
+      expect(mockSsePost).not.toHaveBeenCalled()
+    })
+
+    it('should not fetch files when currentCredentialId is empty', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = ''
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert - Wait a bit to ensure no call is made
+      await new Promise(resolve => setTimeout(resolve, 100))
+      expect(mockSsePost).not.toHaveBeenCalled()
+    })
+
+    it('should show loading state during fetch', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      mockSsePost.mockImplementation(() => {
+        // Never resolves to keep loading state
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByTestId('file-list-loading')).toHaveTextContent('true')
+      })
+    })
+
+    it('should update file list on successful fetch', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      const mockFiles = [
+        { id: 'file-1', name: 'file1.txt', type: 'file' as const },
+        { id: 'file-2', name: 'file2.txt', type: 'file' as const },
+      ]
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        callbacks.onDataSourceNodeCompleted({
+          data: [{
+            bucket: '',
+            files: mockFiles,
+            is_truncated: false,
+            next_page_parameters: {},
+          }],
+          time_consuming: 1.0,
+        })
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockStoreState.setOnlineDriveFileList).toHaveBeenCalled()
+      })
+    })
+
+    it('should show error toast on fetch error', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      const errorMessage = 'Failed to fetch files'
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        callbacks.onDataSourceNodeError({
+          error: errorMessage,
+        })
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockToastNotify).toHaveBeenCalledWith({
+          type: 'error',
+          message: errorMessage,
+        })
+      })
+    })
+  })
+
+  // ==========================================
+  // Memoization Logic and Dependencies Tests
+  // ==========================================
+  describe('Memoization Logic', () => {
+    it('should filter files by keywords', () => {
+      // Arrange
+      mockStoreState.keywords = 'test'
+      mockStoreState.onlineDriveFileList = [
+        createMockOnlineDriveFile({ id: '1', name: 'test-file.txt' }),
+        createMockOnlineDriveFile({ id: '2', name: 'other-file.txt' }),
+        createMockOnlineDriveFile({ id: '3', name: 'another-test.pdf' }),
+      ]
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert - filteredOnlineDriveFileList should have 2 items matching 'test'
+      expect(screen.getByTestId('file-list-count')).toHaveTextContent('2')
+    })
+
+    it('should return all files when keywords is empty', () => {
+      // Arrange
+      mockStoreState.keywords = ''
+      mockStoreState.onlineDriveFileList = [
+        createMockOnlineDriveFile({ id: '1', name: 'file1.txt' }),
+        createMockOnlineDriveFile({ id: '2', name: 'file2.txt' }),
+        createMockOnlineDriveFile({ id: '3', name: 'file3.pdf' }),
+      ]
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('file-list-count')).toHaveTextContent('3')
+    })
+
+    it('should filter files case-insensitively', () => {
+      // Arrange
+      mockStoreState.keywords = 'TEST'
+      mockStoreState.onlineDriveFileList = [
+        createMockOnlineDriveFile({ id: '1', name: 'test-file.txt' }),
+        createMockOnlineDriveFile({ id: '2', name: 'Test-Document.pdf' }),
+        createMockOnlineDriveFile({ id: '3', name: 'other.txt' }),
+      ]
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('file-list-count')).toHaveTextContent('2')
+    })
+  })
+
+  // ==========================================
+  // Callback Stability and Memoization
+  // ==========================================
+  describe('Callback Stability and Memoization', () => {
+    it('should have stable handleSetting callback', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<OnlineDrive {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('header-config-btn'))
+
+      // Assert
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({
+        payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
+      })
+    })
+
+    it('should have stable updateKeywords that updates store', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<OnlineDrive {...props} />)
+
+      // Act
+      fireEvent.change(screen.getByTestId('file-list-search-input'), { target: { value: 'new-keyword' } })
+
+      // Assert
+      expect(mockStoreState.setKeywords).toHaveBeenCalledWith('new-keyword')
+    })
+
+    it('should have stable resetKeywords that clears keywords', () => {
+      // Arrange
+      mockStoreState.keywords = 'old-keyword'
+      const props = createDefaultProps()
+      render(<OnlineDrive {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('file-list-reset-keywords'))
+
+      // Assert
+      expect(mockStoreState.setKeywords).toHaveBeenCalledWith('')
+    })
+  })
+
+  // ==========================================
+  // User Interactions and Event Handlers
+  // ==========================================
+  describe('User Interactions', () => {
+    describe('File Selection', () => {
+      it('should toggle file selection on file click', () => {
+        // Arrange
+        mockStoreState.selectedFileIds = []
+        const props = createDefaultProps()
+        render(<OnlineDrive {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('file-list-select-file'))
+
+        // Assert
+        expect(mockStoreState.setSelectedFileIds).toHaveBeenCalledWith(['file-1'])
+      })
+
+      it('should deselect file if already selected', () => {
+        // Arrange
+        mockStoreState.selectedFileIds = ['file-1']
+        const props = createDefaultProps()
+        render(<OnlineDrive {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('file-list-select-file'))
+
+        // Assert
+        expect(mockStoreState.setSelectedFileIds).toHaveBeenCalledWith([])
+      })
+
+      it('should not select bucket type items', () => {
+        // Arrange
+        mockStoreState.selectedFileIds = []
+        const props = createDefaultProps()
+        render(<OnlineDrive {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('file-list-select-bucket'))
+
+        // Assert
+        expect(mockStoreState.setSelectedFileIds).not.toHaveBeenCalled()
+      })
+
+      it('should limit selection to one file when supportBatchUpload is false', () => {
+        // Arrange
+        mockStoreState.selectedFileIds = ['existing-file']
+        const props = createDefaultProps({ supportBatchUpload: false })
+        render(<OnlineDrive {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('file-list-select-file'))
+
+        // Assert - Should not add new file because there's already one selected
+        expect(mockStoreState.setSelectedFileIds).toHaveBeenCalledWith(['existing-file'])
+      })
+
+      it('should allow multiple selections when supportBatchUpload is true', () => {
+        // Arrange
+        mockStoreState.selectedFileIds = ['existing-file']
+        const props = createDefaultProps({ supportBatchUpload: true })
+        render(<OnlineDrive {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('file-list-select-file'))
+
+        // Assert
+        expect(mockStoreState.setSelectedFileIds).toHaveBeenCalledWith(['existing-file', 'file-1'])
+      })
+    })
+
+    describe('Folder Navigation', () => {
+      it('should open folder and update breadcrumbs/prefix', () => {
+        // Arrange
+        mockStoreState.breadcrumbs = []
+        mockStoreState.prefix = []
+        const props = createDefaultProps()
+        render(<OnlineDrive {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('file-list-open-folder'))
+
+        // Assert
+        expect(mockStoreState.setOnlineDriveFileList).toHaveBeenCalledWith([])
+        expect(mockStoreState.setSelectedFileIds).toHaveBeenCalledWith([])
+        expect(mockStoreState.setBreadcrumbs).toHaveBeenCalledWith(['my-folder'])
+        expect(mockStoreState.setPrefix).toHaveBeenCalledWith(['folder-1'])
+      })
+
+      it('should open bucket and set bucket name', () => {
+        // Arrange
+        const props = createDefaultProps()
+        render(<OnlineDrive {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('file-list-open-bucket'))
+
+        // Assert
+        expect(mockStoreState.setOnlineDriveFileList).toHaveBeenCalledWith([])
+        expect(mockStoreState.setBucket).toHaveBeenCalledWith('my-bucket')
+      })
+
+      it('should not navigate when opening a file', () => {
+        // Arrange
+        const props = createDefaultProps()
+        render(<OnlineDrive {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('file-list-open-file'))
+
+        // Assert - No navigation functions should be called
+        expect(mockStoreState.setBreadcrumbs).not.toHaveBeenCalled()
+        expect(mockStoreState.setPrefix).not.toHaveBeenCalled()
+        expect(mockStoreState.setBucket).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('Credential Change', () => {
+      it('should call onCredentialChange prop', () => {
+        // Arrange
+        const mockOnCredentialChange = jest.fn()
+        const props = createDefaultProps({ onCredentialChange: mockOnCredentialChange })
+        render(<OnlineDrive {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('header-credential-change'))
+
+        // Assert
+        expect(mockOnCredentialChange).toHaveBeenCalledWith('new-cred-id')
+      })
+    })
+
+    describe('Configuration', () => {
+      it('should open account setting modal on configuration click', () => {
+        // Arrange
+        const props = createDefaultProps()
+        render(<OnlineDrive {...props} />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('header-config-btn'))
+
+        // Assert
+        expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({
+          payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
+        })
+      })
+    })
+  })
+
+  // ==========================================
+  // Side Effects and Cleanup Tests
+  // ==========================================
+  describe('Side Effects and Cleanup', () => {
+    it('should fetch files when nextPageParameters changes after initial mount', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      mockStoreState.onlineDriveFileList = [createMockOnlineDriveFile()]
+      const props = createDefaultProps()
+      const { rerender } = render(<OnlineDrive {...props} />)
+
+      // Act - Simulate nextPageParameters change by re-rendering with updated state
+      mockStoreState.nextPageParameters = { page: 2 }
+      rerender(<OnlineDrive {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockSsePost).toHaveBeenCalled()
+      })
+    })
+
+    it('should fetch files when prefix changes after initial mount', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      mockStoreState.onlineDriveFileList = [createMockOnlineDriveFile()]
+      const props = createDefaultProps()
+      const { rerender } = render(<OnlineDrive {...props} />)
+
+      // Act - Simulate prefix change by re-rendering with updated state
+      mockStoreState.prefix = ['folder1']
+      rerender(<OnlineDrive {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockSsePost).toHaveBeenCalled()
+      })
+    })
+
+    it('should fetch files when bucket changes after initial mount', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      mockStoreState.onlineDriveFileList = [createMockOnlineDriveFile()]
+      const props = createDefaultProps()
+      const { rerender } = render(<OnlineDrive {...props} />)
+
+      // Act - Simulate bucket change by re-rendering with updated state
+      mockStoreState.bucket = 'new-bucket'
+      rerender(<OnlineDrive {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockSsePost).toHaveBeenCalled()
+      })
+    })
+
+    it('should fetch files when currentCredentialId changes after initial mount', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      mockStoreState.onlineDriveFileList = [createMockOnlineDriveFile()]
+      const props = createDefaultProps()
+      const { rerender } = render(<OnlineDrive {...props} />)
+
+      // Act - Simulate credential change by re-rendering with updated state
+      mockStoreState.currentCredentialId = 'cred-2'
+      rerender(<OnlineDrive {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockSsePost).toHaveBeenCalled()
+      })
+    })
+
+    it('should not fetch files concurrently (debounce)', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      let resolveFirst: () => void
+      const firstPromise = new Promise<void>((resolve) => {
+        resolveFirst = resolve
+      })
+      mockSsePost.mockImplementationOnce((url, options, callbacks) => {
+        firstPromise.then(() => {
+          callbacks.onDataSourceNodeCompleted({
+            data: [{ bucket: '', files: [], is_truncated: false, next_page_parameters: {} }],
+            time_consuming: 1.0,
+          })
+        })
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Try to trigger another fetch while first is loading
+      mockStoreState.prefix = ['folder1']
+
+      // Assert - Only one call should be made initially due to isLoadingRef guard
+      expect(mockSsePost).toHaveBeenCalledTimes(1)
+
+      // Cleanup
+      resolveFirst!()
+    })
+  })
+
+  // ==========================================
+  // API Calls Mocking Tests
+  // ==========================================
+  describe('API Calls', () => {
+    it('should call ssePost with correct parameters', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      mockStoreState.prefix = ['folder1']
+      mockStoreState.bucket = 'my-bucket'
+      mockStoreState.nextPageParameters = { cursor: 'abc' }
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockSsePost).toHaveBeenCalledWith(
+          expect.any(String),
+          {
+            body: {
+              inputs: {
+                prefix: 'folder1',
+                bucket: 'my-bucket',
+                next_page_parameters: { cursor: 'abc' },
+                max_keys: 30,
+              },
+              datasource_type: DatasourceType.onlineDrive,
+              credential_id: 'cred-1',
+            },
+          },
+          expect.objectContaining({
+            onDataSourceNodeCompleted: expect.any(Function),
+            onDataSourceNodeError: expect.any(Function),
+          }),
+        )
+      })
+    })
+
+    it('should handle completed response and update store', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      mockStoreState.breadcrumbs = ['folder1']
+      mockStoreState.bucket = 'my-bucket'
+      const mockResponseData = [{
+        bucket: 'my-bucket',
+        files: [
+          { id: 'file-1', name: 'file1.txt', size: 1024, type: 'file' as const },
+          { id: 'file-2', name: 'file2.txt', size: 2048, type: 'file' as const },
+        ],
+        is_truncated: true,
+        next_page_parameters: { cursor: 'next-cursor' },
+      }]
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        callbacks.onDataSourceNodeCompleted({
+          data: mockResponseData,
+          time_consuming: 1.5,
+        })
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockStoreState.setOnlineDriveFileList).toHaveBeenCalled()
+        expect(mockStoreState.setHasBucket).toHaveBeenCalledWith(true)
+        expect(mockStoreState.isTruncated.current).toBe(true)
+        expect(mockStoreState.currentNextPageParametersRef.current).toEqual({ cursor: 'next-cursor' })
+      })
+    })
+
+    it('should handle error response and show toast', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      const errorMessage = 'Access denied'
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        callbacks.onDataSourceNodeError({
+          error: errorMessage,
+        })
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockToastNotify).toHaveBeenCalledWith({
+          type: 'error',
+          message: errorMessage,
+        })
+      })
+    })
+  })
+
+  // ==========================================
+  // Edge Cases and Error Handling
+  // ==========================================
+  describe('Edge Cases and Error Handling', () => {
+    it('should handle empty credentials list', () => {
+      // Arrange
+      mockUseGetDataSourceAuth.mockReturnValue({
+        data: { result: [] },
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('header-credentials-count')).toHaveTextContent('0')
+    })
+
+    it('should handle undefined credentials data', () => {
+      // Arrange
+      mockUseGetDataSourceAuth.mockReturnValue({
+        data: undefined,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('header-credentials-count')).toHaveTextContent('0')
+    })
+
+    it('should handle undefined pipelineId', async () => {
+      // Arrange
+      mockPipelineId = undefined
+      mockStoreState.currentCredentialId = 'cred-1'
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert - Should still attempt to call ssePost with undefined in URL
+      await waitFor(() => {
+        expect(mockSsePost).toHaveBeenCalledWith(
+          expect.stringContaining('/rag/pipelines/undefined/'),
+          expect.any(Object),
+          expect.any(Object),
+        )
+      })
+    })
+
+    it('should handle empty file list', () => {
+      // Arrange
+      mockStoreState.onlineDriveFileList = []
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('file-list-count')).toHaveTextContent('0')
+    })
+
+    it('should handle empty breadcrumbs', () => {
+      // Arrange
+      mockStoreState.breadcrumbs = []
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('file-list-breadcrumbs')).toHaveTextContent('')
+    })
+
+    it('should handle empty bucket', () => {
+      // Arrange
+      mockStoreState.bucket = ''
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('file-list-bucket')).toHaveTextContent('')
+    })
+
+    it('should handle special characters in keywords', () => {
+      // Arrange
+      mockStoreState.keywords = 'test.file[1]'
+      mockStoreState.onlineDriveFileList = [
+        createMockOnlineDriveFile({ id: '1', name: 'test.file[1].txt' }),
+        createMockOnlineDriveFile({ id: '2', name: 'other.txt' }),
+      ]
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert - Should find file with special characters
+      expect(screen.getByTestId('file-list-count')).toHaveTextContent('1')
+    })
+
+    it('should handle very long file names', () => {
+      // Arrange
+      const longName = `${'a'.repeat(500)}.txt`
+      mockStoreState.onlineDriveFileList = [
+        createMockOnlineDriveFile({ id: '1', name: longName }),
+      ]
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('file-list-count')).toHaveTextContent('1')
+    })
+
+    it('should handle bucket list initiation response', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      mockStoreState.bucket = ''
+      mockStoreState.prefix = []
+      const mockBucketResponse = [
+        { bucket: 'bucket-1', files: [], is_truncated: false, next_page_parameters: {} },
+        { bucket: 'bucket-2', files: [], is_truncated: false, next_page_parameters: {} },
+      ]
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        callbacks.onDataSourceNodeCompleted({
+          data: mockBucketResponse,
+          time_consuming: 1.0,
+        })
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockStoreState.setHasBucket).toHaveBeenCalledWith(true)
+      })
+    })
+  })
+
+  // ==========================================
+  // All Prop Variations Tests
+  // ==========================================
+  describe('Prop Variations', () => {
+    it.each([
+      { isInPipeline: true, supportBatchUpload: true },
+      { isInPipeline: true, supportBatchUpload: false },
+      { isInPipeline: false, supportBatchUpload: true },
+      { isInPipeline: false, supportBatchUpload: false },
+    ])('should render correctly with isInPipeline=%s and supportBatchUpload=%s', (propVariation) => {
+      // Arrange
+      const props = createDefaultProps(propVariation)
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('header')).toBeInTheDocument()
+      expect(screen.getByTestId('file-list')).toBeInTheDocument()
+      expect(screen.getByTestId('file-list-is-in-pipeline')).toHaveTextContent(String(propVariation.isInPipeline))
+      expect(screen.getByTestId('file-list-support-batch')).toHaveTextContent(String(propVariation.supportBatchUpload))
+    })
+
+    it.each([
+      { nodeId: 'node-a', expectedUrlPart: 'nodes/node-a/run' },
+      { nodeId: 'node-b', expectedUrlPart: 'nodes/node-b/run' },
+      { nodeId: '123-456', expectedUrlPart: 'nodes/123-456/run' },
+    ])('should use correct URL for nodeId=%s', async ({ nodeId, expectedUrlPart }) => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      const props = createDefaultProps({ nodeId })
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockSsePost).toHaveBeenCalledWith(
+          expect.stringContaining(expectedUrlPart),
+          expect.any(Object),
+          expect.any(Object),
+        )
+      })
+    })
+
+    it.each([
+      { pluginId: 'plugin-a', providerName: 'provider-a' },
+      { pluginId: 'plugin-b', providerName: 'provider-b' },
+      { pluginId: '', providerName: '' },
+    ])('should call useGetDataSourceAuth with pluginId=%s and providerName=%s', ({ pluginId, providerName }) => {
+      // Arrange
+      const props = createDefaultProps({
+        nodeData: createMockNodeData({
+          plugin_id: pluginId,
+          provider_name: providerName,
+        }),
+      })
+
+      // Act
+      render(<OnlineDrive {...props} />)
+
+      // Assert
+      expect(mockUseGetDataSourceAuth).toHaveBeenCalledWith({
+        pluginId,
+        provider: providerName,
+      })
+    })
+  })
+})
+
+// ==========================================
+// Header Component Tests
+// ==========================================
+describe('Header', () => {
+  const createHeaderProps = (overrides?: Partial<React.ComponentProps<typeof Header>>) => ({
+    onClickConfiguration: jest.fn(),
+    docTitle: 'Documentation',
+    docLink: 'https://docs.example.com/guide',
+    ...overrides,
+  })
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createHeaderProps()
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      expect(screen.getByText('Documentation')).toBeInTheDocument()
+    })
+
+    it('should render doc link with correct href', () => {
+      // Arrange
+      const props = createHeaderProps({
+        docLink: 'https://custom-docs.com/path',
+        docTitle: 'Custom Docs',
+      })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      const link = screen.getByRole('link')
+      expect(link).toHaveAttribute('href', 'https://custom-docs.com/path')
+      expect(link).toHaveAttribute('target', '_blank')
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+
+    it('should render doc title text', () => {
+      // Arrange
+      const props = createHeaderProps({ docTitle: 'My Documentation Title' })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      expect(screen.getByText('My Documentation Title')).toBeInTheDocument()
+    })
+
+    it('should render configuration button', () => {
+      // Arrange
+      const props = createHeaderProps()
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    describe('docTitle prop', () => {
+      it.each([
+        'Getting Started',
+        'API Reference',
+        'Installation Guide',
+        '',
+      ])('should render docTitle="%s"', (docTitle) => {
+        // Arrange
+        const props = createHeaderProps({ docTitle })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        if (docTitle)
+          expect(screen.getByText(docTitle)).toBeInTheDocument()
+      })
+    })
+
+    describe('docLink prop', () => {
+      it.each([
+        'https://docs.example.com',
+        'https://docs.example.com/path/to/page',
+        '/relative/path',
+      ])('should set href to "%s"', (docLink) => {
+        // Arrange
+        const props = createHeaderProps({ docLink })
+
+        // Act
+        render(<Header {...props} />)
+
+        // Assert
+        expect(screen.getByRole('link')).toHaveAttribute('href', docLink)
+      })
+    })
+
+    describe('onClickConfiguration prop', () => {
+      it('should call onClickConfiguration when configuration icon is clicked', () => {
+        // Arrange
+        const mockOnClickConfiguration = jest.fn()
+        const props = createHeaderProps({ onClickConfiguration: mockOnClickConfiguration })
+
+        // Act
+        render(<Header {...props} />)
+        const configIcon = screen.getByRole('button').querySelector('svg')
+        fireEvent.click(configIcon!)
+
+        // Assert
+        expect(mockOnClickConfiguration).toHaveBeenCalledTimes(1)
+      })
+
+      it('should not throw when onClickConfiguration is undefined', () => {
+        // Arrange
+        const props = createHeaderProps({ onClickConfiguration: undefined })
+
+        // Act & Assert
+        expect(() => render(<Header {...props} />)).not.toThrow()
+      })
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have accessible link with title attribute', () => {
+      // Arrange
+      const props = createHeaderProps({ docTitle: 'Accessible Title' })
+
+      // Act
+      render(<Header {...props} />)
+
+      // Assert
+      const titleSpan = screen.getByTitle('Accessible Title')
+      expect(titleSpan).toBeInTheDocument()
+    })
+  })
+})
+
+// ==========================================
+// Utils Tests
+// ==========================================
+describe('utils', () => {
+  // ==========================================
+  // isFile Tests
+  // ==========================================
+  describe('isFile', () => {
+    it('should return true for file type', () => {
+      // Act & Assert
+      expect(isFile('file')).toBe(true)
+    })
+
+    it('should return false for folder type', () => {
+      // Act & Assert
+      expect(isFile('folder')).toBe(false)
+    })
+
+    it.each([
+      ['file', true],
+      ['folder', false],
+    ] as const)('isFile(%s) should return %s', (type, expected) => {
+      // Act & Assert
+      expect(isFile(type)).toBe(expected)
+    })
+  })
+
+  // ==========================================
+  // isBucketListInitiation Tests
+  // ==========================================
+  describe('isBucketListInitiation', () => {
+    it('should return false when bucket is not empty', () => {
+      // Arrange
+      const data: OnlineDriveData[] = [
+        { bucket: 'my-bucket', files: [], is_truncated: false, next_page_parameters: {} },
+      ]
+
+      // Act & Assert
+      expect(isBucketListInitiation(data, [], 'existing-bucket')).toBe(false)
+    })
+
+    it('should return false when prefix is not empty', () => {
+      // Arrange
+      const data: OnlineDriveData[] = [
+        { bucket: 'my-bucket', files: [], is_truncated: false, next_page_parameters: {} },
+      ]
+
+      // Act & Assert
+      expect(isBucketListInitiation(data, ['folder1'], '')).toBe(false)
+    })
+
+    it('should return false when data items have no bucket', () => {
+      // Arrange
+      const data: OnlineDriveData[] = [
+        { bucket: '', files: [{ id: '1', name: 'file.txt', size: 1024, type: 'file' }], is_truncated: false, next_page_parameters: {} },
+      ]
+
+      // Act & Assert
+      expect(isBucketListInitiation(data, [], '')).toBe(false)
+    })
+
+    it('should return true for multiple buckets with no prefix and bucket', () => {
+      // Arrange
+      const data: OnlineDriveData[] = [
+        { bucket: 'bucket-1', files: [], is_truncated: false, next_page_parameters: {} },
+        { bucket: 'bucket-2', files: [], is_truncated: false, next_page_parameters: {} },
+      ]
+
+      // Act & Assert
+      expect(isBucketListInitiation(data, [], '')).toBe(true)
+    })
+
+    it('should return true for single bucket with no files, no prefix, and no bucket', () => {
+      // Arrange
+      const data: OnlineDriveData[] = [
+        { bucket: 'my-bucket', files: [], is_truncated: false, next_page_parameters: {} },
+      ]
+
+      // Act & Assert
+      expect(isBucketListInitiation(data, [], '')).toBe(true)
+    })
+
+    it('should return false for single bucket with files', () => {
+      // Arrange
+      const data: OnlineDriveData[] = [
+        { bucket: 'my-bucket', files: [{ id: '1', name: 'file.txt', size: 1024, type: 'file' }], is_truncated: false, next_page_parameters: {} },
+      ]
+
+      // Act & Assert
+      expect(isBucketListInitiation(data, [], '')).toBe(false)
+    })
+
+    it('should return false for empty data array', () => {
+      // Arrange
+      const data: OnlineDriveData[] = []
+
+      // Act & Assert
+      expect(isBucketListInitiation(data, [], '')).toBe(false)
+    })
+  })
+
+  // ==========================================
+  // convertOnlineDriveData Tests
+  // ==========================================
+  describe('convertOnlineDriveData', () => {
+    describe('Empty data handling', () => {
+      it('should return empty result for empty data array', () => {
+        // Arrange
+        const data: OnlineDriveData[] = []
+
+        // Act
+        const result = convertOnlineDriveData(data, [], '')
+
+        // Assert
+        expect(result).toEqual({
+          fileList: [],
+          isTruncated: false,
+          nextPageParameters: {},
+          hasBucket: false,
+        })
+      })
+    })
+
+    describe('Bucket list initiation', () => {
+      it('should convert multiple buckets to bucket file list', () => {
+        // Arrange
+        const data: OnlineDriveData[] = [
+          { bucket: 'bucket-1', files: [], is_truncated: false, next_page_parameters: {} },
+          { bucket: 'bucket-2', files: [], is_truncated: false, next_page_parameters: {} },
+          { bucket: 'bucket-3', files: [], is_truncated: false, next_page_parameters: {} },
+        ]
+
+        // Act
+        const result = convertOnlineDriveData(data, [], '')
+
+        // Assert
+        expect(result.fileList).toHaveLength(3)
+        expect(result.fileList[0]).toEqual({
+          id: 'bucket-1',
+          name: 'bucket-1',
+          type: OnlineDriveFileType.bucket,
+        })
+        expect(result.fileList[1]).toEqual({
+          id: 'bucket-2',
+          name: 'bucket-2',
+          type: OnlineDriveFileType.bucket,
+        })
+        expect(result.fileList[2]).toEqual({
+          id: 'bucket-3',
+          name: 'bucket-3',
+          type: OnlineDriveFileType.bucket,
+        })
+        expect(result.hasBucket).toBe(true)
+        expect(result.isTruncated).toBe(false)
+        expect(result.nextPageParameters).toEqual({})
+      })
+
+      it('should convert single bucket with no files to bucket list', () => {
+        // Arrange
+        const data: OnlineDriveData[] = [
+          { bucket: 'my-bucket', files: [], is_truncated: false, next_page_parameters: {} },
+        ]
+
+        // Act
+        const result = convertOnlineDriveData(data, [], '')
+
+        // Assert
+        expect(result.fileList).toHaveLength(1)
+        expect(result.fileList[0]).toEqual({
+          id: 'my-bucket',
+          name: 'my-bucket',
+          type: OnlineDriveFileType.bucket,
+        })
+        expect(result.hasBucket).toBe(true)
+      })
+    })
+
+    describe('File list conversion', () => {
+      it('should convert files correctly', () => {
+        // Arrange
+        const data: OnlineDriveData[] = [
+          {
+            bucket: 'my-bucket',
+            files: [
+              { id: 'file-1', name: 'document.pdf', size: 1024, type: 'file' },
+              { id: 'file-2', name: 'image.png', size: 2048, type: 'file' },
+            ],
+            is_truncated: false,
+            next_page_parameters: {},
+          },
+        ]
+
+        // Act
+        const result = convertOnlineDriveData(data, ['folder1'], 'my-bucket')
+
+        // Assert
+        expect(result.fileList).toHaveLength(2)
+        expect(result.fileList[0]).toEqual({
+          id: 'file-1',
+          name: 'document.pdf',
+          size: 1024,
+          type: OnlineDriveFileType.file,
+        })
+        expect(result.fileList[1]).toEqual({
+          id: 'file-2',
+          name: 'image.png',
+          size: 2048,
+          type: OnlineDriveFileType.file,
+        })
+        expect(result.hasBucket).toBe(true)
+      })
+
+      it('should convert folders correctly without size', () => {
+        // Arrange
+        const data: OnlineDriveData[] = [
+          {
+            bucket: 'my-bucket',
+            files: [
+              { id: 'folder-1', name: 'Documents', size: 0, type: 'folder' },
+              { id: 'folder-2', name: 'Images', size: 0, type: 'folder' },
+            ],
+            is_truncated: false,
+            next_page_parameters: {},
+          },
+        ]
+
+        // Act
+        const result = convertOnlineDriveData(data, [], 'my-bucket')
+
+        // Assert
+        expect(result.fileList).toHaveLength(2)
+        expect(result.fileList[0]).toEqual({
+          id: 'folder-1',
+          name: 'Documents',
+          size: undefined,
+          type: OnlineDriveFileType.folder,
+        })
+        expect(result.fileList[1]).toEqual({
+          id: 'folder-2',
+          name: 'Images',
+          size: undefined,
+          type: OnlineDriveFileType.folder,
+        })
+      })
+
+      it('should handle mixed files and folders', () => {
+        // Arrange
+        const data: OnlineDriveData[] = [
+          {
+            bucket: 'my-bucket',
+            files: [
+              { id: 'folder-1', name: 'Documents', size: 0, type: 'folder' },
+              { id: 'file-1', name: 'readme.txt', size: 256, type: 'file' },
+              { id: 'folder-2', name: 'Images', size: 0, type: 'folder' },
+              { id: 'file-2', name: 'data.json', size: 512, type: 'file' },
+            ],
+            is_truncated: false,
+            next_page_parameters: {},
+          },
+        ]
+
+        // Act
+        const result = convertOnlineDriveData(data, [], 'my-bucket')
+
+        // Assert
+        expect(result.fileList).toHaveLength(4)
+        expect(result.fileList[0].type).toBe(OnlineDriveFileType.folder)
+        expect(result.fileList[1].type).toBe(OnlineDriveFileType.file)
+        expect(result.fileList[2].type).toBe(OnlineDriveFileType.folder)
+        expect(result.fileList[3].type).toBe(OnlineDriveFileType.file)
+      })
+    })
+
+    describe('Truncation and pagination', () => {
+      it('should return isTruncated true when data is truncated', () => {
+        // Arrange
+        const data: OnlineDriveData[] = [
+          {
+            bucket: 'my-bucket',
+            files: [{ id: 'file-1', name: 'file.txt', size: 1024, type: 'file' }],
+            is_truncated: true,
+            next_page_parameters: { cursor: 'next-cursor' },
+          },
+        ]
+
+        // Act
+        const result = convertOnlineDriveData(data, [], 'my-bucket')
+
+        // Assert
+        expect(result.isTruncated).toBe(true)
+        expect(result.nextPageParameters).toEqual({ cursor: 'next-cursor' })
+      })
+
+      it('should return isTruncated false when not truncated', () => {
+        // Arrange
+        const data: OnlineDriveData[] = [
+          {
+            bucket: 'my-bucket',
+            files: [{ id: 'file-1', name: 'file.txt', size: 1024, type: 'file' }],
+            is_truncated: false,
+            next_page_parameters: {},
+          },
+        ]
+
+        // Act
+        const result = convertOnlineDriveData(data, [], 'my-bucket')
+
+        // Assert
+        expect(result.isTruncated).toBe(false)
+        expect(result.nextPageParameters).toEqual({})
+      })
+
+      it('should handle undefined is_truncated', () => {
+        // Arrange
+        const data: OnlineDriveData[] = [
+          {
+            bucket: 'my-bucket',
+            files: [{ id: 'file-1', name: 'file.txt', size: 1024, type: 'file' }],
+            is_truncated: undefined as any,
+            next_page_parameters: undefined as any,
+          },
+        ]
+
+        // Act
+        const result = convertOnlineDriveData(data, [], 'my-bucket')
+
+        // Assert
+        expect(result.isTruncated).toBe(false)
+        expect(result.nextPageParameters).toEqual({})
+      })
+    })
+
+    describe('hasBucket flag', () => {
+      it('should return hasBucket true when bucket exists in data', () => {
+        // Arrange
+        const data: OnlineDriveData[] = [
+          {
+            bucket: 'my-bucket',
+            files: [{ id: 'file-1', name: 'file.txt', size: 1024, type: 'file' }],
+            is_truncated: false,
+            next_page_parameters: {},
+          },
+        ]
+
+        // Act
+        const result = convertOnlineDriveData(data, [], 'my-bucket')
+
+        // Assert
+        expect(result.hasBucket).toBe(true)
+      })
+
+      it('should return hasBucket false when bucket is empty in data', () => {
+        // Arrange
+        const data: OnlineDriveData[] = [
+          {
+            bucket: '',
+            files: [{ id: 'file-1', name: 'file.txt', size: 1024, type: 'file' }],
+            is_truncated: false,
+            next_page_parameters: {},
+          },
+        ]
+
+        // Act
+        const result = convertOnlineDriveData(data, [], '')
+
+        // Assert
+        expect(result.hasBucket).toBe(false)
+      })
+    })
+
+    describe('Edge cases', () => {
+      it('should handle files with zero size', () => {
+        // Arrange
+        const data: OnlineDriveData[] = [
+          {
+            bucket: 'my-bucket',
+            files: [{ id: 'file-1', name: 'empty.txt', size: 0, type: 'file' }],
+            is_truncated: false,
+            next_page_parameters: {},
+          },
+        ]
+
+        // Act
+        const result = convertOnlineDriveData(data, [], 'my-bucket')
+
+        // Assert
+        expect(result.fileList[0].size).toBe(0)
+      })
+
+      it('should handle files with very large size', () => {
+        // Arrange
+        const largeSize = Number.MAX_SAFE_INTEGER
+        const data: OnlineDriveData[] = [
+          {
+            bucket: 'my-bucket',
+            files: [{ id: 'file-1', name: 'large.bin', size: largeSize, type: 'file' }],
+            is_truncated: false,
+            next_page_parameters: {},
+          },
+        ]
+
+        // Act
+        const result = convertOnlineDriveData(data, [], 'my-bucket')
+
+        // Assert
+        expect(result.fileList[0].size).toBe(largeSize)
+      })
+
+      it('should handle files with special characters in name', () => {
+        // Arrange
+        const data: OnlineDriveData[] = [
+          {
+            bucket: 'my-bucket',
+            files: [
+              { id: 'file-1', name: 'file[1] (copy).txt', size: 1024, type: 'file' },
+              { id: 'file-2', name: 'doc-with-dash_and_underscore.pdf', size: 2048, type: 'file' },
+              { id: 'file-3', name: 'file with spaces.txt', size: 512, type: 'file' },
+            ],
+            is_truncated: false,
+            next_page_parameters: {},
+          },
+        ]
+
+        // Act
+        const result = convertOnlineDriveData(data, [], 'my-bucket')
+
+        // Assert
+        expect(result.fileList[0].name).toBe('file[1] (copy).txt')
+        expect(result.fileList[1].name).toBe('doc-with-dash_and_underscore.pdf')
+        expect(result.fileList[2].name).toBe('file with spaces.txt')
+      })
+
+      it('should handle complex next_page_parameters', () => {
+        // Arrange
+        const complexParams = {
+          cursor: 'abc123',
+          page: 2,
+          limit: 50,
+          nested: { key: 'value' },
+        }
+        const data: OnlineDriveData[] = [
+          {
+            bucket: 'my-bucket',
+            files: [{ id: 'file-1', name: 'file.txt', size: 1024, type: 'file' }],
+            is_truncated: true,
+            next_page_parameters: complexParams,
+          },
+        ]
+
+        // Act
+        const result = convertOnlineDriveData(data, [], 'my-bucket')
+
+        // Assert
+        expect(result.nextPageParameters).toEqual(complexParams)
+      })
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/checkbox-with-label.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/checkbox-with-label.tsx
index 7856b16cfc..6ae40f6eed 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/checkbox-with-label.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/checkbox-with-label.tsx
@@ -1,6 +1,6 @@
 'use client'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Checkbox from '@/app/components/base/checkbox'
 import Tooltip from '@/app/components/base/tooltip'
 
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 bdfcddfd77..c0bd4d46ee 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,6 +1,6 @@
 'use client'
 import React, { useCallback } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
 import Checkbox from '@/app/components/base/checkbox'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result.tsx
index cd410c4d1e..f898651ef7 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result.tsx
@@ -1,7 +1,7 @@
 'use client'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CrawlResultItem } from '@/models/datasets'
 import CheckboxWithLabel from './checkbox-with-label'
 import CrawledResultItem from './crawled-result-item'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx
index a9199cdef7..4c3d7edcb8 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx
@@ -1,7 +1,7 @@
 'use client'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type CrawlingProps = {
   className?: string
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx
index ca1cef246d..e7a885db19 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiErrorWarningFill } from '@remixicon/react'
 
 type ErrorMessageProps = {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/index.spec.tsx
new file mode 100644
index 0000000000..f96127f361
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/index.spec.tsx
@@ -0,0 +1,947 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import CheckboxWithLabel from './checkbox-with-label'
+import CrawledResultItem from './crawled-result-item'
+import CrawledResult from './crawled-result'
+import Crawling from './crawling'
+import ErrorMessage from './error-message'
+import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
+
+// ==========================================
+// Test Data Builders
+// ==========================================
+
+const createMockCrawlResultItem = (overrides?: Partial<CrawlResultItemType>): CrawlResultItemType => ({
+  source_url: 'https://example.com/page1',
+  title: 'Test Page Title',
+  markdown: '# Test content',
+  description: 'Test description',
+  ...overrides,
+})
+
+const createMockCrawlResultItems = (count = 3): CrawlResultItemType[] => {
+  return Array.from({ length: count }, (_, i) =>
+    createMockCrawlResultItem({
+      source_url: `https://example.com/page${i + 1}`,
+      title: `Page ${i + 1}`,
+    }),
+  )
+}
+
+// ==========================================
+// CheckboxWithLabel Tests
+// ==========================================
+describe('CheckboxWithLabel', () => {
+  const defaultProps = {
+    isChecked: false,
+    onChange: jest.fn(),
+    label: 'Test Label',
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      render(<CheckboxWithLabel {...defaultProps} />)
+
+      // Assert
+      expect(screen.getByText('Test Label')).toBeInTheDocument()
+    })
+
+    it('should render checkbox in unchecked state', () => {
+      // Arrange & Act
+      const { container } = render(<CheckboxWithLabel {...defaultProps} isChecked={false} />)
+
+      // Assert - Custom checkbox component uses div with data-testid
+      const checkbox = container.querySelector('[data-testid^="checkbox"]')
+      expect(checkbox).toBeInTheDocument()
+      expect(checkbox).not.toHaveClass('bg-components-checkbox-bg')
+    })
+
+    it('should render checkbox in checked state', () => {
+      // Arrange & Act
+      const { container } = render(<CheckboxWithLabel {...defaultProps} isChecked={true} />)
+
+      // Assert - Checked state has check icon
+      const checkIcon = container.querySelector('[data-testid^="check-icon"]')
+      expect(checkIcon).toBeInTheDocument()
+    })
+
+    it('should render tooltip when provided', () => {
+      // Arrange & Act
+      render(<CheckboxWithLabel {...defaultProps} tooltip="Helpful tooltip text" />)
+
+      // Assert - Tooltip trigger should be present
+      const tooltipTrigger = document.querySelector('[class*="ml-0.5"]')
+      expect(tooltipTrigger).toBeInTheDocument()
+    })
+
+    it('should not render tooltip when not provided', () => {
+      // Arrange & Act
+      render(<CheckboxWithLabel {...defaultProps} />)
+
+      // Assert
+      const tooltipTrigger = document.querySelector('[class*="ml-0.5"]')
+      expect(tooltipTrigger).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      // Arrange & Act
+      const { container } = render(
+        <CheckboxWithLabel {...defaultProps} className="custom-class" />,
+      )
+
+      // Assert
+      const label = container.querySelector('label')
+      expect(label).toHaveClass('custom-class')
+    })
+
+    it('should apply custom labelClassName', () => {
+      // Arrange & Act
+      render(<CheckboxWithLabel {...defaultProps} labelClassName="custom-label-class" />)
+
+      // Assert
+      const labelText = screen.getByText('Test Label')
+      expect(labelText).toHaveClass('custom-label-class')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onChange with true when clicking unchecked checkbox', () => {
+      // Arrange
+      const mockOnChange = jest.fn()
+      const { container } = render(<CheckboxWithLabel {...defaultProps} isChecked={false} onChange={mockOnChange} />)
+
+      // Act
+      const checkbox = container.querySelector('[data-testid^="checkbox"]')!
+      fireEvent.click(checkbox)
+
+      // Assert
+      expect(mockOnChange).toHaveBeenCalledWith(true)
+    })
+
+    it('should call onChange with false when clicking checked checkbox', () => {
+      // Arrange
+      const mockOnChange = jest.fn()
+      const { container } = render(<CheckboxWithLabel {...defaultProps} isChecked={true} onChange={mockOnChange} />)
+
+      // Act
+      const checkbox = container.querySelector('[data-testid^="checkbox"]')!
+      fireEvent.click(checkbox)
+
+      // Assert
+      expect(mockOnChange).toHaveBeenCalledWith(false)
+    })
+
+    it('should not trigger onChange when clicking label text due to custom checkbox', () => {
+      // Arrange
+      const mockOnChange = jest.fn()
+      render(<CheckboxWithLabel {...defaultProps} onChange={mockOnChange} />)
+
+      // Act - Click on the label text element
+      const labelText = screen.getByText('Test Label')
+      fireEvent.click(labelText)
+
+      // Assert - Custom checkbox does not support native label-input click forwarding
+      expect(mockOnChange).not.toHaveBeenCalled()
+    })
+  })
+})
+
+// ==========================================
+// CrawledResultItem Tests
+// ==========================================
+describe('CrawledResultItem', () => {
+  const defaultProps = {
+    payload: createMockCrawlResultItem(),
+    isChecked: false,
+    onCheckChange: jest.fn(),
+    isPreview: false,
+    showPreview: true,
+    onPreview: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      render(<CrawledResultItem {...defaultProps} />)
+
+      // Assert
+      expect(screen.getByText('Test Page Title')).toBeInTheDocument()
+      expect(screen.getByText('https://example.com/page1')).toBeInTheDocument()
+    })
+
+    it('should render checkbox when isMultipleChoice is true', () => {
+      // Arrange & Act
+      const { container } = render(<CrawledResultItem {...defaultProps} isMultipleChoice={true} />)
+
+      // Assert - Custom checkbox uses data-testid
+      const checkbox = container.querySelector('[data-testid^="checkbox"]')
+      expect(checkbox).toBeInTheDocument()
+    })
+
+    it('should render radio when isMultipleChoice is false', () => {
+      // Arrange & Act
+      const { container } = render(<CrawledResultItem {...defaultProps} isMultipleChoice={false} />)
+
+      // Assert - Radio component has size-4 rounded-full classes
+      const radio = container.querySelector('.size-4.rounded-full')
+      expect(radio).toBeInTheDocument()
+    })
+
+    it('should render checkbox as checked when isChecked is true', () => {
+      // Arrange & Act
+      const { container } = render(<CrawledResultItem {...defaultProps} isChecked={true} />)
+
+      // Assert - Checked state shows check icon
+      const checkIcon = container.querySelector('[data-testid^="check-icon"]')
+      expect(checkIcon).toBeInTheDocument()
+    })
+
+    it('should render preview button when showPreview is true', () => {
+      // Arrange & Act
+      render(<CrawledResultItem {...defaultProps} showPreview={true} />)
+
+      // Assert
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should not render preview button when showPreview is false', () => {
+      // Arrange & Act
+      render(<CrawledResultItem {...defaultProps} showPreview={false} />)
+
+      // Assert
+      expect(screen.queryByRole('button')).not.toBeInTheDocument()
+    })
+
+    it('should apply active background when isPreview is true', () => {
+      // Arrange & Act
+      const { container } = render(<CrawledResultItem {...defaultProps} isPreview={true} />)
+
+      // Assert
+      const item = container.firstChild
+      expect(item).toHaveClass('bg-state-base-active')
+    })
+
+    it('should apply hover styles when isPreview is false', () => {
+      // Arrange & Act
+      const { container } = render(<CrawledResultItem {...defaultProps} isPreview={false} />)
+
+      // Assert
+      const item = container.firstChild
+      expect(item).toHaveClass('group')
+      expect(item).toHaveClass('hover:bg-state-base-hover')
+    })
+  })
+
+  describe('Props', () => {
+    it('should display payload title', () => {
+      // Arrange
+      const payload = createMockCrawlResultItem({ title: 'Custom Title' })
+
+      // Act
+      render(<CrawledResultItem {...defaultProps} payload={payload} />)
+
+      // Assert
+      expect(screen.getByText('Custom Title')).toBeInTheDocument()
+    })
+
+    it('should display payload source_url', () => {
+      // Arrange
+      const payload = createMockCrawlResultItem({ source_url: 'https://custom.url/path' })
+
+      // Act
+      render(<CrawledResultItem {...defaultProps} payload={payload} />)
+
+      // Assert
+      expect(screen.getByText('https://custom.url/path')).toBeInTheDocument()
+    })
+
+    it('should set title attribute for truncation tooltip', () => {
+      // Arrange
+      const payload = createMockCrawlResultItem({ title: 'Very Long Title' })
+
+      // Act
+      render(<CrawledResultItem {...defaultProps} payload={payload} />)
+
+      // Assert
+      const titleElement = screen.getByText('Very Long Title')
+      expect(titleElement).toHaveAttribute('title', 'Very Long Title')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onCheckChange with true when clicking unchecked checkbox', () => {
+      // Arrange
+      const mockOnCheckChange = jest.fn()
+      const { container } = render(
+        <CrawledResultItem
+          {...defaultProps}
+          isChecked={false}
+          onCheckChange={mockOnCheckChange}
+        />,
+      )
+
+      // Act
+      const checkbox = container.querySelector('[data-testid^="checkbox"]')!
+      fireEvent.click(checkbox)
+
+      // Assert
+      expect(mockOnCheckChange).toHaveBeenCalledWith(true)
+    })
+
+    it('should call onCheckChange with false when clicking checked checkbox', () => {
+      // Arrange
+      const mockOnCheckChange = jest.fn()
+      const { container } = render(
+        <CrawledResultItem
+          {...defaultProps}
+          isChecked={true}
+          onCheckChange={mockOnCheckChange}
+        />,
+      )
+
+      // Act
+      const checkbox = container.querySelector('[data-testid^="checkbox"]')!
+      fireEvent.click(checkbox)
+
+      // Assert
+      expect(mockOnCheckChange).toHaveBeenCalledWith(false)
+    })
+
+    it('should call onPreview when clicking preview button', () => {
+      // Arrange
+      const mockOnPreview = jest.fn()
+      render(<CrawledResultItem {...defaultProps} onPreview={mockOnPreview} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert
+      expect(mockOnPreview).toHaveBeenCalled()
+    })
+
+    it('should toggle radio state when isMultipleChoice is false', () => {
+      // Arrange
+      const mockOnCheckChange = jest.fn()
+      const { container } = render(
+        <CrawledResultItem
+          {...defaultProps}
+          isMultipleChoice={false}
+          isChecked={false}
+          onCheckChange={mockOnCheckChange}
+        />,
+      )
+
+      // Act - Radio uses size-4 rounded-full classes
+      const radio = container.querySelector('.size-4.rounded-full')!
+      fireEvent.click(radio)
+
+      // Assert
+      expect(mockOnCheckChange).toHaveBeenCalledWith(true)
+    })
+  })
+})
+
+// ==========================================
+// CrawledResult Tests
+// ==========================================
+describe('CrawledResult', () => {
+  const defaultProps = {
+    list: createMockCrawlResultItems(3),
+    checkedList: [] as CrawlResultItemType[],
+    onSelectedChange: jest.fn(),
+    usedTime: 1.5,
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      render(<CrawledResult {...defaultProps} />)
+
+      // Assert - Check for time info which contains total count
+      expect(screen.getByText(/1.5/)).toBeInTheDocument()
+    })
+
+    it('should render all list items', () => {
+      // Arrange & Act
+      render(<CrawledResult {...defaultProps} />)
+
+      // Assert
+      expect(screen.getByText('Page 1')).toBeInTheDocument()
+      expect(screen.getByText('Page 2')).toBeInTheDocument()
+      expect(screen.getByText('Page 3')).toBeInTheDocument()
+    })
+
+    it('should display scrape time info', () => {
+      // Arrange & Act
+      render(<CrawledResult {...defaultProps} usedTime={2.5} />)
+
+      // Assert - Check for the time display
+      expect(screen.getByText(/2.5/)).toBeInTheDocument()
+    })
+
+    it('should render select all checkbox when isMultipleChoice is true', () => {
+      // Arrange & Act
+      const { container } = render(<CrawledResult {...defaultProps} isMultipleChoice={true} />)
+
+      // Assert - Multiple custom checkboxes (select all + items)
+      const checkboxes = container.querySelectorAll('[data-testid^="checkbox"]')
+      expect(checkboxes.length).toBe(4) // 1 select all + 3 items
+    })
+
+    it('should not render select all checkbox when isMultipleChoice is false', () => {
+      // Arrange & Act
+      const { container } = render(<CrawledResult {...defaultProps} isMultipleChoice={false} />)
+
+      // Assert - No select all checkbox, only radio buttons for items
+      const checkboxes = container.querySelectorAll('[data-testid^="checkbox"]')
+      expect(checkboxes.length).toBe(0)
+      // Radio buttons have size-4 and rounded-full classes
+      const radios = container.querySelectorAll('.size-4.rounded-full')
+      expect(radios.length).toBe(3)
+    })
+
+    it('should show "Select All" when not all items are checked', () => {
+      // Arrange & Act
+      render(<CrawledResult {...defaultProps} checkedList={[]} />)
+
+      // Assert
+      expect(screen.getByText(/selectAll|Select All/i)).toBeInTheDocument()
+    })
+
+    it('should show "Reset All" when all items are checked', () => {
+      // Arrange
+      const allChecked = createMockCrawlResultItems(3)
+
+      // Act
+      render(<CrawledResult {...defaultProps} checkedList={allChecked} />)
+
+      // Assert
+      expect(screen.getByText(/resetAll|Reset All/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      // Arrange & Act
+      const { container } = render(
+        <CrawledResult {...defaultProps} className="custom-class" />,
+      )
+
+      // Assert
+      expect(container.firstChild).toHaveClass('custom-class')
+    })
+
+    it('should highlight item at previewIndex', () => {
+      // Arrange & Act
+      const { container } = render(
+        <CrawledResult {...defaultProps} previewIndex={1} />,
+      )
+
+      // Assert - Second item should have active state
+      const items = container.querySelectorAll('[class*="rounded-lg"][class*="cursor-pointer"]')
+      expect(items[1]).toHaveClass('bg-state-base-active')
+    })
+
+    it('should pass showPreview to items', () => {
+      // Arrange & Act
+      render(<CrawledResult {...defaultProps} showPreview={true} />)
+
+      // Assert - Preview buttons should be visible
+      const buttons = screen.getAllByRole('button')
+      expect(buttons.length).toBe(3)
+    })
+
+    it('should not show preview buttons when showPreview is false', () => {
+      // Arrange & Act
+      render(<CrawledResult {...defaultProps} showPreview={false} />)
+
+      // Assert
+      expect(screen.queryByRole('button')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onSelectedChange with all items when clicking select all', () => {
+      // Arrange
+      const mockOnSelectedChange = jest.fn()
+      const list = createMockCrawlResultItems(3)
+      const { container } = render(
+        <CrawledResult
+          {...defaultProps}
+          list={list}
+          checkedList={[]}
+          onSelectedChange={mockOnSelectedChange}
+        />,
+      )
+
+      // Act - Click select all checkbox (first checkbox)
+      const checkboxes = container.querySelectorAll('[data-testid^="checkbox"]')
+      fireEvent.click(checkboxes[0])
+
+      // Assert
+      expect(mockOnSelectedChange).toHaveBeenCalledWith(list)
+    })
+
+    it('should call onSelectedChange with empty array when clicking reset all', () => {
+      // Arrange
+      const mockOnSelectedChange = jest.fn()
+      const list = createMockCrawlResultItems(3)
+      const { container } = render(
+        <CrawledResult
+          {...defaultProps}
+          list={list}
+          checkedList={list}
+          onSelectedChange={mockOnSelectedChange}
+        />,
+      )
+
+      // Act
+      const checkboxes = container.querySelectorAll('[data-testid^="checkbox"]')
+      fireEvent.click(checkboxes[0])
+
+      // Assert
+      expect(mockOnSelectedChange).toHaveBeenCalledWith([])
+    })
+
+    it('should add item to checkedList when checking unchecked item', () => {
+      // Arrange
+      const mockOnSelectedChange = jest.fn()
+      const list = createMockCrawlResultItems(3)
+      const { container } = render(
+        <CrawledResult
+          {...defaultProps}
+          list={list}
+          checkedList={[list[0]]}
+          onSelectedChange={mockOnSelectedChange}
+        />,
+      )
+
+      // Act - Click second item checkbox (index 2, accounting for select all)
+      const checkboxes = container.querySelectorAll('[data-testid^="checkbox"]')
+      fireEvent.click(checkboxes[2])
+
+      // Assert
+      expect(mockOnSelectedChange).toHaveBeenCalledWith([list[0], list[1]])
+    })
+
+    it('should remove item from checkedList when unchecking checked item', () => {
+      // Arrange
+      const mockOnSelectedChange = jest.fn()
+      const list = createMockCrawlResultItems(3)
+      const { container } = render(
+        <CrawledResult
+          {...defaultProps}
+          list={list}
+          checkedList={[list[0], list[1]]}
+          onSelectedChange={mockOnSelectedChange}
+        />,
+      )
+
+      // Act - Uncheck first item (index 1, after select all)
+      const checkboxes = container.querySelectorAll('[data-testid^="checkbox"]')
+      fireEvent.click(checkboxes[1])
+
+      // Assert
+      expect(mockOnSelectedChange).toHaveBeenCalledWith([list[1]])
+    })
+
+    it('should replace selection when checking in single choice mode', () => {
+      // Arrange
+      const mockOnSelectedChange = jest.fn()
+      const list = createMockCrawlResultItems(3)
+      const { container } = render(
+        <CrawledResult
+          {...defaultProps}
+          list={list}
+          checkedList={[list[0]]}
+          onSelectedChange={mockOnSelectedChange}
+          isMultipleChoice={false}
+        />,
+      )
+
+      // Act - Click second item radio (Radio uses size-4 rounded-full classes)
+      const radios = container.querySelectorAll('.size-4.rounded-full')
+      fireEvent.click(radios[1])
+
+      // Assert - Should only select the clicked item
+      expect(mockOnSelectedChange).toHaveBeenCalledWith([list[1]])
+    })
+
+    it('should call onPreview with item and index when clicking preview', () => {
+      // Arrange
+      const mockOnPreview = jest.fn()
+      const list = createMockCrawlResultItems(3)
+      render(
+        <CrawledResult
+          {...defaultProps}
+          list={list}
+          onPreview={mockOnPreview}
+          showPreview={true}
+        />,
+      )
+
+      // Act
+      const buttons = screen.getAllByRole('button')
+      fireEvent.click(buttons[1]) // Second item's preview button
+
+      // Assert
+      expect(mockOnPreview).toHaveBeenCalledWith(list[1], 1)
+    })
+
+    it('should not crash when clicking preview without onPreview callback', () => {
+      // Arrange - showPreview is true but onPreview is undefined
+      const list = createMockCrawlResultItems(3)
+      render(
+        <CrawledResult
+          {...defaultProps}
+          list={list}
+          onPreview={undefined}
+          showPreview={true}
+        />,
+      )
+
+      // Act - Click preview button should trigger early return in handlePreview
+      const buttons = screen.getAllByRole('button')
+      fireEvent.click(buttons[0])
+
+      // Assert - Should not throw error, component still renders
+      expect(screen.getByText('Page 1')).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty list', () => {
+      // Arrange & Act
+      render(<CrawledResult {...defaultProps} list={[]} usedTime={0.5} />)
+
+      // Assert - Should show time info with 0 count
+      expect(screen.getByText(/0.5/)).toBeInTheDocument()
+    })
+
+    it('should handle single item list', () => {
+      // Arrange
+      const singleItem = [createMockCrawlResultItem()]
+
+      // Act
+      render(<CrawledResult {...defaultProps} list={singleItem} />)
+
+      // Assert
+      expect(screen.getByText('Test Page Title')).toBeInTheDocument()
+    })
+
+    it('should format usedTime to one decimal place', () => {
+      // Arrange & Act
+      render(<CrawledResult {...defaultProps} usedTime={1.567} />)
+
+      // Assert
+      expect(screen.getByText(/1.6/)).toBeInTheDocument()
+    })
+  })
+})
+
+// ==========================================
+// Crawling Tests
+// ==========================================
+describe('Crawling', () => {
+  const defaultProps = {
+    crawledNum: 5,
+    totalNum: 10,
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      render(<Crawling {...defaultProps} />)
+
+      // Assert
+      expect(screen.getByText(/5\/10/)).toBeInTheDocument()
+    })
+
+    it('should display crawled count and total', () => {
+      // Arrange & Act
+      render(<Crawling crawledNum={3} totalNum={15} />)
+
+      // Assert
+      expect(screen.getByText(/3\/15/)).toBeInTheDocument()
+    })
+
+    it('should render skeleton items', () => {
+      // Arrange & Act
+      const { container } = render(<Crawling {...defaultProps} />)
+
+      // Assert - Should have 3 skeleton items
+      const skeletonItems = container.querySelectorAll('.px-2.py-\\[5px\\]')
+      expect(skeletonItems.length).toBe(3)
+    })
+
+    it('should render header skeleton block', () => {
+      // Arrange & Act
+      const { container } = render(<Crawling {...defaultProps} />)
+
+      // Assert
+      const headerBlocks = container.querySelectorAll('.px-4.py-2 .bg-text-quaternary')
+      expect(headerBlocks.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      // Arrange & Act
+      const { container } = render(
+        <Crawling {...defaultProps} className="custom-crawling-class" />,
+      )
+
+      // Assert
+      expect(container.firstChild).toHaveClass('custom-crawling-class')
+    })
+
+    it('should handle zero values', () => {
+      // Arrange & Act
+      render(<Crawling crawledNum={0} totalNum={0} />)
+
+      // Assert
+      expect(screen.getByText(/0\/0/)).toBeInTheDocument()
+    })
+
+    it('should handle large numbers', () => {
+      // Arrange & Act
+      render(<Crawling crawledNum={999} totalNum={1000} />)
+
+      // Assert
+      expect(screen.getByText(/999\/1000/)).toBeInTheDocument()
+    })
+  })
+
+  describe('Skeleton Structure', () => {
+    it('should render blocks with correct width classes', () => {
+      // Arrange & Act
+      const { container } = render(<Crawling {...defaultProps} />)
+
+      // Assert - Check for various width classes
+      expect(container.querySelector('.w-\\[35\\%\\]')).toBeInTheDocument()
+      expect(container.querySelector('.w-\\[50\\%\\]')).toBeInTheDocument()
+      expect(container.querySelector('.w-\\[40\\%\\]')).toBeInTheDocument()
+    })
+  })
+})
+
+// ==========================================
+// ErrorMessage Tests
+// ==========================================
+describe('ErrorMessage', () => {
+  const defaultProps = {
+    title: 'Error Title',
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      render(<ErrorMessage {...defaultProps} />)
+
+      // Assert
+      expect(screen.getByText('Error Title')).toBeInTheDocument()
+    })
+
+    it('should render error icon', () => {
+      // Arrange & Act
+      const { container } = render(<ErrorMessage {...defaultProps} />)
+
+      // Assert
+      const icon = container.querySelector('svg')
+      expect(icon).toBeInTheDocument()
+      expect(icon).toHaveClass('text-text-destructive')
+    })
+
+    it('should render title', () => {
+      // Arrange & Act
+      render(<ErrorMessage title="Custom Error Title" />)
+
+      // Assert
+      expect(screen.getByText('Custom Error Title')).toBeInTheDocument()
+    })
+
+    it('should render error message when provided', () => {
+      // Arrange & Act
+      render(<ErrorMessage {...defaultProps} errorMsg="Detailed error description" />)
+
+      // Assert
+      expect(screen.getByText('Detailed error description')).toBeInTheDocument()
+    })
+
+    it('should not render error message when not provided', () => {
+      // Arrange & Act
+      render(<ErrorMessage {...defaultProps} />)
+
+      // Assert - Should only have title, not error message container
+      const textElements = screen.getAllByText(/Error Title/)
+      expect(textElements.length).toBe(1)
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      // Arrange & Act
+      const { container } = render(
+        <ErrorMessage {...defaultProps} className="custom-error-class" />,
+      )
+
+      // Assert
+      expect(container.firstChild).toHaveClass('custom-error-class')
+    })
+
+    it('should render with empty errorMsg', () => {
+      // Arrange & Act
+      render(<ErrorMessage {...defaultProps} errorMsg="" />)
+
+      // Assert - Empty string should not render message div
+      expect(screen.getByText('Error Title')).toBeInTheDocument()
+    })
+
+    it('should handle long title text', () => {
+      // Arrange
+      const longTitle = 'This is a very long error title that might wrap to multiple lines'
+
+      // Act
+      render(<ErrorMessage title={longTitle} />)
+
+      // Assert
+      expect(screen.getByText(longTitle)).toBeInTheDocument()
+    })
+
+    it('should handle long error message', () => {
+      // Arrange
+      const longErrorMsg = 'This is a very detailed error message explaining what went wrong and how to fix it. It contains multiple sentences.'
+
+      // Act
+      render(<ErrorMessage {...defaultProps} errorMsg={longErrorMsg} />)
+
+      // Assert
+      expect(screen.getByText(longErrorMsg)).toBeInTheDocument()
+    })
+  })
+
+  describe('Styling', () => {
+    it('should have error background styling', () => {
+      // Arrange & Act
+      const { container } = render(<ErrorMessage {...defaultProps} />)
+
+      // Assert
+      expect(container.firstChild).toHaveClass('bg-toast-error-bg')
+    })
+
+    it('should have border styling', () => {
+      // Arrange & Act
+      const { container } = render(<ErrorMessage {...defaultProps} />)
+
+      // Assert
+      expect(container.firstChild).toHaveClass('border-components-panel-border')
+    })
+
+    it('should have rounded corners', () => {
+      // Arrange & Act
+      const { container } = render(<ErrorMessage {...defaultProps} />)
+
+      // Assert
+      expect(container.firstChild).toHaveClass('rounded-xl')
+    })
+  })
+})
+
+// ==========================================
+// Integration Tests
+// ==========================================
+describe('Base Components Integration', () => {
+  it('should render CrawledResult with CrawledResultItem children', () => {
+    // Arrange
+    const list = createMockCrawlResultItems(2)
+
+    // Act
+    render(
+      <CrawledResult
+        list={list}
+        checkedList={[]}
+        onSelectedChange={jest.fn()}
+        usedTime={1.0}
+      />,
+    )
+
+    // Assert - Both items should render
+    expect(screen.getByText('Page 1')).toBeInTheDocument()
+    expect(screen.getByText('Page 2')).toBeInTheDocument()
+  })
+
+  it('should render CrawledResult with CheckboxWithLabel for select all', () => {
+    // Arrange
+    const list = createMockCrawlResultItems(2)
+
+    // Act
+    const { container } = render(
+      <CrawledResult
+        list={list}
+        checkedList={[]}
+        onSelectedChange={jest.fn()}
+        usedTime={1.0}
+        isMultipleChoice={true}
+      />,
+    )
+
+    // Assert - Should have select all checkbox + item checkboxes
+    const checkboxes = container.querySelectorAll('[data-testid^="checkbox"]')
+    expect(checkboxes.length).toBe(3) // select all + 2 items
+  })
+
+  it('should allow selecting and previewing items', () => {
+    // Arrange
+    const list = createMockCrawlResultItems(3)
+    const mockOnSelectedChange = jest.fn()
+    const mockOnPreview = jest.fn()
+
+    const { container } = render(
+      <CrawledResult
+        list={list}
+        checkedList={[]}
+        onSelectedChange={mockOnSelectedChange}
+        onPreview={mockOnPreview}
+        showPreview={true}
+        usedTime={1.0}
+      />,
+    )
+
+    // Act - Select first item (index 1, after select all)
+    const checkboxes = container.querySelectorAll('[data-testid^="checkbox"]')
+    fireEvent.click(checkboxes[1])
+
+    // Assert
+    expect(mockOnSelectedChange).toHaveBeenCalledWith([list[0]])
+
+    // Act - Preview second item
+    const previewButtons = screen.getAllByRole('button')
+    fireEvent.click(previewButtons[1])
+
+    // Assert
+    expect(mockOnPreview).toHaveBeenCalledWith(list[1], 1)
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.spec.tsx
new file mode 100644
index 0000000000..01c487c694
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.spec.tsx
@@ -0,0 +1,1128 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import Options from './index'
+import { CrawlStep } from '@/models/datasets'
+import type { RAGPipelineVariables } from '@/models/pipeline'
+import { PipelineInputVarType } from '@/models/pipeline'
+import Toast from '@/app/components/base/toast'
+import { BaseFieldType } from '@/app/components/base/form/form-scenarios/base/types'
+
+// ==========================================
+// Mock Modules
+// ==========================================
+
+// Note: react-i18next uses global mock from web/__mocks__/react-i18next.ts
+
+// Mock useInitialData and useConfigurations hooks
+const mockUseInitialData = jest.fn()
+const mockUseConfigurations = jest.fn()
+jest.mock('@/app/components/rag-pipeline/hooks/use-input-fields', () => ({
+  useInitialData: (...args: any[]) => mockUseInitialData(...args),
+  useConfigurations: (...args: any[]) => mockUseConfigurations(...args),
+}))
+
+// Mock BaseField
+const mockBaseField = jest.fn()
+jest.mock('@/app/components/base/form/form-scenarios/base/field', () => {
+  const MockBaseFieldFactory = (props: any) => {
+    mockBaseField(props)
+    const MockField = ({ form }: { form: any }) => (
+      <div data-testid={`field-${props.config?.variable || 'unknown'}`}>
+        <span data-testid={`field-label-${props.config?.variable}`}>{props.config?.label}</span>
+        <input
+          data-testid={`field-input-${props.config?.variable}`}
+          value={form.getFieldValue?.(props.config?.variable) || ''}
+          onChange={e => form.setFieldValue?.(props.config?.variable, e.target.value)}
+        />
+      </div>
+    )
+    return MockField
+  }
+  return MockBaseFieldFactory
+})
+
+// Mock useAppForm
+const mockHandleSubmit = jest.fn()
+const mockFormValues: Record<string, any> = {}
+jest.mock('@/app/components/base/form', () => ({
+  useAppForm: (options: any) => {
+    const formOptions = options
+    return {
+      handleSubmit: () => {
+        const validationResult = formOptions.validators?.onSubmit?.({ value: mockFormValues })
+        if (!validationResult) {
+          mockHandleSubmit()
+          formOptions.onSubmit?.({ value: mockFormValues })
+        }
+      },
+      getFieldValue: (field: string) => mockFormValues[field],
+      setFieldValue: (field: string, value: any) => {
+        mockFormValues[field] = value
+      },
+    }
+  },
+}))
+
+// ==========================================
+// Test Data Builders
+// ==========================================
+
+const createMockVariable = (overrides?: Partial<RAGPipelineVariables[0]>): RAGPipelineVariables[0] => ({
+  belong_to_node_id: 'node-1',
+  type: PipelineInputVarType.textInput,
+  label: 'Test Label',
+  variable: 'test_variable',
+  max_length: 100,
+  default_value: '',
+  placeholder: 'Enter value',
+  required: true,
+  ...overrides,
+})
+
+const createMockVariables = (count = 1): RAGPipelineVariables => {
+  return Array.from({ length: count }, (_, i) =>
+    createMockVariable({
+      variable: `variable_${i}`,
+      label: `Label ${i}`,
+    }),
+  )
+}
+
+const createMockConfiguration = (overrides?: Partial<any>): any => ({
+  type: BaseFieldType.textInput,
+  variable: 'test_variable',
+  label: 'Test Label',
+  required: true,
+  maxLength: 100,
+  options: [],
+  showConditions: [],
+  placeholder: 'Enter value',
+  ...overrides,
+})
+
+type OptionsProps = React.ComponentProps<typeof Options>
+
+const createDefaultProps = (overrides?: Partial<OptionsProps>): OptionsProps => ({
+  variables: createMockVariables(),
+  step: CrawlStep.init,
+  runDisabled: false,
+  onSubmit: jest.fn(),
+  ...overrides,
+})
+
+// ==========================================
+// Test Suites
+// ==========================================
+describe('Options', () => {
+  let toastNotifySpy: jest.SpyInstance
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+
+    // Spy on Toast.notify instead of mocking the entire module
+    toastNotifySpy = jest.spyOn(Toast, 'notify').mockImplementation(() => ({ clear: jest.fn() }))
+
+    // Reset mock form values
+    Object.keys(mockFormValues).forEach(key => delete mockFormValues[key])
+
+    // Default mock return values - using real generateZodSchema
+    mockUseInitialData.mockReturnValue({})
+    mockUseConfigurations.mockReturnValue([createMockConfiguration()])
+  })
+
+  afterEach(() => {
+    toastNotifySpy.mockRestore()
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<Options {...props} />)
+
+      // Assert
+      expect(container.querySelector('form')).toBeInTheDocument()
+    })
+
+    it('should render options header with toggle text', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Options {...props} />)
+
+      // Assert
+      expect(screen.getByText(/options/i)).toBeInTheDocument()
+    })
+
+    it('should render Run button', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<Options {...props} />)
+
+      // Assert
+      expect(screen.getByRole('button')).toBeInTheDocument()
+      expect(screen.getByText(/run/i)).toBeInTheDocument()
+    })
+
+    it('should render form fields when not folded', () => {
+      // Arrange
+      const configurations = [
+        createMockConfiguration({ variable: 'url', label: 'URL' }),
+        createMockConfiguration({ variable: 'depth', label: 'Depth' }),
+      ]
+      mockUseConfigurations.mockReturnValue(configurations)
+      const props = createDefaultProps()
+
+      // Act
+      render(<Options {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('field-url')).toBeInTheDocument()
+      expect(screen.getByTestId('field-depth')).toBeInTheDocument()
+    })
+
+    it('should render arrow icon in correct orientation when expanded', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<Options {...props} />)
+
+      // Assert - Arrow should not have -rotate-90 class when expanded
+      const arrowIcon = container.querySelector('svg')
+      expect(arrowIcon).toBeInTheDocument()
+      expect(arrowIcon).not.toHaveClass('-rotate-90')
+    })
+  })
+
+  // ==========================================
+  // Props Testing
+  // ==========================================
+  describe('Props', () => {
+    describe('variables prop', () => {
+      it('should pass variables to useInitialData hook', () => {
+        // Arrange
+        const variables = createMockVariables(3)
+        const props = createDefaultProps({ variables })
+
+        // Act
+        render(<Options {...props} />)
+
+        // Assert
+        expect(mockUseInitialData).toHaveBeenCalledWith(variables)
+      })
+
+      it('should pass variables to useConfigurations hook', () => {
+        // Arrange
+        const variables = createMockVariables(2)
+        const props = createDefaultProps({ variables })
+
+        // Act
+        render(<Options {...props} />)
+
+        // Assert
+        expect(mockUseConfigurations).toHaveBeenCalledWith(variables)
+      })
+
+      it('should render correct number of fields based on configurations', () => {
+        // Arrange
+        const configurations = [
+          createMockConfiguration({ variable: 'field_1', label: 'Field 1' }),
+          createMockConfiguration({ variable: 'field_2', label: 'Field 2' }),
+          createMockConfiguration({ variable: 'field_3', label: 'Field 3' }),
+        ]
+        mockUseConfigurations.mockReturnValue(configurations)
+        const props = createDefaultProps()
+
+        // Act
+        render(<Options {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('field-field_1')).toBeInTheDocument()
+        expect(screen.getByTestId('field-field_2')).toBeInTheDocument()
+        expect(screen.getByTestId('field-field_3')).toBeInTheDocument()
+      })
+
+      it('should handle empty variables array', () => {
+        // Arrange
+        mockUseConfigurations.mockReturnValue([])
+        const props = createDefaultProps({ variables: [] })
+
+        // Act
+        const { container } = render(<Options {...props} />)
+
+        // Assert
+        expect(container.querySelector('form')).toBeInTheDocument()
+        expect(screen.queryByTestId(/field-/)).not.toBeInTheDocument()
+      })
+    })
+
+    describe('step prop', () => {
+      it('should show "Run" text when step is init', () => {
+        // Arrange
+        const props = createDefaultProps({ step: CrawlStep.init })
+
+        // Act
+        render(<Options {...props} />)
+
+        // Assert
+        expect(screen.getByText(/run/i)).toBeInTheDocument()
+      })
+
+      it('should show "Running" text when step is running', () => {
+        // Arrange
+        const props = createDefaultProps({ step: CrawlStep.running })
+
+        // Act
+        render(<Options {...props} />)
+
+        // Assert
+        expect(screen.getByText(/running/i)).toBeInTheDocument()
+      })
+
+      it('should disable button when step is running', () => {
+        // Arrange
+        const props = createDefaultProps({ step: CrawlStep.running })
+
+        // Act
+        render(<Options {...props} />)
+
+        // Assert
+        expect(screen.getByRole('button')).toBeDisabled()
+      })
+
+      it('should enable button when step is finished', () => {
+        // Arrange
+        const props = createDefaultProps({ step: CrawlStep.finished, runDisabled: false })
+
+        // Act
+        render(<Options {...props} />)
+
+        // Assert
+        expect(screen.getByRole('button')).not.toBeDisabled()
+      })
+
+      it('should show loading state on button when step is running', () => {
+        // Arrange
+        const props = createDefaultProps({ step: CrawlStep.running })
+
+        // Act
+        render(<Options {...props} />)
+
+        // Assert - Button should have loading prop which disables it
+        const button = screen.getByRole('button')
+        expect(button).toBeDisabled()
+      })
+    })
+
+    describe('runDisabled prop', () => {
+      it('should disable button when runDisabled is true', () => {
+        // Arrange
+        const props = createDefaultProps({ runDisabled: true })
+
+        // Act
+        render(<Options {...props} />)
+
+        // Assert
+        expect(screen.getByRole('button')).toBeDisabled()
+      })
+
+      it('should enable button when runDisabled is false and step is not running', () => {
+        // Arrange
+        const props = createDefaultProps({ runDisabled: false, step: CrawlStep.init })
+
+        // Act
+        render(<Options {...props} />)
+
+        // Assert
+        expect(screen.getByRole('button')).not.toBeDisabled()
+      })
+
+      it('should disable button when both runDisabled is true and step is running', () => {
+        // Arrange
+        const props = createDefaultProps({ runDisabled: true, step: CrawlStep.running })
+
+        // Act
+        render(<Options {...props} />)
+
+        // Assert
+        expect(screen.getByRole('button')).toBeDisabled()
+      })
+
+      it('should default runDisabled to undefined (falsy)', () => {
+        // Arrange
+        const props = createDefaultProps()
+        delete (props as any).runDisabled
+
+        // Act
+        render(<Options {...props} />)
+
+        // Assert
+        expect(screen.getByRole('button')).not.toBeDisabled()
+      })
+    })
+
+    describe('onSubmit prop', () => {
+      it('should call onSubmit when form is submitted successfully', () => {
+        // Arrange - Use non-required field so validation passes
+        const config = createMockConfiguration({
+          variable: 'optional_field',
+          required: false,
+          type: BaseFieldType.textInput,
+        })
+        mockUseConfigurations.mockReturnValue([config])
+        const mockOnSubmit = jest.fn()
+        const props = createDefaultProps({ onSubmit: mockOnSubmit })
+
+        // Act
+        render(<Options {...props} />)
+        fireEvent.click(screen.getByRole('button'))
+
+        // Assert
+        expect(mockOnSubmit).toHaveBeenCalled()
+      })
+
+      it('should not call onSubmit when validation fails', () => {
+        // Arrange
+        const mockOnSubmit = jest.fn()
+        // Create a required field configuration
+        const requiredConfig = createMockConfiguration({
+          variable: 'url',
+          label: 'URL',
+          required: true,
+          type: BaseFieldType.textInput,
+        })
+        mockUseConfigurations.mockReturnValue([requiredConfig])
+        // mockFormValues is empty, so required field validation will fail
+        const props = createDefaultProps({ onSubmit: mockOnSubmit })
+
+        // Act
+        render(<Options {...props} />)
+        fireEvent.click(screen.getByRole('button'))
+
+        // Assert
+        expect(mockOnSubmit).not.toHaveBeenCalled()
+      })
+
+      it('should pass form values to onSubmit', () => {
+        // Arrange - Use non-required fields so validation passes
+        const configs = [
+          createMockConfiguration({ variable: 'url', required: false, type: BaseFieldType.textInput }),
+          createMockConfiguration({ variable: 'depth', required: false, type: BaseFieldType.numberInput }),
+        ]
+        mockUseConfigurations.mockReturnValue(configs)
+        mockFormValues.url = 'https://example.com'
+        mockFormValues.depth = 2
+        const mockOnSubmit = jest.fn()
+        const props = createDefaultProps({ onSubmit: mockOnSubmit })
+
+        // Act
+        render(<Options {...props} />)
+        fireEvent.click(screen.getByRole('button'))
+
+        // Assert
+        expect(mockOnSubmit).toHaveBeenCalledWith({ url: 'https://example.com', depth: 2 })
+      })
+    })
+  })
+
+  // ==========================================
+  // Side Effects and Cleanup (useEffect)
+  // ==========================================
+  describe('Side Effects and Cleanup', () => {
+    it('should expand options when step changes to init', () => {
+      // Arrange
+      const props = createDefaultProps({ step: CrawlStep.finished })
+      const { rerender, container } = render(<Options {...props} />)
+
+      // Act - Change step to init
+      rerender(<Options {...props} step={CrawlStep.init} />)
+
+      // Assert - Fields should be visible (expanded)
+      expect(screen.getByTestId('field-test_variable')).toBeInTheDocument()
+      const arrowIcon = container.querySelector('svg')
+      expect(arrowIcon).not.toHaveClass('-rotate-90')
+    })
+
+    it('should collapse options when step changes to running', () => {
+      // Arrange
+      const props = createDefaultProps({ step: CrawlStep.init })
+      const { rerender, container } = render(<Options {...props} />)
+
+      // Assert - Initially expanded
+      expect(screen.getByTestId('field-test_variable')).toBeInTheDocument()
+
+      // Act - Change step to running
+      rerender(<Options {...props} step={CrawlStep.running} />)
+
+      // Assert - Should collapse (fields hidden, arrow rotated)
+      expect(screen.queryByTestId('field-test_variable')).not.toBeInTheDocument()
+      const arrowIcon = container.querySelector('svg')
+      expect(arrowIcon).toHaveClass('-rotate-90')
+    })
+
+    it('should collapse options when step changes to finished', () => {
+      // Arrange
+      const props = createDefaultProps({ step: CrawlStep.init })
+      const { rerender, container } = render(<Options {...props} />)
+
+      // Act - Change step to finished
+      rerender(<Options {...props} step={CrawlStep.finished} />)
+
+      // Assert - Should collapse
+      expect(screen.queryByTestId('field-test_variable')).not.toBeInTheDocument()
+      const arrowIcon = container.querySelector('svg')
+      expect(arrowIcon).toHaveClass('-rotate-90')
+    })
+
+    it('should respond to step transitions from init -> running -> finished', () => {
+      // Arrange
+      const props = createDefaultProps({ step: CrawlStep.init })
+      const { rerender, container } = render(<Options {...props} />)
+
+      // Assert - Initially expanded
+      expect(screen.getByTestId('field-test_variable')).toBeInTheDocument()
+
+      // Act - Transition to running
+      rerender(<Options {...props} step={CrawlStep.running} />)
+
+      // Assert - Collapsed
+      expect(screen.queryByTestId('field-test_variable')).not.toBeInTheDocument()
+      let arrowIcon = container.querySelector('svg')
+      expect(arrowIcon).toHaveClass('-rotate-90')
+
+      // Act - Transition to finished
+      rerender(<Options {...props} step={CrawlStep.finished} />)
+
+      // Assert - Still collapsed
+      expect(screen.queryByTestId('field-test_variable')).not.toBeInTheDocument()
+      arrowIcon = container.querySelector('svg')
+      expect(arrowIcon).toHaveClass('-rotate-90')
+    })
+
+    it('should expand when step transitions from finished to init', () => {
+      // Arrange
+      const props = createDefaultProps({ step: CrawlStep.finished })
+      const { rerender } = render(<Options {...props} />)
+
+      // Assert - Initially collapsed when finished
+      expect(screen.queryByTestId('field-test_variable')).not.toBeInTheDocument()
+
+      // Act - Transition back to init
+      rerender(<Options {...props} step={CrawlStep.init} />)
+
+      // Assert - Should expand
+      expect(screen.getByTestId('field-test_variable')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Memoization Logic and Dependencies
+  // ==========================================
+  describe('Memoization Logic and Dependencies', () => {
+    it('should regenerate schema when configurations change', () => {
+      // Arrange
+      const config1 = [createMockConfiguration({ variable: 'url' })]
+      const config2 = [createMockConfiguration({ variable: 'depth' })]
+      mockUseConfigurations.mockReturnValue(config1)
+      const props = createDefaultProps()
+      const { rerender } = render(<Options {...props} />)
+
+      // Assert - First render creates schema
+      expect(screen.getByTestId('field-url')).toBeInTheDocument()
+
+      // Act - Change configurations
+      mockUseConfigurations.mockReturnValue(config2)
+      rerender(<Options {...props} variables={createMockVariables(2)} />)
+
+      // Assert - New field is rendered with new schema
+      expect(screen.getByTestId('field-depth')).toBeInTheDocument()
+    })
+
+    it('should compute isRunning correctly for init step', () => {
+      // Arrange
+      const props = createDefaultProps({ step: CrawlStep.init })
+
+      // Act
+      render(<Options {...props} />)
+
+      // Assert - Button should not be in loading state
+      const button = screen.getByRole('button')
+      expect(button).not.toBeDisabled()
+      expect(screen.getByText(/run/i)).toBeInTheDocument()
+    })
+
+    it('should compute isRunning correctly for running step', () => {
+      // Arrange
+      const props = createDefaultProps({ step: CrawlStep.running })
+
+      // Act
+      render(<Options {...props} />)
+
+      // Assert - Button should be in loading state
+      const button = screen.getByRole('button')
+      expect(button).toBeDisabled()
+      expect(screen.getByText(/running/i)).toBeInTheDocument()
+    })
+
+    it('should compute isRunning correctly for finished step', () => {
+      // Arrange
+      const props = createDefaultProps({ step: CrawlStep.finished })
+
+      // Act
+      render(<Options {...props} />)
+
+      // Assert - Button should not be in loading state
+      expect(screen.getByText(/run/i)).toBeInTheDocument()
+    })
+
+    it('should use memoized schema for validation', () => {
+      // Arrange - Use real generateZodSchema with valid configuration
+      const config = createMockConfiguration({
+        variable: 'test_field',
+        required: false, // Not required so validation passes with empty value
+      })
+      mockUseConfigurations.mockReturnValue([config])
+      const mockOnSubmit = jest.fn()
+      const props = createDefaultProps({ onSubmit: mockOnSubmit })
+      render(<Options {...props} />)
+
+      // Act - Trigger validation via submit
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert - onSubmit should be called if validation passes
+      expect(mockOnSubmit).toHaveBeenCalled()
+    })
+  })
+
+  // ==========================================
+  // User Interactions and Event Handlers
+  // ==========================================
+  describe('User Interactions and Event Handlers', () => {
+    it('should toggle fold state when header is clicked', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<Options {...props} />)
+
+      // Assert - Initially expanded
+      expect(screen.getByTestId('field-test_variable')).toBeInTheDocument()
+
+      // Act - Click to fold
+      fireEvent.click(screen.getByText(/options/i))
+
+      // Assert - Should be folded
+      expect(screen.queryByTestId('field-test_variable')).not.toBeInTheDocument()
+
+      // Act - Click to unfold
+      fireEvent.click(screen.getByText(/options/i))
+
+      // Assert - Should be expanded again
+      expect(screen.getByTestId('field-test_variable')).toBeInTheDocument()
+    })
+
+    it('should prevent default and stop propagation on form submit', () => {
+      // Arrange
+      const props = createDefaultProps()
+      const { container } = render(<Options {...props} />)
+
+      // Act
+      const form = container.querySelector('form')!
+      const mockPreventDefault = jest.fn()
+      const mockStopPropagation = jest.fn()
+
+      fireEvent.submit(form, {
+        preventDefault: mockPreventDefault,
+        stopPropagation: mockStopPropagation,
+      })
+
+      // Assert - The form element handles submit event
+      expect(form).toBeInTheDocument()
+    })
+
+    it('should trigger form submit when button is clicked', () => {
+      // Arrange - Use non-required field so validation passes
+      const config = createMockConfiguration({
+        variable: 'optional_field',
+        required: false,
+        type: BaseFieldType.textInput,
+      })
+      mockUseConfigurations.mockReturnValue([config])
+      const mockOnSubmit = jest.fn()
+      const props = createDefaultProps({ onSubmit: mockOnSubmit })
+      render(<Options {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert
+      expect(mockOnSubmit).toHaveBeenCalled()
+    })
+
+    it('should not trigger submit when button is disabled', () => {
+      // Arrange
+      const mockOnSubmit = jest.fn()
+      const props = createDefaultProps({ onSubmit: mockOnSubmit, runDisabled: true })
+      render(<Options {...props} />)
+
+      // Act - Try to click disabled button
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert
+      expect(mockOnSubmit).not.toHaveBeenCalled()
+    })
+
+    it('should maintain fold state after form submission', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<Options {...props} />)
+
+      // Assert - Initially expanded
+      expect(screen.getByTestId('field-test_variable')).toBeInTheDocument()
+
+      // Act - Submit form
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert - Should still be expanded (unless step changes)
+      expect(screen.getByTestId('field-test_variable')).toBeInTheDocument()
+    })
+
+    it('should allow clicking on arrow icon container to toggle', () => {
+      // Arrange
+      const props = createDefaultProps()
+      const { container } = render(<Options {...props} />)
+
+      // Assert - Initially expanded
+      expect(screen.getByTestId('field-test_variable')).toBeInTheDocument()
+
+      // Act - Click on the toggle container (parent of the options text and arrow)
+      const toggleContainer = container.querySelector('.cursor-pointer')
+      fireEvent.click(toggleContainer!)
+
+      // Assert - Should be folded
+      expect(screen.queryByTestId('field-test_variable')).not.toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Edge Cases and Error Handling
+  // ==========================================
+  describe('Edge Cases and Error Handling', () => {
+    it('should handle validation error and show toast', () => {
+      // Arrange - Create required field that will fail validation when empty
+      const requiredConfig = createMockConfiguration({
+        variable: 'url',
+        label: 'URL',
+        required: true,
+        type: BaseFieldType.textInput,
+      })
+      mockUseConfigurations.mockReturnValue([requiredConfig])
+      // mockFormValues.url is undefined, so validation will fail
+      const props = createDefaultProps()
+      render(<Options {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert - Toast should be called with error message
+      expect(toastNotifySpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'error',
+        }),
+      )
+    })
+
+    it('should handle validation error and display field name in message', () => {
+      // Arrange - Create required field that will fail validation
+      const requiredConfig = createMockConfiguration({
+        variable: 'email_address',
+        label: 'Email Address',
+        required: true,
+        type: BaseFieldType.textInput,
+      })
+      mockUseConfigurations.mockReturnValue([requiredConfig])
+      const props = createDefaultProps()
+      render(<Options {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert - Toast message should contain field path
+      expect(toastNotifySpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'error',
+          message: expect.stringContaining('email_address'),
+        }),
+      )
+    })
+
+    it('should handle empty variables gracefully', () => {
+      // Arrange
+      mockUseConfigurations.mockReturnValue([])
+      const props = createDefaultProps({ variables: [] })
+
+      // Act
+      const { container } = render(<Options {...props} />)
+
+      // Assert - Should render without errors
+      expect(container.querySelector('form')).toBeInTheDocument()
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should handle single variable configuration', () => {
+      // Arrange
+      const singleConfig = [createMockConfiguration({ variable: 'only_field' })]
+      mockUseConfigurations.mockReturnValue(singleConfig)
+      const props = createDefaultProps()
+
+      // Act
+      render(<Options {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('field-only_field')).toBeInTheDocument()
+    })
+
+    it('should handle many configurations', () => {
+      // Arrange
+      const manyConfigs = Array.from({ length: 10 }, (_, i) =>
+        createMockConfiguration({ variable: `field_${i}`, label: `Field ${i}` }),
+      )
+      mockUseConfigurations.mockReturnValue(manyConfigs)
+      const props = createDefaultProps()
+
+      // Act
+      render(<Options {...props} />)
+
+      // Assert
+      for (let i = 0; i < 10; i++)
+        expect(screen.getByTestId(`field-field_${i}`)).toBeInTheDocument()
+    })
+
+    it('should handle validation with multiple required fields (shows first error)', () => {
+      // Arrange - Multiple required fields
+      const configs = [
+        createMockConfiguration({ variable: 'url', label: 'URL', required: true, type: BaseFieldType.textInput }),
+        createMockConfiguration({ variable: 'depth', label: 'Depth', required: true, type: BaseFieldType.textInput }),
+      ]
+      mockUseConfigurations.mockReturnValue(configs)
+      const props = createDefaultProps()
+      render(<Options {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert - Toast should be called once (only first error)
+      expect(toastNotifySpy).toHaveBeenCalledTimes(1)
+      expect(toastNotifySpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'error',
+        }),
+      )
+    })
+
+    it('should handle validation pass when all required fields have values', () => {
+      // Arrange
+      const requiredConfig = createMockConfiguration({
+        variable: 'url',
+        label: 'URL',
+        required: true,
+        type: BaseFieldType.textInput,
+      })
+      mockUseConfigurations.mockReturnValue([requiredConfig])
+      mockFormValues.url = 'https://example.com' // Provide valid value
+      const mockOnSubmit = jest.fn()
+      const props = createDefaultProps({ onSubmit: mockOnSubmit })
+      render(<Options {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert - No toast error, onSubmit called
+      expect(toastNotifySpy).not.toHaveBeenCalled()
+      expect(mockOnSubmit).toHaveBeenCalled()
+    })
+
+    it('should handle undefined variables gracefully', () => {
+      // Arrange
+      mockUseInitialData.mockReturnValue({})
+      mockUseConfigurations.mockReturnValue([])
+      const props = createDefaultProps({ variables: undefined as any })
+
+      // Act & Assert - Should not throw
+      expect(() => render(<Options {...props} />)).not.toThrow()
+    })
+
+    it('should handle rapid fold/unfold toggling', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<Options {...props} />)
+
+      // Act - Toggle rapidly multiple times
+      const toggleText = screen.getByText(/options/i)
+      for (let i = 0; i < 5; i++)
+        fireEvent.click(toggleText)
+
+      // Assert - Final state should be folded (odd number of clicks)
+      expect(screen.queryByTestId('field-test_variable')).not.toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // All Prop Variations
+  // ==========================================
+  describe('Prop Variations', () => {
+    it.each([
+      [{ step: CrawlStep.init, runDisabled: false }, false, 'run'],
+      [{ step: CrawlStep.init, runDisabled: true }, true, 'run'],
+      [{ step: CrawlStep.running, runDisabled: false }, true, 'running'],
+      [{ step: CrawlStep.running, runDisabled: true }, true, 'running'],
+      [{ step: CrawlStep.finished, runDisabled: false }, false, 'run'],
+      [{ step: CrawlStep.finished, runDisabled: true }, true, 'run'],
+    ] as const)('should render correctly with step=%s, runDisabled=%s', (propVariation, expectedDisabled, expectedText) => {
+      // Arrange
+      const props = createDefaultProps(propVariation)
+
+      // Act
+      render(<Options {...props} />)
+
+      // Assert
+      const button = screen.getByRole('button')
+      if (expectedDisabled)
+        expect(button).toBeDisabled()
+      else
+        expect(button).not.toBeDisabled()
+
+      expect(screen.getByText(new RegExp(expectedText, 'i'))).toBeInTheDocument()
+    })
+
+    it('should handle all CrawlStep values', () => {
+      // Arrange & Act & Assert
+      Object.values(CrawlStep).forEach((step) => {
+        const props = createDefaultProps({ step })
+        const { unmount, container } = render(<Options {...props} />)
+        expect(container.querySelector('form')).toBeInTheDocument()
+        unmount()
+      })
+    })
+
+    it('should handle variables with different types', () => {
+      // Arrange
+      const variables: RAGPipelineVariables = [
+        createMockVariable({ type: PipelineInputVarType.textInput, variable: 'text_field' }),
+        createMockVariable({ type: PipelineInputVarType.paragraph, variable: 'paragraph_field' }),
+        createMockVariable({ type: PipelineInputVarType.number, variable: 'number_field' }),
+        createMockVariable({ type: PipelineInputVarType.checkbox, variable: 'checkbox_field' }),
+        createMockVariable({ type: PipelineInputVarType.select, variable: 'select_field' }),
+      ]
+      const configurations = variables.map(v => createMockConfiguration({ variable: v.variable }))
+      mockUseConfigurations.mockReturnValue(configurations)
+      const props = createDefaultProps({ variables })
+
+      // Act
+      render(<Options {...props} />)
+
+      // Assert
+      variables.forEach((v) => {
+        expect(screen.getByTestId(`field-${v.variable}`)).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ==========================================
+  // Form Validation
+  // ==========================================
+  describe('Form Validation', () => {
+    it('should pass validation with valid data', () => {
+      // Arrange - Use non-required field so empty value passes
+      const config = createMockConfiguration({
+        variable: 'optional_field',
+        required: false,
+        type: BaseFieldType.textInput,
+      })
+      mockUseConfigurations.mockReturnValue([config])
+      const mockOnSubmit = jest.fn()
+      const props = createDefaultProps({ onSubmit: mockOnSubmit })
+      render(<Options {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert
+      expect(mockOnSubmit).toHaveBeenCalled()
+      expect(toastNotifySpy).not.toHaveBeenCalled()
+    })
+
+    it('should fail validation with invalid data', () => {
+      // Arrange - Required field with empty value
+      const config = createMockConfiguration({
+        variable: 'url',
+        label: 'URL',
+        required: true,
+        type: BaseFieldType.textInput,
+      })
+      mockUseConfigurations.mockReturnValue([config])
+      const mockOnSubmit = jest.fn()
+      const props = createDefaultProps({ onSubmit: mockOnSubmit })
+      render(<Options {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert
+      expect(mockOnSubmit).not.toHaveBeenCalled()
+      expect(toastNotifySpy).toHaveBeenCalled()
+    })
+
+    it('should show error toast message when validation fails', () => {
+      // Arrange - Required field with empty value
+      const config = createMockConfiguration({
+        variable: 'my_field',
+        label: 'My Field',
+        required: true,
+        type: BaseFieldType.textInput,
+      })
+      mockUseConfigurations.mockReturnValue([config])
+      const props = createDefaultProps()
+      render(<Options {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert
+      expect(toastNotifySpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'error',
+          message: expect.any(String),
+        }),
+      )
+    })
+  })
+
+  // ==========================================
+  // Styling Tests
+  // ==========================================
+  describe('Styling', () => {
+    it('should apply correct container classes to form', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<Options {...props} />)
+
+      // Assert
+      const form = container.querySelector('form')
+      expect(form).toHaveClass('w-full')
+    })
+
+    it('should apply cursor-pointer class to toggle container', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<Options {...props} />)
+
+      // Assert
+      const toggleContainer = container.querySelector('.cursor-pointer')
+      expect(toggleContainer).toBeInTheDocument()
+    })
+
+    it('should apply select-none class to prevent text selection on toggle', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<Options {...props} />)
+
+      // Assert
+      const toggleContainer = container.querySelector('.select-none')
+      expect(toggleContainer).toBeInTheDocument()
+    })
+
+    it('should apply rotate class to arrow icon when folded', () => {
+      // Arrange
+      const props = createDefaultProps()
+      const { container } = render(<Options {...props} />)
+
+      // Act - Fold the options
+      fireEvent.click(screen.getByText(/options/i))
+
+      // Assert
+      const arrowIcon = container.querySelector('svg')
+      expect(arrowIcon).toHaveClass('-rotate-90')
+    })
+
+    it('should not apply rotate class to arrow icon when expanded', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<Options {...props} />)
+
+      // Assert
+      const arrowIcon = container.querySelector('svg')
+      expect(arrowIcon).not.toHaveClass('-rotate-90')
+    })
+
+    it('should apply border class to fields container when expanded', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<Options {...props} />)
+
+      // Assert
+      const fieldsContainer = container.querySelector('.border-t')
+      expect(fieldsContainer).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // BaseField Integration
+  // ==========================================
+  describe('BaseField Integration', () => {
+    it('should pass correct props to BaseField factory', () => {
+      // Arrange
+      const config = createMockConfiguration({ variable: 'test_var', label: 'Test Label' })
+      mockUseConfigurations.mockReturnValue([config])
+      mockUseInitialData.mockReturnValue({ test_var: 'default_value' })
+      const props = createDefaultProps()
+
+      // Act
+      render(<Options {...props} />)
+
+      // Assert
+      expect(mockBaseField).toHaveBeenCalledWith(
+        expect.objectContaining({
+          initialData: { test_var: 'default_value' },
+          config,
+        }),
+      )
+    })
+
+    it('should render unique key for each field', () => {
+      // Arrange
+      const configurations = [
+        createMockConfiguration({ variable: 'field_a' }),
+        createMockConfiguration({ variable: 'field_b' }),
+        createMockConfiguration({ variable: 'field_c' }),
+      ]
+      mockUseConfigurations.mockReturnValue(configurations)
+      const props = createDefaultProps()
+
+      // Act
+      render(<Options {...props} />)
+
+      // Assert - All fields should be rendered (React would warn if keys aren't unique)
+      expect(screen.getByTestId('field-field_a')).toBeInTheDocument()
+      expect(screen.getByTestId('field-field_b')).toBeInTheDocument()
+      expect(screen.getByTestId('field-field_c')).toBeInTheDocument()
+    })
+  })
+})
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 56dab28815..118a83185c 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
@@ -2,7 +2,7 @@ import Button from '@/app/components/base/button'
 import { useAppForm } from '@/app/components/base/form'
 import BaseField from '@/app/components/base/form/form-scenarios/base/field'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiPlayLargeLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useEffect, useMemo } from 'react'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/index.spec.tsx
new file mode 100644
index 0000000000..8e28a43b2e
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/index.spec.tsx
@@ -0,0 +1,1497 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import WebsiteCrawl from './index'
+import type { CrawlResultItem } from '@/models/datasets'
+import { CrawlStep } from '@/models/datasets'
+import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
+
+// ==========================================
+// Mock Modules
+// ==========================================
+
+// Note: react-i18next uses global mock from web/__mocks__/react-i18next.ts
+
+// Mock useDocLink - context hook requires mocking
+const mockDocLink = jest.fn((path?: string) => `https://docs.example.com${path || ''}`)
+jest.mock('@/context/i18n', () => ({
+  useDocLink: () => mockDocLink,
+}))
+
+// Mock dataset-detail context - context provider requires mocking
+let mockPipelineId: string | undefined = 'pipeline-123'
+jest.mock('@/context/dataset-detail', () => ({
+  useDatasetDetailContextWithSelector: (selector: (s: any) => any) => selector({ dataset: { pipeline_id: mockPipelineId } }),
+}))
+
+// Mock modal context - context provider requires mocking
+const mockSetShowAccountSettingModal = jest.fn()
+jest.mock('@/context/modal-context', () => ({
+  useModalContextSelector: (selector: (s: any) => any) => selector({ setShowAccountSettingModal: mockSetShowAccountSettingModal }),
+}))
+
+// Mock ssePost - API service requires mocking
+const mockSsePost = jest.fn()
+jest.mock('@/service/base', () => ({
+  ssePost: (...args: any[]) => mockSsePost(...args),
+}))
+
+// Mock useGetDataSourceAuth - API service hook requires mocking
+const mockUseGetDataSourceAuth = jest.fn()
+jest.mock('@/service/use-datasource', () => ({
+  useGetDataSourceAuth: (params: any) => mockUseGetDataSourceAuth(params),
+}))
+
+// Mock usePipeline hooks - API service hooks require mocking
+const mockUseDraftPipelinePreProcessingParams = jest.fn()
+const mockUsePublishedPipelinePreProcessingParams = jest.fn()
+jest.mock('@/service/use-pipeline', () => ({
+  useDraftPipelinePreProcessingParams: (...args: any[]) => mockUseDraftPipelinePreProcessingParams(...args),
+  usePublishedPipelinePreProcessingParams: (...args: any[]) => mockUsePublishedPipelinePreProcessingParams(...args),
+}))
+
+// Note: zustand/react/shallow useShallow is imported directly (simple utility function)
+
+// Mock store
+const mockStoreState = {
+  crawlResult: undefined as { data: CrawlResultItem[]; time_consuming: number | string } | undefined,
+  step: CrawlStep.init,
+  websitePages: [] as CrawlResultItem[],
+  previewIndex: -1,
+  currentCredentialId: '',
+  setWebsitePages: jest.fn(),
+  setCurrentWebsite: jest.fn(),
+  setPreviewIndex: jest.fn(),
+  setStep: jest.fn(),
+  setCrawlResult: jest.fn(),
+}
+
+const mockGetState = jest.fn(() => mockStoreState)
+const mockDataSourceStore = { getState: mockGetState }
+
+jest.mock('../store', () => ({
+  useDataSourceStoreWithSelector: (selector: (s: any) => any) => selector(mockStoreState),
+  useDataSourceStore: () => mockDataSourceStore,
+}))
+
+// Mock Header component
+jest.mock('../base/header', () => {
+  const MockHeader = (props: any) => (
+    <div data-testid="header">
+      <span data-testid="header-doc-title">{props.docTitle}</span>
+      <span data-testid="header-doc-link">{props.docLink}</span>
+      <span data-testid="header-plugin-name">{props.pluginName}</span>
+      <span data-testid="header-credential-id">{props.currentCredentialId}</span>
+      <button data-testid="header-config-btn" onClick={props.onClickConfiguration}>Configure</button>
+      <button data-testid="header-credential-change" onClick={() => props.onCredentialChange('new-cred-id')}>Change Credential</button>
+      <span data-testid="header-credentials-count">{props.credentials?.length || 0}</span>
+    </div>
+  )
+  return MockHeader
+})
+
+// Mock Options component
+const mockOptionsSubmit = jest.fn()
+jest.mock('./base/options', () => {
+  const MockOptions = (props: any) => (
+    <div data-testid="options">
+      <span data-testid="options-step">{props.step}</span>
+      <span data-testid="options-run-disabled">{String(props.runDisabled)}</span>
+      <span data-testid="options-variables-count">{props.variables?.length || 0}</span>
+      <button
+        data-testid="options-submit-btn"
+        onClick={() => {
+          mockOptionsSubmit()
+          props.onSubmit({ url: 'https://example.com', depth: 2 })
+        }}
+      >
+        Submit
+      </button>
+    </div>
+  )
+  return MockOptions
+})
+
+// Mock Crawling component
+jest.mock('./base/crawling', () => {
+  const MockCrawling = (props: any) => (
+    <div data-testid="crawling">
+      <span data-testid="crawling-crawled-num">{props.crawledNum}</span>
+      <span data-testid="crawling-total-num">{props.totalNum}</span>
+    </div>
+  )
+  return MockCrawling
+})
+
+// Mock ErrorMessage component
+jest.mock('./base/error-message', () => {
+  const MockErrorMessage = (props: any) => (
+    <div data-testid="error-message" className={props.className}>
+      <span data-testid="error-title">{props.title}</span>
+      <span data-testid="error-msg">{props.errorMsg}</span>
+    </div>
+  )
+  return MockErrorMessage
+})
+
+// Mock CrawledResult component
+jest.mock('./base/crawled-result', () => {
+  const MockCrawledResult = (props: any) => (
+    <div data-testid="crawled-result" className={props.className}>
+      <span data-testid="crawled-result-count">{props.list?.length || 0}</span>
+      <span data-testid="crawled-result-checked-count">{props.checkedList?.length || 0}</span>
+      <span data-testid="crawled-result-used-time">{props.usedTime}</span>
+      <span data-testid="crawled-result-preview-index">{props.previewIndex}</span>
+      <span data-testid="crawled-result-show-preview">{String(props.showPreview)}</span>
+      <span data-testid="crawled-result-multiple-choice">{String(props.isMultipleChoice)}</span>
+      <button
+        data-testid="crawled-result-select-change"
+        onClick={() => props.onSelectedChange([{ source_url: 'https://example.com', title: 'Test' }])}
+      >
+        Change Selection
+      </button>
+      <button
+        data-testid="crawled-result-preview"
+        onClick={() => props.onPreview?.({ source_url: 'https://example.com', title: 'Test' }, 0)}
+      >
+        Preview
+      </button>
+    </div>
+  )
+  return MockCrawledResult
+})
+
+// ==========================================
+// Test Data Builders
+// ==========================================
+const createMockNodeData = (overrides?: Partial<DataSourceNodeType>): DataSourceNodeType => ({
+  title: 'Test Node',
+  plugin_id: 'plugin-123',
+  provider_type: 'website',
+  provider_name: 'website-provider',
+  datasource_name: 'website-ds',
+  datasource_label: 'Website Crawler',
+  datasource_parameters: {},
+  datasource_configurations: {},
+  ...overrides,
+} as DataSourceNodeType)
+
+const createMockCrawlResultItem = (overrides?: Partial<CrawlResultItem>): CrawlResultItem => ({
+  source_url: 'https://example.com/page1',
+  title: 'Test Page 1',
+  markdown: '# Test content',
+  description: 'Test description',
+  ...overrides,
+})
+
+const createMockCredential = (overrides?: Partial<{ id: string; name: string }>) => ({
+  id: 'cred-1',
+  name: 'Test Credential',
+  avatar_url: 'https://example.com/avatar.png',
+  credential: {},
+  is_default: false,
+  type: 'oauth2',
+  ...overrides,
+})
+
+type WebsiteCrawlProps = React.ComponentProps<typeof WebsiteCrawl>
+
+const createDefaultProps = (overrides?: Partial<WebsiteCrawlProps>): WebsiteCrawlProps => ({
+  nodeId: 'node-1',
+  nodeData: createMockNodeData(),
+  onCredentialChange: jest.fn(),
+  isInPipeline: false,
+  supportBatchUpload: true,
+  ...overrides,
+})
+
+// ==========================================
+// Test Suites
+// ==========================================
+describe('WebsiteCrawl', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+
+    // Reset store state
+    mockStoreState.crawlResult = undefined
+    mockStoreState.step = CrawlStep.init
+    mockStoreState.websitePages = []
+    mockStoreState.previewIndex = -1
+    mockStoreState.currentCredentialId = ''
+    mockStoreState.setWebsitePages = jest.fn()
+    mockStoreState.setCurrentWebsite = jest.fn()
+    mockStoreState.setPreviewIndex = jest.fn()
+    mockStoreState.setStep = jest.fn()
+    mockStoreState.setCrawlResult = jest.fn()
+
+    // Reset context values
+    mockPipelineId = 'pipeline-123'
+    mockSetShowAccountSettingModal.mockClear()
+
+    // Default mock return values
+    mockUseGetDataSourceAuth.mockReturnValue({
+      data: { result: [createMockCredential()] },
+    })
+
+    mockUseDraftPipelinePreProcessingParams.mockReturnValue({
+      data: { variables: [] },
+      isFetching: false,
+    })
+
+    mockUsePublishedPipelinePreProcessingParams.mockReturnValue({
+      data: { variables: [] },
+      isFetching: false,
+    })
+
+    mockGetState.mockReturnValue(mockStoreState)
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('header')).toBeInTheDocument()
+      expect(screen.getByTestId('options')).toBeInTheDocument()
+    })
+
+    it('should render Header with correct props', () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-123'
+      const props = createDefaultProps({
+        nodeData: createMockNodeData({ datasource_label: 'My Website Crawler' }),
+      })
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('header-doc-title')).toHaveTextContent('Docs')
+      expect(screen.getByTestId('header-plugin-name')).toHaveTextContent('My Website Crawler')
+      expect(screen.getByTestId('header-credential-id')).toHaveTextContent('cred-123')
+    })
+
+    it('should render Options with correct props', () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('options')).toBeInTheDocument()
+      expect(screen.getByTestId('options-step')).toHaveTextContent(CrawlStep.init)
+    })
+
+    it('should not render Crawling or CrawledResult when step is init', () => {
+      // Arrange
+      mockStoreState.step = CrawlStep.init
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(screen.queryByTestId('crawling')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('crawled-result')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('error-message')).not.toBeInTheDocument()
+    })
+
+    it('should render Crawling when step is running', () => {
+      // Arrange
+      mockStoreState.step = CrawlStep.running
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('crawling')).toBeInTheDocument()
+      expect(screen.queryByTestId('crawled-result')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('error-message')).not.toBeInTheDocument()
+    })
+
+    it('should render CrawledResult when step is finished with no error', () => {
+      // Arrange
+      mockStoreState.step = CrawlStep.finished
+      mockStoreState.crawlResult = {
+        data: [createMockCrawlResultItem()],
+        time_consuming: 1.5,
+      }
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('crawled-result')).toBeInTheDocument()
+      expect(screen.queryByTestId('crawling')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('error-message')).not.toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Props Testing
+  // ==========================================
+  describe('Props', () => {
+    describe('nodeId prop', () => {
+      it('should use nodeId in datasourceNodeRunURL for non-pipeline mode', async () => {
+        // Arrange
+        mockStoreState.currentCredentialId = 'cred-1'
+        const props = createDefaultProps({
+          nodeId: 'custom-node-id',
+          isInPipeline: false,
+        })
+
+        // Act
+        render(<WebsiteCrawl {...props} />)
+
+        // Assert - Options uses nodeId through usePreProcessingParams
+        expect(mockUsePublishedPipelinePreProcessingParams).toHaveBeenCalledWith(
+          { pipeline_id: 'pipeline-123', node_id: 'custom-node-id' },
+          true,
+        )
+      })
+    })
+
+    describe('nodeData prop', () => {
+      it('should pass plugin_id and provider_name to useGetDataSourceAuth', () => {
+        // Arrange
+        const nodeData = createMockNodeData({
+          plugin_id: 'my-plugin-id',
+          provider_name: 'my-provider',
+        })
+        const props = createDefaultProps({ nodeData })
+
+        // Act
+        render(<WebsiteCrawl {...props} />)
+
+        // Assert
+        expect(mockUseGetDataSourceAuth).toHaveBeenCalledWith({
+          pluginId: 'my-plugin-id',
+          provider: 'my-provider',
+        })
+      })
+
+      it('should pass datasource_label to Header as pluginName', () => {
+        // Arrange
+        const nodeData = createMockNodeData({
+          datasource_label: 'Custom Website Scraper',
+        })
+        const props = createDefaultProps({ nodeData })
+
+        // Act
+        render(<WebsiteCrawl {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('header-plugin-name')).toHaveTextContent('Custom Website Scraper')
+      })
+    })
+
+    describe('isInPipeline prop', () => {
+      it('should use draft URL when isInPipeline is true', () => {
+        // Arrange
+        const props = createDefaultProps({ isInPipeline: true })
+
+        // Act
+        render(<WebsiteCrawl {...props} />)
+
+        // Assert
+        expect(mockUseDraftPipelinePreProcessingParams).toHaveBeenCalled()
+        expect(mockUsePublishedPipelinePreProcessingParams).not.toHaveBeenCalled()
+      })
+
+      it('should use published URL when isInPipeline is false', () => {
+        // Arrange
+        const props = createDefaultProps({ isInPipeline: false })
+
+        // Act
+        render(<WebsiteCrawl {...props} />)
+
+        // Assert
+        expect(mockUsePublishedPipelinePreProcessingParams).toHaveBeenCalled()
+        expect(mockUseDraftPipelinePreProcessingParams).not.toHaveBeenCalled()
+      })
+
+      it('should pass showPreview as false to CrawledResult when isInPipeline is true', () => {
+        // Arrange
+        mockStoreState.step = CrawlStep.finished
+        mockStoreState.crawlResult = {
+          data: [createMockCrawlResultItem()],
+          time_consuming: 1.5,
+        }
+        const props = createDefaultProps({ isInPipeline: true })
+
+        // Act
+        render(<WebsiteCrawl {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('crawled-result-show-preview')).toHaveTextContent('false')
+      })
+
+      it('should pass showPreview as true to CrawledResult when isInPipeline is false', () => {
+        // Arrange
+        mockStoreState.step = CrawlStep.finished
+        mockStoreState.crawlResult = {
+          data: [createMockCrawlResultItem()],
+          time_consuming: 1.5,
+        }
+        const props = createDefaultProps({ isInPipeline: false })
+
+        // Act
+        render(<WebsiteCrawl {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('crawled-result-show-preview')).toHaveTextContent('true')
+      })
+    })
+
+    describe('supportBatchUpload prop', () => {
+      it('should pass isMultipleChoice as true to CrawledResult when supportBatchUpload is true', () => {
+        // Arrange
+        mockStoreState.step = CrawlStep.finished
+        mockStoreState.crawlResult = {
+          data: [createMockCrawlResultItem()],
+          time_consuming: 1.5,
+        }
+        const props = createDefaultProps({ supportBatchUpload: true })
+
+        // Act
+        render(<WebsiteCrawl {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('crawled-result-multiple-choice')).toHaveTextContent('true')
+      })
+
+      it('should pass isMultipleChoice as false to CrawledResult when supportBatchUpload is false', () => {
+        // Arrange
+        mockStoreState.step = CrawlStep.finished
+        mockStoreState.crawlResult = {
+          data: [createMockCrawlResultItem()],
+          time_consuming: 1.5,
+        }
+        const props = createDefaultProps({ supportBatchUpload: false })
+
+        // Act
+        render(<WebsiteCrawl {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('crawled-result-multiple-choice')).toHaveTextContent('false')
+      })
+
+      it.each([
+        [true, 'true'],
+        [false, 'false'],
+        [undefined, 'true'], // Default value
+      ])('should handle supportBatchUpload=%s correctly', (value, expected) => {
+        // Arrange
+        mockStoreState.step = CrawlStep.finished
+        mockStoreState.crawlResult = {
+          data: [createMockCrawlResultItem()],
+          time_consuming: 1.5,
+        }
+        const props = createDefaultProps({ supportBatchUpload: value })
+
+        // Act
+        render(<WebsiteCrawl {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('crawled-result-multiple-choice')).toHaveTextContent(expected)
+      })
+    })
+
+    describe('onCredentialChange prop', () => {
+      it('should call onCredentialChange with credential id and reset state', () => {
+        // Arrange
+        const mockOnCredentialChange = jest.fn()
+        const props = createDefaultProps({ onCredentialChange: mockOnCredentialChange })
+
+        // Act
+        render(<WebsiteCrawl {...props} />)
+        fireEvent.click(screen.getByTestId('header-credential-change'))
+
+        // Assert
+        expect(mockOnCredentialChange).toHaveBeenCalledWith('new-cred-id')
+      })
+    })
+  })
+
+  // ==========================================
+  // State Management Tests
+  // ==========================================
+  describe('State Management', () => {
+    it('should display correct crawledNum and totalNum when running', () => {
+      // Arrange
+      mockStoreState.step = CrawlStep.running
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert - Initial state is 0/0
+      expect(screen.getByTestId('crawling-crawled-num')).toHaveTextContent('0')
+      expect(screen.getByTestId('crawling-total-num')).toHaveTextContent('0')
+    })
+
+    it('should update step and result via ssePost callbacks', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      const mockCrawlData: CrawlResultItem[] = [
+        createMockCrawlResultItem({ source_url: 'https://example.com/1' }),
+        createMockCrawlResultItem({ source_url: 'https://example.com/2' }),
+      ]
+
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        // Simulate processing
+        callbacks.onDataSourceNodeProcessing({
+          total: 10,
+          completed: 5,
+        })
+        // Simulate completion
+        callbacks.onDataSourceNodeCompleted({
+          data: mockCrawlData,
+          time_consuming: 2.5,
+        })
+      })
+
+      const props = createDefaultProps()
+      render(<WebsiteCrawl {...props} />)
+
+      // Act - Trigger submit
+      fireEvent.click(screen.getByTestId('options-submit-btn'))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockStoreState.setStep).toHaveBeenCalledWith(CrawlStep.running)
+        expect(mockStoreState.setCrawlResult).toHaveBeenCalledWith({
+          data: mockCrawlData,
+          time_consuming: 2.5,
+        })
+        expect(mockStoreState.setStep).toHaveBeenCalledWith(CrawlStep.finished)
+      })
+    })
+
+    it('should pass runDisabled as true when no credential is selected', () => {
+      // Arrange
+      mockStoreState.currentCredentialId = ''
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('options-run-disabled')).toHaveTextContent('true')
+    })
+
+    it('should pass runDisabled as true when params are being fetched', () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      mockUsePublishedPipelinePreProcessingParams.mockReturnValue({
+        data: { variables: [] },
+        isFetching: true,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('options-run-disabled')).toHaveTextContent('true')
+    })
+
+    it('should pass runDisabled as false when credential is selected and params are loaded', () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      mockUsePublishedPipelinePreProcessingParams.mockReturnValue({
+        data: { variables: [] },
+        isFetching: false,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('options-run-disabled')).toHaveTextContent('false')
+    })
+  })
+
+  // ==========================================
+  // Callback Stability and Memoization
+  // ==========================================
+  describe('Callback Stability and Memoization', () => {
+    it('should have stable handleCheckedCrawlResultChange that updates store', () => {
+      // Arrange
+      mockStoreState.step = CrawlStep.finished
+      mockStoreState.crawlResult = {
+        data: [createMockCrawlResultItem()],
+        time_consuming: 1.5,
+      }
+      const props = createDefaultProps()
+      render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('crawled-result-select-change'))
+
+      // Assert
+      expect(mockStoreState.setWebsitePages).toHaveBeenCalledWith([
+        { source_url: 'https://example.com', title: 'Test' },
+      ])
+    })
+
+    it('should have stable handlePreview that updates store', () => {
+      // Arrange
+      mockStoreState.step = CrawlStep.finished
+      mockStoreState.crawlResult = {
+        data: [createMockCrawlResultItem()],
+        time_consuming: 1.5,
+      }
+      const props = createDefaultProps()
+      render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('crawled-result-preview'))
+
+      // Assert
+      expect(mockStoreState.setCurrentWebsite).toHaveBeenCalledWith({
+        source_url: 'https://example.com',
+        title: 'Test',
+      })
+      expect(mockStoreState.setPreviewIndex).toHaveBeenCalledWith(0)
+    })
+
+    it('should have stable handleSetting callback', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('header-config-btn'))
+
+      // Assert
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({
+        payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
+      })
+    })
+
+    it('should have stable handleCredentialChange that resets state', () => {
+      // Arrange
+      const mockOnCredentialChange = jest.fn()
+      const props = createDefaultProps({ onCredentialChange: mockOnCredentialChange })
+      render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('header-credential-change'))
+
+      // Assert
+      expect(mockOnCredentialChange).toHaveBeenCalledWith('new-cred-id')
+    })
+  })
+
+  // ==========================================
+  // User Interactions and Event Handlers
+  // ==========================================
+  describe('User Interactions and Event Handlers', () => {
+    it('should handle submit and trigger ssePost', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      const props = createDefaultProps()
+      render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('options-submit-btn'))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockSsePost).toHaveBeenCalled()
+        expect(mockStoreState.setStep).toHaveBeenCalledWith(CrawlStep.running)
+      })
+    })
+
+    it('should handle configuration button click', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('header-config-btn'))
+
+      // Assert
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({
+        payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
+      })
+    })
+
+    it('should handle credential change', () => {
+      // Arrange
+      const mockOnCredentialChange = jest.fn()
+      const props = createDefaultProps({ onCredentialChange: mockOnCredentialChange })
+      render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('header-credential-change'))
+
+      // Assert
+      expect(mockOnCredentialChange).toHaveBeenCalledWith('new-cred-id')
+    })
+
+    it('should handle selection change in CrawledResult', () => {
+      // Arrange
+      mockStoreState.step = CrawlStep.finished
+      mockStoreState.crawlResult = {
+        data: [createMockCrawlResultItem()],
+        time_consuming: 1.5,
+      }
+      const props = createDefaultProps()
+      render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('crawled-result-select-change'))
+
+      // Assert
+      expect(mockStoreState.setWebsitePages).toHaveBeenCalled()
+    })
+
+    it('should handle preview in CrawledResult', () => {
+      // Arrange
+      mockStoreState.step = CrawlStep.finished
+      mockStoreState.crawlResult = {
+        data: [createMockCrawlResultItem()],
+        time_consuming: 1.5,
+      }
+      const props = createDefaultProps()
+      render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('crawled-result-preview'))
+
+      // Assert
+      expect(mockStoreState.setCurrentWebsite).toHaveBeenCalled()
+      expect(mockStoreState.setPreviewIndex).toHaveBeenCalled()
+    })
+  })
+
+  // ==========================================
+  // API Calls Mocking
+  // ==========================================
+  describe('API Calls', () => {
+    it('should call ssePost with correct parameters for published workflow', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'test-cred'
+      mockPipelineId = 'pipeline-456'
+      const props = createDefaultProps({
+        nodeId: 'node-789',
+        isInPipeline: false,
+      })
+      render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('options-submit-btn'))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockSsePost).toHaveBeenCalledWith(
+          '/rag/pipelines/pipeline-456/workflows/published/datasource/nodes/node-789/run',
+          expect.objectContaining({
+            body: expect.objectContaining({
+              inputs: { url: 'https://example.com', depth: 2 },
+              datasource_type: 'website_crawl',
+              credential_id: 'test-cred',
+              response_mode: 'streaming',
+            }),
+          }),
+          expect.any(Object),
+        )
+      })
+    })
+
+    it('should call ssePost with correct parameters for draft workflow', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'test-cred'
+      mockPipelineId = 'pipeline-456'
+      const props = createDefaultProps({
+        nodeId: 'node-789',
+        isInPipeline: true,
+      })
+      render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('options-submit-btn'))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockSsePost).toHaveBeenCalledWith(
+          '/rag/pipelines/pipeline-456/workflows/draft/datasource/nodes/node-789/run',
+          expect.any(Object),
+          expect.any(Object),
+        )
+      })
+    })
+
+    it('should handle onDataSourceNodeProcessing callback correctly', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      mockStoreState.step = CrawlStep.running
+
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        callbacks.onDataSourceNodeProcessing({
+          total: 100,
+          completed: 50,
+        })
+      })
+
+      const props = createDefaultProps()
+      const { rerender } = render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('options-submit-btn'))
+
+      // Update store state to simulate running step
+      mockStoreState.step = CrawlStep.running
+      rerender(<WebsiteCrawl {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockSsePost).toHaveBeenCalled()
+      })
+    })
+
+    it('should handle onDataSourceNodeCompleted callback correctly', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      const mockCrawlData: CrawlResultItem[] = [
+        createMockCrawlResultItem({ source_url: 'https://example.com/1' }),
+        createMockCrawlResultItem({ source_url: 'https://example.com/2' }),
+      ]
+
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        callbacks.onDataSourceNodeCompleted({
+          data: mockCrawlData,
+          time_consuming: 3.5,
+        })
+      })
+
+      const props = createDefaultProps()
+      render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('options-submit-btn'))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockStoreState.setCrawlResult).toHaveBeenCalledWith({
+          data: mockCrawlData,
+          time_consuming: 3.5,
+        })
+        expect(mockStoreState.setWebsitePages).toHaveBeenCalledWith(mockCrawlData)
+        expect(mockStoreState.setStep).toHaveBeenCalledWith(CrawlStep.finished)
+      })
+    })
+
+    it('should handle onDataSourceNodeCompleted with single result when supportBatchUpload is false', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      const mockCrawlData: CrawlResultItem[] = [
+        createMockCrawlResultItem({ source_url: 'https://example.com/1' }),
+        createMockCrawlResultItem({ source_url: 'https://example.com/2' }),
+        createMockCrawlResultItem({ source_url: 'https://example.com/3' }),
+      ]
+
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        callbacks.onDataSourceNodeCompleted({
+          data: mockCrawlData,
+          time_consuming: 3.5,
+        })
+      })
+
+      const props = createDefaultProps({ supportBatchUpload: false })
+      render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('options-submit-btn'))
+
+      // Assert
+      await waitFor(() => {
+        // Should only select first item when supportBatchUpload is false
+        expect(mockStoreState.setWebsitePages).toHaveBeenCalledWith([mockCrawlData[0]])
+      })
+    })
+
+    it('should handle onDataSourceNodeError callback correctly', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        callbacks.onDataSourceNodeError({
+          error: 'Crawl failed: Invalid URL',
+        })
+      })
+
+      const props = createDefaultProps()
+      render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('options-submit-btn'))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockStoreState.setStep).toHaveBeenCalledWith(CrawlStep.finished)
+      })
+    })
+
+    it('should use useGetDataSourceAuth with correct parameters', () => {
+      // Arrange
+      const nodeData = createMockNodeData({
+        plugin_id: 'website-plugin',
+        provider_name: 'website-provider',
+      })
+      const props = createDefaultProps({ nodeData })
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(mockUseGetDataSourceAuth).toHaveBeenCalledWith({
+        pluginId: 'website-plugin',
+        provider: 'website-provider',
+      })
+    })
+
+    it('should pass credentials from useGetDataSourceAuth to Header', () => {
+      // Arrange
+      const mockCredentials = [
+        createMockCredential({ id: 'cred-1', name: 'Credential 1' }),
+        createMockCredential({ id: 'cred-2', name: 'Credential 2' }),
+      ]
+      mockUseGetDataSourceAuth.mockReturnValue({
+        data: { result: mockCredentials },
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('header-credentials-count')).toHaveTextContent('2')
+    })
+  })
+
+  // ==========================================
+  // Edge Cases and Error Handling
+  // ==========================================
+  describe('Edge Cases and Error Handling', () => {
+    it('should handle empty credentials array', () => {
+      // Arrange
+      mockUseGetDataSourceAuth.mockReturnValue({
+        data: { result: [] },
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('header-credentials-count')).toHaveTextContent('0')
+    })
+
+    it('should handle undefined dataSourceAuth result', () => {
+      // Arrange
+      mockUseGetDataSourceAuth.mockReturnValue({
+        data: { result: undefined },
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('header-credentials-count')).toHaveTextContent('0')
+    })
+
+    it('should handle null dataSourceAuth data', () => {
+      // Arrange
+      mockUseGetDataSourceAuth.mockReturnValue({
+        data: null,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('header-credentials-count')).toHaveTextContent('0')
+    })
+
+    it('should handle empty crawlResult data array', () => {
+      // Arrange
+      mockStoreState.step = CrawlStep.finished
+      mockStoreState.crawlResult = {
+        data: [],
+        time_consuming: 0.5,
+      }
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('crawled-result-count')).toHaveTextContent('0')
+    })
+
+    it('should handle undefined crawlResult', () => {
+      // Arrange
+      mockStoreState.step = CrawlStep.finished
+      mockStoreState.crawlResult = undefined
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('crawled-result-count')).toHaveTextContent('0')
+    })
+
+    it('should handle time_consuming as string', () => {
+      // Arrange
+      mockStoreState.step = CrawlStep.finished
+      mockStoreState.crawlResult = {
+        data: [createMockCrawlResultItem()],
+        time_consuming: '2.5',
+      }
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('crawled-result-used-time')).toHaveTextContent('2.5')
+    })
+
+    it('should handle invalid time_consuming value', () => {
+      // Arrange
+      mockStoreState.step = CrawlStep.finished
+      mockStoreState.crawlResult = {
+        data: [createMockCrawlResultItem()],
+        time_consuming: 'invalid',
+      }
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert - NaN should become 0
+      expect(screen.getByTestId('crawled-result-used-time')).toHaveTextContent('0')
+    })
+
+    it('should handle undefined pipelineId gracefully', () => {
+      // Arrange
+      mockPipelineId = undefined
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(mockUsePublishedPipelinePreProcessingParams).toHaveBeenCalledWith(
+        { pipeline_id: undefined, node_id: 'node-1' },
+        false, // enabled should be false when pipelineId is undefined
+      )
+    })
+
+    it('should handle empty nodeId gracefully', () => {
+      // Arrange
+      const props = createDefaultProps({ nodeId: '' })
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(mockUsePublishedPipelinePreProcessingParams).toHaveBeenCalledWith(
+        { pipeline_id: 'pipeline-123', node_id: '' },
+        false, // enabled should be false when nodeId is empty
+      )
+    })
+
+    it('should handle undefined paramsConfig.variables (fallback to empty array)', () => {
+      // Arrange - Test the || [] fallback on line 169
+      mockUsePublishedPipelinePreProcessingParams.mockReturnValue({
+        data: { variables: undefined },
+        isFetching: false,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert - Options should receive empty array as variables
+      expect(screen.getByTestId('options-variables-count')).toHaveTextContent('0')
+    })
+
+    it('should handle undefined paramsConfig (fallback to empty array)', () => {
+      // Arrange - Test when paramsConfig is undefined
+      mockUsePublishedPipelinePreProcessingParams.mockReturnValue({
+        data: undefined,
+        isFetching: false,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert - Options should receive empty array as variables
+      expect(screen.getByTestId('options-variables-count')).toHaveTextContent('0')
+    })
+
+    it('should handle error without error message', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        callbacks.onDataSourceNodeError({
+          error: undefined,
+        })
+      })
+
+      const props = createDefaultProps()
+      render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('options-submit-btn'))
+
+      // Assert - Should use fallback error message
+      await waitFor(() => {
+        expect(mockStoreState.setStep).toHaveBeenCalledWith(CrawlStep.finished)
+      })
+    })
+
+    it('should handle null total and completed in processing callback', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        callbacks.onDataSourceNodeProcessing({
+          total: null,
+          completed: null,
+        })
+      })
+
+      const props = createDefaultProps()
+      render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('options-submit-btn'))
+
+      // Assert - Should handle null values gracefully (default to 0)
+      await waitFor(() => {
+        expect(mockSsePost).toHaveBeenCalled()
+      })
+    })
+
+    it('should handle undefined time_consuming in completed callback', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        callbacks.onDataSourceNodeCompleted({
+          data: [createMockCrawlResultItem()],
+          time_consuming: undefined,
+        })
+      })
+
+      const props = createDefaultProps()
+      render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('options-submit-btn'))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockStoreState.setCrawlResult).toHaveBeenCalledWith({
+          data: [expect.any(Object)],
+          time_consuming: 0,
+        })
+      })
+    })
+  })
+
+  // ==========================================
+  // All Prop Variations
+  // ==========================================
+  describe('Prop Variations', () => {
+    it.each([
+      [{ isInPipeline: true, supportBatchUpload: true }],
+      [{ isInPipeline: true, supportBatchUpload: false }],
+      [{ isInPipeline: false, supportBatchUpload: true }],
+      [{ isInPipeline: false, supportBatchUpload: false }],
+    ])('should render correctly with props %o', (propVariation) => {
+      // Arrange
+      mockStoreState.step = CrawlStep.finished
+      mockStoreState.crawlResult = {
+        data: [createMockCrawlResultItem()],
+        time_consuming: 1.5,
+      }
+      const props = createDefaultProps(propVariation)
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('crawled-result')).toBeInTheDocument()
+      expect(screen.getByTestId('crawled-result-show-preview')).toHaveTextContent(
+        String(!propVariation.isInPipeline),
+      )
+      expect(screen.getByTestId('crawled-result-multiple-choice')).toHaveTextContent(
+        String(propVariation.supportBatchUpload),
+      )
+    })
+
+    it('should use default values for optional props', () => {
+      // Arrange
+      mockStoreState.step = CrawlStep.finished
+      mockStoreState.crawlResult = {
+        data: [createMockCrawlResultItem()],
+        time_consuming: 1.5,
+      }
+      const props: WebsiteCrawlProps = {
+        nodeId: 'node-1',
+        nodeData: createMockNodeData(),
+        onCredentialChange: jest.fn(),
+        // isInPipeline and supportBatchUpload are not provided
+      }
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert - Default values: isInPipeline = false, supportBatchUpload = true
+      expect(screen.getByTestId('crawled-result-show-preview')).toHaveTextContent('true')
+      expect(screen.getByTestId('crawled-result-multiple-choice')).toHaveTextContent('true')
+    })
+  })
+
+  // ==========================================
+  // Error Display
+  // ==========================================
+  describe('Error Display', () => {
+    it('should show ErrorMessage when crawl finishes with error', async () => {
+      // Arrange - Need to create a scenario where error message is set
+      mockStoreState.currentCredentialId = 'cred-1'
+
+      // First render with init state
+      const props = createDefaultProps()
+      const { rerender } = render(<WebsiteCrawl {...props} />)
+
+      // Simulate error by setting up ssePost to call error callback
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        callbacks.onDataSourceNodeError({
+          error: 'Network error',
+        })
+      })
+
+      // Trigger submit
+      fireEvent.click(screen.getByTestId('options-submit-btn'))
+
+      // Now update store state to finished to simulate the state after error
+      mockStoreState.step = CrawlStep.finished
+      rerender(<WebsiteCrawl {...props} />)
+
+      // Assert - The component should check for error message state
+      await waitFor(() => {
+        expect(mockStoreState.setStep).toHaveBeenCalledWith(CrawlStep.finished)
+      })
+    })
+
+    it('should not show ErrorMessage when crawl finishes without error', () => {
+      // Arrange
+      mockStoreState.step = CrawlStep.finished
+      mockStoreState.crawlResult = {
+        data: [createMockCrawlResultItem()],
+        time_consuming: 1.5,
+      }
+      const props = createDefaultProps()
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      expect(screen.queryByTestId('error-message')).not.toBeInTheDocument()
+      expect(screen.getByTestId('crawled-result')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Integration Tests
+  // ==========================================
+  describe('Integration', () => {
+    it('should complete full workflow: submit -> running -> completed', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+      const mockCrawlData: CrawlResultItem[] = [
+        createMockCrawlResultItem({ source_url: 'https://example.com/1' }),
+        createMockCrawlResultItem({ source_url: 'https://example.com/2' }),
+      ]
+
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        // Simulate processing
+        callbacks.onDataSourceNodeProcessing({
+          total: 10,
+          completed: 5,
+        })
+        // Simulate completion
+        callbacks.onDataSourceNodeCompleted({
+          data: mockCrawlData,
+          time_consuming: 2.5,
+        })
+      })
+
+      const props = createDefaultProps()
+      render(<WebsiteCrawl {...props} />)
+
+      // Act - Trigger submit
+      fireEvent.click(screen.getByTestId('options-submit-btn'))
+
+      // Assert - Verify full flow
+      await waitFor(() => {
+        // Step should be set to running first
+        expect(mockStoreState.setStep).toHaveBeenCalledWith(CrawlStep.running)
+        // Then result should be set
+        expect(mockStoreState.setCrawlResult).toHaveBeenCalledWith({
+          data: mockCrawlData,
+          time_consuming: 2.5,
+        })
+        // Pages should be selected
+        expect(mockStoreState.setWebsitePages).toHaveBeenCalledWith(mockCrawlData)
+        // Step should be set to finished
+        expect(mockStoreState.setStep).toHaveBeenCalledWith(CrawlStep.finished)
+      })
+    })
+
+    it('should handle error flow correctly', async () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'cred-1'
+
+      mockSsePost.mockImplementation((url, options, callbacks) => {
+        callbacks.onDataSourceNodeError({
+          error: 'Failed to crawl website',
+        })
+      })
+
+      const props = createDefaultProps()
+      render(<WebsiteCrawl {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('options-submit-btn'))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockStoreState.setStep).toHaveBeenCalledWith(CrawlStep.running)
+        expect(mockStoreState.setStep).toHaveBeenCalledWith(CrawlStep.finished)
+      })
+    })
+
+    it('should handle credential change and allow new crawl', () => {
+      // Arrange
+      mockStoreState.currentCredentialId = 'initial-cred'
+      const mockOnCredentialChange = jest.fn()
+      const props = createDefaultProps({ onCredentialChange: mockOnCredentialChange })
+
+      // Act
+      render(<WebsiteCrawl {...props} />)
+
+      // Change credential
+      fireEvent.click(screen.getByTestId('header-credential-change'))
+
+      // Assert
+      expect(mockOnCredentialChange).toHaveBeenCalledWith('new-cred-id')
+    })
+
+    it('should handle preview selection after crawl completes', () => {
+      // Arrange
+      mockStoreState.step = CrawlStep.finished
+      mockStoreState.crawlResult = {
+        data: [
+          createMockCrawlResultItem({ source_url: 'https://example.com/1' }),
+          createMockCrawlResultItem({ source_url: 'https://example.com/2' }),
+        ],
+        time_consuming: 1.5,
+      }
+      const props = createDefaultProps()
+      render(<WebsiteCrawl {...props} />)
+
+      // Act - Preview first item
+      fireEvent.click(screen.getByTestId('crawled-result-preview'))
+
+      // Assert
+      expect(mockStoreState.setCurrentWebsite).toHaveBeenCalled()
+      expect(mockStoreState.setPreviewIndex).toHaveBeenCalledWith(0)
+    })
+  })
+
+  // ==========================================
+  // Component Memoization
+  // ==========================================
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { rerender } = render(<WebsiteCrawl {...props} />)
+      rerender(<WebsiteCrawl {...props} />)
+
+      // Assert - Component should still render correctly after rerender
+      expect(screen.getByTestId('header')).toBeInTheDocument()
+      expect(screen.getByTestId('options')).toBeInTheDocument()
+    })
+
+    it('should not re-run callbacks when props are the same', () => {
+      // Arrange
+      const onCredentialChange = jest.fn()
+      const props = createDefaultProps({ onCredentialChange })
+
+      // Act
+      const { rerender } = render(<WebsiteCrawl {...props} />)
+      rerender(<WebsiteCrawl {...props} />)
+
+      // Assert - The callback reference should be stable
+      fireEvent.click(screen.getByTestId('header-credential-change'))
+      expect(onCredentialChange).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // ==========================================
+  // Styling
+  // ==========================================
+  describe('Styling', () => {
+    it('should apply correct container classes', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      const rootDiv = container.firstChild as HTMLElement
+      expect(rootDiv).toHaveClass('flex', 'flex-col')
+    })
+
+    it('should apply correct classes to options container', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<WebsiteCrawl {...props} />)
+
+      // Assert
+      const optionsContainer = container.querySelector('.rounded-xl')
+      expect(optionsContainer).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.spec.tsx
new file mode 100644
index 0000000000..a2d2980185
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.spec.tsx
@@ -0,0 +1,461 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import ChunkPreview from './chunk-preview'
+import { ChunkingMode } from '@/models/datasets'
+import type { CrawlResultItem, CustomFile, FileIndexingEstimateResponse } from '@/models/datasets'
+import type { NotionPage } from '@/models/common'
+import type { OnlineDriveFile } from '@/models/pipeline'
+import { DatasourceType, OnlineDriveFileType } from '@/models/pipeline'
+
+// Uses __mocks__/react-i18next.ts automatically
+
+// Mock dataset-detail context - needs mock to control return values
+const mockDocForm = jest.fn()
+jest.mock('@/context/dataset-detail', () => ({
+  useDatasetDetailContextWithSelector: (_selector: (s: { dataset: { doc_form: ChunkingMode } }) => ChunkingMode) => {
+    return mockDocForm()
+  },
+}))
+
+// Mock document picker - needs mock for simplified interaction testing
+jest.mock('../../../common/document-picker/preview-document-picker', () => ({
+  __esModule: true,
+  default: ({ files, onChange, value }: {
+    files: Array<{ id: string; name: string; extension: string }>
+    onChange: (selected: { id: string; name: string; extension: string }) => void
+    value: { id: string; name: string; extension: string }
+  }) => (
+    <div data-testid="document-picker">
+      <span data-testid="picker-value">{value?.name || 'No selection'}</span>
+      <select
+        data-testid="picker-select"
+        value={value?.id || ''}
+        onChange={(e) => {
+          const selected = files.find(f => f.id === e.target.value)
+          if (selected)
+            onChange(selected)
+        }}
+      >
+        {files.map(f => (
+          <option key={f.id} value={f.id}>{f.name}</option>
+        ))}
+      </select>
+    </div>
+  ),
+}))
+
+// Test data factories
+const createMockLocalFile = (overrides?: Partial<CustomFile>): CustomFile => ({
+  id: 'file-1',
+  name: 'test-file.pdf',
+  size: 1024,
+  type: 'application/pdf',
+  extension: 'pdf',
+  lastModified: Date.now(),
+  webkitRelativePath: '',
+  arrayBuffer: jest.fn() as () => Promise<ArrayBuffer>,
+  bytes: jest.fn() as () => Promise<Uint8Array>,
+  slice: jest.fn() as (start?: number, end?: number, contentType?: string) => Blob,
+  stream: jest.fn() as () => ReadableStream<Uint8Array>,
+  text: jest.fn() as () => Promise<string>,
+  ...overrides,
+} as CustomFile)
+
+const createMockNotionPage = (overrides?: Partial<NotionPage>): NotionPage => ({
+  page_id: 'page-1',
+  page_name: 'Test Page',
+  workspace_id: 'workspace-1',
+  type: 'page',
+  page_icon: null,
+  parent_id: 'parent-1',
+  is_bound: true,
+  ...overrides,
+})
+
+const createMockCrawlResult = (overrides?: Partial<CrawlResultItem>): CrawlResultItem => ({
+  title: 'Test Website',
+  markdown: 'Test content',
+  description: 'Test description',
+  source_url: 'https://example.com',
+  ...overrides,
+})
+
+const createMockOnlineDriveFile = (overrides?: Partial<OnlineDriveFile>): OnlineDriveFile => ({
+  id: 'drive-file-1',
+  name: 'test-drive-file.docx',
+  size: 2048,
+  type: OnlineDriveFileType.file,
+  ...overrides,
+})
+
+const createMockEstimateData = (overrides?: Partial<FileIndexingEstimateResponse>): FileIndexingEstimateResponse => ({
+  total_nodes: 5,
+  tokens: 1000,
+  total_price: 0.01,
+  currency: 'USD',
+  total_segments: 10,
+  preview: [
+    { content: 'Chunk content 1', child_chunks: ['child 1', 'child 2'] },
+    { content: 'Chunk content 2', child_chunks: ['child 3'] },
+  ],
+  qa_preview: [
+    { question: 'Q1', answer: 'A1' },
+    { question: 'Q2', answer: 'A2' },
+  ],
+  ...overrides,
+})
+
+const defaultProps = {
+  dataSourceType: DatasourceType.localFile,
+  localFiles: [createMockLocalFile()],
+  onlineDocuments: [createMockNotionPage()],
+  websitePages: [createMockCrawlResult()],
+  onlineDriveFiles: [createMockOnlineDriveFile()],
+  isIdle: false,
+  isPending: false,
+  estimateData: undefined,
+  onPreview: jest.fn(),
+  handlePreviewFileChange: jest.fn(),
+  handlePreviewOnlineDocumentChange: jest.fn(),
+  handlePreviewWebsitePageChange: jest.fn(),
+  handlePreviewOnlineDriveFileChange: jest.fn(),
+}
+
+describe('ChunkPreview', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockDocForm.mockReturnValue(ChunkingMode.text)
+  })
+
+  describe('Rendering', () => {
+    it('should render the component with preview container', () => {
+      render(<ChunkPreview {...defaultProps} />)
+
+      // i18n mock returns key by default
+      expect(screen.getByText('datasetCreation.stepTwo.preview')).toBeInTheDocument()
+    })
+
+    it('should render document picker for local files', () => {
+      render(<ChunkPreview {...defaultProps} dataSourceType={DatasourceType.localFile} />)
+
+      expect(screen.getByTestId('document-picker')).toBeInTheDocument()
+    })
+
+    it('should render document picker for online documents', () => {
+      render(<ChunkPreview {...defaultProps} dataSourceType={DatasourceType.onlineDocument} />)
+
+      expect(screen.getByTestId('document-picker')).toBeInTheDocument()
+    })
+
+    it('should render document picker for website pages', () => {
+      render(<ChunkPreview {...defaultProps} dataSourceType={DatasourceType.websiteCrawl} />)
+
+      expect(screen.getByTestId('document-picker')).toBeInTheDocument()
+    })
+
+    it('should render document picker for online drive files', () => {
+      render(<ChunkPreview {...defaultProps} dataSourceType={DatasourceType.onlineDrive} />)
+
+      expect(screen.getByTestId('document-picker')).toBeInTheDocument()
+    })
+
+    it('should render badge with chunk count for non-QA mode', () => {
+      const estimateData = createMockEstimateData({ total_segments: 15 })
+      mockDocForm.mockReturnValue(ChunkingMode.text)
+
+      render(<ChunkPreview {...defaultProps} estimateData={estimateData} />)
+
+      // Badge shows chunk count via i18n key with count option
+      expect(screen.getByText(/previewChunkCount.*15/)).toBeInTheDocument()
+    })
+
+    it('should not render badge for QA mode', () => {
+      mockDocForm.mockReturnValue(ChunkingMode.qa)
+      const estimateData = createMockEstimateData()
+
+      render(<ChunkPreview {...defaultProps} estimateData={estimateData} />)
+
+      // No badge with total_segments
+      expect(screen.queryByText(/10/)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Idle State', () => {
+    it('should render idle state with preview tip and button', () => {
+      render(<ChunkPreview {...defaultProps} isIdle={true} />)
+
+      // i18n mock returns keys
+      expect(screen.getByText('datasetCreation.stepTwo.previewChunkTip')).toBeInTheDocument()
+      expect(screen.getByText('datasetPipeline.addDocuments.stepTwo.previewChunks')).toBeInTheDocument()
+    })
+
+    it('should call onPreview when preview button is clicked', () => {
+      const onPreview = jest.fn()
+
+      render(<ChunkPreview {...defaultProps} isIdle={true} onPreview={onPreview} />)
+
+      const button = screen.getByRole('button', { name: /previewChunks/i })
+      fireEvent.click(button)
+      expect(onPreview).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('Loading State', () => {
+    it('should render skeleton loading when isPending is true', () => {
+      render(<ChunkPreview {...defaultProps} isPending={true} />)
+
+      // Skeleton loading renders multiple skeleton containers
+      expect(document.querySelector('.space-y-6')).toBeInTheDocument()
+    })
+
+    it('should not render preview content when loading', () => {
+      const estimateData = createMockEstimateData()
+
+      render(<ChunkPreview {...defaultProps} isPending={true} estimateData={estimateData} />)
+
+      expect(screen.queryByText('Chunk content 1')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('QA Mode Preview', () => {
+    it('should render QA preview chunks when doc_form is qa', () => {
+      mockDocForm.mockReturnValue(ChunkingMode.qa)
+      const estimateData = createMockEstimateData({
+        qa_preview: [
+          { question: 'Question 1?', answer: 'Answer 1' },
+          { question: 'Question 2?', answer: 'Answer 2' },
+        ],
+      })
+
+      render(<ChunkPreview {...defaultProps} estimateData={estimateData} />)
+
+      expect(screen.getByText('Question 1?')).toBeInTheDocument()
+      expect(screen.getByText('Answer 1')).toBeInTheDocument()
+      expect(screen.getByText('Question 2?')).toBeInTheDocument()
+      expect(screen.getByText('Answer 2')).toBeInTheDocument()
+    })
+  })
+
+  describe('Text Mode Preview', () => {
+    it('should render text preview chunks when doc_form is text', () => {
+      mockDocForm.mockReturnValue(ChunkingMode.text)
+      const estimateData = createMockEstimateData({
+        preview: [
+          { content: 'Text chunk 1', child_chunks: [] },
+          { content: 'Text chunk 2', child_chunks: [] },
+        ],
+      })
+
+      render(<ChunkPreview {...defaultProps} estimateData={estimateData} />)
+
+      expect(screen.getByText('Text chunk 1')).toBeInTheDocument()
+      expect(screen.getByText('Text chunk 2')).toBeInTheDocument()
+    })
+  })
+
+  describe('Parent-Child Mode Preview', () => {
+    it('should render parent-child preview chunks', () => {
+      mockDocForm.mockReturnValue(ChunkingMode.parentChild)
+      const estimateData = createMockEstimateData({
+        preview: [
+          { content: 'Parent chunk 1', child_chunks: ['Child 1', 'Child 2'] },
+        ],
+      })
+
+      render(<ChunkPreview {...defaultProps} estimateData={estimateData} />)
+
+      expect(screen.getByText('Child 1')).toBeInTheDocument()
+      expect(screen.getByText('Child 2')).toBeInTheDocument()
+    })
+  })
+
+  describe('Document Selection', () => {
+    it('should handle local file selection change', () => {
+      const handlePreviewFileChange = jest.fn()
+      const localFiles = [
+        createMockLocalFile({ id: 'file-1', name: 'file1.pdf' }),
+        createMockLocalFile({ id: 'file-2', name: 'file2.pdf' }),
+      ]
+
+      render(
+        <ChunkPreview
+          {...defaultProps}
+          dataSourceType={DatasourceType.localFile}
+          localFiles={localFiles}
+          handlePreviewFileChange={handlePreviewFileChange}
+        />,
+      )
+
+      const select = screen.getByTestId('picker-select')
+      fireEvent.change(select, { target: { value: 'file-2' } })
+
+      expect(handlePreviewFileChange).toHaveBeenCalled()
+    })
+
+    it('should handle online document selection change', () => {
+      const handlePreviewOnlineDocumentChange = jest.fn()
+      const onlineDocuments = [
+        createMockNotionPage({ page_id: 'page-1', page_name: 'Page 1' }),
+        createMockNotionPage({ page_id: 'page-2', page_name: 'Page 2' }),
+      ]
+
+      render(
+        <ChunkPreview
+          {...defaultProps}
+          dataSourceType={DatasourceType.onlineDocument}
+          onlineDocuments={onlineDocuments}
+          handlePreviewOnlineDocumentChange={handlePreviewOnlineDocumentChange}
+        />,
+      )
+
+      const select = screen.getByTestId('picker-select')
+      fireEvent.change(select, { target: { value: 'page-2' } })
+
+      expect(handlePreviewOnlineDocumentChange).toHaveBeenCalled()
+    })
+
+    it('should handle website page selection change', () => {
+      const handlePreviewWebsitePageChange = jest.fn()
+      const websitePages = [
+        createMockCrawlResult({ source_url: 'https://example1.com', title: 'Site 1' }),
+        createMockCrawlResult({ source_url: 'https://example2.com', title: 'Site 2' }),
+      ]
+
+      render(
+        <ChunkPreview
+          {...defaultProps}
+          dataSourceType={DatasourceType.websiteCrawl}
+          websitePages={websitePages}
+          handlePreviewWebsitePageChange={handlePreviewWebsitePageChange}
+        />,
+      )
+
+      const select = screen.getByTestId('picker-select')
+      fireEvent.change(select, { target: { value: 'https://example2.com' } })
+
+      expect(handlePreviewWebsitePageChange).toHaveBeenCalled()
+    })
+
+    it('should handle online drive file selection change', () => {
+      const handlePreviewOnlineDriveFileChange = jest.fn()
+      const onlineDriveFiles = [
+        createMockOnlineDriveFile({ id: 'drive-1', name: 'file1.docx' }),
+        createMockOnlineDriveFile({ id: 'drive-2', name: 'file2.docx' }),
+      ]
+
+      render(
+        <ChunkPreview
+          {...defaultProps}
+          dataSourceType={DatasourceType.onlineDrive}
+          onlineDriveFiles={onlineDriveFiles}
+          handlePreviewOnlineDriveFileChange={handlePreviewOnlineDriveFileChange}
+        />,
+      )
+
+      const select = screen.getByTestId('picker-select')
+      fireEvent.change(select, { target: { value: 'drive-2' } })
+
+      expect(handlePreviewOnlineDriveFileChange).toHaveBeenCalled()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty estimate data', () => {
+      mockDocForm.mockReturnValue(ChunkingMode.text)
+
+      render(<ChunkPreview {...defaultProps} estimateData={undefined} />)
+
+      expect(screen.queryByText('Chunk content')).not.toBeInTheDocument()
+    })
+
+    it('should handle empty preview array', () => {
+      mockDocForm.mockReturnValue(ChunkingMode.text)
+      const estimateData = createMockEstimateData({ preview: [] })
+
+      render(<ChunkPreview {...defaultProps} estimateData={estimateData} />)
+
+      expect(screen.queryByText('Chunk content')).not.toBeInTheDocument()
+    })
+
+    it('should handle empty qa_preview array', () => {
+      mockDocForm.mockReturnValue(ChunkingMode.qa)
+      const estimateData = createMockEstimateData({ qa_preview: [] })
+
+      render(<ChunkPreview {...defaultProps} estimateData={estimateData} />)
+
+      expect(screen.queryByText('Q1')).not.toBeInTheDocument()
+    })
+
+    it('should handle empty child_chunks in parent-child mode', () => {
+      mockDocForm.mockReturnValue(ChunkingMode.parentChild)
+      const estimateData = createMockEstimateData({
+        preview: [{ content: 'Parent', child_chunks: [] }],
+      })
+
+      render(<ChunkPreview {...defaultProps} estimateData={estimateData} />)
+
+      expect(screen.queryByText('Child')).not.toBeInTheDocument()
+    })
+
+    it('should handle badge showing 0 chunks', () => {
+      mockDocForm.mockReturnValue(ChunkingMode.text)
+      const estimateData = createMockEstimateData({ total_segments: 0 })
+
+      render(<ChunkPreview {...defaultProps} estimateData={estimateData} />)
+
+      // Badge with 0
+      expect(screen.getByText(/0/)).toBeInTheDocument()
+    })
+
+    it('should handle undefined online document properties', () => {
+      const onlineDocuments = [createMockNotionPage({ page_id: '', page_name: '' })]
+
+      render(
+        <ChunkPreview
+          {...defaultProps}
+          dataSourceType={DatasourceType.onlineDocument}
+          onlineDocuments={onlineDocuments}
+        />,
+      )
+
+      expect(screen.getByTestId('document-picker')).toBeInTheDocument()
+    })
+
+    it('should handle undefined website page properties', () => {
+      const websitePages = [createMockCrawlResult({ source_url: '', title: '' })]
+
+      render(
+        <ChunkPreview
+          {...defaultProps}
+          dataSourceType={DatasourceType.websiteCrawl}
+          websitePages={websitePages}
+        />,
+      )
+
+      expect(screen.getByTestId('document-picker')).toBeInTheDocument()
+    })
+
+    it('should handle undefined online drive file properties', () => {
+      const onlineDriveFiles = [createMockOnlineDriveFile({ id: '', name: '' })]
+
+      render(
+        <ChunkPreview
+          {...defaultProps}
+          dataSourceType={DatasourceType.onlineDrive}
+          onlineDriveFiles={onlineDriveFiles}
+        />,
+      )
+
+      expect(screen.getByTestId('document-picker')).toBeInTheDocument()
+    })
+  })
+
+  describe('Component Memoization', () => {
+    it('should be exported as a memoized component', () => {
+      // ChunkPreview is wrapped with React.memo
+      // We verify this by checking the component type
+      expect(typeof ChunkPreview).toBe('object')
+      expect(ChunkPreview.$$typeof?.toString()).toBe('Symbol(react.memo)')
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/file-preview.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/file-preview.spec.tsx
new file mode 100644
index 0000000000..8cb6ac489c
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/preview/file-preview.spec.tsx
@@ -0,0 +1,320 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import FilePreview from './file-preview'
+import type { CustomFile as File } from '@/models/datasets'
+
+// Uses __mocks__/react-i18next.ts automatically
+
+// Mock useFilePreview hook - needs to be mocked to control return values
+const mockUseFilePreview = jest.fn()
+jest.mock('@/service/use-common', () => ({
+  useFilePreview: (fileID: string) => mockUseFilePreview(fileID),
+}))
+
+// Test data factory
+const createMockFile = (overrides?: Partial<File>): File => ({
+  id: 'file-123',
+  name: 'test-document.pdf',
+  size: 2048,
+  type: 'application/pdf',
+  extension: 'pdf',
+  lastModified: Date.now(),
+  webkitRelativePath: '',
+  arrayBuffer: jest.fn() as () => Promise<ArrayBuffer>,
+  bytes: jest.fn() as () => Promise<Uint8Array>,
+  slice: jest.fn() as (start?: number, end?: number, contentType?: string) => Blob,
+  stream: jest.fn() as () => ReadableStream<Uint8Array>,
+  text: jest.fn() as () => Promise<string>,
+  ...overrides,
+} as File)
+
+const createMockFilePreviewData = (content: string = 'This is the file content') => ({
+  content,
+})
+
+const defaultProps = {
+  file: createMockFile(),
+  hidePreview: jest.fn(),
+}
+
+describe('FilePreview', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUseFilePreview.mockReturnValue({
+      data: undefined,
+      isFetching: false,
+    })
+  })
+
+  describe('Rendering', () => {
+    it('should render the component with file information', () => {
+      render(<FilePreview {...defaultProps} />)
+
+      // i18n mock returns key by default
+      expect(screen.getByText('datasetPipeline.addDocuments.stepOne.preview')).toBeInTheDocument()
+      expect(screen.getByText('test-document.pdf')).toBeInTheDocument()
+    })
+
+    it('should display file extension in uppercase via CSS class', () => {
+      render(<FilePreview {...defaultProps} />)
+
+      // The extension is displayed in the info section (as uppercase via CSS class)
+      const extensionElement = screen.getByText('pdf')
+      expect(extensionElement).toBeInTheDocument()
+      expect(extensionElement).toHaveClass('uppercase')
+    })
+
+    it('should display formatted file size', () => {
+      render(<FilePreview {...defaultProps} />)
+
+      // Real formatFileSize: 2048 bytes => "2.00 KB"
+      expect(screen.getByText('2.00 KB')).toBeInTheDocument()
+    })
+
+    it('should render close button', () => {
+      render(<FilePreview {...defaultProps} />)
+
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should call useFilePreview with correct fileID', () => {
+      const file = createMockFile({ id: 'specific-file-id' })
+
+      render(<FilePreview {...defaultProps} file={file} />)
+
+      expect(mockUseFilePreview).toHaveBeenCalledWith('specific-file-id')
+    })
+  })
+
+  describe('File Name Processing', () => {
+    it('should extract file name without extension', () => {
+      const file = createMockFile({ name: 'my-document.pdf', extension: 'pdf' })
+
+      render(<FilePreview {...defaultProps} file={file} />)
+
+      // The displayed text is `${fileName}.${extension}`, where fileName is name without ext
+      // my-document.pdf -> fileName = 'my-document', displayed as 'my-document.pdf'
+      expect(screen.getByText('my-document.pdf')).toBeInTheDocument()
+    })
+
+    it('should handle file name with multiple dots', () => {
+      const file = createMockFile({ name: 'my.file.name.pdf', extension: 'pdf' })
+
+      render(<FilePreview {...defaultProps} file={file} />)
+
+      // fileName = arr.slice(0, -1).join() = 'my,file,name', then displayed as 'my,file,name.pdf'
+      expect(screen.getByText('my,file,name.pdf')).toBeInTheDocument()
+    })
+
+    it('should handle empty file name', () => {
+      const file = createMockFile({ name: '', extension: '' })
+
+      render(<FilePreview {...defaultProps} file={file} />)
+
+      // fileName = '', displayed as '.'
+      expect(screen.getByText('.')).toBeInTheDocument()
+    })
+
+    it('should handle file without extension in name', () => {
+      const file = createMockFile({ name: 'noextension', extension: '' })
+
+      render(<FilePreview {...defaultProps} file={file} />)
+
+      // fileName = '' (slice returns empty for single element array), displayed as '.'
+      expect(screen.getByText('.')).toBeInTheDocument()
+    })
+  })
+
+  describe('Loading State', () => {
+    it('should render loading component when fetching', () => {
+      mockUseFilePreview.mockReturnValue({
+        data: undefined,
+        isFetching: true,
+      })
+
+      render(<FilePreview {...defaultProps} />)
+
+      // Loading component renders skeleton
+      expect(document.querySelector('.overflow-hidden')).toBeInTheDocument()
+    })
+
+    it('should not render content when loading', () => {
+      mockUseFilePreview.mockReturnValue({
+        data: createMockFilePreviewData('Some content'),
+        isFetching: true,
+      })
+
+      render(<FilePreview {...defaultProps} />)
+
+      expect(screen.queryByText('Some content')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Content Display', () => {
+    it('should render file content when loaded', () => {
+      mockUseFilePreview.mockReturnValue({
+        data: createMockFilePreviewData('This is the file content'),
+        isFetching: false,
+      })
+
+      render(<FilePreview {...defaultProps} />)
+
+      expect(screen.getByText('This is the file content')).toBeInTheDocument()
+    })
+
+    it('should display character count when data is available', () => {
+      mockUseFilePreview.mockReturnValue({
+        data: createMockFilePreviewData('Hello'), // 5 characters
+        isFetching: false,
+      })
+
+      render(<FilePreview {...defaultProps} />)
+
+      // Real formatNumberAbbreviated returns "5" for numbers < 1000
+      expect(screen.getByText(/5/)).toBeInTheDocument()
+    })
+
+    it('should format large character counts', () => {
+      const longContent = 'a'.repeat(2500)
+      mockUseFilePreview.mockReturnValue({
+        data: createMockFilePreviewData(longContent),
+        isFetching: false,
+      })
+
+      render(<FilePreview {...defaultProps} />)
+
+      // Real formatNumberAbbreviated uses lowercase 'k': "2.5k"
+      expect(screen.getByText(/2\.5k/)).toBeInTheDocument()
+    })
+
+    it('should not display character count when data is not available', () => {
+      mockUseFilePreview.mockReturnValue({
+        data: undefined,
+        isFetching: false,
+      })
+
+      render(<FilePreview {...defaultProps} />)
+
+      // No character text shown
+      expect(screen.queryByText(/datasetPipeline\.addDocuments\.characters/)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call hidePreview when close button is clicked', () => {
+      const hidePreview = jest.fn()
+
+      render(<FilePreview {...defaultProps} hidePreview={hidePreview} />)
+
+      const closeButton = screen.getByRole('button')
+      fireEvent.click(closeButton)
+
+      expect(hidePreview).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('File Size Formatting', () => {
+    it('should format small file sizes in bytes', () => {
+      const file = createMockFile({ size: 500 })
+
+      render(<FilePreview {...defaultProps} file={file} />)
+
+      // Real formatFileSize: 500 => "500.00 bytes"
+      expect(screen.getByText('500.00 bytes')).toBeInTheDocument()
+    })
+
+    it('should format kilobyte file sizes', () => {
+      const file = createMockFile({ size: 5120 })
+
+      render(<FilePreview {...defaultProps} file={file} />)
+
+      // Real formatFileSize: 5120 => "5.00 KB"
+      expect(screen.getByText('5.00 KB')).toBeInTheDocument()
+    })
+
+    it('should format megabyte file sizes', () => {
+      const file = createMockFile({ size: 2097152 })
+
+      render(<FilePreview {...defaultProps} file={file} />)
+
+      // Real formatFileSize: 2097152 => "2.00 MB"
+      expect(screen.getByText('2.00 MB')).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle undefined file id', () => {
+      const file = createMockFile({ id: undefined })
+
+      render(<FilePreview {...defaultProps} file={file} />)
+
+      expect(mockUseFilePreview).toHaveBeenCalledWith('')
+    })
+
+    it('should handle empty extension', () => {
+      const file = createMockFile({ extension: undefined })
+
+      render(<FilePreview {...defaultProps} file={file} />)
+
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should handle zero file size', () => {
+      const file = createMockFile({ size: 0 })
+
+      render(<FilePreview {...defaultProps} file={file} />)
+
+      // Real formatFileSize returns 0 for falsy values
+      // The component still renders
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should handle very long file content', () => {
+      const veryLongContent = 'a'.repeat(1000000)
+      mockUseFilePreview.mockReturnValue({
+        data: createMockFilePreviewData(veryLongContent),
+        isFetching: false,
+      })
+
+      render(<FilePreview {...defaultProps} />)
+
+      // Real formatNumberAbbreviated: 1000000 => "1M"
+      expect(screen.getByText(/1M/)).toBeInTheDocument()
+    })
+
+    it('should handle empty content', () => {
+      mockUseFilePreview.mockReturnValue({
+        data: createMockFilePreviewData(''),
+        isFetching: false,
+      })
+
+      render(<FilePreview {...defaultProps} />)
+
+      // Real formatNumberAbbreviated: 0 => "0"
+      // Find the element that contains character count info
+      expect(screen.getByText(/0 datasetPipeline/)).toBeInTheDocument()
+    })
+  })
+
+  describe('useMemo for fileName', () => {
+    it('should extract file name when file exists', () => {
+      // When file exists, it should extract the name without extension
+      const file = createMockFile({ name: 'document.txt', extension: 'txt' })
+
+      render(<FilePreview {...defaultProps} file={file} />)
+
+      expect(screen.getByText('document.txt')).toBeInTheDocument()
+    })
+
+    it('should memoize fileName based on file prop', () => {
+      const file = createMockFile({ name: 'test.pdf', extension: 'pdf' })
+
+      const { rerender } = render(<FilePreview {...defaultProps} file={file} />)
+
+      // Same file should produce same result
+      rerender(<FilePreview {...defaultProps} file={file} />)
+
+      expect(screen.getByText('test.pdf')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/online-document-preview.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/online-document-preview.spec.tsx
new file mode 100644
index 0000000000..652d6d573f
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/preview/online-document-preview.spec.tsx
@@ -0,0 +1,359 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import { fireEvent } from '@testing-library/react'
+import React from 'react'
+import OnlineDocumentPreview from './online-document-preview'
+import type { NotionPage } from '@/models/common'
+import Toast from '@/app/components/base/toast'
+
+// Uses __mocks__/react-i18next.ts automatically
+
+// Spy on Toast.notify
+const toastNotifySpy = jest.spyOn(Toast, 'notify')
+
+// Mock dataset-detail context - needs mock to control return values
+const mockPipelineId = jest.fn()
+jest.mock('@/context/dataset-detail', () => ({
+  useDatasetDetailContextWithSelector: (_selector: (s: { dataset: { pipeline_id: string } }) => string) => {
+    return mockPipelineId()
+  },
+}))
+
+// Mock usePreviewOnlineDocument hook - needs mock to control mutation behavior
+const mockMutateAsync = jest.fn()
+const mockUsePreviewOnlineDocument = jest.fn()
+jest.mock('@/service/use-pipeline', () => ({
+  usePreviewOnlineDocument: () => mockUsePreviewOnlineDocument(),
+}))
+
+// Mock data source store - needs mock to control store state
+const mockCurrentCredentialId = 'credential-123'
+const mockGetState = jest.fn(() => ({
+  currentCredentialId: mockCurrentCredentialId,
+}))
+jest.mock('../data-source/store', () => ({
+  useDataSourceStore: () => ({
+    getState: mockGetState,
+  }),
+}))
+
+// Test data factory
+const createMockNotionPage = (overrides?: Partial<NotionPage>): NotionPage => ({
+  page_id: 'page-123',
+  page_name: 'Test Notion Page',
+  workspace_id: 'workspace-456',
+  type: 'page',
+  page_icon: null,
+  parent_id: 'parent-789',
+  is_bound: true,
+  ...overrides,
+})
+
+const defaultProps = {
+  currentPage: createMockNotionPage(),
+  datasourceNodeId: 'datasource-node-123',
+  hidePreview: jest.fn(),
+}
+
+describe('OnlineDocumentPreview', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockPipelineId.mockReturnValue('pipeline-123')
+    mockUsePreviewOnlineDocument.mockReturnValue({
+      mutateAsync: mockMutateAsync,
+      isPending: false,
+    })
+    mockMutateAsync.mockImplementation((params, callbacks) => {
+      callbacks.onSuccess({ content: 'Test content' })
+      return Promise.resolve({ content: 'Test content' })
+    })
+  })
+
+  describe('Rendering', () => {
+    it('should render the component with page information', () => {
+      render(<OnlineDocumentPreview {...defaultProps} />)
+
+      // i18n mock returns key by default
+      expect(screen.getByText('datasetPipeline.addDocuments.stepOne.preview')).toBeInTheDocument()
+      expect(screen.getByText('Test Notion Page')).toBeInTheDocument()
+    })
+
+    it('should display page type', () => {
+      const currentPage = createMockNotionPage({ type: 'database' })
+
+      render(<OnlineDocumentPreview {...defaultProps} currentPage={currentPage} />)
+
+      expect(screen.getByText('database')).toBeInTheDocument()
+    })
+
+    it('should render close button', () => {
+      render(<OnlineDocumentPreview {...defaultProps} />)
+
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+  })
+
+  describe('Data Fetching', () => {
+    it('should call mutateAsync with correct parameters on mount', async () => {
+      const currentPage = createMockNotionPage({
+        workspace_id: 'ws-123',
+        page_id: 'pg-456',
+        type: 'page',
+      })
+
+      render(
+        <OnlineDocumentPreview
+          {...defaultProps}
+          currentPage={currentPage}
+          datasourceNodeId="node-789"
+        />,
+      )
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          {
+            workspaceID: 'ws-123',
+            pageID: 'pg-456',
+            pageType: 'page',
+            pipelineId: 'pipeline-123',
+            datasourceNodeId: 'node-789',
+            credentialId: mockCurrentCredentialId,
+          },
+          expect.objectContaining({
+            onSuccess: expect.any(Function),
+            onError: expect.any(Function),
+          }),
+        )
+      })
+    })
+
+    it('should fetch data again when page_id changes', async () => {
+      const currentPage1 = createMockNotionPage({ page_id: 'page-1' })
+      const currentPage2 = createMockNotionPage({ page_id: 'page-2' })
+
+      const { rerender } = render(
+        <OnlineDocumentPreview {...defaultProps} currentPage={currentPage1} />,
+      )
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledTimes(1)
+      })
+
+      rerender(<OnlineDocumentPreview {...defaultProps} currentPage={currentPage2} />)
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledTimes(2)
+      })
+    })
+
+    it('should handle empty pipelineId', async () => {
+      mockPipelineId.mockReturnValue(undefined)
+
+      render(<OnlineDocumentPreview {...defaultProps} />)
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({
+            pipelineId: '',
+          }),
+          expect.anything(),
+        )
+      })
+    })
+  })
+
+  describe('Loading State', () => {
+    it('should render loading component when isPending is true', () => {
+      mockUsePreviewOnlineDocument.mockReturnValue({
+        mutateAsync: mockMutateAsync,
+        isPending: true,
+      })
+
+      render(<OnlineDocumentPreview {...defaultProps} />)
+
+      // Loading component renders skeleton
+      expect(document.querySelector('.overflow-hidden')).toBeInTheDocument()
+    })
+
+    it('should not render markdown content when loading', () => {
+      mockUsePreviewOnlineDocument.mockReturnValue({
+        mutateAsync: mockMutateAsync,
+        isPending: true,
+      })
+
+      render(<OnlineDocumentPreview {...defaultProps} />)
+
+      // Content area should not be present
+      expect(screen.queryByText('Test content')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Content Display', () => {
+    it('should render markdown content when loaded', async () => {
+      mockMutateAsync.mockImplementation((params, callbacks) => {
+        callbacks.onSuccess({ content: 'Markdown content here' })
+        return Promise.resolve({ content: 'Markdown content here' })
+      })
+
+      render(<OnlineDocumentPreview {...defaultProps} />)
+
+      await waitFor(() => {
+        // Markdown component renders the content
+        const contentArea = document.querySelector('.overflow-hidden.px-6.py-5')
+        expect(contentArea).toBeInTheDocument()
+      })
+    })
+
+    it('should display character count', async () => {
+      mockMutateAsync.mockImplementation((params, callbacks) => {
+        callbacks.onSuccess({ content: 'Hello' }) // 5 characters
+        return Promise.resolve({ content: 'Hello' })
+      })
+
+      render(<OnlineDocumentPreview {...defaultProps} />)
+
+      await waitFor(() => {
+        // Real formatNumberAbbreviated returns "5" for numbers < 1000
+        expect(screen.getByText(/5/)).toBeInTheDocument()
+      })
+    })
+
+    it('should format large character counts', async () => {
+      const longContent = 'a'.repeat(2500)
+      mockMutateAsync.mockImplementation((params, callbacks) => {
+        callbacks.onSuccess({ content: longContent })
+        return Promise.resolve({ content: longContent })
+      })
+
+      render(<OnlineDocumentPreview {...defaultProps} />)
+
+      await waitFor(() => {
+        // Real formatNumberAbbreviated uses lowercase 'k': "2.5k"
+        expect(screen.getByText(/2\.5k/)).toBeInTheDocument()
+      })
+    })
+
+    it('should show character count based on fetched content', async () => {
+      // When content is set via onSuccess, character count is displayed
+      mockMutateAsync.mockImplementation((params, callbacks) => {
+        callbacks.onSuccess({ content: 'Test content' }) // 12 characters
+        return Promise.resolve({ content: 'Test content' })
+      })
+
+      render(<OnlineDocumentPreview {...defaultProps} />)
+
+      await waitFor(() => {
+        expect(screen.getByText(/12/)).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Error Handling', () => {
+    it('should show toast notification on error', async () => {
+      const errorMessage = 'Failed to fetch document'
+      mockMutateAsync.mockImplementation((params, callbacks) => {
+        callbacks.onError(new Error(errorMessage))
+        // Return a resolved promise to avoid unhandled rejection
+        return Promise.resolve()
+      })
+
+      render(<OnlineDocumentPreview {...defaultProps} />)
+
+      await waitFor(() => {
+        expect(toastNotifySpy).toHaveBeenCalledWith({
+          type: 'error',
+          message: errorMessage,
+        })
+      })
+    })
+
+    it('should handle network errors', async () => {
+      const networkError = new Error('Network Error')
+      mockMutateAsync.mockImplementation((params, callbacks) => {
+        callbacks.onError(networkError)
+        // Return a resolved promise to avoid unhandled rejection
+        return Promise.resolve()
+      })
+
+      render(<OnlineDocumentPreview {...defaultProps} />)
+
+      await waitFor(() => {
+        expect(toastNotifySpy).toHaveBeenCalledWith({
+          type: 'error',
+          message: 'Network Error',
+        })
+      })
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call hidePreview when close button is clicked', () => {
+      const hidePreview = jest.fn()
+
+      render(<OnlineDocumentPreview {...defaultProps} hidePreview={hidePreview} />)
+
+      // Find the close button in the header area (not toast buttons)
+      const headerArea = document.querySelector('.flex.gap-x-2.border-b')
+      const closeButton = headerArea?.querySelector('button')
+      expect(closeButton).toBeInTheDocument()
+      fireEvent.click(closeButton!)
+
+      expect(hidePreview).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle undefined page_name', () => {
+      const currentPage = createMockNotionPage({ page_name: '' })
+
+      render(<OnlineDocumentPreview {...defaultProps} currentPage={currentPage} />)
+
+      // Find the close button in the header area
+      const headerArea = document.querySelector('.flex.gap-x-2.border-b')
+      const closeButton = headerArea?.querySelector('button')
+      expect(closeButton).toBeInTheDocument()
+    })
+
+    it('should handle different page types', () => {
+      const currentPage = createMockNotionPage({ type: 'database' })
+
+      render(<OnlineDocumentPreview {...defaultProps} currentPage={currentPage} />)
+
+      expect(screen.getByText('database')).toBeInTheDocument()
+    })
+
+    it('should use credentialId from store', async () => {
+      mockGetState.mockReturnValue({
+        currentCredentialId: 'custom-credential',
+      })
+
+      render(<OnlineDocumentPreview {...defaultProps} />)
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({
+            credentialId: 'custom-credential',
+          }),
+          expect.anything(),
+        )
+      })
+    })
+
+    it('should not render markdown content when content is empty and not pending', async () => {
+      mockMutateAsync.mockImplementation((params, callbacks) => {
+        callbacks.onSuccess({ content: '' })
+        return Promise.resolve({ content: '' })
+      })
+      mockUsePreviewOnlineDocument.mockReturnValue({
+        mutateAsync: mockMutateAsync,
+        isPending: false,
+      })
+
+      render(<OnlineDocumentPreview {...defaultProps} />)
+
+      // Content is empty, markdown area should still render but be empty
+      await waitFor(() => {
+        expect(screen.queryByText('Test content')).not.toBeInTheDocument()
+      })
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/web-preview.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/web-preview.spec.tsx
new file mode 100644
index 0000000000..97343e75ee
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/preview/web-preview.spec.tsx
@@ -0,0 +1,256 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import WebsitePreview from './web-preview'
+import type { CrawlResultItem } from '@/models/datasets'
+
+// Uses __mocks__/react-i18next.ts automatically
+
+// Test data factory
+const createMockCrawlResult = (overrides?: Partial<CrawlResultItem>): CrawlResultItem => ({
+  title: 'Test Website Title',
+  markdown: 'This is the **markdown** content of the website.',
+  description: 'Test description',
+  source_url: 'https://example.com/page',
+  ...overrides,
+})
+
+const defaultProps = {
+  currentWebsite: createMockCrawlResult(),
+  hidePreview: jest.fn(),
+}
+
+describe('WebsitePreview', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render the component with website information', () => {
+      render(<WebsitePreview {...defaultProps} />)
+
+      // i18n mock returns key by default
+      expect(screen.getByText('datasetPipeline.addDocuments.stepOne.preview')).toBeInTheDocument()
+      expect(screen.getByText('Test Website Title')).toBeInTheDocument()
+    })
+
+    it('should display the source URL', () => {
+      render(<WebsitePreview {...defaultProps} />)
+
+      expect(screen.getByText('https://example.com/page')).toBeInTheDocument()
+    })
+
+    it('should render close button', () => {
+      render(<WebsitePreview {...defaultProps} />)
+
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should render the markdown content', () => {
+      render(<WebsitePreview {...defaultProps} />)
+
+      expect(screen.getByText('This is the **markdown** content of the website.')).toBeInTheDocument()
+    })
+  })
+
+  describe('Character Count', () => {
+    it('should display character count for small content', () => {
+      const currentWebsite = createMockCrawlResult({ markdown: 'Hello' }) // 5 characters
+
+      render(<WebsitePreview {...defaultProps} currentWebsite={currentWebsite} />)
+
+      // Real formatNumberAbbreviated returns "5" for numbers < 1000
+      expect(screen.getByText(/5/)).toBeInTheDocument()
+    })
+
+    it('should format character count in thousands', () => {
+      const longContent = 'a'.repeat(2500)
+      const currentWebsite = createMockCrawlResult({ markdown: longContent })
+
+      render(<WebsitePreview {...defaultProps} currentWebsite={currentWebsite} />)
+
+      // Real formatNumberAbbreviated uses lowercase 'k': "2.5k"
+      expect(screen.getByText(/2\.5k/)).toBeInTheDocument()
+    })
+
+    it('should format character count in millions', () => {
+      const veryLongContent = 'a'.repeat(1500000)
+      const currentWebsite = createMockCrawlResult({ markdown: veryLongContent })
+
+      render(<WebsitePreview {...defaultProps} currentWebsite={currentWebsite} />)
+
+      expect(screen.getByText(/1\.5M/)).toBeInTheDocument()
+    })
+
+    it('should show 0 characters for empty markdown', () => {
+      const currentWebsite = createMockCrawlResult({ markdown: '' })
+
+      render(<WebsitePreview {...defaultProps} currentWebsite={currentWebsite} />)
+
+      expect(screen.getByText(/0/)).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call hidePreview when close button is clicked', () => {
+      const hidePreview = jest.fn()
+
+      render(<WebsitePreview {...defaultProps} hidePreview={hidePreview} />)
+
+      const closeButton = screen.getByRole('button')
+      fireEvent.click(closeButton)
+
+      expect(hidePreview).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('URL Display', () => {
+    it('should display long URLs', () => {
+      const longUrl = 'https://example.com/very/long/path/to/page/with/many/segments'
+      const currentWebsite = createMockCrawlResult({ source_url: longUrl })
+
+      render(<WebsitePreview {...defaultProps} currentWebsite={currentWebsite} />)
+
+      const urlElement = screen.getByTitle(longUrl)
+      expect(urlElement).toBeInTheDocument()
+      expect(urlElement).toHaveTextContent(longUrl)
+    })
+
+    it('should display URL with title attribute', () => {
+      const currentWebsite = createMockCrawlResult({ source_url: 'https://test.com' })
+
+      render(<WebsitePreview {...defaultProps} currentWebsite={currentWebsite} />)
+
+      expect(screen.getByTitle('https://test.com')).toBeInTheDocument()
+    })
+  })
+
+  describe('Content Display', () => {
+    it('should display the markdown content in content area', () => {
+      const currentWebsite = createMockCrawlResult({
+        markdown: 'Content with **bold** and *italic* text.',
+      })
+
+      render(<WebsitePreview {...defaultProps} currentWebsite={currentWebsite} />)
+
+      expect(screen.getByText('Content with **bold** and *italic* text.')).toBeInTheDocument()
+    })
+
+    it('should handle multiline content', () => {
+      const multilineContent = 'Line 1\nLine 2\nLine 3'
+      const currentWebsite = createMockCrawlResult({ markdown: multilineContent })
+
+      render(<WebsitePreview {...defaultProps} currentWebsite={currentWebsite} />)
+
+      // Multiline content is rendered as-is
+      expect(screen.getByText((content) => {
+        return content.includes('Line 1') && content.includes('Line 2') && content.includes('Line 3')
+      })).toBeInTheDocument()
+    })
+
+    it('should handle special characters in content', () => {
+      const specialContent = '<script>alert("xss")</script> & < > " \''
+      const currentWebsite = createMockCrawlResult({ markdown: specialContent })
+
+      render(<WebsitePreview {...defaultProps} currentWebsite={currentWebsite} />)
+
+      expect(screen.getByText(specialContent)).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty title', () => {
+      const currentWebsite = createMockCrawlResult({ title: '' })
+
+      render(<WebsitePreview {...defaultProps} currentWebsite={currentWebsite} />)
+
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should handle empty source URL', () => {
+      const currentWebsite = createMockCrawlResult({ source_url: '' })
+
+      render(<WebsitePreview {...defaultProps} currentWebsite={currentWebsite} />)
+
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should handle very long title', () => {
+      const longTitle = 'A'.repeat(500)
+      const currentWebsite = createMockCrawlResult({ title: longTitle })
+
+      render(<WebsitePreview {...defaultProps} currentWebsite={currentWebsite} />)
+
+      expect(screen.getByText(longTitle)).toBeInTheDocument()
+    })
+
+    it('should handle unicode characters in content', () => {
+      const unicodeContent = '你好世界 🌍 مرحبا こんにちは'
+      const currentWebsite = createMockCrawlResult({ markdown: unicodeContent })
+
+      render(<WebsitePreview {...defaultProps} currentWebsite={currentWebsite} />)
+
+      expect(screen.getByText(unicodeContent)).toBeInTheDocument()
+    })
+
+    it('should handle URL with query parameters', () => {
+      const urlWithParams = 'https://example.com/page?query=test&param=value'
+      const currentWebsite = createMockCrawlResult({ source_url: urlWithParams })
+
+      render(<WebsitePreview {...defaultProps} currentWebsite={currentWebsite} />)
+
+      expect(screen.getByTitle(urlWithParams)).toBeInTheDocument()
+    })
+
+    it('should handle URL with hash fragment', () => {
+      const urlWithHash = 'https://example.com/page#section-1'
+      const currentWebsite = createMockCrawlResult({ source_url: urlWithHash })
+
+      render(<WebsitePreview {...defaultProps} currentWebsite={currentWebsite} />)
+
+      expect(screen.getByTitle(urlWithHash)).toBeInTheDocument()
+    })
+  })
+
+  describe('Styling', () => {
+    it('should apply container styles', () => {
+      const { container } = render(<WebsitePreview {...defaultProps} />)
+
+      const mainContainer = container.firstChild as HTMLElement
+      expect(mainContainer).toHaveClass('flex', 'h-full', 'w-full', 'flex-col')
+    })
+  })
+
+  describe('Multiple Renders', () => {
+    it('should update when currentWebsite changes', () => {
+      const website1 = createMockCrawlResult({ title: 'Website 1', markdown: 'Content 1' })
+      const website2 = createMockCrawlResult({ title: 'Website 2', markdown: 'Content 2' })
+
+      const { rerender } = render(<WebsitePreview {...defaultProps} currentWebsite={website1} />)
+
+      expect(screen.getByText('Website 1')).toBeInTheDocument()
+      expect(screen.getByText('Content 1')).toBeInTheDocument()
+
+      rerender(<WebsitePreview {...defaultProps} currentWebsite={website2} />)
+
+      expect(screen.getByText('Website 2')).toBeInTheDocument()
+      expect(screen.getByText('Content 2')).toBeInTheDocument()
+    })
+
+    it('should call new hidePreview when prop changes', () => {
+      const hidePreview1 = jest.fn()
+      const hidePreview2 = jest.fn()
+
+      const { rerender } = render(<WebsitePreview {...defaultProps} hidePreview={hidePreview1} />)
+
+      const closeButton = screen.getByRole('button')
+      fireEvent.click(closeButton)
+      expect(hidePreview1).toHaveBeenCalledTimes(1)
+
+      rerender(<WebsitePreview {...defaultProps} hidePreview={hidePreview2} />)
+
+      fireEvent.click(closeButton)
+      expect(hidePreview2).toHaveBeenCalledTimes(1)
+      expect(hidePreview1).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/process-documents/components.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/process-documents/components.spec.tsx
new file mode 100644
index 0000000000..c92ce491fb
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/process-documents/components.spec.tsx
@@ -0,0 +1,861 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import Actions from './actions'
+import Header from './header'
+import Form from './form'
+import type { BaseConfiguration } from '@/app/components/base/form/form-scenarios/base/types'
+import { BaseFieldType } from '@/app/components/base/form/form-scenarios/base/types'
+import { z } from 'zod'
+import Toast from '@/app/components/base/toast'
+
+// ==========================================
+// Spy on Toast.notify for validation tests
+// ==========================================
+const toastNotifySpy = jest.spyOn(Toast, 'notify')
+
+// ==========================================
+// Test Data Factory Functions
+// ==========================================
+
+/**
+ * Creates mock configuration for testing
+ */
+const createMockConfiguration = (overrides: Partial<BaseConfiguration> = {}): BaseConfiguration => ({
+  type: BaseFieldType.textInput,
+  variable: 'testVariable',
+  label: 'Test Label',
+  required: false,
+  maxLength: undefined,
+  options: undefined,
+  showConditions: [],
+  placeholder: 'Enter value',
+  tooltip: '',
+  ...overrides,
+})
+
+/**
+ * Creates a valid Zod schema for testing
+ */
+const createMockSchema = () => {
+  return z.object({
+    field1: z.string().optional(),
+  })
+}
+
+/**
+ * Creates a schema that always fails validation
+ */
+const createFailingSchema = () => {
+  return {
+    safeParse: () => ({
+      success: false,
+      error: {
+        issues: [{ path: ['field1'], message: 'is required' }],
+      },
+    }),
+  } as unknown as z.ZodSchema
+}
+
+// ==========================================
+// Actions Component Tests
+// ==========================================
+describe('Actions', () => {
+  const defaultActionsProps = {
+    onBack: jest.fn(),
+    onProcess: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      render(<Actions {...defaultActionsProps} />)
+
+      // Assert
+      expect(screen.getByText('datasetPipeline.operations.dataSource')).toBeInTheDocument()
+      expect(screen.getByText('datasetPipeline.operations.saveAndProcess')).toBeInTheDocument()
+    })
+
+    it('should render back button with arrow icon', () => {
+      // Arrange & Act
+      render(<Actions {...defaultActionsProps} />)
+
+      // Assert
+      const backButton = screen.getByRole('button', { name: /datasetPipeline.operations.dataSource/i })
+      expect(backButton).toBeInTheDocument()
+      expect(backButton.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('should render process button', () => {
+      // Arrange & Act
+      render(<Actions {...defaultActionsProps} />)
+
+      // Assert
+      const processButton = screen.getByRole('button', { name: /datasetPipeline.operations.saveAndProcess/i })
+      expect(processButton).toBeInTheDocument()
+    })
+
+    it('should have correct container layout', () => {
+      // Arrange & Act
+      const { container } = render(<Actions {...defaultActionsProps} />)
+
+      // Assert
+      const mainContainer = container.querySelector('.flex.items-center.justify-between')
+      expect(mainContainer).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Props Testing
+  // ==========================================
+  describe('Props', () => {
+    describe('runDisabled prop', () => {
+      it('should not disable process button when runDisabled is false', () => {
+        // Arrange & Act
+        render(<Actions {...defaultActionsProps} runDisabled={false} />)
+
+        // Assert
+        const processButton = screen.getByRole('button', { name: /datasetPipeline.operations.saveAndProcess/i })
+        expect(processButton).not.toBeDisabled()
+      })
+
+      it('should disable process button when runDisabled is true', () => {
+        // Arrange & Act
+        render(<Actions {...defaultActionsProps} runDisabled={true} />)
+
+        // Assert
+        const processButton = screen.getByRole('button', { name: /datasetPipeline.operations.saveAndProcess/i })
+        expect(processButton).toBeDisabled()
+      })
+
+      it('should not disable process button when runDisabled is undefined', () => {
+        // Arrange & Act
+        render(<Actions {...defaultActionsProps} runDisabled={undefined} />)
+
+        // Assert
+        const processButton = screen.getByRole('button', { name: /datasetPipeline.operations.saveAndProcess/i })
+        expect(processButton).not.toBeDisabled()
+      })
+    })
+  })
+
+  // ==========================================
+  // User Interactions Testing
+  // ==========================================
+  describe('User Interactions', () => {
+    it('should call onBack when back button is clicked', () => {
+      // Arrange
+      const onBack = jest.fn()
+      render(<Actions {...defaultActionsProps} onBack={onBack} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: /datasetPipeline.operations.dataSource/i }))
+
+      // Assert
+      expect(onBack).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onProcess when process button is clicked', () => {
+      // Arrange
+      const onProcess = jest.fn()
+      render(<Actions {...defaultActionsProps} onProcess={onProcess} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: /datasetPipeline.operations.saveAndProcess/i }))
+
+      // Assert
+      expect(onProcess).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onProcess when process button is disabled and clicked', () => {
+      // Arrange
+      const onProcess = jest.fn()
+      render(<Actions {...defaultActionsProps} onProcess={onProcess} runDisabled={true} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: /datasetPipeline.operations.saveAndProcess/i }))
+
+      // Assert
+      expect(onProcess).not.toHaveBeenCalled()
+    })
+  })
+
+  // ==========================================
+  // Component Memoization Testing
+  // ==========================================
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      // Assert
+      expect(Actions.$$typeof).toBe(Symbol.for('react.memo'))
+    })
+  })
+})
+
+// ==========================================
+// Header Component Tests
+// ==========================================
+describe('Header', () => {
+  const defaultHeaderProps = {
+    onReset: jest.fn(),
+    resetDisabled: false,
+    previewDisabled: false,
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      render(<Header {...defaultHeaderProps} />)
+
+      // Assert
+      expect(screen.getByText('datasetPipeline.addDocuments.stepTwo.chunkSettings')).toBeInTheDocument()
+    })
+
+    it('should render reset button', () => {
+      // Arrange & Act
+      render(<Header {...defaultHeaderProps} />)
+
+      // Assert
+      expect(screen.getByRole('button', { name: /common.operation.reset/i })).toBeInTheDocument()
+    })
+
+    it('should render preview button with icon', () => {
+      // Arrange & Act
+      render(<Header {...defaultHeaderProps} />)
+
+      // Assert
+      const previewButton = screen.getByRole('button', { name: /datasetPipeline.addDocuments.stepTwo.previewChunks/i })
+      expect(previewButton).toBeInTheDocument()
+      expect(previewButton.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('should render title with correct text', () => {
+      // Arrange & Act
+      render(<Header {...defaultHeaderProps} />)
+
+      // Assert
+      expect(screen.getByText('datasetPipeline.addDocuments.stepTwo.chunkSettings')).toBeInTheDocument()
+    })
+
+    it('should have correct container layout', () => {
+      // Arrange & Act
+      const { container } = render(<Header {...defaultHeaderProps} />)
+
+      // Assert
+      const mainContainer = container.querySelector('.flex.items-center.gap-x-1')
+      expect(mainContainer).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Props Testing
+  // ==========================================
+  describe('Props', () => {
+    describe('resetDisabled prop', () => {
+      it('should not disable reset button when resetDisabled is false', () => {
+        // Arrange & Act
+        render(<Header {...defaultHeaderProps} resetDisabled={false} />)
+
+        // Assert
+        const resetButton = screen.getByRole('button', { name: /common.operation.reset/i })
+        expect(resetButton).not.toBeDisabled()
+      })
+
+      it('should disable reset button when resetDisabled is true', () => {
+        // Arrange & Act
+        render(<Header {...defaultHeaderProps} resetDisabled={true} />)
+
+        // Assert
+        const resetButton = screen.getByRole('button', { name: /common.operation.reset/i })
+        expect(resetButton).toBeDisabled()
+      })
+    })
+
+    describe('previewDisabled prop', () => {
+      it('should not disable preview button when previewDisabled is false', () => {
+        // Arrange & Act
+        render(<Header {...defaultHeaderProps} previewDisabled={false} />)
+
+        // Assert
+        const previewButton = screen.getByRole('button', { name: /datasetPipeline.addDocuments.stepTwo.previewChunks/i })
+        expect(previewButton).not.toBeDisabled()
+      })
+
+      it('should disable preview button when previewDisabled is true', () => {
+        // Arrange & Act
+        render(<Header {...defaultHeaderProps} previewDisabled={true} />)
+
+        // Assert
+        const previewButton = screen.getByRole('button', { name: /datasetPipeline.addDocuments.stepTwo.previewChunks/i })
+        expect(previewButton).toBeDisabled()
+      })
+    })
+
+    it('should handle onPreview being undefined', () => {
+      // Arrange & Act
+      render(<Header {...defaultHeaderProps} onPreview={undefined} />)
+
+      // Assert
+      const previewButton = screen.getByRole('button', { name: /datasetPipeline.addDocuments.stepTwo.previewChunks/i })
+      expect(previewButton).toBeInTheDocument()
+      // Click should not throw
+      let didThrow = false
+      try {
+        fireEvent.click(previewButton)
+      }
+      catch {
+        didThrow = true
+      }
+      expect(didThrow).toBe(false)
+    })
+  })
+
+  // ==========================================
+  // User Interactions Testing
+  // ==========================================
+  describe('User Interactions', () => {
+    it('should call onReset when reset button is clicked', () => {
+      // Arrange
+      const onReset = jest.fn()
+      render(<Header {...defaultHeaderProps} onReset={onReset} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: /common.operation.reset/i }))
+
+      // Assert
+      expect(onReset).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onReset when reset button is disabled and clicked', () => {
+      // Arrange
+      const onReset = jest.fn()
+      render(<Header {...defaultHeaderProps} onReset={onReset} resetDisabled={true} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: /common.operation.reset/i }))
+
+      // Assert
+      expect(onReset).not.toHaveBeenCalled()
+    })
+
+    it('should call onPreview when preview button is clicked', () => {
+      // Arrange
+      const onPreview = jest.fn()
+      render(<Header {...defaultHeaderProps} onPreview={onPreview} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: /datasetPipeline.addDocuments.stepTwo.previewChunks/i }))
+
+      // Assert
+      expect(onPreview).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onPreview when preview button is disabled and clicked', () => {
+      // Arrange
+      const onPreview = jest.fn()
+      render(<Header {...defaultHeaderProps} onPreview={onPreview} previewDisabled={true} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: /datasetPipeline.addDocuments.stepTwo.previewChunks/i }))
+
+      // Assert
+      expect(onPreview).not.toHaveBeenCalled()
+    })
+  })
+
+  // ==========================================
+  // Component Memoization Testing
+  // ==========================================
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      // Assert
+      expect(Header.$$typeof).toBe(Symbol.for('react.memo'))
+    })
+  })
+
+  // ==========================================
+  // Edge Cases Testing
+  // ==========================================
+  describe('Edge Cases', () => {
+    it('should handle both buttons disabled', () => {
+      // Arrange & Act
+      render(<Header {...defaultHeaderProps} resetDisabled={true} previewDisabled={true} />)
+
+      // Assert
+      const resetButton = screen.getByRole('button', { name: /common.operation.reset/i })
+      const previewButton = screen.getByRole('button', { name: /datasetPipeline.addDocuments.stepTwo.previewChunks/i })
+      expect(resetButton).toBeDisabled()
+      expect(previewButton).toBeDisabled()
+    })
+
+    it('should handle both buttons enabled', () => {
+      // Arrange & Act
+      render(<Header {...defaultHeaderProps} resetDisabled={false} previewDisabled={false} />)
+
+      // Assert
+      const resetButton = screen.getByRole('button', { name: /common.operation.reset/i })
+      const previewButton = screen.getByRole('button', { name: /datasetPipeline.addDocuments.stepTwo.previewChunks/i })
+      expect(resetButton).not.toBeDisabled()
+      expect(previewButton).not.toBeDisabled()
+    })
+  })
+})
+
+// ==========================================
+// Form Component Tests
+// ==========================================
+describe('Form', () => {
+  const defaultFormProps = {
+    initialData: { field1: '' },
+    configurations: [] as BaseConfiguration[],
+    schema: createMockSchema(),
+    onSubmit: jest.fn(),
+    onPreview: jest.fn(),
+    ref: { current: null } as React.RefObject<unknown>,
+    isRunning: false,
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    toastNotifySpy.mockClear()
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      render(<Form {...defaultFormProps} />)
+
+      // Assert
+      expect(screen.getByText('datasetPipeline.addDocuments.stepTwo.chunkSettings')).toBeInTheDocument()
+    })
+
+    it('should render form element', () => {
+      // Arrange & Act
+      const { container } = render(<Form {...defaultFormProps} />)
+
+      // Assert
+      const form = container.querySelector('form')
+      expect(form).toBeInTheDocument()
+    })
+
+    it('should render Header component', () => {
+      // Arrange & Act
+      render(<Form {...defaultFormProps} />)
+
+      // Assert
+      expect(screen.getByText('datasetPipeline.addDocuments.stepTwo.chunkSettings')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /common.operation.reset/i })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /datasetPipeline.addDocuments.stepTwo.previewChunks/i })).toBeInTheDocument()
+    })
+
+    it('should have correct form structure', () => {
+      // Arrange & Act
+      const { container } = render(<Form {...defaultFormProps} />)
+
+      // Assert
+      const form = container.querySelector('form.flex.w-full.flex-col')
+      expect(form).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Props Testing
+  // ==========================================
+  describe('Props', () => {
+    describe('isRunning prop', () => {
+      it('should disable preview button when isRunning is true', () => {
+        // Arrange & Act
+        render(<Form {...defaultFormProps} isRunning={true} />)
+
+        // Assert
+        const previewButton = screen.getByRole('button', { name: /datasetPipeline.addDocuments.stepTwo.previewChunks/i })
+        expect(previewButton).toBeDisabled()
+      })
+
+      it('should not disable preview button when isRunning is false', () => {
+        // Arrange & Act
+        render(<Form {...defaultFormProps} isRunning={false} />)
+
+        // Assert
+        const previewButton = screen.getByRole('button', { name: /datasetPipeline.addDocuments.stepTwo.previewChunks/i })
+        expect(previewButton).not.toBeDisabled()
+      })
+    })
+
+    describe('configurations prop', () => {
+      it('should render empty when configurations is empty', () => {
+        // Arrange & Act
+        const { container } = render(<Form {...defaultFormProps} configurations={[]} />)
+
+        // Assert - the fields container should have no field children
+        const fieldsContainer = container.querySelector('.flex.flex-col.gap-3')
+        expect(fieldsContainer?.children.length).toBe(0)
+      })
+
+      it('should render all configurations', () => {
+        // Arrange
+        const configurations = [
+          createMockConfiguration({ variable: 'var1', label: 'Variable 1' }),
+          createMockConfiguration({ variable: 'var2', label: 'Variable 2' }),
+          createMockConfiguration({ variable: 'var3', label: 'Variable 3' }),
+        ]
+
+        // Act
+        render(<Form {...defaultFormProps} configurations={configurations} initialData={{ var1: '', var2: '', var3: '' }} />)
+
+        // Assert
+        expect(screen.getByText('Variable 1')).toBeInTheDocument()
+        expect(screen.getByText('Variable 2')).toBeInTheDocument()
+        expect(screen.getByText('Variable 3')).toBeInTheDocument()
+      })
+    })
+
+    it('should expose submit method via ref', () => {
+      // Arrange
+      const mockRef = { current: null } as React.MutableRefObject<{ submit: () => void } | null>
+
+      // Act
+      render(<Form {...defaultFormProps} ref={mockRef} />)
+
+      // Assert
+      expect(mockRef.current).not.toBeNull()
+      expect(typeof mockRef.current?.submit).toBe('function')
+    })
+  })
+
+  // ==========================================
+  // Ref Submit Testing
+  // ==========================================
+  describe('Ref Submit', () => {
+    it('should call onSubmit when ref.submit() is called', async () => {
+      // Arrange
+      const onSubmit = jest.fn()
+      const mockRef = { current: null } as React.MutableRefObject<{ submit: () => void } | null>
+      render(<Form {...defaultFormProps} ref={mockRef} onSubmit={onSubmit} />)
+
+      // Act - call submit via ref
+      mockRef.current?.submit()
+
+      // Assert
+      await waitFor(() => {
+        expect(onSubmit).toHaveBeenCalled()
+      })
+    })
+
+    it('should trigger form validation when ref.submit() is called', async () => {
+      // Arrange
+      const failingSchema = createFailingSchema()
+      const mockRef = { current: null } as React.MutableRefObject<{ submit: () => void } | null>
+      render(<Form {...defaultFormProps} ref={mockRef} schema={failingSchema} />)
+
+      // Act - call submit via ref
+      mockRef.current?.submit()
+
+      // Assert - validation error should be shown
+      await waitFor(() => {
+        expect(toastNotifySpy).toHaveBeenCalledWith({
+          type: 'error',
+          message: '"field1" is required',
+        })
+      })
+    })
+  })
+
+  // ==========================================
+  // User Interactions Testing
+  // ==========================================
+  describe('User Interactions', () => {
+    it('should call onPreview when preview button is clicked', () => {
+      // Arrange
+      const onPreview = jest.fn()
+      render(<Form {...defaultFormProps} onPreview={onPreview} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: /datasetPipeline.addDocuments.stepTwo.previewChunks/i }))
+
+      // Assert
+      expect(onPreview).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle form submission via form element', async () => {
+      // Arrange
+      const onSubmit = jest.fn()
+      const { container } = render(<Form {...defaultFormProps} onSubmit={onSubmit} />)
+      const form = container.querySelector('form')!
+
+      // Act
+      fireEvent.submit(form)
+
+      // Assert
+      await waitFor(() => {
+        expect(onSubmit).toHaveBeenCalled()
+      })
+    })
+  })
+
+  // ==========================================
+  // Form State Testing
+  // ==========================================
+  describe('Form State', () => {
+    it('should disable reset button initially when form is not dirty', () => {
+      // Arrange & Act
+      render(<Form {...defaultFormProps} />)
+
+      // Assert
+      const resetButton = screen.getByRole('button', { name: /common.operation.reset/i })
+      expect(resetButton).toBeDisabled()
+    })
+
+    it('should enable reset button when form becomes dirty', async () => {
+      // Arrange
+      const configurations = [
+        createMockConfiguration({ variable: 'field1', label: 'Field 1' }),
+      ]
+
+      render(<Form {...defaultFormProps} configurations={configurations} />)
+
+      // Act - change input to make form dirty
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: 'new value' } })
+
+      // Assert
+      await waitFor(() => {
+        const resetButton = screen.getByRole('button', { name: /common.operation.reset/i })
+        expect(resetButton).not.toBeDisabled()
+      })
+    })
+
+    it('should reset form to initial values when reset button is clicked', async () => {
+      // Arrange
+      const configurations = [
+        createMockConfiguration({ variable: 'field1', label: 'Field 1' }),
+      ]
+      const initialData = { field1: 'initial value' }
+
+      render(<Form {...defaultFormProps} configurations={configurations} initialData={initialData} />)
+
+      // Act - change input to make form dirty
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: 'new value' } })
+
+      // Wait for reset button to be enabled
+      await waitFor(() => {
+        const resetButton = screen.getByRole('button', { name: /common.operation.reset/i })
+        expect(resetButton).not.toBeDisabled()
+      })
+
+      // Click reset button
+      const resetButton = screen.getByRole('button', { name: /common.operation.reset/i })
+      fireEvent.click(resetButton)
+
+      // Assert - form should be reset, button should be disabled again
+      await waitFor(() => {
+        expect(resetButton).toBeDisabled()
+      })
+    })
+
+    it('should call form.reset when handleReset is triggered', async () => {
+      // Arrange
+      const configurations = [
+        createMockConfiguration({ variable: 'field1', label: 'Field 1' }),
+      ]
+      const initialData = { field1: 'original' }
+
+      render(<Form {...defaultFormProps} configurations={configurations} initialData={initialData} />)
+
+      // Make form dirty
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: 'modified' } })
+
+      // Wait for dirty state
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /common.operation.reset/i })).not.toBeDisabled()
+      })
+
+      // Act - click reset
+      fireEvent.click(screen.getByRole('button', { name: /common.operation.reset/i }))
+
+      // Assert - input should be reset to initial value
+      await waitFor(() => {
+        expect(input).toHaveValue('original')
+      })
+    })
+  })
+
+  // ==========================================
+  // Validation Testing
+  // ==========================================
+  describe('Validation', () => {
+    it('should show toast notification on validation error', async () => {
+      // Arrange
+      const failingSchema = createFailingSchema()
+      const { container } = render(<Form {...defaultFormProps} schema={failingSchema} />)
+
+      // Act
+      const form = container.querySelector('form')!
+      fireEvent.submit(form)
+
+      // Assert
+      await waitFor(() => {
+        expect(toastNotifySpy).toHaveBeenCalledWith({
+          type: 'error',
+          message: '"field1" is required',
+        })
+      })
+    })
+
+    it('should not call onSubmit when validation fails', async () => {
+      // Arrange
+      const onSubmit = jest.fn()
+      const failingSchema = createFailingSchema()
+      const { container } = render(<Form {...defaultFormProps} schema={failingSchema} onSubmit={onSubmit} />)
+
+      // Act
+      const form = container.querySelector('form')!
+      fireEvent.submit(form)
+
+      // Assert - wait a bit and verify onSubmit was not called
+      await waitFor(() => {
+        expect(toastNotifySpy).toHaveBeenCalled()
+      })
+      expect(onSubmit).not.toHaveBeenCalled()
+    })
+
+    it('should call onSubmit when validation passes', async () => {
+      // Arrange
+      const onSubmit = jest.fn()
+      const passingSchema = createMockSchema()
+      const { container } = render(<Form {...defaultFormProps} schema={passingSchema} onSubmit={onSubmit} />)
+
+      // Act
+      const form = container.querySelector('form')!
+      fireEvent.submit(form)
+
+      // Assert
+      await waitFor(() => {
+        expect(onSubmit).toHaveBeenCalled()
+      })
+    })
+  })
+
+  // ==========================================
+  // Edge Cases Testing
+  // ==========================================
+  describe('Edge Cases', () => {
+    it('should handle empty initialData', () => {
+      // Arrange & Act
+      render(<Form {...defaultFormProps} initialData={{}} />)
+
+      // Assert
+      expect(screen.getByText('datasetPipeline.addDocuments.stepTwo.chunkSettings')).toBeInTheDocument()
+    })
+
+    it('should handle configurations with different field types', () => {
+      // Arrange
+      const configurations = [
+        createMockConfiguration({ type: BaseFieldType.textInput, variable: 'text', label: 'Text Field' }),
+        createMockConfiguration({ type: BaseFieldType.numberInput, variable: 'number', label: 'Number Field' }),
+      ]
+
+      // Act
+      render(<Form {...defaultFormProps} configurations={configurations} initialData={{ text: '', number: 0 }} />)
+
+      // Assert
+      expect(screen.getByText('Text Field')).toBeInTheDocument()
+      expect(screen.getByText('Number Field')).toBeInTheDocument()
+    })
+
+    it('should handle null ref', () => {
+      // Arrange & Act
+      render(<Form {...defaultFormProps} ref={{ current: null }} />)
+
+      // Assert
+      expect(screen.getByText('datasetPipeline.addDocuments.stepTwo.chunkSettings')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Configuration Variations Testing
+  // ==========================================
+  describe('Configuration Variations', () => {
+    it('should render configuration with label', () => {
+      // Arrange
+      const configurations = [
+        createMockConfiguration({ variable: 'field1', label: 'Custom Label' }),
+      ]
+
+      // Act
+      render(<Form {...defaultFormProps} configurations={configurations} />)
+
+      // Assert
+      expect(screen.getByText('Custom Label')).toBeInTheDocument()
+    })
+
+    it('should render required configuration', () => {
+      // Arrange
+      const configurations = [
+        createMockConfiguration({ variable: 'field1', label: 'Required Field', required: true }),
+      ]
+
+      // Act
+      render(<Form {...defaultFormProps} configurations={configurations} />)
+
+      // Assert
+      expect(screen.getByText('Required Field')).toBeInTheDocument()
+    })
+  })
+})
+
+// ==========================================
+// Integration Tests (Cross-component)
+// ==========================================
+describe('Process Documents Components Integration', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Form with Header Integration', () => {
+    const defaultFormProps = {
+      initialData: { field1: '' },
+      configurations: [] as BaseConfiguration[],
+      schema: createMockSchema(),
+      onSubmit: jest.fn(),
+      onPreview: jest.fn(),
+      ref: { current: null } as React.RefObject<unknown>,
+      isRunning: false,
+    }
+
+    it('should render Header within Form', () => {
+      // Arrange & Act
+      render(<Form {...defaultFormProps} />)
+
+      // Assert
+      expect(screen.getByText('datasetPipeline.addDocuments.stepTwo.chunkSettings')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /common.operation.reset/i })).toBeInTheDocument()
+    })
+
+    it('should pass isRunning to Header for previewDisabled', () => {
+      // Arrange & Act
+      render(<Form {...defaultFormProps} isRunning={true} />)
+
+      // Assert
+      const previewButton = screen.getByRole('button', { name: /datasetPipeline.addDocuments.stepTwo.previewChunks/i })
+      expect(previewButton).toBeDisabled()
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/process-documents/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/process-documents/index.spec.tsx
new file mode 100644
index 0000000000..8b132de0de
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/process-documents/index.spec.tsx
@@ -0,0 +1,601 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import ProcessDocuments from './index'
+import type { BaseConfiguration } from '@/app/components/base/form/form-scenarios/base/types'
+import { BaseFieldType } from '@/app/components/base/form/form-scenarios/base/types'
+
+// ==========================================
+// Mock External Dependencies
+// ==========================================
+
+// Mock useInputVariables hook
+let mockIsFetchingParams = false
+let mockParamsConfig: { variables: unknown[] } | undefined = { variables: [] }
+jest.mock('./hooks', () => ({
+  useInputVariables: jest.fn(() => ({
+    isFetchingParams: mockIsFetchingParams,
+    paramsConfig: mockParamsConfig,
+  })),
+}))
+
+// Mock useConfigurations hook
+let mockConfigurations: BaseConfiguration[] = []
+
+// Mock useInitialData hook
+let mockInitialData: Record<string, unknown> = {}
+jest.mock('@/app/components/rag-pipeline/hooks/use-input-fields', () => ({
+  useInitialData: jest.fn(() => mockInitialData),
+  useConfigurations: jest.fn(() => mockConfigurations),
+}))
+
+// ==========================================
+// Test Data Factory Functions
+// ==========================================
+
+/**
+ * Creates mock configuration for testing
+ */
+const createMockConfiguration = (overrides: Partial<BaseConfiguration> = {}): BaseConfiguration => ({
+  type: BaseFieldType.textInput,
+  variable: 'testVariable',
+  label: 'Test Label',
+  required: false,
+  maxLength: undefined,
+  options: undefined,
+  showConditions: [],
+  placeholder: '',
+  tooltip: '',
+  ...overrides,
+})
+
+/**
+ * Creates default test props
+ */
+const createDefaultProps = (overrides: Partial<React.ComponentProps<typeof ProcessDocuments>> = {}) => ({
+  dataSourceNodeId: 'test-node-id',
+  ref: { current: null } as React.RefObject<unknown>,
+  isRunning: false,
+  onProcess: jest.fn(),
+  onPreview: jest.fn(),
+  onSubmit: jest.fn(),
+  onBack: jest.fn(),
+  ...overrides,
+})
+
+// ==========================================
+// Test Suite
+// ==========================================
+
+describe('ProcessDocuments', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    // Reset mock values
+    mockIsFetchingParams = false
+    mockParamsConfig = { variables: [] }
+    mockInitialData = {}
+    mockConfigurations = []
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    // Tests basic rendering functionality
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<ProcessDocuments {...props} />)
+
+      // Assert - check for Header title from Form component
+      expect(screen.getByText('datasetPipeline.addDocuments.stepTwo.chunkSettings')).toBeInTheDocument()
+    })
+
+    it('should render Form and Actions components', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<ProcessDocuments {...props} />)
+
+      // Assert - check for elements from both components
+      expect(screen.getByText('datasetPipeline.addDocuments.stepTwo.chunkSettings')).toBeInTheDocument()
+      expect(screen.getByText('datasetPipeline.operations.dataSource')).toBeInTheDocument()
+      expect(screen.getByText('datasetPipeline.operations.saveAndProcess')).toBeInTheDocument()
+    })
+
+    it('should render with correct container structure', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<ProcessDocuments {...props} />)
+
+      // Assert
+      const mainContainer = container.querySelector('.flex.flex-col.gap-y-4.pt-4')
+      expect(mainContainer).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Props Testing
+  // ==========================================
+  describe('Props', () => {
+    describe('dataSourceNodeId prop', () => {
+      it('should pass dataSourceNodeId to useInputVariables hook', () => {
+        // Arrange
+        const { useInputVariables } = require('./hooks')
+        const props = createDefaultProps({ dataSourceNodeId: 'custom-node-id' })
+
+        // Act
+        render(<ProcessDocuments {...props} />)
+
+        // Assert
+        expect(useInputVariables).toHaveBeenCalledWith('custom-node-id')
+      })
+
+      it('should handle empty dataSourceNodeId', () => {
+        // Arrange
+        const props = createDefaultProps({ dataSourceNodeId: '' })
+
+        // Act
+        render(<ProcessDocuments {...props} />)
+
+        // Assert
+        expect(screen.getByText('datasetPipeline.addDocuments.stepTwo.chunkSettings')).toBeInTheDocument()
+      })
+    })
+
+    describe('isRunning prop', () => {
+      it('should disable preview button when isRunning is true', () => {
+        // Arrange
+        const props = createDefaultProps({ isRunning: true })
+
+        // Act
+        render(<ProcessDocuments {...props} />)
+
+        // Assert
+        const previewButton = screen.getByRole('button', { name: /datasetPipeline.addDocuments.stepTwo.previewChunks/i })
+        expect(previewButton).toBeDisabled()
+      })
+
+      it('should not disable preview button when isRunning is false', () => {
+        // Arrange
+        const props = createDefaultProps({ isRunning: false })
+
+        // Act
+        render(<ProcessDocuments {...props} />)
+
+        // Assert
+        const previewButton = screen.getByRole('button', { name: /datasetPipeline.addDocuments.stepTwo.previewChunks/i })
+        expect(previewButton).not.toBeDisabled()
+      })
+
+      it('should disable process button in Actions when isRunning is true', () => {
+        // Arrange
+        mockIsFetchingParams = false
+        const props = createDefaultProps({ isRunning: true })
+
+        // Act
+        render(<ProcessDocuments {...props} />)
+
+        // Assert
+        const processButton = screen.getByRole('button', { name: /datasetPipeline.operations.saveAndProcess/i })
+        expect(processButton).toBeDisabled()
+      })
+    })
+
+    describe('ref prop', () => {
+      it('should expose submit method via ref', () => {
+        // Arrange
+        const mockRef = { current: null } as React.MutableRefObject<{ submit: () => void } | null>
+        const props = createDefaultProps({ ref: mockRef })
+
+        // Act
+        render(<ProcessDocuments {...props} />)
+
+        // Assert
+        expect(mockRef.current).not.toBeNull()
+        expect(typeof mockRef.current?.submit).toBe('function')
+      })
+    })
+  })
+
+  // ==========================================
+  // User Interactions Testing
+  // ==========================================
+  describe('User Interactions', () => {
+    it('should call onProcess when Actions process button is clicked', () => {
+      // Arrange
+      const onProcess = jest.fn()
+      const props = createDefaultProps({ onProcess })
+
+      render(<ProcessDocuments {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: /datasetPipeline.operations.saveAndProcess/i }))
+
+      // Assert
+      expect(onProcess).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onBack when Actions back button is clicked', () => {
+      // Arrange
+      const onBack = jest.fn()
+      const props = createDefaultProps({ onBack })
+
+      render(<ProcessDocuments {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: /datasetPipeline.operations.dataSource/i }))
+
+      // Assert
+      expect(onBack).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onPreview when preview button is clicked', () => {
+      // Arrange
+      const onPreview = jest.fn()
+      const props = createDefaultProps({ onPreview })
+
+      render(<ProcessDocuments {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: /datasetPipeline.addDocuments.stepTwo.previewChunks/i }))
+
+      // Assert
+      expect(onPreview).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onSubmit when form is submitted', async () => {
+      // Arrange
+      const onSubmit = jest.fn()
+      const props = createDefaultProps({ onSubmit })
+      const { container } = render(<ProcessDocuments {...props} />)
+
+      // Act
+      const form = container.querySelector('form')!
+      fireEvent.submit(form)
+
+      // Assert
+      await waitFor(() => {
+        expect(onSubmit).toHaveBeenCalled()
+      })
+    })
+  })
+
+  // ==========================================
+  // Hook Integration Tests
+  // ==========================================
+  describe('Hook Integration', () => {
+    it('should pass variables from useInputVariables to useInitialData', () => {
+      // Arrange
+      const mockVariables = [{ variable: 'testVar', type: 'text', label: 'Test' }]
+      mockParamsConfig = { variables: mockVariables }
+      const { useInitialData } = require('@/app/components/rag-pipeline/hooks/use-input-fields')
+      const props = createDefaultProps()
+
+      // Act
+      render(<ProcessDocuments {...props} />)
+
+      // Assert
+      expect(useInitialData).toHaveBeenCalledWith(mockVariables)
+    })
+
+    it('should pass variables from useInputVariables to useConfigurations', () => {
+      // Arrange
+      const mockVariables = [{ variable: 'testVar', type: 'text', label: 'Test' }]
+      mockParamsConfig = { variables: mockVariables }
+      const { useConfigurations } = require('@/app/components/rag-pipeline/hooks/use-input-fields')
+      const props = createDefaultProps()
+
+      // Act
+      render(<ProcessDocuments {...props} />)
+
+      // Assert
+      expect(useConfigurations).toHaveBeenCalledWith(mockVariables)
+    })
+
+    it('should use empty array when paramsConfig.variables is undefined', () => {
+      // Arrange
+      mockParamsConfig = { variables: undefined as unknown as unknown[] }
+      const { useInitialData, useConfigurations } = require('@/app/components/rag-pipeline/hooks/use-input-fields')
+      const props = createDefaultProps()
+
+      // Act
+      render(<ProcessDocuments {...props} />)
+
+      // Assert
+      expect(useInitialData).toHaveBeenCalledWith([])
+      expect(useConfigurations).toHaveBeenCalledWith([])
+    })
+
+    it('should use empty array when paramsConfig is undefined', () => {
+      // Arrange
+      mockParamsConfig = undefined
+      const { useInitialData, useConfigurations } = require('@/app/components/rag-pipeline/hooks/use-input-fields')
+      const props = createDefaultProps()
+
+      // Act
+      render(<ProcessDocuments {...props} />)
+
+      // Assert
+      expect(useInitialData).toHaveBeenCalledWith([])
+      expect(useConfigurations).toHaveBeenCalledWith([])
+    })
+  })
+
+  // ==========================================
+  // Actions runDisabled Testing
+  // ==========================================
+  describe('Actions runDisabled', () => {
+    it('should disable process button when isFetchingParams is true', () => {
+      // Arrange
+      mockIsFetchingParams = true
+      const props = createDefaultProps({ isRunning: false })
+
+      // Act
+      render(<ProcessDocuments {...props} />)
+
+      // Assert
+      const processButton = screen.getByRole('button', { name: /datasetPipeline.operations.saveAndProcess/i })
+      expect(processButton).toBeDisabled()
+    })
+
+    it('should disable process button when isRunning is true', () => {
+      // Arrange
+      mockIsFetchingParams = false
+      const props = createDefaultProps({ isRunning: true })
+
+      // Act
+      render(<ProcessDocuments {...props} />)
+
+      // Assert
+      const processButton = screen.getByRole('button', { name: /datasetPipeline.operations.saveAndProcess/i })
+      expect(processButton).toBeDisabled()
+    })
+
+    it('should enable process button when both isFetchingParams and isRunning are false', () => {
+      // Arrange
+      mockIsFetchingParams = false
+      const props = createDefaultProps({ isRunning: false })
+
+      // Act
+      render(<ProcessDocuments {...props} />)
+
+      // Assert
+      const processButton = screen.getByRole('button', { name: /datasetPipeline.operations.saveAndProcess/i })
+      expect(processButton).not.toBeDisabled()
+    })
+
+    it('should disable process button when both isFetchingParams and isRunning are true', () => {
+      // Arrange
+      mockIsFetchingParams = true
+      const props = createDefaultProps({ isRunning: true })
+
+      // Act
+      render(<ProcessDocuments {...props} />)
+
+      // Assert
+      const processButton = screen.getByRole('button', { name: /datasetPipeline.operations.saveAndProcess/i })
+      expect(processButton).toBeDisabled()
+    })
+  })
+
+  // ==========================================
+  // Component Memoization Testing
+  // ==========================================
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      // Assert - verify component has memo wrapper
+      expect(ProcessDocuments.$$typeof).toBe(Symbol.for('react.memo'))
+    })
+
+    it('should render correctly after rerender with same props', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { rerender } = render(<ProcessDocuments {...props} />)
+      rerender(<ProcessDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByText('datasetPipeline.addDocuments.stepTwo.chunkSettings')).toBeInTheDocument()
+    })
+
+    it('should update when dataSourceNodeId prop changes', () => {
+      // Arrange
+      const { useInputVariables } = require('./hooks')
+      const props = createDefaultProps({ dataSourceNodeId: 'node-1' })
+
+      // Act
+      const { rerender } = render(<ProcessDocuments {...props} />)
+      expect(useInputVariables).toHaveBeenLastCalledWith('node-1')
+
+      rerender(<ProcessDocuments {...props} dataSourceNodeId="node-2" />)
+
+      // Assert
+      expect(useInputVariables).toHaveBeenLastCalledWith('node-2')
+    })
+  })
+
+  // ==========================================
+  // Edge Cases Testing
+  // ==========================================
+  describe('Edge Cases', () => {
+    it('should handle undefined paramsConfig gracefully', () => {
+      // Arrange
+      mockParamsConfig = undefined
+      const props = createDefaultProps()
+
+      // Act
+      render(<ProcessDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByText('datasetPipeline.addDocuments.stepTwo.chunkSettings')).toBeInTheDocument()
+    })
+
+    it('should handle empty variables array', () => {
+      // Arrange
+      mockParamsConfig = { variables: [] }
+      mockConfigurations = []
+      const props = createDefaultProps()
+
+      // Act
+      render(<ProcessDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByText('datasetPipeline.addDocuments.stepTwo.chunkSettings')).toBeInTheDocument()
+    })
+
+    it('should handle special characters in dataSourceNodeId', () => {
+      // Arrange
+      const { useInputVariables } = require('./hooks')
+      const props = createDefaultProps({ dataSourceNodeId: 'node-id-with-special_chars:123' })
+
+      // Act
+      render(<ProcessDocuments {...props} />)
+
+      // Assert
+      expect(useInputVariables).toHaveBeenCalledWith('node-id-with-special_chars:123')
+    })
+
+    it('should handle long dataSourceNodeId', () => {
+      // Arrange
+      const { useInputVariables } = require('./hooks')
+      const longId = 'a'.repeat(1000)
+      const props = createDefaultProps({ dataSourceNodeId: longId })
+
+      // Act
+      render(<ProcessDocuments {...props} />)
+
+      // Assert
+      expect(useInputVariables).toHaveBeenCalledWith(longId)
+    })
+
+    it('should handle multiple callbacks without interference', () => {
+      // Arrange
+      const onProcess = jest.fn()
+      const onBack = jest.fn()
+      const onPreview = jest.fn()
+      const props = createDefaultProps({ onProcess, onBack, onPreview })
+
+      render(<ProcessDocuments {...props} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: /datasetPipeline.operations.saveAndProcess/i }))
+      fireEvent.click(screen.getByRole('button', { name: /datasetPipeline.operations.dataSource/i }))
+      fireEvent.click(screen.getByRole('button', { name: /datasetPipeline.addDocuments.stepTwo.previewChunks/i }))
+
+      // Assert
+      expect(onProcess).toHaveBeenCalledTimes(1)
+      expect(onBack).toHaveBeenCalledTimes(1)
+      expect(onPreview).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // ==========================================
+  // runDisabled Logic Testing (with test.each)
+  // ==========================================
+  describe('runDisabled Logic', () => {
+    const runDisabledTestCases = [
+      { isFetchingParams: false, isRunning: false, expectedDisabled: false },
+      { isFetchingParams: false, isRunning: true, expectedDisabled: true },
+      { isFetchingParams: true, isRunning: false, expectedDisabled: true },
+      { isFetchingParams: true, isRunning: true, expectedDisabled: true },
+    ]
+
+    it.each(runDisabledTestCases)(
+      'should set process button disabled=$expectedDisabled when isFetchingParams=$isFetchingParams and isRunning=$isRunning',
+      ({ isFetchingParams, isRunning, expectedDisabled }) => {
+        // Arrange
+        mockIsFetchingParams = isFetchingParams
+        const props = createDefaultProps({ isRunning })
+
+        // Act
+        render(<ProcessDocuments {...props} />)
+
+        // Assert
+        const processButton = screen.getByRole('button', { name: /datasetPipeline.operations.saveAndProcess/i })
+        if (expectedDisabled)
+          expect(processButton).toBeDisabled()
+        else
+          expect(processButton).not.toBeDisabled()
+      },
+    )
+  })
+
+  // ==========================================
+  // Configuration Rendering Tests
+  // ==========================================
+  describe('Configuration Rendering', () => {
+    it('should render configurations as form fields', () => {
+      // Arrange
+      mockConfigurations = [
+        createMockConfiguration({ variable: 'var1', label: 'Variable 1' }),
+        createMockConfiguration({ variable: 'var2', label: 'Variable 2' }),
+      ]
+      mockInitialData = { var1: '', var2: '' }
+      const props = createDefaultProps()
+
+      // Act
+      render(<ProcessDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByText('Variable 1')).toBeInTheDocument()
+      expect(screen.getByText('Variable 2')).toBeInTheDocument()
+    })
+
+    it('should handle configurations with different field types', () => {
+      // Arrange
+      mockConfigurations = [
+        createMockConfiguration({ type: BaseFieldType.textInput, variable: 'textVar', label: 'Text Field' }),
+        createMockConfiguration({ type: BaseFieldType.numberInput, variable: 'numberVar', label: 'Number Field' }),
+      ]
+      mockInitialData = { textVar: '', numberVar: 0 }
+      const props = createDefaultProps()
+
+      // Act
+      render(<ProcessDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByText('Text Field')).toBeInTheDocument()
+      expect(screen.getByText('Number Field')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Full Integration Props Testing
+  // ==========================================
+  describe('Full Prop Integration', () => {
+    it('should render correctly with all props provided', () => {
+      // Arrange
+      const mockRef = { current: null } as React.MutableRefObject<{ submit: () => void } | null>
+      mockIsFetchingParams = false
+      mockParamsConfig = { variables: [{ variable: 'testVar', type: 'text', label: 'Test' }] }
+      mockInitialData = { testVar: 'initial value' }
+      mockConfigurations = [createMockConfiguration({ variable: 'testVar', label: 'Test Variable' })]
+
+      const props = {
+        dataSourceNodeId: 'full-test-node',
+        ref: mockRef,
+        isRunning: false,
+        onProcess: jest.fn(),
+        onPreview: jest.fn(),
+        onSubmit: jest.fn(),
+        onBack: jest.fn(),
+      }
+
+      // Act
+      render(<ProcessDocuments {...props} />)
+
+      // Assert
+      expect(screen.getByText('datasetPipeline.addDocuments.stepTwo.chunkSettings')).toBeInTheDocument()
+      expect(screen.getByText('datasetPipeline.operations.dataSource')).toBeInTheDocument()
+      expect(screen.getByText('datasetPipeline.operations.saveAndProcess')).toBeInTheDocument()
+      expect(screen.getByText('Test Variable')).toBeInTheDocument()
+      expect(mockRef.current).not.toBeNull()
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.spec.tsx
new file mode 100644
index 0000000000..3684f3aef6
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.spec.tsx
@@ -0,0 +1,1260 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import EmbeddingProcess from './index'
+import type { DocumentIndexingStatus, IndexingStatusResponse } from '@/models/datasets'
+import { DatasourceType, type InitialDocumentDetail } from '@/models/pipeline'
+import { Plan } from '@/app/components/billing/type'
+import { RETRIEVE_METHOD } from '@/types/app'
+import { IndexingType } from '@/app/components/datasets/create/step-two'
+
+// ==========================================
+// Mock External Dependencies
+// ==========================================
+
+// Mock next/navigation
+const mockPush = jest.fn()
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+}))
+
+// Mock next/link
+jest.mock('next/link', () => {
+  return function MockLink({ children, href, ...props }: { children: React.ReactNode; href: string }) {
+    return <a href={href} {...props}>{children}</a>
+  }
+})
+
+// Mock provider context
+let mockEnableBilling = false
+let mockPlanType: Plan = Plan.sandbox
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    enableBilling: mockEnableBilling,
+    plan: { type: mockPlanType },
+  }),
+}))
+
+// Mock useIndexingStatusBatch hook
+let mockFetchIndexingStatus: jest.Mock
+let mockIndexingStatusData: IndexingStatusResponse[] = []
+jest.mock('@/service/knowledge/use-dataset', () => ({
+  useIndexingStatusBatch: () => ({
+    mutateAsync: mockFetchIndexingStatus,
+  }),
+  useProcessRule: () => ({
+    data: {
+      mode: 'custom',
+      rules: { parent_mode: 'paragraph' },
+    },
+  }),
+}))
+
+// Mock useInvalidDocumentList hook
+const mockInvalidDocumentList = jest.fn()
+jest.mock('@/service/knowledge/use-document', () => ({
+  useInvalidDocumentList: () => mockInvalidDocumentList,
+}))
+
+// Mock useDatasetApiAccessUrl hook
+jest.mock('@/hooks/use-api-access-url', () => ({
+  useDatasetApiAccessUrl: () => 'https://docs.dify.ai/api-reference/datasets',
+}))
+
+// ==========================================
+// Test Data Factory Functions
+// ==========================================
+
+/**
+ * Creates a mock InitialDocumentDetail for testing
+ * Uses deterministic counter-based IDs to avoid flaky tests
+ */
+let documentIdCounter = 0
+const createMockDocument = (overrides: Partial<InitialDocumentDetail> = {}): InitialDocumentDetail => ({
+  id: overrides.id ?? `doc-${++documentIdCounter}`,
+  name: 'test-document.txt',
+  data_source_type: DatasourceType.localFile,
+  data_source_info: {},
+  enable: true,
+  error: '',
+  indexing_status: 'waiting' as DocumentIndexingStatus,
+  position: 0,
+  ...overrides,
+})
+
+/**
+ * Creates a mock IndexingStatusResponse for testing
+ */
+const createMockIndexingStatus = (overrides: Partial<IndexingStatusResponse> = {}): IndexingStatusResponse => ({
+  id: `doc-${Math.random().toString(36).slice(2, 9)}`,
+  indexing_status: 'waiting' as DocumentIndexingStatus,
+  processing_started_at: Date.now(),
+  parsing_completed_at: 0,
+  cleaning_completed_at: 0,
+  splitting_completed_at: 0,
+  completed_at: null,
+  paused_at: null,
+  error: null,
+  stopped_at: null,
+  completed_segments: 0,
+  total_segments: 100,
+  ...overrides,
+})
+
+/**
+ * Creates default props for EmbeddingProcess component
+ */
+const createDefaultProps = (overrides: Partial<{
+  datasetId: string
+  batchId: string
+  documents: InitialDocumentDetail[]
+  indexingType: IndexingType
+  retrievalMethod: RETRIEVE_METHOD
+}> = {}) => ({
+  datasetId: 'dataset-123',
+  batchId: 'batch-456',
+  documents: [createMockDocument({ id: 'doc-1', name: 'test-doc.pdf' })],
+  indexingType: IndexingType.QUALIFIED,
+  retrievalMethod: RETRIEVE_METHOD.semantic,
+  ...overrides,
+})
+
+// ==========================================
+// Test Suite
+// ==========================================
+
+describe('EmbeddingProcess', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    jest.useFakeTimers()
+
+    // Reset deterministic ID counter for reproducible tests
+    documentIdCounter = 0
+
+    // Reset mock states
+    mockEnableBilling = false
+    mockPlanType = Plan.sandbox
+    mockIndexingStatusData = []
+
+    // Setup default mock for fetchIndexingStatus
+    mockFetchIndexingStatus = jest.fn().mockImplementation((_, options) => {
+      options?.onSuccess?.({ data: mockIndexingStatusData })
+      options?.onSettled?.()
+      return Promise.resolve({ data: mockIndexingStatusData })
+    })
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    // Tests basic rendering functionality
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('rule-detail')).toBeInTheDocument()
+    })
+
+    it('should render RuleDetail component with correct props', () => {
+      // Arrange
+      const props = createDefaultProps({
+        indexingType: IndexingType.ECONOMICAL,
+        retrievalMethod: RETRIEVE_METHOD.fullText,
+      })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+
+      // Assert - RuleDetail renders FieldInfo components with translated text
+      // Check that the component renders without error
+      expect(screen.getByTestId('rule-detail')).toBeInTheDocument()
+    })
+
+    it('should render API reference link with correct URL', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+
+      // Assert
+      const apiLink = screen.getByRole('link', { name: /access the api/i })
+      expect(apiLink).toHaveAttribute('href', 'https://docs.dify.ai/api-reference/datasets')
+      expect(apiLink).toHaveAttribute('target', '_blank')
+      expect(apiLink).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+
+    it('should render navigation button', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepThree.navTo')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Billing/Upgrade Banner Tests
+  // ==========================================
+  describe('Billing and Upgrade Banner', () => {
+    // Tests for billing-related UI
+    it('should not show upgrade banner when billing is disabled', () => {
+      // Arrange
+      mockEnableBilling = false
+      const props = createDefaultProps()
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+
+      // Assert
+      expect(screen.queryByText('billing.plansCommon.documentProcessingPriorityUpgrade')).not.toBeInTheDocument()
+    })
+
+    it('should show upgrade banner when billing is enabled and plan is not team', () => {
+      // Arrange
+      mockEnableBilling = true
+      mockPlanType = Plan.sandbox
+      const props = createDefaultProps()
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+
+      // Assert
+      expect(screen.getByText('billing.plansCommon.documentProcessingPriorityUpgrade')).toBeInTheDocument()
+    })
+
+    it('should not show upgrade banner when plan is team', () => {
+      // Arrange
+      mockEnableBilling = true
+      mockPlanType = Plan.team
+      const props = createDefaultProps()
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+
+      // Assert
+      expect(screen.queryByText('billing.plansCommon.documentProcessingPriorityUpgrade')).not.toBeInTheDocument()
+    })
+
+    it('should show upgrade banner for professional plan', () => {
+      // Arrange
+      mockEnableBilling = true
+      mockPlanType = Plan.professional
+      const props = createDefaultProps()
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+
+      // Assert
+      expect(screen.getByText('billing.plansCommon.documentProcessingPriorityUpgrade')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Status Display Tests
+  // ==========================================
+  describe('Status Display', () => {
+    // Tests for embedding status display
+    it('should show waiting status when all documents are waiting', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'waiting' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('datasetDocuments.embedding.waiting')).toBeInTheDocument()
+    })
+
+    it('should show processing status when any document is indexing', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'indexing' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('datasetDocuments.embedding.processing')).toBeInTheDocument()
+    })
+
+    it('should show processing status when any document is splitting', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'splitting' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('datasetDocuments.embedding.processing')).toBeInTheDocument()
+    })
+
+    it('should show processing status when any document is parsing', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'parsing' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('datasetDocuments.embedding.processing')).toBeInTheDocument()
+    })
+
+    it('should show processing status when any document is cleaning', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'cleaning' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('datasetDocuments.embedding.processing')).toBeInTheDocument()
+    })
+
+    it('should show completed status when all documents are completed', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'completed' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('datasetDocuments.embedding.completed')).toBeInTheDocument()
+    })
+
+    it('should show completed status when all documents have error status', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'error', error: 'Processing failed' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('datasetDocuments.embedding.completed')).toBeInTheDocument()
+    })
+
+    it('should show completed status when all documents are paused', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'paused' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('datasetDocuments.embedding.completed')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Progress Bar Tests
+  // ==========================================
+  describe('Progress Display', () => {
+    // Tests for progress bar rendering
+    it('should show progress percentage for embedding documents', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({
+          id: 'doc-1',
+          indexing_status: 'indexing',
+          completed_segments: 50,
+          total_segments: 100,
+        }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('50%')).toBeInTheDocument()
+    })
+
+    it('should cap progress at 100%', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({
+          id: 'doc-1',
+          indexing_status: 'indexing',
+          completed_segments: 150,
+          total_segments: 100,
+        }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('100%')).toBeInTheDocument()
+    })
+
+    it('should show 0% when total_segments is 0', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({
+          id: 'doc-1',
+          indexing_status: 'indexing',
+          completed_segments: 0,
+          total_segments: 0,
+        }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('0%')).toBeInTheDocument()
+    })
+
+    it('should not show progress for completed documents', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({
+          id: 'doc-1',
+          indexing_status: 'completed',
+          completed_segments: 100,
+          total_segments: 100,
+        }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.queryByText('100%')).not.toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Polling Logic Tests
+  // ==========================================
+  describe('Polling Logic', () => {
+    // Tests for API polling behavior
+    it('should start polling on mount', async () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+
+      // Assert - verify fetch was called at least once
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+    })
+
+    it('should continue polling while documents are processing', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'indexing' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+      const initialCallCount = mockFetchIndexingStatus.mock.calls.length
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+
+      // Wait for initial fetch
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus.mock.calls.length).toBeGreaterThan(initialCallCount)
+      })
+
+      const afterInitialCount = mockFetchIndexingStatus.mock.calls.length
+
+      // Advance timer for next poll
+      jest.advanceTimersByTime(2500)
+
+      // Assert - should poll again
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus.mock.calls.length).toBeGreaterThan(afterInitialCount)
+      })
+    })
+
+    it('should stop polling when all documents are completed', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'completed' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+
+      // Wait for initial fetch and state update
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      const callCountAfterComplete = mockFetchIndexingStatus.mock.calls.length
+
+      // Advance timer - polling should have stopped
+      jest.advanceTimersByTime(5000)
+
+      // Assert - call count should not increase significantly after completion
+      // Note: Due to React Strict Mode, there might be double renders
+      expect(mockFetchIndexingStatus.mock.calls.length).toBeLessThanOrEqual(callCountAfterComplete + 1)
+    })
+
+    it('should stop polling when all documents have errors', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'error' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+
+      // Wait for initial fetch
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      const callCountAfterError = mockFetchIndexingStatus.mock.calls.length
+
+      // Advance timer
+      jest.advanceTimersByTime(5000)
+
+      // Assert - should not poll significantly more after error state
+      expect(mockFetchIndexingStatus.mock.calls.length).toBeLessThanOrEqual(callCountAfterError + 1)
+    })
+
+    it('should stop polling when all documents are paused', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'paused' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+
+      // Wait for initial fetch
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      const callCountAfterPaused = mockFetchIndexingStatus.mock.calls.length
+
+      // Advance timer
+      jest.advanceTimersByTime(5000)
+
+      // Assert - should not poll significantly more after paused state
+      expect(mockFetchIndexingStatus.mock.calls.length).toBeLessThanOrEqual(callCountAfterPaused + 1)
+    })
+
+    it('should cleanup timeout on unmount', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'indexing' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      const { unmount } = render(<EmbeddingProcess {...props} />)
+
+      // Wait for initial fetch
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      const callCountBeforeUnmount = mockFetchIndexingStatus.mock.calls.length
+
+      // Unmount before next poll
+      unmount()
+
+      // Advance timer
+      jest.advanceTimersByTime(5000)
+
+      // Assert - should not poll after unmount
+      expect(mockFetchIndexingStatus.mock.calls.length).toBe(callCountBeforeUnmount)
+    })
+  })
+
+  // ==========================================
+  // User Interactions Tests
+  // ==========================================
+  describe('User Interactions', () => {
+    // Tests for button clicks and navigation
+    it('should navigate to document list when nav button is clicked', async () => {
+      // Arrange
+      const props = createDefaultProps({ datasetId: 'my-dataset-123' })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      const navButton = screen.getByText('datasetCreation.stepThree.navTo')
+      fireEvent.click(navButton)
+
+      // Assert
+      expect(mockInvalidDocumentList).toHaveBeenCalled()
+      expect(mockPush).toHaveBeenCalledWith('/datasets/my-dataset-123/documents')
+    })
+
+    it('should call invalidDocumentList before navigation', () => {
+      // Arrange
+      const props = createDefaultProps()
+      const callOrder: string[] = []
+      mockInvalidDocumentList.mockImplementation(() => callOrder.push('invalidate'))
+      mockPush.mockImplementation(() => callOrder.push('push'))
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      const navButton = screen.getByText('datasetCreation.stepThree.navTo')
+      fireEvent.click(navButton)
+
+      // Assert
+      expect(callOrder).toEqual(['invalidate', 'push'])
+    })
+  })
+
+  // ==========================================
+  // Document Display Tests
+  // ==========================================
+  describe('Document Display', () => {
+    // Tests for document list rendering
+    it('should display document names', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1', name: 'my-report.pdf' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'indexing' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('my-report.pdf')).toBeInTheDocument()
+    })
+
+    it('should display multiple documents', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1', name: 'file1.txt' })
+      const doc2 = createMockDocument({ id: 'doc-2', name: 'file2.pdf' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'indexing' }),
+        createMockIndexingStatus({ id: 'doc-2', indexing_status: 'waiting' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1, doc2] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('file1.txt')).toBeInTheDocument()
+      expect(screen.getByText('file2.pdf')).toBeInTheDocument()
+    })
+
+    it('should handle documents with special characters in names', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1', name: 'report_2024 (final) - copy.pdf' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'indexing' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('report_2024 (final) - copy.pdf')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Data Source Type Tests
+  // ==========================================
+  describe('Data Source Types', () => {
+    // Tests for different data source type displays
+    it('should handle local file data source', async () => {
+      // Arrange
+      const doc1 = createMockDocument({
+        id: 'doc-1',
+        name: 'local-file.pdf',
+        data_source_type: DatasourceType.localFile,
+      })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'indexing' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('local-file.pdf')).toBeInTheDocument()
+    })
+
+    it('should handle online document data source', async () => {
+      // Arrange
+      const doc1 = createMockDocument({
+        id: 'doc-1',
+        name: 'Notion Page',
+        data_source_type: DatasourceType.onlineDocument,
+        data_source_info: { notion_page_icon: { type: 'emoji', emoji: '📄' } },
+      })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'indexing' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('Notion Page')).toBeInTheDocument()
+    })
+
+    it('should handle website crawl data source', async () => {
+      // Arrange
+      const doc1 = createMockDocument({
+        id: 'doc-1',
+        name: 'https://example.com/page',
+        data_source_type: DatasourceType.websiteCrawl,
+      })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'indexing' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('https://example.com/page')).toBeInTheDocument()
+    })
+
+    it('should handle online drive data source', async () => {
+      // Arrange
+      const doc1 = createMockDocument({
+        id: 'doc-1',
+        name: 'Google Drive Document',
+        data_source_type: DatasourceType.onlineDrive,
+      })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'indexing' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('Google Drive Document')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Error Handling Tests
+  // ==========================================
+  describe('Error Handling', () => {
+    // Tests for error states and displays
+    it('should display error icon for documents with error status', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({
+          id: 'doc-1',
+          indexing_status: 'error',
+          error: 'Failed to process document',
+        }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      const { container } = render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert - error icon should be visible
+      const errorIcon = container.querySelector('.text-text-destructive')
+      expect(errorIcon).toBeInTheDocument()
+    })
+
+    it('should apply error styling to document row with error', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({
+          id: 'doc-1',
+          indexing_status: 'error',
+          error: 'Processing failed',
+        }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      const { container } = render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert - should have error background class
+      const errorRow = container.querySelector('.bg-state-destructive-hover-alt')
+      expect(errorRow).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Edge Cases
+  // ==========================================
+  describe('Edge Cases', () => {
+    // Tests for boundary conditions
+    it('should throw error when documents array is empty', () => {
+      // Arrange
+      // The component accesses documents[0].id for useProcessRule (line 81-82),
+      // which throws TypeError when documents array is empty.
+      // This test documents this known limitation.
+      const props = createDefaultProps({ documents: [] })
+
+      // Suppress console errors for expected error
+      const consoleError = jest.spyOn(console, 'error').mockImplementation(Function.prototype as () => void)
+
+      // Act & Assert - explicitly assert the error behavior
+      expect(() => {
+        render(<EmbeddingProcess {...props} />)
+      }).toThrow(TypeError)
+
+      consoleError.mockRestore()
+    })
+
+    it('should handle empty indexing status response', async () => {
+      // Arrange
+      mockIndexingStatusData = []
+      const props = createDefaultProps()
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert - should not show any status text when empty
+      expect(screen.queryByText('datasetDocuments.embedding.waiting')).not.toBeInTheDocument()
+      expect(screen.queryByText('datasetDocuments.embedding.processing')).not.toBeInTheDocument()
+      expect(screen.queryByText('datasetDocuments.embedding.completed')).not.toBeInTheDocument()
+    })
+
+    it('should handle document with undefined name', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1', name: undefined as unknown as string })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'indexing' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act & Assert - should not throw
+      expect(() => render(<EmbeddingProcess {...props} />)).not.toThrow()
+    })
+
+    it('should handle document not found in indexing status', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'other-doc', indexing_status: 'indexing' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act & Assert - should not throw
+      expect(() => render(<EmbeddingProcess {...props} />)).not.toThrow()
+    })
+
+    it('should handle undefined indexing_status', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({
+          id: 'doc-1',
+          indexing_status: undefined as unknown as DocumentIndexingStatus,
+        }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act & Assert - should not throw
+      expect(() => render(<EmbeddingProcess {...props} />)).not.toThrow()
+    })
+
+    it('should handle mixed status documents', async () => {
+      // Arrange
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      const doc2 = createMockDocument({ id: 'doc-2' })
+      const doc3 = createMockDocument({ id: 'doc-3' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'completed' }),
+        createMockIndexingStatus({ id: 'doc-2', indexing_status: 'indexing' }),
+        createMockIndexingStatus({ id: 'doc-3', indexing_status: 'error' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1, doc2, doc3] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert - should show processing (since one is still indexing)
+      expect(screen.getByText('datasetDocuments.embedding.processing')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Props Variations Tests
+  // ==========================================
+  describe('Props Variations', () => {
+    // Tests for different prop combinations
+    it('should handle undefined indexingType', () => {
+      // Arrange
+      const props = createDefaultProps({ indexingType: undefined })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+
+      // Assert - component renders without crashing
+      expect(screen.getByTestId('rule-detail')).toBeInTheDocument()
+    })
+
+    it('should handle undefined retrievalMethod', () => {
+      // Arrange
+      const props = createDefaultProps({ retrievalMethod: undefined })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+
+      // Assert - component renders without crashing
+      expect(screen.getByTestId('rule-detail')).toBeInTheDocument()
+    })
+
+    it('should pass different indexingType values', () => {
+      // Arrange
+      const indexingTypes = [IndexingType.QUALIFIED, IndexingType.ECONOMICAL]
+
+      indexingTypes.forEach((indexingType) => {
+        const props = createDefaultProps({ indexingType })
+
+        // Act
+        const { unmount } = render(<EmbeddingProcess {...props} />)
+
+        // Assert - RuleDetail renders and shows appropriate text based on indexingType
+        expect(screen.getByTestId('rule-detail')).toBeInTheDocument()
+
+        unmount()
+      })
+    })
+
+    it('should pass different retrievalMethod values', () => {
+      // Arrange
+      const retrievalMethods = [RETRIEVE_METHOD.semantic, RETRIEVE_METHOD.fullText, RETRIEVE_METHOD.hybrid]
+
+      retrievalMethods.forEach((retrievalMethod) => {
+        const props = createDefaultProps({ retrievalMethod })
+
+        // Act
+        const { unmount } = render(<EmbeddingProcess {...props} />)
+
+        // Assert - RuleDetail renders and shows appropriate text based on retrievalMethod
+        expect(screen.getByTestId('rule-detail')).toBeInTheDocument()
+
+        unmount()
+      })
+    })
+  })
+
+  // ==========================================
+  // Memoization Tests
+  // ==========================================
+  describe('Memoization Logic', () => {
+    // Tests for useMemo computed values
+    it('should correctly compute isEmbeddingWaiting', async () => {
+      // Arrange - all waiting
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      const doc2 = createMockDocument({ id: 'doc-2' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'waiting' }),
+        createMockIndexingStatus({ id: 'doc-2', indexing_status: 'waiting' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1, doc2] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('datasetDocuments.embedding.waiting')).toBeInTheDocument()
+    })
+
+    it('should correctly compute isEmbedding when one is indexing', async () => {
+      // Arrange - one waiting, one indexing
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      const doc2 = createMockDocument({ id: 'doc-2' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'waiting' }),
+        createMockIndexingStatus({ id: 'doc-2', indexing_status: 'indexing' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1, doc2] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('datasetDocuments.embedding.processing')).toBeInTheDocument()
+    })
+
+    it('should correctly compute isEmbeddingCompleted for mixed terminal states', async () => {
+      // Arrange - completed + error + paused = all terminal
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      const doc2 = createMockDocument({ id: 'doc-2' })
+      const doc3 = createMockDocument({ id: 'doc-3' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'completed' }),
+        createMockIndexingStatus({ id: 'doc-2', indexing_status: 'error' }),
+        createMockIndexingStatus({ id: 'doc-3', indexing_status: 'paused' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1, doc2, doc3] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('datasetDocuments.embedding.completed')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // File Type Detection Tests
+  // ==========================================
+  describe('File Type Detection', () => {
+    // Tests for getFileType helper function
+    it('should extract file extension correctly', async () => {
+      // Arrange
+      const doc1 = createMockDocument({
+        id: 'doc-1',
+        name: 'document.pdf',
+        data_source_type: DatasourceType.localFile,
+      })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'indexing' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert - file should be displayed (file type detection happens internally)
+      expect(screen.getByText('document.pdf')).toBeInTheDocument()
+    })
+
+    it('should handle files with multiple dots', async () => {
+      // Arrange
+      const doc1 = createMockDocument({
+        id: 'doc-1',
+        name: 'my.report.2024.pdf',
+        data_source_type: DatasourceType.localFile,
+      })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'indexing' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('my.report.2024.pdf')).toBeInTheDocument()
+    })
+
+    it('should handle files without extension', async () => {
+      // Arrange
+      const doc1 = createMockDocument({
+        id: 'doc-1',
+        name: 'README',
+        data_source_type: DatasourceType.localFile,
+      })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'indexing' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert
+      expect(screen.getByText('README')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Priority Label Tests
+  // ==========================================
+  describe('Priority Label', () => {
+    // Tests for priority label display
+    it('should show priority label when billing is enabled', async () => {
+      // Arrange
+      mockEnableBilling = true
+      mockPlanType = Plan.sandbox
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'indexing' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      const { container } = render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert - PriorityLabel component should be rendered
+      // Since we don't mock PriorityLabel, we check the structure exists
+      expect(container.querySelector('.ml-0')).toBeInTheDocument()
+    })
+
+    it('should not show priority label when billing is disabled', async () => {
+      // Arrange
+      mockEnableBilling = false
+      const doc1 = createMockDocument({ id: 'doc-1' })
+      mockIndexingStatusData = [
+        createMockIndexingStatus({ id: 'doc-1', indexing_status: 'indexing' }),
+      ]
+      const props = createDefaultProps({ documents: [doc1] })
+
+      // Act
+      render(<EmbeddingProcess {...props} />)
+      await waitFor(() => {
+        expect(mockFetchIndexingStatus).toHaveBeenCalled()
+      })
+
+      // Assert - upgrade banner should not be present
+      expect(screen.queryByText('billing.plansCommon.documentProcessingPriorityUpgrade')).not.toBeInTheDocument()
+    })
+  })
+})
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 9572933a0a..e2057ed897 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
@@ -9,7 +9,7 @@ import {
   RiLoader2Fill,
   RiTerminalBoxLine,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import type { IndexingStatusResponse } from '@/models/datasets'
 import NotionIcon from '@/app/components/base/notion-icon'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.spec.tsx
new file mode 100644
index 0000000000..0f7d3855e6
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.spec.tsx
@@ -0,0 +1,475 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import RuleDetail from './rule-detail'
+import { ProcessMode, type ProcessRuleResponse } from '@/models/datasets'
+import { RETRIEVE_METHOD } from '@/types/app'
+import { IndexingType } from '@/app/components/datasets/create/step-two'
+
+// ==========================================
+// Mock External Dependencies
+// ==========================================
+
+// Mock next/image (using img element for simplicity in tests)
+jest.mock('next/image', () => ({
+  __esModule: true,
+  default: function MockImage({ src, alt, className }: { src: string; alt: string; className?: string }) {
+    // eslint-disable-next-line @next/next/no-img-element
+    return <img src={src} alt={alt} className={className} data-testid="next-image" />
+  },
+}))
+
+// Mock FieldInfo component
+jest.mock('@/app/components/datasets/documents/detail/metadata', () => ({
+  FieldInfo: ({ label, displayedValue, valueIcon }: { label: string; displayedValue: string; valueIcon?: React.ReactNode }) => (
+    <div data-testid="field-info" data-label={label}>
+      <span data-testid="field-label">{label}</span>
+      <span data-testid="field-value">{displayedValue}</span>
+      {valueIcon && <span data-testid="field-icon">{valueIcon}</span>}
+    </div>
+  ),
+}))
+
+// Mock icons - provides simple string paths for testing instead of Next.js static import objects
+jest.mock('@/app/components/datasets/create/icons', () => ({
+  indexMethodIcon: {
+    economical: '/icons/economical.svg',
+    high_quality: '/icons/high_quality.svg',
+  },
+  retrievalIcon: {
+    fullText: '/icons/fullText.svg',
+    hybrid: '/icons/hybrid.svg',
+    vector: '/icons/vector.svg',
+  },
+}))
+
+// ==========================================
+// Test Data Factory Functions
+// ==========================================
+
+/**
+ * Creates a mock ProcessRuleResponse for testing
+ */
+const createMockProcessRule = (overrides: Partial<ProcessRuleResponse> = {}): ProcessRuleResponse => ({
+  mode: ProcessMode.general,
+  rules: {
+    pre_processing_rules: [],
+    segmentation: {
+      separator: '\n',
+      max_tokens: 500,
+      chunk_overlap: 50,
+    },
+    parent_mode: 'paragraph',
+    subchunk_segmentation: {
+      separator: '\n',
+      max_tokens: 200,
+      chunk_overlap: 20,
+    },
+  },
+  limits: {
+    indexing_max_segmentation_tokens_length: 1000,
+  },
+  ...overrides,
+})
+
+// ==========================================
+// Test Suite
+// ==========================================
+
+describe('RuleDetail', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      render(<RuleDetail />)
+
+      // Assert
+      const fieldInfos = screen.getAllByTestId('field-info')
+      expect(fieldInfos).toHaveLength(3)
+    })
+
+    it('should render three FieldInfo components', () => {
+      // Arrange
+      const sourceData = createMockProcessRule()
+
+      // Act
+      render(
+        <RuleDetail
+          sourceData={sourceData}
+          indexingType={IndexingType.QUALIFIED}
+          retrievalMethod={RETRIEVE_METHOD.semantic}
+        />,
+      )
+
+      // Assert
+      const fieldInfos = screen.getAllByTestId('field-info')
+      expect(fieldInfos).toHaveLength(3)
+    })
+
+    it('should render mode field with correct label', () => {
+      // Arrange & Act
+      render(<RuleDetail />)
+
+      // Assert - first field-info is for mode
+      const fieldInfos = screen.getAllByTestId('field-info')
+      expect(fieldInfos[0]).toHaveAttribute('data-label', 'datasetDocuments.embedding.mode')
+    })
+  })
+
+  // ==========================================
+  // Mode Value Tests
+  // ==========================================
+  describe('Mode Value', () => {
+    it('should show "-" when sourceData is undefined', () => {
+      // Arrange & Act
+      render(<RuleDetail />)
+
+      // Assert
+      const fieldValues = screen.getAllByTestId('field-value')
+      expect(fieldValues[0]).toHaveTextContent('-')
+    })
+
+    it('should show "-" when sourceData.mode is undefined', () => {
+      // Arrange
+      const sourceData = { ...createMockProcessRule(), mode: undefined as unknown as ProcessMode }
+
+      // Act
+      render(<RuleDetail sourceData={sourceData} />)
+
+      // Assert
+      const fieldValues = screen.getAllByTestId('field-value')
+      expect(fieldValues[0]).toHaveTextContent('-')
+    })
+
+    it('should show custom mode text when mode is general', () => {
+      // Arrange
+      const sourceData = createMockProcessRule({ mode: ProcessMode.general })
+
+      // Act
+      render(<RuleDetail sourceData={sourceData} />)
+
+      // Assert
+      const fieldValues = screen.getAllByTestId('field-value')
+      expect(fieldValues[0]).toHaveTextContent('datasetDocuments.embedding.custom')
+    })
+
+    it('should show hierarchical mode with paragraph parent mode', () => {
+      // Arrange
+      const sourceData = createMockProcessRule({
+        mode: ProcessMode.parentChild,
+        rules: {
+          pre_processing_rules: [],
+          segmentation: { separator: '\n', max_tokens: 500, chunk_overlap: 50 },
+          parent_mode: 'paragraph',
+          subchunk_segmentation: { separator: '\n', max_tokens: 200, chunk_overlap: 20 },
+        },
+      })
+
+      // Act
+      render(<RuleDetail sourceData={sourceData} />)
+
+      // Assert
+      const fieldValues = screen.getAllByTestId('field-value')
+      expect(fieldValues[0]).toHaveTextContent('datasetDocuments.embedding.hierarchical · dataset.parentMode.paragraph')
+    })
+
+    it('should show hierarchical mode with full-doc parent mode', () => {
+      // Arrange
+      const sourceData = createMockProcessRule({
+        mode: ProcessMode.parentChild,
+        rules: {
+          pre_processing_rules: [],
+          segmentation: { separator: '\n', max_tokens: 500, chunk_overlap: 50 },
+          parent_mode: 'full-doc',
+          subchunk_segmentation: { separator: '\n', max_tokens: 200, chunk_overlap: 20 },
+        },
+      })
+
+      // Act
+      render(<RuleDetail sourceData={sourceData} />)
+
+      // Assert
+      const fieldValues = screen.getAllByTestId('field-value')
+      expect(fieldValues[0]).toHaveTextContent('datasetDocuments.embedding.hierarchical · dataset.parentMode.fullDoc')
+    })
+  })
+
+  // ==========================================
+  // Indexing Type Tests
+  // ==========================================
+  describe('Indexing Type', () => {
+    it('should show qualified indexing type', () => {
+      // Arrange & Act
+      render(<RuleDetail indexingType={IndexingType.QUALIFIED} />)
+
+      // Assert
+      const fieldInfos = screen.getAllByTestId('field-info')
+      expect(fieldInfos[1]).toHaveAttribute('data-label', 'datasetCreation.stepTwo.indexMode')
+
+      const fieldValues = screen.getAllByTestId('field-value')
+      expect(fieldValues[1]).toHaveTextContent('datasetCreation.stepTwo.qualified')
+    })
+
+    it('should show economical indexing type', () => {
+      // Arrange & Act
+      render(<RuleDetail indexingType={IndexingType.ECONOMICAL} />)
+
+      // Assert
+      const fieldValues = screen.getAllByTestId('field-value')
+      expect(fieldValues[1]).toHaveTextContent('datasetCreation.stepTwo.economical')
+    })
+
+    it('should show high_quality icon for qualified indexing', () => {
+      // Arrange & Act
+      render(<RuleDetail indexingType={IndexingType.QUALIFIED} />)
+
+      // Assert
+      const images = screen.getAllByTestId('next-image')
+      expect(images[0]).toHaveAttribute('src', '/icons/high_quality.svg')
+    })
+
+    it('should show economical icon for economical indexing', () => {
+      // Arrange & Act
+      render(<RuleDetail indexingType={IndexingType.ECONOMICAL} />)
+
+      // Assert
+      const images = screen.getAllByTestId('next-image')
+      expect(images[0]).toHaveAttribute('src', '/icons/economical.svg')
+    })
+  })
+
+  // ==========================================
+  // Retrieval Method Tests
+  // ==========================================
+  describe('Retrieval Method', () => {
+    it('should show retrieval setting label', () => {
+      // Arrange & Act
+      render(<RuleDetail retrievalMethod={RETRIEVE_METHOD.semantic} />)
+
+      // Assert
+      const fieldInfos = screen.getAllByTestId('field-info')
+      expect(fieldInfos[2]).toHaveAttribute('data-label', 'datasetSettings.form.retrievalSetting.title')
+    })
+
+    it('should show semantic search title for qualified indexing with semantic method', () => {
+      // Arrange & Act
+      render(
+        <RuleDetail
+          indexingType={IndexingType.QUALIFIED}
+          retrievalMethod={RETRIEVE_METHOD.semantic}
+        />,
+      )
+
+      // Assert
+      const fieldValues = screen.getAllByTestId('field-value')
+      expect(fieldValues[2]).toHaveTextContent('dataset.retrieval.semantic_search.title')
+    })
+
+    it('should show full text search title for fullText method', () => {
+      // Arrange & Act
+      render(
+        <RuleDetail
+          indexingType={IndexingType.QUALIFIED}
+          retrievalMethod={RETRIEVE_METHOD.fullText}
+        />,
+      )
+
+      // Assert
+      const fieldValues = screen.getAllByTestId('field-value')
+      expect(fieldValues[2]).toHaveTextContent('dataset.retrieval.full_text_search.title')
+    })
+
+    it('should show hybrid search title for hybrid method', () => {
+      // Arrange & Act
+      render(
+        <RuleDetail
+          indexingType={IndexingType.QUALIFIED}
+          retrievalMethod={RETRIEVE_METHOD.hybrid}
+        />,
+      )
+
+      // Assert
+      const fieldValues = screen.getAllByTestId('field-value')
+      expect(fieldValues[2]).toHaveTextContent('dataset.retrieval.hybrid_search.title')
+    })
+
+    it('should force keyword_search for economical indexing type', () => {
+      // Arrange & Act
+      render(
+        <RuleDetail
+          indexingType={IndexingType.ECONOMICAL}
+          retrievalMethod={RETRIEVE_METHOD.semantic}
+        />,
+      )
+
+      // Assert
+      const fieldValues = screen.getAllByTestId('field-value')
+      expect(fieldValues[2]).toHaveTextContent('dataset.retrieval.keyword_search.title')
+    })
+
+    it('should show vector icon for semantic search', () => {
+      // Arrange & Act
+      render(
+        <RuleDetail
+          indexingType={IndexingType.QUALIFIED}
+          retrievalMethod={RETRIEVE_METHOD.semantic}
+        />,
+      )
+
+      // Assert
+      const images = screen.getAllByTestId('next-image')
+      expect(images[1]).toHaveAttribute('src', '/icons/vector.svg')
+    })
+
+    it('should show fullText icon for full text search', () => {
+      // Arrange & Act
+      render(
+        <RuleDetail
+          indexingType={IndexingType.QUALIFIED}
+          retrievalMethod={RETRIEVE_METHOD.fullText}
+        />,
+      )
+
+      // Assert
+      const images = screen.getAllByTestId('next-image')
+      expect(images[1]).toHaveAttribute('src', '/icons/fullText.svg')
+    })
+
+    it('should show hybrid icon for hybrid search', () => {
+      // Arrange & Act
+      render(
+        <RuleDetail
+          indexingType={IndexingType.QUALIFIED}
+          retrievalMethod={RETRIEVE_METHOD.hybrid}
+        />,
+      )
+
+      // Assert
+      const images = screen.getAllByTestId('next-image')
+      expect(images[1]).toHaveAttribute('src', '/icons/hybrid.svg')
+    })
+  })
+
+  // ==========================================
+  // Edge Cases
+  // ==========================================
+  describe('Edge Cases', () => {
+    it('should handle all props undefined', () => {
+      // Arrange & Act
+      render(<RuleDetail />)
+
+      // Assert
+      expect(screen.getAllByTestId('field-info')).toHaveLength(3)
+    })
+
+    it('should handle undefined indexingType with defined retrievalMethod', () => {
+      // Arrange & Act
+      render(<RuleDetail retrievalMethod={RETRIEVE_METHOD.hybrid} />)
+
+      // Assert
+      const fieldValues = screen.getAllByTestId('field-value')
+      // When indexingType is undefined, it's treated as qualified
+      expect(fieldValues[1]).toHaveTextContent('datasetCreation.stepTwo.qualified')
+    })
+
+    it('should handle undefined retrievalMethod with defined indexingType', () => {
+      // Arrange & Act
+      render(<RuleDetail indexingType={IndexingType.QUALIFIED} />)
+
+      // Assert
+      const images = screen.getAllByTestId('next-image')
+      // When retrievalMethod is undefined, vector icon is used as default
+      expect(images[1]).toHaveAttribute('src', '/icons/vector.svg')
+    })
+
+    it('should handle sourceData with null rules', () => {
+      // Arrange
+      const sourceData = {
+        ...createMockProcessRule(),
+        mode: ProcessMode.parentChild,
+        rules: null as unknown as ProcessRuleResponse['rules'],
+      }
+
+      // Act & Assert - should not crash
+      render(<RuleDetail sourceData={sourceData} />)
+      expect(screen.getAllByTestId('field-info')).toHaveLength(3)
+    })
+  })
+
+  // ==========================================
+  // Props Variations Tests
+  // ==========================================
+  describe('Props Variations', () => {
+    it('should render correctly with all props provided', () => {
+      // Arrange
+      const sourceData = createMockProcessRule({ mode: ProcessMode.general })
+
+      // Act
+      render(
+        <RuleDetail
+          sourceData={sourceData}
+          indexingType={IndexingType.QUALIFIED}
+          retrievalMethod={RETRIEVE_METHOD.semantic}
+        />,
+      )
+
+      // Assert
+      const fieldValues = screen.getAllByTestId('field-value')
+      expect(fieldValues[0]).toHaveTextContent('datasetDocuments.embedding.custom')
+      expect(fieldValues[1]).toHaveTextContent('datasetCreation.stepTwo.qualified')
+      expect(fieldValues[2]).toHaveTextContent('dataset.retrieval.semantic_search.title')
+    })
+
+    it('should render correctly for economical mode with full settings', () => {
+      // Arrange
+      const sourceData = createMockProcessRule({ mode: ProcessMode.parentChild })
+
+      // Act
+      render(
+        <RuleDetail
+          sourceData={sourceData}
+          indexingType={IndexingType.ECONOMICAL}
+          retrievalMethod={RETRIEVE_METHOD.fullText}
+        />,
+      )
+
+      // Assert
+      const fieldValues = screen.getAllByTestId('field-value')
+      expect(fieldValues[1]).toHaveTextContent('datasetCreation.stepTwo.economical')
+      // Economical always uses keyword_search regardless of retrievalMethod
+      expect(fieldValues[2]).toHaveTextContent('dataset.retrieval.keyword_search.title')
+    })
+  })
+
+  // ==========================================
+  // Memoization Tests
+  // ==========================================
+  describe('Memoization', () => {
+    it('should be wrapped in React.memo', () => {
+      // Assert - RuleDetail should be a memoized component
+      expect(RuleDetail).toHaveProperty('$$typeof', Symbol.for('react.memo'))
+    })
+
+    it('should not re-render with same props', () => {
+      // Arrange
+      const sourceData = createMockProcessRule()
+      const props = {
+        sourceData,
+        indexingType: IndexingType.QUALIFIED,
+        retrievalMethod: RETRIEVE_METHOD.semantic,
+      }
+
+      // Act
+      const { rerender } = render(<RuleDetail {...props} />)
+      rerender(<RuleDetail {...props} />)
+
+      // Assert - component renders correctly after rerender
+      expect(screen.getAllByTestId('field-info')).toHaveLength(3)
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.tsx
index c8b1375069..39c10761cb 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.tsx
@@ -39,7 +39,7 @@ const RuleDetail = ({
   }, [sourceData, t])
 
   return (
-    <div className='flex flex-col gap-1'>
+    <div className='flex flex-col gap-1' data-testid='rule-detail'>
       <FieldInfo
         label={t('datasetDocuments.embedding.mode')}
         displayedValue={getValue('mode')}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/index.spec.tsx
new file mode 100644
index 0000000000..7a051ad325
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/index.spec.tsx
@@ -0,0 +1,808 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import Processing from './index'
+import type { InitialDocumentDetail } from '@/models/pipeline'
+import { DatasourceType } from '@/models/pipeline'
+import type { DocumentIndexingStatus } from '@/models/datasets'
+
+// ==========================================
+// Mock External Dependencies
+// ==========================================
+
+// Mock react-i18next (handled by __mocks__/react-i18next.ts but we override for custom messages)
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+// Mock useDocLink - returns a function that generates doc URLs
+// Strips leading slash from path to match actual implementation behavior
+jest.mock('@/context/i18n', () => ({
+  useDocLink: () => (path?: string) => {
+    const normalizedPath = path?.startsWith('/') ? path.slice(1) : (path || '')
+    return `https://docs.dify.ai/en-US/${normalizedPath}`
+  },
+}))
+
+// Mock dataset detail context
+let mockDataset: {
+  id?: string
+  indexing_technique?: string
+  retrieval_model_dict?: { search_method?: string }
+} | undefined
+
+jest.mock('@/context/dataset-detail', () => ({
+  useDatasetDetailContextWithSelector: <T,>(selector: (state: { dataset?: typeof mockDataset }) => T): T => {
+    return selector({ dataset: mockDataset })
+  },
+}))
+
+// Mock the EmbeddingProcess component to track props
+let embeddingProcessProps: Record<string, unknown> = {}
+jest.mock('./embedding-process', () => ({
+  __esModule: true,
+  default: (props: Record<string, unknown>) => {
+    embeddingProcessProps = props
+    return (
+      <div data-testid="embedding-process">
+        <span data-testid="ep-dataset-id">{props.datasetId as string}</span>
+        <span data-testid="ep-batch-id">{props.batchId as string}</span>
+        <span data-testid="ep-documents-count">{(props.documents as unknown[])?.length ?? 0}</span>
+        <span data-testid="ep-indexing-type">{props.indexingType as string || 'undefined'}</span>
+        <span data-testid="ep-retrieval-method">{props.retrievalMethod as string || 'undefined'}</span>
+      </div>
+    )
+  },
+}))
+
+// ==========================================
+// Test Data Factory Functions
+// ==========================================
+
+/**
+ * Creates a mock InitialDocumentDetail for testing
+ * Uses deterministic counter-based IDs to avoid flaky tests
+ */
+let documentIdCounter = 0
+const createMockDocument = (overrides: Partial<InitialDocumentDetail> = {}): InitialDocumentDetail => ({
+  id: overrides.id ?? `doc-${++documentIdCounter}`,
+  name: 'test-document.txt',
+  data_source_type: DatasourceType.localFile,
+  data_source_info: {},
+  enable: true,
+  error: '',
+  indexing_status: 'waiting' as DocumentIndexingStatus,
+  position: 0,
+  ...overrides,
+})
+
+/**
+ * Creates a list of mock documents
+ */
+const createMockDocuments = (count: number): InitialDocumentDetail[] =>
+  Array.from({ length: count }, (_, index) =>
+    createMockDocument({
+      id: `doc-${index + 1}`,
+      name: `document-${index + 1}.txt`,
+      position: index,
+    }),
+  )
+
+// ==========================================
+// Test Suite
+// ==========================================
+
+describe('Processing', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    embeddingProcessProps = {}
+    // Reset deterministic ID counter for reproducible tests
+    documentIdCounter = 0
+    // Reset mock dataset with default values
+    mockDataset = {
+      id: 'dataset-123',
+      indexing_technique: 'high_quality',
+      retrieval_model_dict: { search_method: 'semantic_search' },
+    }
+  })
+
+  // ==========================================
+  // Rendering Tests
+  // ==========================================
+  describe('Rendering', () => {
+    // Tests basic rendering functionality
+    it('should render without crashing', () => {
+      // Arrange
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(2),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+    })
+
+    it('should render the EmbeddingProcess component', () => {
+      // Arrange
+      const props = {
+        batchId: 'batch-456',
+        documents: createMockDocuments(3),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+    })
+
+    it('should render the side tip section with correct content', () => {
+      // Arrange
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert - verify translation keys are rendered
+      expect(screen.getByText('datasetCreation.stepThree.sideTipTitle')).toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepThree.sideTipContent')).toBeInTheDocument()
+      expect(screen.getByText('datasetPipeline.addDocuments.stepThree.learnMore')).toBeInTheDocument()
+    })
+
+    it('should render the documentation link with correct attributes', () => {
+      // Arrange
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      const link = screen.getByRole('link', { name: 'datasetPipeline.addDocuments.stepThree.learnMore' })
+      expect(link).toHaveAttribute('href', 'https://docs.dify.ai/en-US/guides/knowledge-base/integrate-knowledge-within-application')
+      expect(link).toHaveAttribute('target', '_blank')
+      expect(link).toHaveAttribute('rel', 'noreferrer noopener')
+    })
+
+    it('should render the book icon in the side tip', () => {
+      // Arrange
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      const { container } = render(<Processing {...props} />)
+
+      // Assert - check for icon container with shadow styling
+      const iconContainer = container.querySelector('.shadow-lg.shadow-shadow-shadow-5')
+      expect(iconContainer).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Props Testing
+  // ==========================================
+  describe('Props', () => {
+    // Tests that props are correctly passed to child components
+    it('should pass batchId to EmbeddingProcess', () => {
+      // Arrange
+      const testBatchId = 'test-batch-id-789'
+      const props = {
+        batchId: testBatchId,
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('ep-batch-id')).toHaveTextContent(testBatchId)
+      expect(embeddingProcessProps.batchId).toBe(testBatchId)
+    })
+
+    it('should pass documents to EmbeddingProcess', () => {
+      // Arrange
+      const documents = createMockDocuments(5)
+      const props = {
+        batchId: 'batch-123',
+        documents,
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('ep-documents-count')).toHaveTextContent('5')
+      expect(embeddingProcessProps.documents).toEqual(documents)
+    })
+
+    it('should pass datasetId from context to EmbeddingProcess', () => {
+      // Arrange
+      mockDataset = {
+        id: 'context-dataset-id',
+        indexing_technique: 'high_quality',
+        retrieval_model_dict: { search_method: 'semantic_search' },
+      }
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('ep-dataset-id')).toHaveTextContent('context-dataset-id')
+      expect(embeddingProcessProps.datasetId).toBe('context-dataset-id')
+    })
+
+    it('should pass indexingType from context to EmbeddingProcess', () => {
+      // Arrange
+      mockDataset = {
+        id: 'dataset-123',
+        indexing_technique: 'economy',
+        retrieval_model_dict: { search_method: 'semantic_search' },
+      }
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('ep-indexing-type')).toHaveTextContent('economy')
+      expect(embeddingProcessProps.indexingType).toBe('economy')
+    })
+
+    it('should pass retrievalMethod from context to EmbeddingProcess', () => {
+      // Arrange
+      mockDataset = {
+        id: 'dataset-123',
+        indexing_technique: 'high_quality',
+        retrieval_model_dict: { search_method: 'keyword_search' },
+      }
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('ep-retrieval-method')).toHaveTextContent('keyword_search')
+      expect(embeddingProcessProps.retrievalMethod).toBe('keyword_search')
+    })
+
+    it('should handle different document types', () => {
+      // Arrange
+      const documents = [
+        createMockDocument({
+          id: 'doc-local',
+          name: 'local-file.pdf',
+          data_source_type: DatasourceType.localFile,
+        }),
+        createMockDocument({
+          id: 'doc-online',
+          name: 'online-doc',
+          data_source_type: DatasourceType.onlineDocument,
+        }),
+        createMockDocument({
+          id: 'doc-website',
+          name: 'website-page',
+          data_source_type: DatasourceType.websiteCrawl,
+        }),
+      ]
+      const props = {
+        batchId: 'batch-123',
+        documents,
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('ep-documents-count')).toHaveTextContent('3')
+      expect(embeddingProcessProps.documents).toEqual(documents)
+    })
+  })
+
+  // ==========================================
+  // Edge Cases
+  // ==========================================
+  describe('Edge Cases', () => {
+    // Tests for boundary conditions and unusual inputs
+    it('should handle empty documents array', () => {
+      // Arrange
+      const props = {
+        batchId: 'batch-123',
+        documents: [],
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+      expect(screen.getByTestId('ep-documents-count')).toHaveTextContent('0')
+      expect(embeddingProcessProps.documents).toEqual([])
+    })
+
+    it('should handle empty batchId', () => {
+      // Arrange
+      const props = {
+        batchId: '',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+      expect(screen.getByTestId('ep-batch-id')).toHaveTextContent('')
+    })
+
+    it('should handle undefined dataset from context', () => {
+      // Arrange
+      mockDataset = undefined
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+      expect(embeddingProcessProps.datasetId).toBeUndefined()
+      expect(embeddingProcessProps.indexingType).toBeUndefined()
+      expect(embeddingProcessProps.retrievalMethod).toBeUndefined()
+    })
+
+    it('should handle dataset with undefined id', () => {
+      // Arrange
+      mockDataset = {
+        id: undefined,
+        indexing_technique: 'high_quality',
+        retrieval_model_dict: { search_method: 'semantic_search' },
+      }
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+      expect(embeddingProcessProps.datasetId).toBeUndefined()
+    })
+
+    it('should handle dataset with undefined indexing_technique', () => {
+      // Arrange
+      mockDataset = {
+        id: 'dataset-123',
+        indexing_technique: undefined,
+        retrieval_model_dict: { search_method: 'semantic_search' },
+      }
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+      expect(embeddingProcessProps.indexingType).toBeUndefined()
+    })
+
+    it('should handle dataset with undefined retrieval_model_dict', () => {
+      // Arrange
+      mockDataset = {
+        id: 'dataset-123',
+        indexing_technique: 'high_quality',
+        retrieval_model_dict: undefined,
+      }
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+      expect(embeddingProcessProps.retrievalMethod).toBeUndefined()
+    })
+
+    it('should handle dataset with empty retrieval_model_dict', () => {
+      // Arrange
+      mockDataset = {
+        id: 'dataset-123',
+        indexing_technique: 'high_quality',
+        retrieval_model_dict: {},
+      }
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+      expect(embeddingProcessProps.retrievalMethod).toBeUndefined()
+    })
+
+    it('should handle large number of documents', () => {
+      // Arrange
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(100),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+      expect(screen.getByTestId('ep-documents-count')).toHaveTextContent('100')
+    })
+
+    it('should handle documents with error status', () => {
+      // Arrange
+      const documents = [
+        createMockDocument({
+          id: 'doc-error',
+          name: 'error-doc.txt',
+          error: 'Processing failed',
+          indexing_status: 'error' as DocumentIndexingStatus,
+        }),
+      ]
+      const props = {
+        batchId: 'batch-123',
+        documents,
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+      expect(embeddingProcessProps.documents).toEqual(documents)
+    })
+
+    it('should handle documents with special characters in names', () => {
+      // Arrange
+      const documents = [
+        createMockDocument({
+          id: 'doc-special',
+          name: 'document with spaces & special-chars_测试.pdf',
+        }),
+      ]
+      const props = {
+        batchId: 'batch-123',
+        documents,
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+      expect(embeddingProcessProps.documents).toEqual(documents)
+    })
+
+    it('should handle batchId with special characters', () => {
+      // Arrange
+      const props = {
+        batchId: 'batch-123-abc_xyz:456',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('ep-batch-id')).toHaveTextContent('batch-123-abc_xyz:456')
+    })
+  })
+
+  // ==========================================
+  // Context Integration Tests
+  // ==========================================
+  describe('Context Integration', () => {
+    // Tests for proper context usage
+    it('should correctly use context selectors for all dataset properties', () => {
+      // Arrange
+      mockDataset = {
+        id: 'full-dataset-id',
+        indexing_technique: 'high_quality',
+        retrieval_model_dict: { search_method: 'hybrid_search' },
+      }
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(embeddingProcessProps.datasetId).toBe('full-dataset-id')
+      expect(embeddingProcessProps.indexingType).toBe('high_quality')
+      expect(embeddingProcessProps.retrievalMethod).toBe('hybrid_search')
+    })
+
+    it('should handle context changes with different indexing techniques', () => {
+      // Arrange - Test with economy indexing
+      mockDataset = {
+        id: 'dataset-economy',
+        indexing_technique: 'economy',
+        retrieval_model_dict: { search_method: 'keyword_search' },
+      }
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      const { rerender } = render(<Processing {...props} />)
+
+      // Assert economy indexing
+      expect(embeddingProcessProps.indexingType).toBe('economy')
+
+      // Arrange - Update to high_quality
+      mockDataset = {
+        id: 'dataset-hq',
+        indexing_technique: 'high_quality',
+        retrieval_model_dict: { search_method: 'semantic_search' },
+      }
+
+      // Act - Rerender with new context
+      rerender(<Processing {...props} />)
+
+      // Assert high_quality indexing
+      expect(embeddingProcessProps.indexingType).toBe('high_quality')
+    })
+  })
+
+  // ==========================================
+  // Layout Tests
+  // ==========================================
+  describe('Layout', () => {
+    // Tests for proper layout and structure
+    it('should render with correct layout structure', () => {
+      // Arrange
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      const { container } = render(<Processing {...props} />)
+
+      // Assert - Check for flex layout with proper widths
+      const mainContainer = container.querySelector('.flex.h-full.w-full.justify-center')
+      expect(mainContainer).toBeInTheDocument()
+
+      // Check for left panel (3/5 width)
+      const leftPanel = container.querySelector('.w-3\\/5')
+      expect(leftPanel).toBeInTheDocument()
+
+      // Check for right panel (2/5 width)
+      const rightPanel = container.querySelector('.w-2\\/5')
+      expect(rightPanel).toBeInTheDocument()
+    })
+
+    it('should render side tip card with correct styling', () => {
+      // Arrange
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      const { container } = render(<Processing {...props} />)
+
+      // Assert - Check for card container with rounded corners and background
+      const sideTipCard = container.querySelector('.rounded-xl.bg-background-section')
+      expect(sideTipCard).toBeInTheDocument()
+    })
+
+    it('should constrain max-width for EmbeddingProcess container', () => {
+      // Arrange
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      const { container } = render(<Processing {...props} />)
+
+      // Assert
+      const maxWidthContainer = container.querySelector('.max-w-\\[640px\\]')
+      expect(maxWidthContainer).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Document Variations Tests
+  // ==========================================
+  describe('Document Variations', () => {
+    // Tests for different document configurations
+    it('should handle documents with all indexing statuses', () => {
+      // Arrange
+      const statuses: DocumentIndexingStatus[] = [
+        'waiting',
+        'parsing',
+        'cleaning',
+        'splitting',
+        'indexing',
+        'paused',
+        'error',
+        'completed',
+      ]
+      const documents = statuses.map((status, index) =>
+        createMockDocument({
+          id: `doc-${status}`,
+          name: `${status}-doc.txt`,
+          indexing_status: status,
+          position: index,
+        }),
+      )
+      const props = {
+        batchId: 'batch-123',
+        documents,
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('ep-documents-count')).toHaveTextContent(String(statuses.length))
+      expect(embeddingProcessProps.documents).toEqual(documents)
+    })
+
+    it('should handle documents with enabled and disabled states', () => {
+      // Arrange
+      const documents = [
+        createMockDocument({ id: 'doc-enabled', enable: true }),
+        createMockDocument({ id: 'doc-disabled', enable: false }),
+      ]
+      const props = {
+        batchId: 'batch-123',
+        documents,
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('ep-documents-count')).toHaveTextContent('2')
+      expect(embeddingProcessProps.documents).toEqual(documents)
+    })
+
+    it('should handle documents from online drive source', () => {
+      // Arrange
+      const documents = [
+        createMockDocument({
+          id: 'doc-drive',
+          name: 'google-drive-doc',
+          data_source_type: DatasourceType.onlineDrive,
+          data_source_info: { provider: 'google_drive' },
+        }),
+      ]
+      const props = {
+        batchId: 'batch-123',
+        documents,
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+      expect(embeddingProcessProps.documents).toEqual(documents)
+    })
+
+    it('should handle documents with complex data_source_info', () => {
+      // Arrange
+      const documents = [
+        createMockDocument({
+          id: 'doc-notion',
+          name: 'Notion Page',
+          data_source_type: DatasourceType.onlineDocument,
+          data_source_info: {
+            notion_page_icon: { type: 'emoji', emoji: '📄' },
+            notion_workspace_id: 'ws-123',
+            notion_page_id: 'page-456',
+          },
+        }),
+      ]
+      const props = {
+        batchId: 'batch-123',
+        documents,
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(embeddingProcessProps.documents).toEqual(documents)
+    })
+  })
+
+  // ==========================================
+  // Retrieval Method Variations
+  // ==========================================
+  describe('Retrieval Method Variations', () => {
+    // Tests for different retrieval methods
+    const retrievalMethods = ['semantic_search', 'keyword_search', 'hybrid_search', 'full_text_search']
+
+    it.each(retrievalMethods)('should handle %s retrieval method', (method) => {
+      // Arrange
+      mockDataset = {
+        id: 'dataset-123',
+        indexing_technique: 'high_quality',
+        retrieval_model_dict: { search_method: method },
+      }
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(embeddingProcessProps.retrievalMethod).toBe(method)
+    })
+  })
+
+  // ==========================================
+  // Indexing Technique Variations
+  // ==========================================
+  describe('Indexing Technique Variations', () => {
+    // Tests for different indexing techniques
+    const indexingTechniques = ['high_quality', 'economy']
+
+    it.each(indexingTechniques)('should handle %s indexing technique', (technique) => {
+      // Arrange
+      mockDataset = {
+        id: 'dataset-123',
+        indexing_technique: technique,
+        retrieval_model_dict: { search_method: 'semantic_search' },
+      }
+      const props = {
+        batchId: 'batch-123',
+        documents: createMockDocuments(1),
+      }
+
+      // Act
+      render(<Processing {...props} />)
+
+      // Assert
+      expect(embeddingProcessProps.indexingType).toBe(technique)
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/index.tsx
index 7215f23345..f48143948e 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/processing/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/index.tsx
@@ -20,7 +20,7 @@ const Processing = ({
   const docLink = useDocLink()
   const datasetId = useDatasetDetailContextWithSelector(s => s.dataset?.id)
   const indexingType = useDatasetDetailContextWithSelector(s => s.dataset?.indexing_technique)
-  const retrievalMethod = useDatasetDetailContextWithSelector(s => s.dataset?.retrieval_model_dict.search_method)
+  const retrievalMethod = useDatasetDetailContextWithSelector(s => s.dataset?.retrieval_model_dict?.search_method)
 
   return (
     <div className='flex h-full w-full justify-center overflow-hidden'>
diff --git a/web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx b/web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx
index 1c05cdedd3..73e6940837 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import React from 'react'
 
 export type Step = {
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 2049ae0d03..e88c5a1044 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
@@ -6,7 +6,7 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
 import { ToastContext } from '@/app/components/base/toast'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx b/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
index e686226e5f..8f35bfc028 100644
--- a/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
+++ b/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
@@ -13,7 +13,7 @@ import { useSegmentListContext } from './index'
 import type { ChildChunkDetail, ChunkingMode } from '@/models/datasets'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { formatNumber } from '@/utils/format'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import { formatTime } from '@/utils/time'
 
@@ -72,7 +72,7 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
 
   return (
     <div className={'flex h-full flex-col'}>
-      <div className={classNames('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
+      <div className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
         <div className='flex flex-col'>
           <div className='system-xl-semibold text-text-primary'>{t('datasetDocuments.segment.editChildChunk')}</div>
           <div className='flex items-center gap-x-2'>
@@ -105,8 +105,8 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
           </div>
         </div>
       </div>
-      <div className={classNames('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}>
-        <div className={classNames('h-full overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'w-full')}>
+      <div className={cn('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}>
+        <div className={cn('h-full overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'w-full')}>
           <ChunkContent
             docForm={docForm}
             question={content}
diff --git a/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx b/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
index b19356cac7..6dbc539d5b 100644
--- a/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
+++ b/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
@@ -9,7 +9,7 @@ import FullDocListSkeleton from './skeleton/full-doc-list-skeleton'
 import { useSegmentListContext } from './index'
 import type { ChildChunkDetail } from '@/models/datasets'
 import Input from '@/app/components/base/input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import { formatNumber } from '@/utils/format'
 
diff --git a/web/app/components/datasets/documents/detail/completed/common/add-another.tsx b/web/app/components/datasets/documents/detail/completed/common/add-another.tsx
index c504faa770..0b0cbc8e0a 100644
--- a/web/app/components/datasets/documents/detail/completed/common/add-another.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/add-another.tsx
@@ -1,6 +1,6 @@
 import React, { type FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Checkbox from '@/app/components/base/checkbox'
 
 type AddAnotherProps = {
@@ -17,7 +17,7 @@ const AddAnother: FC<AddAnotherProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className={classNames('flex items-center gap-x-1 pl-1', className)}>
+    <div className={cn('flex items-center gap-x-1 pl-1', className)}>
       <Checkbox
         key='add-another-checkbox'
         className='shrink-0'
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 c152ec5400..4e0fcc7e13 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
@@ -3,7 +3,7 @@ import { RiArchive2Line, RiCheckboxCircleLine, RiCloseCircleLine, RiDeleteBinLin
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import Divider from '@/app/components/base/divider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Confirm from '@/app/components/base/confirm'
 import Button from '@/app/components/base/button'
 
diff --git a/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx b/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
index 1b0695557e..b488c98f67 100644
--- a/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import type { ComponentProps, FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ChunkingMode } from '@/models/datasets'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Markdown } from '@/app/components/base/markdown'
 
 type IContentProps = ComponentProps<'textarea'>
@@ -16,10 +16,8 @@ const Textarea: FC<IContentProps> = React.memo(({
 }) => {
   return (
     <textarea
-      className={classNames(
-        'inset-0 w-full resize-none appearance-none overflow-y-auto border-none bg-transparent outline-none',
-        className,
-      )}
+      className={cn('inset-0 w-full resize-none appearance-none overflow-y-auto border-none bg-transparent outline-none',
+        className)}
       placeholder={placeholder}
       value={value}
       disabled={disabled}
@@ -82,10 +80,8 @@ const AutoResizeTextArea: FC<IAutoResizeTextAreaProps> = React.memo(({
   return (
     <textarea
       ref={textareaRef}
-      className={classNames(
-        'inset-0 w-full resize-none appearance-none border-none bg-transparent outline-none',
-        className,
-      )}
+      className={cn('inset-0 w-full resize-none appearance-none border-none bg-transparent outline-none',
+        className)}
       style={{
         maxHeight,
       }}
diff --git a/web/app/components/datasets/documents/detail/completed/common/drawer.tsx b/web/app/components/datasets/documents/detail/completed/common/drawer.tsx
index cf1b289f61..450f347302 100644
--- a/web/app/components/datasets/documents/detail/completed/common/drawer.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/drawer.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useKeyPress } from 'ahooks'
 import { useSegmentListContext } from '..'
 
diff --git a/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx b/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx
index b729fe13d0..57b5557d7e 100644
--- a/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Drawer from './drawer'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 type IFullScreenDrawerProps = {
diff --git a/web/app/components/datasets/documents/detail/completed/common/keywords.tsx b/web/app/components/datasets/documents/detail/completed/common/keywords.tsx
index ee90ee2d64..b3a372f75a 100644
--- a/web/app/components/datasets/documents/detail/completed/common/keywords.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/keywords.tsx
@@ -1,6 +1,6 @@
 import React, { type FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { SegmentDetailModel } from '@/models/datasets'
 import TagInput from '@/app/components/base/tag-input'
 
@@ -23,7 +23,7 @@ const Keywords: FC<IKeywordsProps> = ({
 }) => {
   const { t } = useTranslation()
   return (
-    <div className={classNames('flex flex-col', className)}>
+    <div className={cn('flex flex-col', className)}>
       <div className='system-xs-medium-uppercase text-text-tertiary'>{t('datasetDocuments.segment.keywords')}</div>
       <div className='flex max-h-[200px] w-full flex-wrap gap-1 overflow-auto text-text-tertiary'>
         {(!segInfo?.keywords?.length && actionType === 'view')
diff --git a/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx b/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx
index 14f5868338..306502955a 100644
--- a/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx
@@ -1,6 +1,6 @@
 import React, { type FC, useMemo } from 'react'
 import { Chunk } from '@/app/components/base/icons/src/vender/knowledge'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ISegmentIndexTagProps = {
   positionId?: string | number
diff --git a/web/app/components/datasets/documents/detail/completed/common/tag.tsx b/web/app/components/datasets/documents/detail/completed/common/tag.tsx
index 914f8dc61c..49bc759a16 100644
--- a/web/app/components/datasets/documents/detail/completed/common/tag.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/tag.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const Tag = ({ text, className }: { text: string; className?: string }) => {
   return (
diff --git a/web/app/components/datasets/documents/detail/completed/index.tsx b/web/app/components/datasets/documents/detail/completed/index.tsx
index ad405f6b15..475ef86777 100644
--- a/web/app/components/datasets/documents/detail/completed/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/index.tsx
@@ -19,7 +19,7 @@ import FullScreenDrawer from './common/full-screen-drawer'
 import ChildSegmentDetail from './child-segment-detail'
 import StatusItem from './status-item'
 import Pagination from '@/app/components/base/pagination'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
 import Divider from '@/app/components/base/divider'
 import Input from '@/app/components/base/input'
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 35e1e06bee..959b72aa1f 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
@@ -15,7 +15,7 @@ import { useSegmentListContext } from './index'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { ToastContext } from '@/app/components/base/toast'
 import { type ChildChunkDetail, ChunkingMode, type SegmentUpdater } from '@/models/datasets'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
 import Divider from '@/app/components/base/divider'
 import { useAddChildSegment } from '@/service/knowledge/use-segment'
@@ -114,7 +114,7 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
 
   return (
     <div className={'flex h-full flex-col'}>
-      <div className={classNames('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
+      <div className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
         <div className='flex flex-col'>
           <div className='system-xl-semibold text-text-primary'>{t('datasetDocuments.segment.addChildChunk')}</div>
           <div className='flex items-center gap-x-2'>
@@ -145,8 +145,8 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
           </div>
         </div>
       </div>
-      <div className={classNames('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}>
-        <div className={classNames('h-full overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'w-full')}>
+      <div className={cn('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}>
+        <div className={cn('h-full overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'w-full')}>
           <ChunkContent
             docForm={ChunkingMode.parentChild}
             question={content}
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
index c07be98a04..9079bca954 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
@@ -1,5 +1,5 @@
 import React, { type FC } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useSegmentListContext } from '..'
 import { Markdown } from '@/app/components/base/markdown'
 
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/index.spec.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/index.spec.tsx
index ced1bf05a9..115189ec99 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card/index.spec.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/index.spec.tsx
@@ -52,11 +52,10 @@ jest.mock('../index', () => ({
 }))
 
 // ============================================================================
-// Component Mocks - components with complex ESM dependencies (ky, react-pdf-highlighter, etc.)
-// These are mocked to avoid Jest ESM parsing issues, not because they're external
+// Component Mocks - components with complex dependencies
 // ============================================================================
 
-// StatusItem has deep dependency: use-document hooks → service/base → ky (ESM)
+// StatusItem uses React Query hooks which require QueryClientProvider
 jest.mock('../../../status-item', () => ({
   __esModule: true,
   default: ({ status, reverse, textCls }: { status: string; reverse?: boolean; textCls?: string }) => (
@@ -66,7 +65,7 @@ jest.mock('../../../status-item', () => ({
   ),
 }))
 
-// ImageList has deep dependency: FileThumb → file-uploader → ky, react-pdf-highlighter (ESM)
+// ImageList has deep dependency: FileThumb → file-uploader → react-pdf-highlighter (ESM)
 jest.mock('@/app/components/datasets/common/image-list', () => ({
   __esModule: true,
   default: ({ images, size, className }: { images: Array<{ sourceUrl: string; name: string }>; size?: string; className?: string }) => (
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 ce24b843de..56ead7b864 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
@@ -13,7 +13,7 @@ import Switch from '@/app/components/base/switch'
 import Divider from '@/app/components/base/divider'
 import { formatNumber } from '@/utils/format'
 import Confirm from '@/app/components/base/confirm'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Badge from '@/app/components/base/badge'
 import { isAfter } from '@/utils/time'
 import Tooltip from '@/app/components/base/tooltip'
diff --git a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
index b3135fd45b..a584c42cab 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
@@ -16,7 +16,7 @@ import { useSegmentListContext } from './index'
 import { ChunkingMode, type SegmentDetailModel } from '@/models/datasets'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { formatNumber } from '@/utils/format'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { IndexingType } from '@/app/components/datasets/create/step-two'
diff --git a/web/app/components/datasets/documents/detail/document-title.tsx b/web/app/components/datasets/documents/detail/document-title.tsx
index 86e1f26966..922cad7a50 100644
--- a/web/app/components/datasets/documents/detail/document-title.tsx
+++ b/web/app/components/datasets/documents/detail/document-title.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import type { ChunkingMode, ParentMode } from '@/models/datasets'
 import { useRouter } from 'next/navigation'
 import DocumentPicker from '../../common/document-picker'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type DocumentTitleProps = {
   datasetId: string
diff --git a/web/app/components/datasets/documents/detail/embedding/index.tsx b/web/app/components/datasets/documents/detail/embedding/index.tsx
index ff5b7ec4b7..298777cf35 100644
--- a/web/app/components/datasets/documents/detail/embedding/index.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/index.tsx
@@ -10,7 +10,7 @@ import { IndexingType } from '../../../create/step-two'
 import { indexMethodIcon, retrievalIcon } from '../../../create/icons'
 import EmbeddingSkeleton from './skeleton'
 import { RETRIEVE_METHOD } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import { ToastContext } from '@/app/components/base/toast'
 import type { IndexingStatusResponse } from '@/models/datasets'
diff --git a/web/app/components/datasets/documents/detail/index.tsx b/web/app/components/datasets/documents/detail/index.tsx
index ddec9b6dbe..0c2f229f88 100644
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -12,7 +12,7 @@ import Metadata from '@/app/components/datasets/metadata/metadata-document'
 import SegmentAdd, { ProcessStatus } from './segment-add'
 import BatchModal from './batch-modal'
 import style from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import Loading from '@/app/components/base/loading'
 import Toast from '@/app/components/base/toast'
diff --git a/web/app/components/datasets/documents/detail/metadata/index.tsx b/web/app/components/datasets/documents/detail/metadata/index.tsx
index 94cbe8a8cd..1e15f3e5d1 100644
--- a/web/app/components/datasets/documents/detail/metadata/index.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/index.tsx
@@ -7,7 +7,7 @@ import { useContext } from 'use-context-selector'
 import { get } from 'lodash-es'
 import { useDocumentContext } from '../context'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Input from '@/app/components/base/input'
 import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
diff --git a/web/app/components/datasets/documents/detail/new-segment.tsx b/web/app/components/datasets/documents/detail/new-segment.tsx
index 4fbd6f8eb1..d6fc1f8654 100644
--- a/web/app/components/datasets/documents/detail/new-segment.tsx
+++ b/web/app/components/datasets/documents/detail/new-segment.tsx
@@ -15,7 +15,7 @@ import Dot from './completed/common/dot'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { ToastContext } from '@/app/components/base/toast'
 import { ChunkingMode, type SegmentUpdater } from '@/models/datasets'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
 import Divider from '@/app/components/base/divider'
 import { useAddSegment } from '@/service/knowledge/use-segment'
@@ -153,10 +153,8 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
   return (
     <div className={'flex h-full flex-col'}>
       <div
-        className={classNames(
-          'flex items-center justify-between',
-          fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3',
-        )}
+        className={cn('flex items-center justify-between',
+          fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}
       >
         <div className='flex flex-col'>
           <div className='system-xl-semibold text-text-primary'>
@@ -189,8 +187,8 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
           </div>
         </div>
       </div>
-      <div className={classNames('flex grow', fullScreen ? 'w-full flex-row justify-center gap-x-8 px-6 pt-6' : 'flex-col gap-y-1 px-4 py-3')}>
-        <div className={classNames('overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'grow')}>
+      <div className={cn('flex grow', fullScreen ? 'w-full flex-row justify-center gap-x-8 px-6 pt-6' : 'flex-col gap-y-1 px-4 py-3')}>
+        <div className={cn('overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'grow')}>
           <ChunkContent
             docForm={docForm}
             question={question}
@@ -200,7 +198,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
             isEditMode={true}
           />
         </div>
-        <div className={classNames('flex flex-col', fullScreen ? 'w-[320px] gap-y-2' : 'w-full gap-y-1')}>
+        <div className={cn('flex flex-col', fullScreen ? 'w-[320px] gap-y-2' : 'w-full gap-y-1')}>
           <ImageUploaderInChunk
             key={imageUploaderKey}
             value={attachments}
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 eb40d43e7c..7d6519054b 100644
--- a/web/app/components/datasets/documents/detail/segment-add/index.tsx
+++ b/web/app/components/datasets/documents/detail/segment-add/index.tsx
@@ -8,7 +8,7 @@ import {
   RiErrorWarningFill,
   RiLoader2Line,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import Popover from '@/app/components/base/popover'
 import { useBoolean } from 'ahooks'
diff --git a/web/app/components/datasets/documents/index.tsx b/web/app/components/datasets/documents/index.tsx
index e09ab44701..c6808dbfaf 100644
--- a/web/app/components/datasets/documents/index.tsx
+++ b/web/app/components/datasets/documents/index.tsx
@@ -16,7 +16,7 @@ import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { DataSourceType } from '@/models/datasets'
 import IndexFailed from '@/app/components/datasets/common/document-status-with-action/index-failed'
 import { useProviderContext } from '@/context/provider-context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useDocumentList, useInvalidDocumentDetail, useInvalidDocumentList } from '@/service/knowledge/use-document'
 import { useInvalid } from '@/service/use-base'
 import { useChildSegmentListKey, useSegmentListKey } from '@/service/knowledge/use-segment'
diff --git a/web/app/components/datasets/documents/list.tsx b/web/app/components/datasets/documents/list.tsx
index 5c9f832bb8..c93649fcc0 100644
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@@ -15,7 +15,7 @@ import FileTypeIcon from '../../base/file-uploader/file-type-icon'
 import s from './style.module.css'
 import RenameModal from './rename-modal'
 import BatchAction from './detail/completed/common/batch-action'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import Toast from '@/app/components/base/toast'
 import { asyncRunSafe } from '@/utils'
diff --git a/web/app/components/datasets/documents/operations.tsx b/web/app/components/datasets/documents/operations.tsx
index 74bf0f3179..47ba72e4b1 100644
--- a/web/app/components/datasets/documents/operations.tsx
+++ b/web/app/components/datasets/documents/operations.tsx
@@ -22,7 +22,7 @@ import Switch from '../../base/switch'
 import { noop } from 'lodash-es'
 import Tooltip from '../../base/tooltip'
 import Divider from '../../base/divider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   RiArchive2Line,
   RiDeleteBinLine,
diff --git a/web/app/components/datasets/documents/status-item/index.tsx b/web/app/components/datasets/documents/status-item/index.tsx
index 4adb622747..4dc062afe4 100644
--- a/web/app/components/datasets/documents/status-item/index.tsx
+++ b/web/app/components/datasets/documents/status-item/index.tsx
@@ -11,7 +11,7 @@ import type { CommonResponse } from '@/models/common'
 import { asyncRunSafe } from '@/utils'
 import { useDebounceFn } from 'ahooks'
 import s from '../style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import Switch from '@/app/components/base/switch'
 import type { OperationName } from '../types'
diff --git a/web/app/components/datasets/external-api/external-api-modal/Form.tsx b/web/app/components/datasets/external-api/external-api-modal/Form.tsx
index 5479f8147c..9807dbf41a 100644
--- a/web/app/components/datasets/external-api/external-api-modal/Form.tsx
+++ b/web/app/components/datasets/external-api/external-api-modal/Form.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { RiBookOpenLine } from '@remixicon/react'
 import type { CreateExternalAPIReq, FormSchema } from '../declarations'
 import Input from '@/app/components/base/input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useDocLink } from '@/context/i18n'
 
 type FormProps = {
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 990fa5fcbc..2b12417c1b 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
@@ -6,7 +6,7 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import ExternalKnowledgeAPICard from '../external-knowledge-api-card'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
 import ActionButton from '@/app/components/base/action-button'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx b/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx
index 1c43d7e6dd..a24105bfd3 100644
--- a/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import TopKItem from '@/app/components/base/param-item/top-k-item'
 import ScoreThresholdItem from '@/app/components/base/param-item/score-threshold-item'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type RetrievalSettingsProps = {
   topK: number
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 e6444d995e..7d8376f850 100644
--- a/web/app/components/datasets/extra-info/service-api/card.tsx
+++ b/web/app/components/datasets/extra-info/service-api/card.tsx
@@ -4,7 +4,7 @@ import { ApiAggregate } from '@/app/components/base/icons/src/vender/knowledge'
 import Indicator from '@/app/components/header/indicator'
 import Switch from '@/app/components/base/switch'
 import { useSelector as useAppContextSelector } from '@/context/app-context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import Button from '@/app/components/base/button'
 import { RiBookOpenLine, RiKey2Line } from '@remixicon/react'
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 af7ce946ad..cd0bdef47e 100644
--- a/web/app/components/datasets/extra-info/service-api/index.tsx
+++ b/web/app/components/datasets/extra-info/service-api/index.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ApiAggregate } from '@/app/components/base/icons/src/vender/knowledge'
 import Indicator from '@/app/components/header/indicator'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import Card from './card'
 
diff --git a/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx b/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
index cb352eac00..17d5203e7d 100644
--- a/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
+++ b/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
@@ -6,7 +6,7 @@ import { RiDeleteBinLine } from '@remixicon/react'
 import lineClamp from 'line-clamp'
 import type { SliceProps } from './type'
 import { SliceContainer, SliceContent, SliceDivider, SliceLabel } from './shared'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 
 type EditSliceProps = SliceProps<{
@@ -56,7 +56,7 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
   return (
     <>
       <SliceContainer {...rest}
-        className={classNames('mr-0 block', className)}
+        className={cn('mr-0 block', className)}
         ref={(ref) => {
           refs.setReference(ref)
           if (ref)
@@ -65,26 +65,20 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
         {...getReferenceProps()}
       >
         <SliceLabel
-          className={classNames(
-            isDestructive && '!bg-state-destructive-solid !text-text-primary-on-surface',
-            labelClassName,
-          )}
+          className={cn(isDestructive && '!bg-state-destructive-solid !text-text-primary-on-surface',
+            labelClassName)}
           labelInnerClassName={labelInnerClassName}
         >
           {label}
         </SliceLabel>
         <SliceContent
-          className={classNames(
-            isDestructive && '!bg-state-destructive-hover-alt',
-            contentClassName,
-          )}
+          className={cn(isDestructive && '!bg-state-destructive-hover-alt',
+            contentClassName)}
         >
           {text}
         </SliceContent>
         {showDivider && <SliceDivider
-          className={classNames(
-            isDestructive && '!bg-state-destructive-hover-alt',
-          )}
+          className={cn(isDestructive && '!bg-state-destructive-hover-alt')}
         />}
         {delBtnShow && <FloatingFocusManager
           context={context}
diff --git a/web/app/components/datasets/formatted-text/flavours/shared.tsx b/web/app/components/datasets/formatted-text/flavours/shared.tsx
index e3261aa328..e4ace4c1df 100644
--- a/web/app/components/datasets/formatted-text/flavours/shared.tsx
+++ b/web/app/components/datasets/formatted-text/flavours/shared.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps, FC } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const baseStyle = 'py-[3px]'
 
@@ -12,10 +12,8 @@ export const SliceContainer: FC<SliceContainerProps> = (
   },
 ) => {
   const { className, ...rest } = props
-  return <span {...rest} ref={ref} className={classNames(
-    'group mr-1 select-none align-bottom text-sm',
-    className,
-  )} />
+  return <span {...rest} ref={ref} className={cn('group mr-1 select-none align-bottom text-sm',
+    className)} />
 }
 SliceContainer.displayName = 'SliceContainer'
 
@@ -28,12 +26,10 @@ export const SliceLabel: FC<SliceLabelProps> = (
   },
 ) => {
   const { className, children, labelInnerClassName, ...rest } = props
-  return <span {...rest} ref={ref} className={classNames(
-    baseStyle,
+  return <span {...rest} ref={ref} className={cn(baseStyle,
     'bg-state-base-hover-alt px-1 uppercase text-text-tertiary group-hover:bg-state-accent-solid group-hover:text-text-primary-on-surface',
-    className,
-  )}>
-    <span className={classNames('text-nowrap', labelInnerClassName)}>
+    className)}>
+    <span className={cn('text-nowrap', labelInnerClassName)}>
       {children}
     </span>
   </span>
@@ -49,11 +45,9 @@ export const SliceContent: FC<SliceContentProps> = (
   },
 ) => {
   const { className, children, ...rest } = props
-  return <span {...rest} ref={ref} className={classNames(
-    baseStyle,
+  return <span {...rest} ref={ref} className={cn(baseStyle,
     'whitespace-pre-line break-all bg-state-base-hover px-1 leading-7 group-hover:bg-state-accent-hover-alt group-hover:text-text-primary',
-    className,
-  )}>
+    className)}>
     {children}
   </span>
 }
@@ -68,11 +62,9 @@ export const SliceDivider: FC<SliceDividerProps> = (
   },
 ) => {
   const { className, ...rest } = props
-  return <span {...rest} ref={ref} className={classNames(
-    baseStyle,
+  return <span {...rest} ref={ref} className={cn(baseStyle,
     'bg-state-base-active px-[1px] text-sm group-hover:bg-state-accent-solid',
-    className,
-  )}>
+    className)}>
     {/* use a zero-width space to make the hover area bigger */}
     &#8203;
   </span>
diff --git a/web/app/components/datasets/formatted-text/formatted.tsx b/web/app/components/datasets/formatted-text/formatted.tsx
index 14d339e688..8021b7090c 100644
--- a/web/app/components/datasets/formatted-text/formatted.tsx
+++ b/web/app/components/datasets/formatted-text/formatted.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps, FC } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type FormattedTextProps = ComponentProps<'p'>
 
@@ -7,6 +7,6 @@ export const FormattedText: FC<FormattedTextProps> = (props) => {
   const { className, ...rest } = props
   return <p
     {...rest}
-    className={classNames('leading-7', className)}
+    className={cn('leading-7', className)}
   >{props.children}</p>
 }
diff --git a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
index fb67089890..95070ba01f 100644
--- a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
+++ b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
@@ -9,7 +9,7 @@ import Modal from '@/app/components/base/modal'
 import type { HitTesting } from '@/models/datasets'
 import FileIcon from '@/app/components/base/file-uploader/file-type-icon'
 import type { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tag from '@/app/components/datasets/documents/detail/completed/common/tag'
 import { Markdown } from '@/app/components/base/markdown'
 import ImageList from '../../common/image-list'
diff --git a/web/app/components/datasets/hit-testing/components/mask.tsx b/web/app/components/datasets/hit-testing/components/mask.tsx
index 799d7656b2..6f382d035a 100644
--- a/web/app/components/datasets/hit-testing/components/mask.tsx
+++ b/web/app/components/datasets/hit-testing/components/mask.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type MaskProps = {
   className?: string
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 75b59fe09a..fcacbe5a7e 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
@@ -9,7 +9,7 @@ import Image from 'next/image'
 import Button from '@/app/components/base/button'
 import { getIcon } from '@/app/components/datasets/common/retrieval-method-info'
 import ModifyExternalRetrievalModal from '@/app/components/datasets/hit-testing/modify-external-retrieval-modal'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type {
   Attachment,
   ExternalKnowledgeBaseHitTestingRequest,
diff --git a/web/app/components/datasets/hit-testing/components/query-input/textarea.tsx b/web/app/components/datasets/hit-testing/components/query-input/textarea.tsx
index a8c6e168b5..ca48770a6a 100644
--- a/web/app/components/datasets/hit-testing/components/query-input/textarea.tsx
+++ b/web/app/components/datasets/hit-testing/components/query-input/textarea.tsx
@@ -1,7 +1,7 @@
 import type { ChangeEvent } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Corner } from '@/app/components/base/icons/src/vender/solid/shapes'
 import Tooltip from '@/app/components/base/tooltip'
 
diff --git a/web/app/components/datasets/hit-testing/components/records.tsx b/web/app/components/datasets/hit-testing/components/records.tsx
index 60388b75d1..5e8facf7b3 100644
--- a/web/app/components/datasets/hit-testing/components/records.tsx
+++ b/web/app/components/datasets/hit-testing/components/records.tsx
@@ -4,7 +4,7 @@ import type { Attachment, HitTestingRecord, Query } from '@/models/datasets'
 import { RiApps2Line, RiArrowDownLine, RiFocus2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import ImageList from '../../common/image-list'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type RecordsProps = {
   records: HitTestingRecord[]
diff --git a/web/app/components/datasets/hit-testing/components/result-item-external.tsx b/web/app/components/datasets/hit-testing/components/result-item-external.tsx
index cf8011dbeb..9fa1701cd6 100644
--- a/web/app/components/datasets/hit-testing/components/result-item-external.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item-external.tsx
@@ -6,7 +6,7 @@ import { useBoolean } from 'ahooks'
 import ResultItemMeta from './result-item-meta'
 import ResultItemFooter from './result-item-footer'
 import type { ExternalKnowledgeBaseHitTesting } from '@/models/datasets'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
 
diff --git a/web/app/components/datasets/hit-testing/components/result-item-meta.tsx b/web/app/components/datasets/hit-testing/components/result-item-meta.tsx
index 617aa77312..0406ceb033 100644
--- a/web/app/components/datasets/hit-testing/components/result-item-meta.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item-meta.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { SegmentIndexTag } from '../../documents/detail/completed/common/segment-index-tag'
 import Dot from '../../documents/detail/completed/common/dot'
 import Score from './score'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   labelPrefix: string
diff --git a/web/app/components/datasets/hit-testing/components/result-item.tsx b/web/app/components/datasets/hit-testing/components/result-item.tsx
index 39682dfea6..a6ccd45bb6 100644
--- a/web/app/components/datasets/hit-testing/components/result-item.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item.tsx
@@ -8,7 +8,7 @@ import ChunkDetailModal from './chunk-detail-modal'
 import ResultItemMeta from './result-item-meta'
 import ResultItemFooter from './result-item-footer'
 import type { HitTesting } from '@/models/datasets'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
 import Tag from '@/app/components/datasets/documents/detail/completed/common/tag'
 import { extensionToFileType } from '@/app/components/datasets/hit-testing/utils/extension-to-file-type'
diff --git a/web/app/components/datasets/hit-testing/components/score.tsx b/web/app/components/datasets/hit-testing/components/score.tsx
index 05e470b97f..008fb3a9be 100644
--- a/web/app/components/datasets/hit-testing/components/score.tsx
+++ b/web/app/components/datasets/hit-testing/components/score.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   value: number | null
diff --git a/web/app/components/datasets/hit-testing/index.tsx b/web/app/components/datasets/hit-testing/index.tsx
index e9e3b0014a..f3fedcd37c 100644
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@@ -9,7 +9,7 @@ import s from './style.module.css'
 import ModifyRetrievalModal from './modify-retrieval-modal'
 import ResultItem from './components/result-item'
 import ResultItemExternal from './components/result-item-external'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type {
   ExternalKnowledgeBaseHitTesting,
   ExternalKnowledgeBaseHitTestingResponse,
diff --git a/web/app/components/datasets/list/dataset-card/index.tsx b/web/app/components/datasets/list/dataset-card/index.tsx
index fbce38dddf..a4b3ec7d64 100644
--- a/web/app/components/datasets/list/dataset-card/index.tsx
+++ b/web/app/components/datasets/list/dataset-card/index.tsx
@@ -7,7 +7,7 @@ import { useKnowledge } from '@/hooks/use-knowledge'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import TagSelector from '@/app/components/base/tag-management/selector'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useHover } from 'ahooks'
 import { RiFileTextFill, RiMoreFill, RiRobot2Fill } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
diff --git a/web/app/components/datasets/metadata/add-metadata-button.tsx b/web/app/components/datasets/metadata/add-metadata-button.tsx
index c34275015b..c196d77e24 100644
--- a/web/app/components/datasets/metadata/add-metadata-button.tsx
+++ b/web/app/components/datasets/metadata/add-metadata-button.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React from 'react'
 import Button from '../../base/button'
 import { RiAddLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 type Props = {
diff --git a/web/app/components/datasets/metadata/base/date-picker.tsx b/web/app/components/datasets/metadata/base/date-picker.tsx
index f2bf1e4279..045847c014 100644
--- a/web/app/components/datasets/metadata/base/date-picker.tsx
+++ b/web/app/components/datasets/metadata/base/date-picker.tsx
@@ -5,7 +5,7 @@ import {
   RiCloseCircleFill,
 } from '@remixicon/react'
 import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
 import useTimestamp from '@/hooks/use-timestamp'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/add-row.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/add-row.tsx
index 500bca335f..be5122e10d 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/add-row.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/add-row.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import type { MetadataItemWithEdit } from '../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Label from './label'
 import InputCombined from './input-combined'
 import { RiIndeterminateCircleLine } from '@remixicon/react'
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/edit-row.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/edit-row.tsx
index 63b43389db..c02d2afb25 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/edit-row.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/edit-row.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { type MetadataItemWithEdit, UpdateType } from '../types'
 import Label from './label'
 import { RiDeleteBinLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import InputHasSetMultipleValue from './input-has-set-multiple-value'
 import InputCombined from './input-combined'
 import EditedBeacon from './edited-beacon'
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 fd7bb89bd3..5d07571cd1 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
@@ -4,7 +4,7 @@ import React from 'react'
 import { DataType } from '../types'
 import Input from '@/app/components/base/input'
 import { InputNumber } from '@/app/components/base/input-number'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Datepicker from '../base/date-picker'
 
 type Props = {
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx
index 1e6d457989..4eb03fee38 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx
@@ -3,7 +3,7 @@ import { RiCloseLine } from '@remixicon/react'
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   onClear: () => void
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx
index a6d134d8f5..c73ea1262b 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   isDeleted?: boolean,
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 b5e4d1765b..50cbfa1338 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
@@ -6,7 +6,7 @@ import Drawer from '@/app/components/base/drawer'
 import Button from '@/app/components/base/button'
 import { RiAddLine, RiDeleteBinLine, RiEditLine } from '@remixicon/react'
 import { getIcon } from '../utils/get-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Field from './field'
 import Input from '@/app/components/base/input'
diff --git a/web/app/components/datasets/metadata/metadata-document/index.tsx b/web/app/components/datasets/metadata/metadata-document/index.tsx
index bf82e279d2..136be625d4 100644
--- a/web/app/components/datasets/metadata/metadata-document/index.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/index.tsx
@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import useMetadataDocument from '../hooks/use-metadata-document'
 import type { FullDocumentDetail } from '@/models/datasets'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'dataset.metadata.documentMetadata'
 
diff --git a/web/app/components/datasets/metadata/metadata-document/info-group.tsx b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
index 9078c437e7..1b82505f43 100644
--- a/web/app/components/datasets/metadata/metadata-document/info-group.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
@@ -7,7 +7,7 @@ import Field from './field'
 import InputCombined from '../edit-metadata-batch/input-combined'
 import { RiDeleteBinLine, RiQuestionLine } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import SelectMetadataModal from '../metadata-dataset/select-metadata-modal'
 import AddMetadataButton from '../add-metadata-button'
diff --git a/web/app/components/datasets/preview/container.tsx b/web/app/components/datasets/preview/container.tsx
index dbf5796f56..f850930a25 100644
--- a/web/app/components/datasets/preview/container.tsx
+++ b/web/app/components/datasets/preview/container.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps, FC, ReactNode } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type PreviewContainerProps = ComponentProps<'div'> & {
   header: ReactNode
@@ -13,14 +13,12 @@ const PreviewContainer: FC<PreviewContainerProps> = (props) => {
     <div
       {...rest}
       ref={ref}
-      className={classNames(
-        'flex h-full w-full flex-col rounded-tl-xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-background-default-lighter shadow-md shadow-shadow-shadow-5',
-      )}
+      className={cn('flex h-full w-full flex-col rounded-tl-xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-background-default-lighter shadow-md shadow-shadow-shadow-5')}
     >
       <header className='border-b border-divider-subtle pb-3 pl-5 pr-4 pt-4'>
         {header}
       </header>
-      <main className={classNames('w-full grow overflow-y-auto px-6 py-5', mainClassName)}>
+      <main className={cn('w-full grow overflow-y-auto px-6 py-5', mainClassName)}>
         {children}
       </main>
     </div>
diff --git a/web/app/components/datasets/preview/header.tsx b/web/app/components/datasets/preview/header.tsx
index eb3cd468ed..cb938bba9a 100644
--- a/web/app/components/datasets/preview/header.tsx
+++ b/web/app/components/datasets/preview/header.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps, FC } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type PreviewHeaderProps = Omit<ComponentProps<'div'>, 'title'> & {
   title: string
@@ -9,9 +9,7 @@ export const PreviewHeader: FC<PreviewHeaderProps> = (props) => {
   const { title, className, children, ...rest } = props
   return <div
     {...rest}
-    className={classNames(
-      className,
-    )}
+    className={cn(className)}
   >
     <div
       className='system-2xs-semibold-uppercase mb-1 px-1 uppercase text-text-accent'
diff --git a/web/app/components/datasets/rename-modal/index.tsx b/web/app/components/datasets/rename-modal/index.tsx
index e22a998680..dd5d4b775b 100644
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@@ -4,7 +4,7 @@ import type { MouseEventHandler } from 'react'
 import { useCallback, useRef, useState } from 'react'
 import { RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
diff --git a/web/app/components/datasets/settings/form/index.tsx b/web/app/components/datasets/settings/form/index.tsx
index 5ca85925cc..24942e6249 100644
--- a/web/app/components/datasets/settings/form/index.tsx
+++ b/web/app/components/datasets/settings/form/index.tsx
@@ -1,6 +1,5 @@
 'use client'
-import { useCallback, useMemo, useRef, useState } from 'react'
-import { useMount } from 'ahooks'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PermissionSelector from '../permission-selector'
 import IndexMethod from '../index-method'
@@ -23,7 +22,6 @@ import ModelSelector from '@/app/components/header/account-setting/model-provide
 import { useModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import type { DefaultModel } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import { fetchMembers } from '@/service/common'
 import type { Member } from '@/models/common'
 import AppIcon from '@/app/components/base/app-icon'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
@@ -34,6 +32,7 @@ import Toast from '@/app/components/base/toast'
 import { RiAlertFill } from '@remixicon/react'
 import { useDocLink } from '@/context/i18n'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
+import { useMembers } from '@/service/use-common'
 import { checkShowMultiModalTip } from '../utils'
 
 const rowClass = 'flex gap-x-1'
@@ -79,16 +78,9 @@ const Form = () => {
   )
   const { data: rerankModelList } = useModelList(ModelTypeEnum.rerank)
   const { data: embeddingModelList } = useModelList(ModelTypeEnum.textEmbedding)
+  const { data: membersData } = useMembers()
   const previousAppIcon = useRef(DEFAULT_APP_ICON)
 
-  const getMembers = async () => {
-    const { accounts } = await fetchMembers({ url: '/workspaces/current/members', params: {} })
-    if (!accounts)
-      setMemberList([])
-    else
-      setMemberList(accounts)
-  }
-
   const handleOpenAppIconPicker = useCallback(() => {
     setShowAppIconPicker(true)
     previousAppIcon.current = iconInfo
@@ -119,9 +111,12 @@ const Form = () => {
       setScoreThresholdEnabled(data.score_threshold_enabled)
   }, [])
 
-  useMount(() => {
-    getMembers()
-  })
+  useEffect(() => {
+    if (!membersData?.accounts)
+      setMemberList([])
+    else
+      setMemberList(membersData.accounts)
+  }, [membersData])
 
   const invalidDatasetList = useInvalidDatasetList()
   const handleSave = async () => {
diff --git a/web/app/components/datasets/settings/index-method/index.tsx b/web/app/components/datasets/settings/index-method/index.tsx
index 6490c68658..d5f8411dec 100644
--- a/web/app/components/datasets/settings/index-method/index.tsx
+++ b/web/app/components/datasets/settings/index-method/index.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { useRef } from 'react'
 import { useHover } from 'ahooks'
 import { IndexingType } from '../../create/step-two'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -37,7 +37,7 @@ const IndexMethod = ({
   const isEconomyDisabled = currentValue === IndexingType.QUALIFIED
 
   return (
-    <div className={classNames('flex flex-col gap-y-2')}>
+    <div className={cn('flex flex-col gap-y-2')}>
       {/* High Quality */}
       <OptionCard
         id={IndexingType.QUALIFIED}
diff --git a/web/app/components/datasets/settings/option-card.tsx b/web/app/components/datasets/settings/option-card.tsx
index d25ba90061..59e1fbaf9e 100644
--- a/web/app/components/datasets/settings/option-card.tsx
+++ b/web/app/components/datasets/settings/option-card.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Badge from '@/app/components/base/badge'
 import { useTranslation } from 'react-i18next'
 import { EffectColor } from './chunk-structure/types'
diff --git a/web/app/components/datasets/settings/permission-selector/index.tsx b/web/app/components/datasets/settings/permission-selector/index.tsx
index 3914ed946f..28049542f6 100644
--- a/web/app/components/datasets/settings/permission-selector/index.tsx
+++ b/web/app/components/datasets/settings/permission-selector/index.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import React, { useCallback, useMemo, useState } from 'react'
 import { useDebounceFn } from 'ahooks'
 import { RiArrowDownSLine, RiGroup2Line, RiLock2Line } from '@remixicon/react'
diff --git a/web/app/components/datasets/settings/permission-selector/member-item.tsx b/web/app/components/datasets/settings/permission-selector/member-item.tsx
index 19e9bf627c..38ba54b935 100644
--- a/web/app/components/datasets/settings/permission-selector/member-item.tsx
+++ b/web/app/components/datasets/settings/permission-selector/member-item.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiCheckLine } from '@remixicon/react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/develop/code.tsx b/web/app/components/develop/code.tsx
index 69d5624966..d9e89b8864 100644
--- a/web/app/components/develop/code.tsx
+++ b/web/app/components/develop/code.tsx
@@ -9,7 +9,7 @@ import {
 } from 'react'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
 import { Tag } from './tag'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { writeTextToClipboard } from '@/utils/clipboard'
 import type { PropsWithChildren, ReactElement, ReactNode } from 'react'
 
@@ -50,12 +50,10 @@ function CopyButton({ code }: { code: string }) {
   return (
     <button
       type="button"
-      className={classNames(
-        'group/button absolute right-4 top-1.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
+      className={cn('group/button absolute right-4 top-1.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
         copied
           ? 'bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20'
-          : 'hover:bg-white/7.5 dark:bg-white/2.5 bg-white/5 dark:hover:bg-white/5',
-      )}
+          : 'hover:bg-white/7.5 dark:bg-white/2.5 bg-white/5 dark:hover:bg-white/5')}
       onClick={() => {
         writeTextToClipboard(code).then(() => {
           setCopyCount(count => count + 1)
@@ -64,20 +62,16 @@ function CopyButton({ code }: { code: string }) {
     >
       <span
         aria-hidden={copied}
-        className={classNames(
-          'pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300',
-          copied && '-translate-y-1.5 opacity-0',
-        )}
+        className={cn('pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300',
+          copied && '-translate-y-1.5 opacity-0')}
       >
         <ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
         Copy
       </span>
       <span
         aria-hidden={!copied}
-        className={classNames(
-          'pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300',
-          !copied && 'translate-y-1.5 opacity-0',
-        )}
+        className={cn('pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300',
+          !copied && 'translate-y-1.5 opacity-0')}
       >
         Copied!
       </span>
@@ -168,12 +162,10 @@ function CodeGroupHeader({ title, tabTitles, selectedIndex }: CodeGroupHeaderPro
           {tabTitles!.map((tabTitle, tabIndex) => (
             <Tab
               key={tabIndex}
-              className={classNames(
-                'border-b py-3 transition focus:[&:not(:focus-visible)]:outline-none',
+              className={cn('border-b py-3 transition focus:[&:not(:focus-visible)]:outline-none',
                 tabIndex === selectedIndex
                   ? 'border-emerald-500 text-emerald-400'
-                  : 'border-transparent text-zinc-400 hover:text-zinc-300',
-              )}
+                  : 'border-transparent text-zinc-400 hover:text-zinc-300')}
             >
               {tabTitle}
             </Tab>
diff --git a/web/app/components/develop/doc.tsx b/web/app/components/develop/doc.tsx
index 28a3219535..2815cdaf79 100644
--- a/web/app/components/develop/doc.tsx
+++ b/web/app/components/develop/doc.tsx
@@ -19,7 +19,7 @@ import I18n from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n-config/language'
 import useTheme from '@/hooks/use-theme'
 import { AppModeEnum, Theme } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type IDocProps = {
   appDetail: any
diff --git a/web/app/components/develop/md.tsx b/web/app/components/develop/md.tsx
index 0c16d1952e..c9594ace15 100644
--- a/web/app/components/develop/md.tsx
+++ b/web/app/components/develop/md.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { PropsWithChildren } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type IChildrenProps = {
   children: React.ReactNode
@@ -71,10 +71,8 @@ type IColProps = IChildrenProps & {
 export function Col({ children, sticky = false }: IColProps) {
   return (
     <div
-      className={classNames(
-        '[&>:first-child]:mt-0 [&>:last-child]:mb-0',
-        sticky && 'xl:sticky xl:top-24',
-      )}
+      className={cn('[&>:first-child]:mt-0 [&>:last-child]:mb-0',
+        sticky && 'xl:sticky xl:top-24')}
     >
       {children}
     </div>
diff --git a/web/app/components/develop/tag.tsx b/web/app/components/develop/tag.tsx
index 0b797f9f6f..ddec76b163 100644
--- a/web/app/components/develop/tag.tsx
+++ b/web/app/components/develop/tag.tsx
@@ -1,5 +1,5 @@
 'use client'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const variantStyles = {
   medium: 'rounded-lg px-1.5 ring-1 ring-inset',
@@ -53,11 +53,9 @@ export function Tag({
 }: ITagProps) {
   return (
     <span
-      className={classNames(
-        'font-mono text-[0.625rem] font-semibold leading-6',
+      className={cn('font-mono text-[0.625rem] font-semibold leading-6',
         variantStyles[variant],
-        colorStyles[color][variant],
-      )}
+        colorStyles[color][variant])}
     >
       {children}
     </span>
diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
index daf863b84d..9528fbc954 100644
--- a/web/app/components/explore/app-card/index.tsx
+++ b/web/app/components/explore/app-card/index.tsx
@@ -2,7 +2,7 @@
 import { useTranslation } from 'react-i18next'
 import { PlusIcon } from '@heroicons/react/20/solid'
 import Button from '../../base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { App } from '@/models/explore'
 import AppIcon from '@/app/components/base/app-icon'
 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 252a102d80..968822a7b8 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -6,7 +6,7 @@ import { useContext } from 'use-context-selector'
 import useSWR from 'swr'
 import { useDebounceFn } from 'ahooks'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ExploreContext from '@/context/explore-context'
 import type { App } from '@/models/explore'
 import Category from '@/app/components/explore/category'
diff --git a/web/app/components/explore/category.tsx b/web/app/components/explore/category.tsx
index a36c91a73d..0014dd88d8 100644
--- a/web/app/components/explore/category.tsx
+++ b/web/app/components/explore/category.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import exploreI18n from '@/i18n/en-US/explore'
 import type { AppCategory } from '@/models/explore'
 import { ThumbsUp } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
diff --git a/web/app/components/explore/create-app-modal/index.spec.tsx b/web/app/components/explore/create-app-modal/index.spec.tsx
index fdae9bba2f..7f68b33337 100644
--- a/web/app/components/explore/create-app-modal/index.spec.tsx
+++ b/web/app/components/explore/create-app-modal/index.spec.tsx
@@ -33,16 +33,6 @@ jest.mock('react-i18next', () => ({
   },
 }))
 
-// ky is an ESM-only package; mock it to keep Jest (CJS) specs running.
-jest.mock('ky', () => ({
-  __esModule: true,
-  default: {
-    create: () => ({
-      extend: () => async () => new Response(),
-    }),
-  },
-}))
-
 // Avoid heavy emoji dataset initialization during unit tests.
 jest.mock('emoji-mart', () => ({
   init: jest.fn(),
diff --git a/web/app/components/explore/index.tsx b/web/app/components/explore/index.tsx
index e716de96f1..b9460f8135 100644
--- a/web/app/components/explore/index.tsx
+++ b/web/app/components/explore/index.tsx
@@ -5,10 +5,10 @@ import { useRouter } from 'next/navigation'
 import ExploreContext from '@/context/explore-context'
 import Sidebar from '@/app/components/explore/sidebar'
 import { useAppContext } from '@/context/app-context'
-import { fetchMembers } from '@/service/common'
 import type { InstalledApp } from '@/models/explore'
 import { useTranslation } from 'react-i18next'
 import useDocumentTitle from '@/hooks/use-document-title'
+import { useMembers } from '@/service/use-common'
 
 export type IExploreProps = {
   children: React.ReactNode
@@ -24,18 +24,16 @@ const Explore: FC<IExploreProps> = ({
   const [installedApps, setInstalledApps] = useState<InstalledApp[]>([])
   const [isFetchingInstalledApps, setIsFetchingInstalledApps] = useState(false)
   const { t } = useTranslation()
+  const { data: membersData } = useMembers()
 
   useDocumentTitle(t('common.menus.explore'))
 
   useEffect(() => {
-    (async () => {
-      const { accounts } = await fetchMembers({ url: '/workspaces/current/members', params: {} })
-      if (!accounts)
-        return
-      const currUser = accounts.find(account => account.id === userProfile.id)
-      setHasEditPermission(currUser?.role !== 'normal')
-    })()
-  }, [])
+    if (!membersData?.accounts)
+      return
+    const currUser = membersData.accounts.find(account => account.id === userProfile.id)
+    setHasEditPermission(currUser?.role !== 'normal')
+  }, [membersData, userProfile.id])
 
   useEffect(() => {
     if (isCurrentWorkspaceDatasetOperator)
diff --git a/web/app/components/explore/installed-app/index.spec.tsx b/web/app/components/explore/installed-app/index.spec.tsx
index 61ef575183..7dbf31aa42 100644
--- a/web/app/components/explore/installed-app/index.spec.tsx
+++ b/web/app/components/explore/installed-app/index.spec.tsx
@@ -172,7 +172,7 @@ describe('InstalledApp', () => {
   describe('Rendering', () => {
     it('should render without crashing', () => {
       render(<InstalledApp id="installed-app-123" />)
-      expect(screen.getByTestId('chat-with-history')).toBeInTheDocument()
+      expect(screen.getByText(/Chat With History/i)).toBeInTheDocument()
     })
 
     it('should render loading state when fetching app params', () => {
@@ -296,8 +296,8 @@ describe('InstalledApp', () => {
   describe('App Mode Rendering', () => {
     it('should render ChatWithHistory for CHAT mode', () => {
       render(<InstalledApp id="installed-app-123" />)
-      expect(screen.getByTestId('chat-with-history')).toBeInTheDocument()
-      expect(screen.queryByTestId('text-generation-app')).not.toBeInTheDocument()
+      expect(screen.getByText(/Chat With History/i)).toBeInTheDocument()
+      expect(screen.queryByText(/Text Generation App/i)).not.toBeInTheDocument()
     })
 
     it('should render ChatWithHistory for ADVANCED_CHAT mode', () => {
@@ -314,8 +314,8 @@ describe('InstalledApp', () => {
       })
 
       render(<InstalledApp id="installed-app-123" />)
-      expect(screen.getByTestId('chat-with-history')).toBeInTheDocument()
-      expect(screen.queryByTestId('text-generation-app')).not.toBeInTheDocument()
+      expect(screen.getByText(/Chat With History/i)).toBeInTheDocument()
+      expect(screen.queryByText(/Text Generation App/i)).not.toBeInTheDocument()
     })
 
     it('should render ChatWithHistory for AGENT_CHAT mode', () => {
@@ -332,8 +332,8 @@ describe('InstalledApp', () => {
       })
 
       render(<InstalledApp id="installed-app-123" />)
-      expect(screen.getByTestId('chat-with-history')).toBeInTheDocument()
-      expect(screen.queryByTestId('text-generation-app')).not.toBeInTheDocument()
+      expect(screen.getByText(/Chat With History/i)).toBeInTheDocument()
+      expect(screen.queryByText(/Text Generation App/i)).not.toBeInTheDocument()
     })
 
     it('should render TextGenerationApp for COMPLETION mode', () => {
@@ -350,8 +350,7 @@ describe('InstalledApp', () => {
       })
 
       render(<InstalledApp id="installed-app-123" />)
-      expect(screen.getByTestId('text-generation-app')).toBeInTheDocument()
-      expect(screen.getByText(/Text Generation App/)).toBeInTheDocument()
+      expect(screen.getByText(/Text Generation App/i)).toBeInTheDocument()
       expect(screen.queryByText(/Workflow/)).not.toBeInTheDocument()
     })
 
@@ -369,7 +368,7 @@ describe('InstalledApp', () => {
       })
 
       render(<InstalledApp id="installed-app-123" />)
-      expect(screen.getByTestId('text-generation-app')).toBeInTheDocument()
+      expect(screen.getByText(/Text Generation App/i)).toBeInTheDocument()
       expect(screen.getByText(/Workflow/)).toBeInTheDocument()
     })
   })
@@ -566,22 +565,10 @@ describe('InstalledApp', () => {
 
       render(<InstalledApp id="installed-app-123" />)
       // Should find and render the correct app
-      expect(screen.getByTestId('chat-with-history')).toBeInTheDocument()
+      expect(screen.getByText(/Chat With History/i)).toBeInTheDocument()
       expect(screen.getByText(/installed-app-123/)).toBeInTheDocument()
     })
 
-    it('should apply correct CSS classes to container', () => {
-      const { container } = render(<InstalledApp id="installed-app-123" />)
-      const mainDiv = container.firstChild as HTMLElement
-      expect(mainDiv).toHaveClass('h-full', 'bg-background-default', 'py-2', 'pl-0', 'pr-2', 'sm:p-2')
-    })
-
-    it('should apply correct CSS classes to ChatWithHistory', () => {
-      render(<InstalledApp id="installed-app-123" />)
-      const chatComponent = screen.getByTestId('chat-with-history')
-      expect(chatComponent).toHaveClass('overflow-hidden', 'rounded-2xl', 'shadow-md')
-    })
-
     it('should handle rapid id prop changes', async () => {
       const app1 = { ...mockInstalledApp, id: 'app-1' }
       const app2 = { ...mockInstalledApp, id: 'app-2' }
@@ -627,50 +614,6 @@ describe('InstalledApp', () => {
     })
   })
 
-  describe('Component Memoization', () => {
-    it('should be wrapped with React.memo', () => {
-      // React.memo wraps the component with a special $$typeof symbol
-      const componentType = (InstalledApp as React.MemoExoticComponent<typeof InstalledApp>).$$typeof
-      expect(componentType).toBeDefined()
-    })
-
-    it('should re-render when props change', () => {
-      const { rerender } = render(<InstalledApp id="installed-app-123" />)
-      expect(screen.getByText(/installed-app-123/)).toBeInTheDocument()
-
-      // Change to a different app
-      const differentApp = {
-        ...mockInstalledApp,
-        id: 'different-app-456',
-        app: {
-          ...mockInstalledApp.app,
-          name: 'Different App',
-        },
-      }
-      ;(useContext as jest.Mock).mockReturnValue({
-        installedApps: [differentApp],
-        isFetchingInstalledApps: false,
-      })
-
-      rerender(<InstalledApp id="different-app-456" />)
-      expect(screen.getByText(/different-app-456/)).toBeInTheDocument()
-    })
-
-    it('should maintain component stability across re-renders with same props', () => {
-      const { rerender } = render(<InstalledApp id="installed-app-123" />)
-      const initialCallCount = mockUpdateAppInfo.mock.calls.length
-
-      // Rerender with same props - useEffect may still run due to dependencies
-      rerender(<InstalledApp id="installed-app-123" />)
-
-      // Component should render successfully
-      expect(screen.getByTestId('chat-with-history')).toBeInTheDocument()
-
-      // Mock calls might increase due to useEffect, but component should be stable
-      expect(mockUpdateAppInfo.mock.calls.length).toBeGreaterThanOrEqual(initialCallCount)
-    })
-  })
-
   describe('Render Priority', () => {
     it('should show error before loading state', () => {
       ;(useGetInstalledAppParams as jest.Mock).mockReturnValue({
diff --git a/web/app/components/explore/item-operation/index.tsx b/web/app/components/explore/item-operation/index.tsx
index 6fd11fd084..a1b4dfcd7c 100644
--- a/web/app/components/explore/item-operation/index.tsx
+++ b/web/app/components/explore/item-operation/index.tsx
@@ -10,7 +10,7 @@ import { useBoolean } from 'ahooks'
 import { Pin02 } from '../../base/icons/src/vender/line/general'
 
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 
 export type IItemOperationProps = {
diff --git a/web/app/components/explore/sidebar/app-nav-item/index.tsx b/web/app/components/explore/sidebar/app-nav-item/index.tsx
index 9b3ca09be6..9420152b0e 100644
--- a/web/app/components/explore/sidebar/app-nav-item/index.tsx
+++ b/web/app/components/explore/sidebar/app-nav-item/index.tsx
@@ -3,7 +3,7 @@ import React, { useRef } from 'react'
 
 import { useRouter } from 'next/navigation'
 import { useHover } from 'ahooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ItemOperation from '@/app/components/explore/item-operation'
 import AppIcon from '@/app/components/base/app-icon'
 import type { AppIconType } from '@/types/app'
diff --git a/web/app/components/explore/sidebar/index.tsx b/web/app/components/explore/sidebar/index.tsx
index 2173f0fcb7..8fa94030ff 100644
--- a/web/app/components/explore/sidebar/index.tsx
+++ b/web/app/components/explore/sidebar/index.tsx
@@ -7,7 +7,7 @@ import { useSelectedLayoutSegments } from 'next/navigation'
 import Link from 'next/link'
 import Toast from '../../base/toast'
 import Item from './app-nav-item'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ExploreContext from '@/context/explore-context'
 import Confirm from '@/app/components/base/confirm'
 import Divider from '@/app/components/base/divider'
diff --git a/web/app/components/goto-anything/actions/knowledge.tsx b/web/app/components/goto-anything/actions/knowledge.tsx
index 832f4f82fe..8c1be9a3ef 100644
--- a/web/app/components/goto-anything/actions/knowledge.tsx
+++ b/web/app/components/goto-anything/actions/knowledge.tsx
@@ -2,7 +2,7 @@ import type { ActionItem, KnowledgeSearchResult } from './types'
 import type { DataSet } from '@/models/datasets'
 import { fetchDatasets } from '@/service/datasets'
 import { Folder } from '../../base/icons/src/vender/solid/files'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const EXTERNAL_PROVIDER = 'external' as const
 const isExternalProvider = (provider: string): boolean => provider === EXTERNAL_PROVIDER
diff --git a/web/app/components/header/account-dropdown/compliance.tsx b/web/app/components/header/account-dropdown/compliance.tsx
index 8dc4aeec32..28a4477e34 100644
--- a/web/app/components/header/account-dropdown/compliance.tsx
+++ b/web/app/components/header/account-dropdown/compliance.tsx
@@ -12,7 +12,7 @@ import Iso from '../../base/icons/src/public/common/Iso'
 import Gdpr from '../../base/icons/src/public/common/Gdpr'
 import Toast from '../../base/toast'
 import Tooltip from '../../base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import { Plan } from '@/app/components/billing/type'
 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 a9fc37aec9..23d112b6cb 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -29,7 +29,7 @@ import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContext } from '@/context/modal-context'
 import { IS_CLOUD_EDITION } from '@/config'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useDocLink } from '@/context/i18n'
 import { useLogout } from '@/service/use-common'
diff --git a/web/app/components/header/account-dropdown/support.tsx b/web/app/components/header/account-dropdown/support.tsx
index f354cc4ab0..2dd0376238 100644
--- a/web/app/components/header/account-dropdown/support.tsx
+++ b/web/app/components/header/account-dropdown/support.tsx
@@ -3,7 +3,7 @@ import { RiArrowRightSLine, RiArrowRightUpLine, RiChatSmile2Line, RiDiscordLine,
 import { Fragment } from 'react'
 import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import { Plan } from '@/app/components/billing/type'
 import { toggleZendeskWindow } from '@/app/components/base/zendesk/utils'
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 f384cbc0bc..d0b24dd7a9 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -3,7 +3,7 @@ import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
 import { RiArrowDownSLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { basePath } from '@/utils/var'
 import PlanBadge from '@/app/components/header/plan-badge'
 import { switchWorkspace } from '@/service/common'
diff --git a/web/app/components/header/account-setting/Integrations-page/index.tsx b/web/app/components/header/account-setting/Integrations-page/index.tsx
index 13791cc48d..460cc2ed5a 100644
--- a/web/app/components/header/account-setting/Integrations-page/index.tsx
+++ b/web/app/components/header/account-setting/Integrations-page/index.tsx
@@ -1,11 +1,10 @@
 'use client'
 
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import Link from 'next/link'
 import s from './index.module.css'
-import classNames from '@/utils/classnames'
-import { fetchAccountIntegrates } from '@/service/common'
+import { cn } from '@/utils/classnames'
+import { useAccountIntegrates } from '@/service/use-common'
 
 const titleClassName = `
   mb-2 text-sm font-medium text-gray-900
@@ -25,33 +24,38 @@ export default function IntegrationsPage() {
     },
   }
 
-  const { data } = useSWR({ url: '/account/integrates' }, fetchAccountIntegrates)
-  const integrates = data?.data?.length ? data.data : []
+  const { data } = useAccountIntegrates()
+  const integrates = data?.data ?? []
 
   return (
     <>
       <div className='mb-8'>
         <div className={titleClassName}>{t('common.integrations.connected')}</div>
         {
-          integrates.map(integrate => (
-            <div key={integrate.provider} className='mb-2 flex items-center rounded-lg border-[0.5px] border-gray-200 bg-gray-50 px-3 py-2'>
-              <div className={classNames('mr-3 h-8 w-8 rounded-lg border border-gray-100 bg-white', s[`${integrate.provider}-icon`])} />
-              <div className='grow'>
-                <div className='text-sm font-medium leading-[21px] text-gray-800'>{integrateMap[integrate.provider].name}</div>
-                <div className='text-xs font-normal leading-[18px] text-gray-500'>{integrateMap[integrate.provider].description}</div>
+          integrates.map((integrate) => {
+            const info = integrateMap[integrate.provider]
+            if (!info)
+              return null
+            return (
+              <div key={integrate.provider} className='mb-2 flex items-center rounded-lg border-[0.5px] border-gray-200 bg-gray-50 px-3 py-2'>
+                <div className={cn('mr-3 h-8 w-8 rounded-lg border border-gray-100 bg-white', s[`${integrate.provider}-icon`])} />
+                <div className='grow'>
+                  <div className='text-sm font-medium leading-[21px] text-gray-800'>{info.name}</div>
+                  <div className='text-xs font-normal leading-[18px] text-gray-500'>{info.description}</div>
+                </div>
+                {
+                  !integrate.is_bound && (
+                    <Link
+                      className='flex h-8 cursor-pointer items-center rounded-lg border border-gray-200 bg-white px-[7px] text-xs font-medium text-gray-700'
+                      href={integrate.link}
+                      target='_blank' rel='noopener noreferrer'>
+                      {t('common.integrations.connect')}
+                    </Link>
+                  )
+                }
               </div>
-              {
-                !integrate.is_bound && (
-                  <Link
-                    className='flex h-8 cursor-pointer items-center rounded-lg border border-gray-200 bg-white px-[7px] text-xs font-medium text-gray-700'
-                    href={integrate.link}
-                    target='_blank' rel='noopener noreferrer'>
-                    {t('common.integrations.connect')}
-                  </Link>
-                )
-              }
-            </div>
-          ))
+            )
+          })
         }
       </div>
       {/* <div className='mb-8'>
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 d16c4f2ded..24dfce5b90 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,5 +1,4 @@
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import {
   RiAddLine,
 } from '@remixicon/react'
@@ -7,15 +6,12 @@ import Item from './item'
 import Empty from './empty'
 import Button from '@/app/components/base/button'
 import { useModalContext } from '@/context/modal-context'
-import { fetchApiBasedExtensionList } from '@/service/common'
+import { useApiBasedExtensions } from '@/service/use-common'
 
 const ApiBasedExtensionPage = () => {
   const { t } = useTranslation()
   const { setShowApiBasedExtensionModal } = useModalContext()
-  const { data, mutate, isLoading } = useSWR(
-    '/api-based-extension',
-    fetchApiBasedExtensionList,
-  )
+  const { data, refetch: mutate, isPending: isLoading } = useApiBasedExtensions()
 
   const handleOpenApiBasedExtensionModal = () => {
     setShowApiBasedExtensionModal({
diff --git a/web/app/components/header/account-setting/api-based-extension-page/selector.tsx b/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
index 549b5e7910..9da3745f2f 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
@@ -1,6 +1,5 @@
 import type { FC } from 'react'
 import { useState } from 'react'
-import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
 import {
   RiAddLine,
@@ -15,8 +14,8 @@ import {
   ArrowUpRight,
 } from '@/app/components/base/icons/src/vender/line/arrows'
 import { useModalContext } from '@/context/modal-context'
-import { fetchApiBasedExtensionList } from '@/service/common'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
+import { useApiBasedExtensions } from '@/service/use-common'
 
 type ApiBasedExtensionSelectorProps = {
   value: string
@@ -33,10 +32,7 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
     setShowAccountSettingModal,
     setShowApiBasedExtensionModal,
   } = useModalContext()
-  const { data, mutate } = useSWR(
-    '/api-based-extension',
-    fetchApiBasedExtensionList,
-  )
+  const { data, refetch: mutate } = useApiBasedExtensions()
   const handleSelect = (id: string) => {
     onChange(id)
     setOpen(false)
diff --git a/web/app/components/header/account-setting/collapse/index.tsx b/web/app/components/header/account-setting/collapse/index.tsx
index 44360df8cd..94ebbd5a78 100644
--- a/web/app/components/header/account-setting/collapse/index.tsx
+++ b/web/app/components/header/account-setting/collapse/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type IItem = {
   key: string
@@ -25,7 +25,7 @@ const Collapse = ({
   const toggle = () => setOpen(!open)
 
   return (
-    <div className={classNames('overflow-hidden rounded-xl bg-background-section-burn', wrapperClassName)}>
+    <div className={cn('overflow-hidden rounded-xl bg-background-section-burn', wrapperClassName)}>
       <div className='flex cursor-pointer items-center justify-between px-3 py-2 text-xs font-medium leading-[18px] text-text-secondary' onClick={toggle}>
         {title}
         {
diff --git a/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx b/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx
index f4f7749f7f..9056b96299 100644
--- a/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx
@@ -18,7 +18,7 @@ import Loading from '@/app/components/base/loading'
 import ProviderCard from '@/app/components/plugins/provider-card'
 import List from '@/app/components/plugins/marketplace/list'
 import type { Plugin } from '@/app/components/plugins/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { getLocaleOnClient } from '@/i18n-config'
 import { getMarketplaceUrl } from '@/utils/var'
 
diff --git a/web/app/components/header/account-setting/data-source-page/data-source-notion/index.tsx b/web/app/components/header/account-setting/data-source-page/data-source-notion/index.tsx
index 065ef91eba..68fd52d0a4 100644
--- a/web/app/components/header/account-setting/data-source-page/data-source-notion/index.tsx
+++ b/web/app/components/header/account-setting/data-source-page/data-source-notion/index.tsx
@@ -1,16 +1,15 @@
 'use client'
 import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
-import useSWR from 'swr'
 import Panel from '../panel'
 import { DataSourceType } from '../panel/types'
 import type { DataSourceNotion as TDataSourceNotion } from '@/models/common'
 import { useAppContext } from '@/context/app-context'
-import { fetchNotionConnection } from '@/service/common'
 import NotionIcon from '@/app/components/base/notion-icon'
 import { noop } from 'lodash-es'
 import { useTranslation } from 'react-i18next'
 import Toast from '@/app/components/base/toast'
+import { useDataSourceIntegrates, useNotionConnection } from '@/service/use-common'
 
 const Icon: FC<{
   src: string
@@ -26,7 +25,7 @@ const Icon: FC<{
   )
 }
 type Props = {
-  workspaces: TDataSourceNotion[]
+  workspaces?: TDataSourceNotion[]
 }
 
 const DataSourceNotion: FC<Props> = ({
@@ -34,10 +33,14 @@ const DataSourceNotion: FC<Props> = ({
 }) => {
   const { isCurrentWorkspaceManager } = useAppContext()
   const [canConnectNotion, setCanConnectNotion] = useState(false)
-  const { data } = useSWR(canConnectNotion ? '/oauth/data-source/notion' : null, fetchNotionConnection)
+  const { data: integrates } = useDataSourceIntegrates({
+    initialData: workspaces ? { data: workspaces } : undefined,
+  })
+  const { data } = useNotionConnection(canConnectNotion)
   const { t } = useTranslation()
 
-  const connected = !!workspaces.length
+  const resolvedWorkspaces = integrates?.data ?? []
+  const connected = !!resolvedWorkspaces.length
 
   const handleConnectNotion = () => {
     if (!isCurrentWorkspaceManager)
@@ -74,7 +77,7 @@ const DataSourceNotion: FC<Props> = ({
       onConfigure={handleConnectNotion}
       readOnly={!isCurrentWorkspaceManager}
       isSupportList
-      configuredList={workspaces.map(workspace => ({
+      configuredList={resolvedWorkspaces.map(workspace => ({
         id: workspace.id,
         logo: ({ className }: { className: string }) => (
           <Icon
diff --git a/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx b/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx
index bcf24d68da..61db976dbb 100644
--- a/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx
+++ b/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx
@@ -1,7 +1,6 @@
 'use client'
 import { useTranslation } from 'react-i18next'
 import { Fragment } from 'react'
-import { useSWRConfig } from 'swr'
 import {
   RiDeleteBinLine,
   RiLoopLeftLine,
@@ -10,8 +9,9 @@ import {
 } from '@remixicon/react'
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import { syncDataSourceNotion, updateDataSourceNotionAction } from '@/service/common'
+import { useInvalidDataSourceIntegrates } from '@/service/use-common'
 import Toast from '@/app/components/base/toast'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type OperateProps = {
   payload: {
@@ -25,14 +25,14 @@ export default function Operate({
   onAuthAgain,
 }: OperateProps) {
   const { t } = useTranslation()
-  const { mutate } = useSWRConfig()
+  const invalidateDataSourceIntegrates = useInvalidDataSourceIntegrates()
 
   const updateIntegrates = () => {
     Toast.notify({
       type: 'success',
       message: t('common.api.success'),
     })
-    mutate({ url: 'data-source/integrates' })
+    invalidateDataSourceIntegrates()
   }
   const handleSync = async () => {
     await syncDataSourceNotion({ url: `/oauth/data-source/notion/${payload.id}/sync` })
diff --git a/web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx b/web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx
index d2faa1dd6a..a2762add44 100644
--- a/web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx
+++ b/web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx
@@ -7,7 +7,7 @@ import { DataSourceType } from '../panel/types'
 import ConfigFirecrawlModal from './config-firecrawl-modal'
 import ConfigWatercrawlModal from './config-watercrawl-modal'
 import ConfigJinaReaderModal from './config-jina-reader-modal'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from '@/app/components/datasets/create/website/index.module.css'
 import { fetchDataSources, removeDataSourceApiKeyBinding } from '@/service/datasets'
 
diff --git a/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx b/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx
index 6faf840529..5a9cbb4c40 100644
--- a/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx
+++ b/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx
@@ -9,7 +9,7 @@ import Indicator from '../../../indicator'
 import Operate from '../data-source-notion/operate'
 import { DataSourceType } from './types'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 export type ConfigItemType = {
diff --git a/web/app/components/header/account-setting/data-source-page/panel/index.tsx b/web/app/components/header/account-setting/data-source-page/panel/index.tsx
index 95ab9a6982..f644853339 100644
--- a/web/app/components/header/account-setting/data-source-page/panel/index.tsx
+++ b/web/app/components/header/account-setting/data-source-page/panel/index.tsx
@@ -10,7 +10,7 @@ import s from './style.module.css'
 import { DataSourceType } from './types'
 import Button from '@/app/components/base/button'
 import { DataSourceProvider } from '@/models/common'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   type: DataSourceType
diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index 49f6f62a08..c51aa1bc30 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -23,7 +23,7 @@ import LanguagePage from './language-page'
 import ApiBasedExtensionPage from './api-based-extension-page'
 import DataSourcePage from './data-source-page-new'
 import ModelProviderPage from './model-provider-page'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BillingPage from '@/app/components/billing/billing-page'
 import CustomPage from '@/app/components/custom/custom-page'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
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 6d5b2b1ba0..56965214c5 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,5 +1,5 @@
 'use client'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Input from '@/app/components/base/input'
 import { useTranslation } from 'react-i18next'
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 6b4da22084..e951e5b85a 100644
--- a/web/app/components/header/account-setting/members-page/index.tsx
+++ b/web/app/components/header/account-setting/members-page/index.tsx
@@ -1,6 +1,5 @@
 'use client'
 import { useState } from 'react'
-import useSWR from 'swr'
 import { useContext } from 'use-context-selector'
 import { RiUserAddLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
@@ -10,7 +9,6 @@ import EditWorkspaceModal from './edit-workspace-modal'
 import TransferOwnershipModal from './transfer-ownership-modal'
 import Operation from './operation'
 import TransferOwnership from './operation/transfer-ownership'
-import { fetchMembers } from '@/service/common'
 import I18n from '@/context/i18n'
 import { useAppContext } from '@/context/app-context'
 import Avatar from '@/app/components/base/avatar'
@@ -21,11 +19,12 @@ import Button from '@/app/components/base/button'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import { NUM_INFINITE } from '@/app/components/billing/config'
 import { LanguagesSupported } from '@/i18n-config/language'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import { RiPencilLine } from '@remixicon/react'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+import { useMembers } from '@/service/use-common'
 
 const MembersPage = () => {
   const { t } = useTranslation()
@@ -39,13 +38,7 @@ const MembersPage = () => {
   const { locale } = useContext(I18n)
 
   const { userProfile, currentWorkspace, isCurrentWorkspaceOwner, isCurrentWorkspaceManager } = useAppContext()
-  const { data, mutate } = useSWR(
-    {
-      url: '/workspaces/current/members',
-      params: {},
-    },
-    fetchMembers,
-  )
+  const { data, refetch } = useMembers()
   const { systemFeatures } = useGlobalPublicStore()
   const { formatTimeFromNow } = useFormatTimeFromNow()
   const [inviteModalVisible, setInviteModalVisible] = useState(false)
@@ -140,7 +133,7 @@ const MembersPage = () => {
                       <div className='system-sm-regular px-3 text-text-secondary'>{RoleMap[account.role] || RoleMap.normal}</div>
                     )}
                     {isCurrentWorkspaceOwner && account.role !== 'owner' && (
-                      <Operation member={account} operatorRole={currentWorkspace.role} onOperate={mutate} />
+                      <Operation member={account} operatorRole={currentWorkspace.role} onOperate={refetch} />
                     )}
                     {!isCurrentWorkspaceOwner && (
                       <div className='system-sm-regular px-3 text-text-secondary'>{RoleMap[account.role] || RoleMap.normal}</div>
@@ -160,7 +153,7 @@ const MembersPage = () => {
             onSend={(invitationResults) => {
               setInvitedModalVisible(true)
               setInvitationResults(invitationResults)
-              mutate()
+              refetch()
             }}
           />
         )
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 a432b8a4f0..14654c1196 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
@@ -7,7 +7,7 @@ import { ReactMultiEmail } from 'react-multi-email'
 import { RiErrorWarningFill } from '@remixicon/react'
 import RoleSelector from './role-selector'
 import s from './index.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import { inviteMember } from '@/service/common'
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 0a28d797bc..19305eb763 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,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import React, { useState } from 'react'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useProviderContext } from '@/context/provider-context'
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 b06ec63228..f393be5717 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
@@ -5,7 +5,7 @@ import { useContext } from 'use-context-selector'
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
 import { useProviderContext } from '@/context/provider-context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { Member } from '@/models/common'
 import { deleteMemberOrCancelInvitation, updateMemberRole } from '@/service/common'
 import { ToastContext } from '@/app/components/base/toast'
diff --git a/web/app/components/header/account-setting/members-page/operation/transfer-ownership.tsx b/web/app/components/header/account-setting/members-page/operation/transfer-ownership.tsx
index bbf1a0351a..61ed7fb337 100644
--- a/web/app/components/header/account-setting/members-page/operation/transfer-ownership.tsx
+++ b/web/app/components/header/account-setting/members-page/operation/transfer-ownership.tsx
@@ -5,7 +5,7 @@ import {
   RiArrowDownSLine,
 } from '@remixicon/react'
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   onOperate: () => void
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 5c3e69b790..70c8e300f0 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
@@ -2,15 +2,14 @@
 import type { FC } from 'react'
 import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import {
   RiArrowDownSLine,
 } from '@remixicon/react'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import Avatar from '@/app/components/base/avatar'
 import Input from '@/app/components/base/input'
-import { fetchMembers } from '@/service/common'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
+import { useMembers } from '@/service/use-common'
 
 type Props = {
   value?: any
@@ -27,13 +26,7 @@ const MemberSelector: FC<Props> = ({
   const [open, setOpen] = useState(false)
   const [searchValue, setSearchValue] = useState('')
 
-  const { data } = useSWR(
-    {
-      url: '/workspaces/current/members',
-      params: {},
-    },
-    fetchMembers,
-  )
+  const { data } = useMembers()
 
   const currentValue = useMemo(() => {
     if (!data?.accounts) return null
diff --git a/web/app/components/header/account-setting/menu-dialog.tsx b/web/app/components/header/account-setting/menu-dialog.tsx
index ad3a1e7109..abed5d2bed 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 { Fragment, useCallback, useEffect } from 'react'
 import type { ReactNode } from 'react'
 import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 type DialogProps = {
diff --git a/web/app/components/header/account-setting/model-provider-page/hooks.spec.ts b/web/app/components/header/account-setting/model-provider-page/hooks.spec.ts
index b7a56f7b60..e1f42aa56f 100644
--- a/web/app/components/header/account-setting/model-provider-page/hooks.spec.ts
+++ b/web/app/components/header/account-setting/model-provider-page/hooks.spec.ts
@@ -3,15 +3,21 @@ import { useLanguage } from './hooks'
 import { useContext } from 'use-context-selector'
 import { after } from 'node:test'
 
-jest.mock('swr', () => ({
-  __esModule: true,
-  default: jest.fn(), // mock useSWR
-  useSWRConfig: jest.fn(),
+jest.mock('@tanstack/react-query', () => ({
+  useQuery: jest.fn(),
+  useQueryClient: jest.fn(() => ({
+    invalidateQueries: jest.fn(),
+  })),
 }))
 
 // mock use-context-selector
 jest.mock('use-context-selector', () => ({
   useContext: jest.fn(),
+  createContext: () => ({
+    Provider: ({ children }: any) => children,
+    Consumer: ({ children }: any) => children(null),
+  }),
+  useContextSelector: jest.fn(),
 }))
 
 // mock service/common functions
@@ -19,10 +25,15 @@ jest.mock('@/service/common', () => ({
   fetchDefaultModal: jest.fn(),
   fetchModelList: jest.fn(),
   fetchModelProviderCredentials: jest.fn(),
-  fetchModelProviders: jest.fn(),
   getPayUrl: jest.fn(),
 }))
 
+jest.mock('@/service/use-common', () => ({
+  commonQueryKeys: {
+    modelProviders: ['common', 'model-providers'],
+  },
+}))
+
 // mock context hooks
 jest.mock('@/context/i18n', () => ({
   __esModule: true,
diff --git a/web/app/components/header/account-setting/model-provider-page/hooks.ts b/web/app/components/header/account-setting/model-provider-page/hooks.ts
index 0ffd1df9de..ff5899f01c 100644
--- a/web/app/components/header/account-setting/model-provider-page/hooks.ts
+++ b/web/app/components/header/account-setting/model-provider-page/hooks.ts
@@ -4,7 +4,7 @@ import {
   useMemo,
   useState,
 } from 'react'
-import useSWR, { useSWRConfig } from 'swr'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useContext } from 'use-context-selector'
 import type {
   Credential,
@@ -27,9 +27,9 @@ import {
   fetchDefaultModal,
   fetchModelList,
   fetchModelProviderCredentials,
-  fetchModelProviders,
   getPayUrl,
 } from '@/service/common'
+import { commonQueryKeys } from '@/service/use-common'
 import { useProviderContext } from '@/context/provider-context'
 import {
   useMarketplacePlugins,
@@ -81,17 +81,23 @@ export const useProviderCredentialsAndLoadBalancing = (
   currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields,
   credentialId?: string,
 ) => {
-  const { data: predefinedFormSchemasValue, mutate: mutatePredefined, isLoading: isPredefinedLoading } = useSWR(
-    (configurationMethod === ConfigurationMethodEnum.predefinedModel && configured && credentialId)
-      ? `/workspaces/current/model-providers/${provider}/credentials${credentialId ? `?credential_id=${credentialId}` : ''}`
-      : null,
-    fetchModelProviderCredentials,
+  const queryClient = useQueryClient()
+  const predefinedEnabled = configurationMethod === ConfigurationMethodEnum.predefinedModel && configured && !!credentialId
+  const customEnabled = configurationMethod === ConfigurationMethodEnum.customizableModel && !!currentCustomConfigurationModelFixedFields && !!credentialId
+
+  const { data: predefinedFormSchemasValue, isPending: isPredefinedLoading } = useQuery(
+    {
+      queryKey: ['model-providers', 'credentials', provider, credentialId],
+      queryFn: () => fetchModelProviderCredentials(`/workspaces/current/model-providers/${provider}/credentials${credentialId ? `?credential_id=${credentialId}` : ''}`),
+      enabled: predefinedEnabled,
+    },
   )
-  const { data: customFormSchemasValue, mutate: mutateCustomized, isLoading: isCustomizedLoading } = useSWR(
-    (configurationMethod === ConfigurationMethodEnum.customizableModel && currentCustomConfigurationModelFixedFields && credentialId)
-      ? `/workspaces/current/model-providers/${provider}/models/credentials?model=${currentCustomConfigurationModelFixedFields?.__model_name}&model_type=${currentCustomConfigurationModelFixedFields?.__model_type}${credentialId ? `&credential_id=${credentialId}` : ''}`
-      : null,
-    fetchModelProviderCredentials,
+  const { data: customFormSchemasValue, isPending: isCustomizedLoading } = useQuery(
+    {
+      queryKey: ['model-providers', 'models', 'credentials', provider, currentCustomConfigurationModelFixedFields?.__model_type, currentCustomConfigurationModelFixedFields?.__model_name, credentialId],
+      queryFn: () => fetchModelProviderCredentials(`/workspaces/current/model-providers/${provider}/models/credentials?model=${currentCustomConfigurationModelFixedFields?.__model_name}&model_type=${currentCustomConfigurationModelFixedFields?.__model_type}${credentialId ? `&credential_id=${credentialId}` : ''}`),
+      enabled: customEnabled,
+    },
   )
 
   const credentials = useMemo(() => {
@@ -112,9 +118,11 @@ export const useProviderCredentialsAndLoadBalancing = (
   ])
 
   const mutate = useMemo(() => () => {
-    mutatePredefined()
-    mutateCustomized()
-  }, [mutateCustomized, mutatePredefined])
+    if (predefinedEnabled)
+      queryClient.invalidateQueries({ queryKey: ['model-providers', 'credentials', provider, credentialId] })
+    if (customEnabled)
+      queryClient.invalidateQueries({ queryKey: ['model-providers', 'models', 'credentials', provider, currentCustomConfigurationModelFixedFields?.__model_type, currentCustomConfigurationModelFixedFields?.__model_name, credentialId] })
+  }, [customEnabled, credentialId, currentCustomConfigurationModelFixedFields?.__model_name, currentCustomConfigurationModelFixedFields?.__model_type, predefinedEnabled, provider, queryClient])
 
   return {
     credentials,
@@ -129,22 +137,28 @@ export const useProviderCredentialsAndLoadBalancing = (
 }
 
 export const useModelList = (type: ModelTypeEnum) => {
-  const { data, mutate, isLoading } = useSWR(`/workspaces/current/models/model-types/${type}`, fetchModelList)
+  const { data, refetch, isPending } = useQuery({
+    queryKey: commonQueryKeys.modelList(type),
+    queryFn: () => fetchModelList(`/workspaces/current/models/model-types/${type}`),
+  })
 
   return {
     data: data?.data || [],
-    mutate,
-    isLoading,
+    mutate: refetch,
+    isLoading: isPending,
   }
 }
 
 export const useDefaultModel = (type: ModelTypeEnum) => {
-  const { data, mutate, isLoading } = useSWR(`/workspaces/current/default-model?model_type=${type}`, fetchDefaultModal)
+  const { data, refetch, isPending } = useQuery({
+    queryKey: commonQueryKeys.defaultModel(type),
+    queryFn: () => fetchDefaultModal(`/workspaces/current/default-model?model_type=${type}`),
+  })
 
   return {
     data: data?.data,
-    mutate,
-    isLoading,
+    mutate: refetch,
+    isLoading: isPending,
   }
 }
 
@@ -200,11 +214,11 @@ export const useModelListAndDefaultModelAndCurrentProviderAndModel = (type: Mode
 }
 
 export const useUpdateModelList = () => {
-  const { mutate } = useSWRConfig()
+  const queryClient = useQueryClient()
 
   const updateModelList = useCallback((type: ModelTypeEnum) => {
-    mutate(`/workspaces/current/models/model-types/${type}`)
-  }, [mutate])
+    queryClient.invalidateQueries({ queryKey: commonQueryKeys.modelList(type) })
+  }, [queryClient])
 
   return updateModelList
 }
@@ -230,22 +244,12 @@ export const useAnthropicBuyQuota = () => {
   return handleGetPayUrl
 }
 
-export const useModelProviders = () => {
-  const { data: providersData, mutate, isLoading } = useSWR('/workspaces/current/model-providers', fetchModelProviders)
-
-  return {
-    data: providersData?.data || [],
-    mutate,
-    isLoading,
-  }
-}
-
 export const useUpdateModelProviders = () => {
-  const { mutate } = useSWRConfig()
+  const queryClient = useQueryClient()
 
   const updateModelProviders = useCallback(() => {
-    mutate('/workspaces/current/model-providers')
-  }, [mutate])
+    queryClient.invalidateQueries({ queryKey: commonQueryKeys.modelProviders })
+  }, [queryClient])
 
   return updateModelProviders
 }
diff --git a/web/app/components/header/account-setting/model-provider-page/index.tsx b/web/app/components/header/account-setting/model-provider-page/index.tsx
index 239c462ffe..7467b1bb66 100644
--- a/web/app/components/header/account-setting/model-provider-page/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/index.tsx
@@ -19,7 +19,7 @@ import {
 } from './hooks'
 import InstallFromMarketplace from './install-from-marketplace'
 import { useProviderContext } from '@/context/provider-context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 type Props = {
diff --git a/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx b/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx
index 7e9cad23eb..cb8f1464bb 100644
--- a/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx
@@ -17,7 +17,7 @@ import Loading from '@/app/components/base/loading'
 import ProviderCard from '@/app/components/plugins/provider-card'
 import List from '@/app/components/plugins/marketplace/list'
 import type { Plugin } from '@/app/components/plugins/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { getLocaleOnClient } from '@/i18n-config'
 import { getMarketplaceUrl } from '@/utils/var'
 
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx
index 30d56bced7..b4c2628416 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx
@@ -5,7 +5,7 @@ import {
 import { RiAddLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { Authorized } from '@/app/components/header/account-setting/model-provider-page/model-auth'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type {
   Credential,
   CustomConfigurationModelFixedFields,
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 dd9284398c..def83f7238 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
@@ -17,7 +17,7 @@ import type {
   ModelProvider,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { ModelModalModeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
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 0aa4ac6fbc..ceb67a057e 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
@@ -11,7 +11,7 @@ import {
 import Indicator from '@/app/components/header/indicator'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { Credential } from '../../declarations'
 import Badge from '@/app/components/base/badge'
 
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 6504fbc37e..572d5b8a40 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
@@ -17,7 +17,7 @@ import type {
   PortalToFollowElemOptions,
 } from '@/app/components/base/portal-to-follow-elem'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Confirm from '@/app/components/base/confirm'
 import type {
   ConfigurationMethodEnum,
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 301e5e70e4..22ba289078 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
@@ -6,7 +6,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ConfigModelProps = {
   onClick?: () => void
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 3a9d10ea46..3ccb42faf4 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
@@ -18,7 +18,7 @@ import Authorized from './authorized'
 import {
   useCustomModels,
 } from './hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ManageCustomModelCredentialsProps = {
   provider: ModelProvider,
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 5d2da57adb..9a0f2c1702 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
@@ -14,7 +14,7 @@ import type {
   ModelProvider,
 } from '../declarations'
 import { ConfigurationMethodEnum, ModelModalModeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import Badge from '@/app/components/base/badge'
 
diff --git a/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx
index 5c9c4d9e75..53b135ab1e 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx
@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ModelBadgeProps = {
   className?: string
@@ -10,10 +10,8 @@ const ModelBadge: FC<ModelBadgeProps> = ({
   children,
 }) => {
   return (
-    <div className={classNames(
-      'system-2xs-medium-uppercase flex h-[18px] cursor-default items-center rounded-[5px] border border-divider-deep px-1 text-text-tertiary',
-      className,
-    )}>
+    <div className={cn('system-2xs-medium-uppercase flex h-[18px] cursor-default items-center rounded-[5px] border border-divider-deep px-1 text-text-tertiary',
+      className)}>
       {children}
     </div>
   )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
index af9cac7fb8..2f3f11d7e8 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
@@ -8,7 +8,7 @@ import { Group } from '@/app/components/base/icons/src/vender/other'
 import { OpenaiBlue, OpenaiTeal, OpenaiViolet, OpenaiYellow } from '@/app/components/base/icons/src/public/llm'
 import { renderI18nObject } from '@/i18n-config'
 import { Theme } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useTheme from '@/hooks/use-theme'
 
 type ModelIconProps = {
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
index 3c51762c52..7ce27397a9 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@@ -13,7 +13,7 @@ import type {
 import { FormTypeEnum } from '../declarations'
 import { useLanguage } from '../hooks'
 import Input from './Input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { SimpleSelect } from '@/app/components/base/select'
 import Tooltip from '@/app/components/base/tooltip'
 import Radio from '@/app/components/base/radio'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
index 4305eca192..1ea198a04a 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
@@ -7,7 +7,7 @@ import { useLanguage } from '../hooks'
 import type { ModelItem } from '../declarations'
 import ModelBadge from '../model-badge'
 import FeatureIcon from '../model-selector/feature-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ModelNameProps = PropsWithChildren<{
   modelItem: ModelItem
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
index f9ab2e3b50..85bf772305 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
@@ -21,7 +21,7 @@ import ModelIcon from '../model-icon'
 import ModelDisplay from './model-display'
 import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
 import StatusIndicators from './status-indicators'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { useModelInList, usePluginInfo } from '@/service/use-plugins'
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 e56def4113..e7323c86e6 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
@@ -3,7 +3,6 @@ import type {
   ReactNode,
 } from 'react'
 import { useMemo, useState } from 'react'
-import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
 import type {
   DefaultModel,
@@ -20,17 +19,17 @@ import type { ParameterValue } from './parameter-item'
 import Trigger from './trigger'
 import type { TriggerProps } from './trigger'
 import PresetsParameter from './presets-parameter'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { fetchModelParameterRules } from '@/service/common'
 import Loading from '@/app/components/base/loading'
 import { useProviderContext } from '@/context/provider-context'
 import { PROVIDER_WITH_PRESET_TONE, STOP_PARAMETER_RULE, TONE_LIST } from '@/config'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
+import { useModelParameterRules } from '@/service/use-common'
 
 export type ModelParameterModalProps = {
   popupClassName?: string
@@ -69,7 +68,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
   const { t } = useTranslation()
   const { isAPIKeySet } = useProviderContext()
   const [open, setOpen] = useState(false)
-  const { data: parameterRulesData, isLoading } = useSWR((provider && modelId) ? `/workspaces/current/model-providers/${provider}/models/parameter-rules?model=${modelId}` : null, fetchModelParameterRules)
+  const { data: parameterRulesData, isPending: isLoading } = useModelParameterRules(provider, modelId)
   const {
     currentProvider,
     currentModel,
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 3c80fcfc0e..650496629b 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
@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react'
 import type { ModelParameterRule } from '../declarations'
 import { useLanguage } from '../hooks'
 import { isNullOrUndefined } from '../utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import Slider from '@/app/components/base/slider'
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 20a9bdcc17..02f001ef0c 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
@@ -8,7 +8,7 @@ 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'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type PresetsParameterProps = {
   onSelect: (toneId: number) => void
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 7c96c9a0af..ab16aed48f 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
@@ -10,7 +10,7 @@ import { MODEL_STATUS_TEXT } from '../declarations'
 import { useLanguage } from '../hooks'
 import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
index 0b0163532a..d27a616319 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
@@ -4,7 +4,7 @@ import ModelIcon from '../model-icon'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import { useProviderContext } from '@/context/provider-context'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ModelTriggerProps = {
   modelName: string
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx
index 613b1c0718..95a2f060d0 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 type ModelTriggerProps = {
   open: boolean
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
index c1d497e58e..97d2253f55 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
@@ -12,7 +12,7 @@ import {
   RiImageCircleAiLine,
   RiVoiceAiFill,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type FeatureIconProps = {
   feature: ModelFeatureEnum
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 58e96fde69..a1872aac9b 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
@@ -16,7 +16,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ModelSelectorProps = {
   defaultModel?: DefaultModel
@@ -70,7 +70,7 @@ const ModelSelector: FC<ModelSelectorProps> = ({
       placement='bottom-start'
       offset={4}
     >
-      <div className={classNames('relative')}>
+      <div className={cn('relative')}>
         <PortalToFollowElemTrigger
           onClick={handleToggle}
           className='block'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
index 079bad7e27..a7f37805a8 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
@@ -13,7 +13,7 @@ import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ModelTriggerProps = {
   open: boolean
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 3e68f6b509..b5c4b72395 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
@@ -30,7 +30,7 @@ import { Check } from '@/app/components/base/icons/src/vender/line/general'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import FeatureIcon from './feature-icon'
 
 type PopupItemProps = {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx
index fc9960f485..f8dcf61686 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PlusCircle } from '@/app/components/base/icons/src/vender/solid/general'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type AddModelButtonProps = {
   className?: string
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
index fda6abb2fc..a980a996db 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
@@ -19,7 +19,7 @@ import Indicator from '@/app/components/header/indicator'
 import { changeModelProviderPriority } from '@/service/common'
 import { useToastContext } from '@/app/components/base/toast'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useCredentialStatus } from '@/app/components/header/account-setting/model-provider-page/model-auth/hooks'
 import { ConfigProvider } from '@/app/components/header/account-setting/model-provider-page/model-auth'
 
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
index d3601d04f9..543273591c 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
@@ -24,7 +24,7 @@ import { fetchModelProviderModelList } from '@/service/common'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { IS_CE_EDITION } from '@/config'
 import { useAppContext } from '@/context/app-context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   AddCustomModel,
   ManageCustomModelCredentials,
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 091ad0a7da..911485edf6 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
@@ -5,7 +5,8 @@ import type { ModelItem, ModelProvider } from '../declarations'
 import { ModelStatusEnum } from '../declarations'
 import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
-import classNames from '@/utils/classnames'
+import { useUpdateModelList } from '../hooks'
+import { cn } from '@/utils/classnames'
 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'
@@ -20,21 +21,25 @@ export type ModelListItemProps = {
   model: ModelItem
   provider: ModelProvider
   isConfigurable: boolean
+  onChange?: (provider: string) => void
   onModifyLoadBalancing?: (model: ModelItem) => void
 }
 
-const ModelListItem = ({ model, provider, isConfigurable, onModifyLoadBalancing }: ModelListItemProps) => {
+const ModelListItem = ({ model, provider, isConfigurable, onChange, onModifyLoadBalancing }: ModelListItemProps) => {
   const { t } = useTranslation()
   const { plan } = useProviderContext()
   const modelLoadBalancingEnabled = useProviderContextSelector(state => state.modelLoadBalancingEnabled)
   const { isCurrentWorkspaceManager } = useAppContext()
+  const updateModelList = useUpdateModelList()
 
   const toggleModelEnablingStatus = useCallback(async (enabled: boolean) => {
     if (enabled)
       await enableModel(`/workspaces/current/model-providers/${provider.provider}/models/enable`, { model: model.model, model_type: model.model_type })
     else
       await disableModel(`/workspaces/current/model-providers/${provider.provider}/models/disable`, { model: model.model, model_type: model.model_type })
-  }, [model.model, model.model_type, provider.provider])
+    updateModelList(model.model_type)
+    onChange?.(provider.provider)
+  }, [model.model, model.model_type, onChange, provider.provider, updateModelList])
 
   const { run: debouncedToggleModelEnablingStatus } = useDebounceFn(toggleModelEnablingStatus, { wait: 500 })
 
@@ -45,11 +50,9 @@ const ModelListItem = ({ model, provider, isConfigurable, onModifyLoadBalancing
   return (
     <div
       key={`${model.model}-${model.fetch_from}`}
-      className={classNames(
-        'group flex h-8 items-center rounded-lg pl-2 pr-2.5',
+      className={cn('group flex h-8 items-center rounded-lg pl-2 pr-2.5',
         isConfigurable && 'hover:bg-components-panel-on-panel-item-bg-hover',
-        model.deprecated && 'opacity-60',
-      )}
+        model.deprecated && 'opacity-60')}
     >
       <ModelIcon
         className='mr-2 shrink-0'
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx
index 2e008a0b35..1efa9628ac 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx
@@ -91,6 +91,7 @@ const ModelList: FC<ModelListProps> = ({
                 model,
                 provider,
                 isConfigurable,
+                onChange,
                 onModifyLoadBalancing,
               }}
             />
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 291ba013f7..78882257b5 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
@@ -16,7 +16,7 @@ import type {
 import { ConfigurationMethodEnum } from '../declarations'
 import Indicator from '../../../indicator'
 import CooldownTimer from './cooldown-timer'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import Switch from '@/app/components/base/switch'
 import { Balance } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
@@ -146,12 +146,10 @@ const ModelLoadBalancingConfigs = ({
   return (
     <>
       <div
-        className={classNames(
-          'min-h-16 rounded-xl border bg-components-panel-bg transition-colors',
+        className={cn('min-h-16 rounded-xl border bg-components-panel-bg transition-colors',
           (withSwitch || !draftConfig.enabled) ? 'border-components-panel-border' : 'border-util-colors-blue-blue-600',
           (withSwitch || draftConfig.enabled) ? 'cursor-default' : 'cursor-pointer',
-          className,
-        )}
+          className)}
         onClick={(!withSwitch && !draftConfig.enabled) ? () => toggleModalBalancing(true) : undefined}
       >
         <div className='flex select-none items-center gap-2 px-[15px] py-3'>
@@ -270,7 +268,7 @@ const ModelLoadBalancingConfigs = ({
         <GridMask canvasClassName='!rounded-xl'>
           <div className='mt-2 flex h-14 items-center justify-between rounded-xl border-[0.5px] border-components-panel-border px-4 shadow-md'>
             <div
-              className={classNames('text-gradient text-sm font-semibold leading-tight', s.textGradient)}
+              className={cn('text-gradient text-sm font-semibold leading-tight', s.textGradient)}
             >
               {t('common.modelProvider.upgradeForLoadBalancing')}
             </div>
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 090147897b..6206267149 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
@@ -15,7 +15,7 @@ import {
 import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
 import ModelLoadBalancingConfigs from './model-load-balancing-configs'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
@@ -265,10 +265,8 @@ const ModelLoadBalancingModal = ({
             <>
               <div className='py-2'>
                 <div
-                  className={classNames(
-                    'min-h-16 rounded-xl border bg-components-panel-bg transition-colors',
-                    draftConfig.enabled ? 'cursor-pointer border-components-panel-border' : 'cursor-default border-util-colors-blue-blue-600',
-                  )}
+                  className={cn('min-h-16 rounded-xl border bg-components-panel-bg transition-colors',
+                    draftConfig.enabled ? 'cursor-pointer border-components-panel-border' : 'cursor-default border-util-colors-blue-blue-600')}
                   onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined}
                 >
                   <div className='flex select-none items-center gap-2 px-[15px] py-3'>
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 193608afc8..10d94d55b7 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
@@ -8,7 +8,7 @@ import {
 } from '@remixicon/react'
 import { PreferredProviderTypeEnum } from '../declarations'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type SelectorProps = {
   value?: string
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
index 6192f1d3ed..2c56a1c347 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
@@ -5,7 +5,7 @@ import { Openai } from '@/app/components/base/icons/src/vender/other'
 import { AnthropicDark, AnthropicLight } from '@/app/components/base/icons/src/public/llm'
 import { renderI18nObject } from '@/i18n-config'
 import { Theme } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useTheme from '@/hooks/use-theme'
 
 type ProviderIconProps = {
diff --git a/web/app/components/header/account-setting/plugin-page/index.tsx b/web/app/components/header/account-setting/plugin-page/index.tsx
index bf404b05bb..5195ca9501 100644
--- a/web/app/components/header/account-setting/plugin-page/index.tsx
+++ b/web/app/components/header/account-setting/plugin-page/index.tsx
@@ -1,14 +1,13 @@
-import useSWR from 'swr'
 import { LockClosedIcon } from '@heroicons/react/24/solid'
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
 import SerpapiPlugin from './SerpapiPlugin'
-import { fetchPluginProviders } from '@/service/common'
 import type { PluginProvider } from '@/models/common'
+import { usePluginProviders } from '@/service/use-common'
 
 const PluginPage = () => {
   const { t } = useTranslation()
-  const { data: plugins, mutate } = useSWR('/workspaces/current/tool-providers', fetchPluginProviders)
+  const { data: plugins, refetch: mutate } = usePluginProviders()
 
   const Plugin_MAP: Record<string, (plugin: PluginProvider) => React.JSX.Element> = {
     serpapi: (plugin: PluginProvider) => <SerpapiPlugin key='serpapi' plugin={plugin} onUpdate={() => mutate()} />,
diff --git a/web/app/components/header/app-back/index.tsx b/web/app/components/header/app-back/index.tsx
index 58f1262c56..5e6d38b049 100644
--- a/web/app/components/header/app-back/index.tsx
+++ b/web/app/components/header/app-back/index.tsx
@@ -3,7 +3,7 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ArrowLeftIcon, Squares2X2Icon } from '@heroicons/react/24/solid'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { AppDetailResponse } from '@/models/app'
 
 type IAppBackProps = {
@@ -16,7 +16,7 @@ export default function AppBack({ curApp }: IAppBackProps) {
 
   return (
     <div
-      className={classNames(`
+      className={cn(`
         flex h-7 cursor-pointer items-center rounded-[10px]
         pl-2.5 pr-2 font-semibold
         text-[#1C64F2]
diff --git a/web/app/components/header/explore-nav/index.tsx b/web/app/components/header/explore-nav/index.tsx
index 6896722a84..9d37fc741d 100644
--- a/web/app/components/header/explore-nav/index.tsx
+++ b/web/app/components/header/explore-nav/index.tsx
@@ -7,7 +7,7 @@ import {
   RiPlanetFill,
   RiPlanetLine,
 } from '@remixicon/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 type ExploreNavProps = {
   className?: string
 }
@@ -20,11 +20,9 @@ const ExploreNav = ({
   const activated = selectedSegment === 'explore'
 
   return (
-    <Link href="/explore/apps" className={classNames(
-      className, 'group',
+    <Link href="/explore/apps" className={cn(className, 'group',
       activated && 'bg-components-main-nav-nav-button-bg-active shadow-md',
-      activated ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text hover:bg-components-main-nav-nav-button-bg-hover',
-    )}>
+      activated ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text hover:bg-components-main-nav-nav-button-bg-hover')}>
       {
         activated
           ? <RiPlanetFill className='h-4 w-4' />
diff --git a/web/app/components/header/header-wrapper.tsx b/web/app/components/header/header-wrapper.tsx
index 3458888efa..efa96ce4bd 100644
--- a/web/app/components/header/header-wrapper.tsx
+++ b/web/app/components/header/header-wrapper.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react'
 import { usePathname } from 'next/navigation'
 import s from './index.module.css'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type HeaderWrapperProps = {
   children: React.ReactNode
@@ -27,12 +27,10 @@ const HeaderWrapper = ({
   })
 
   return (
-    <div className={classNames(
-      'sticky left-0 right-0 top-0 z-[30] flex min-h-[56px] shrink-0 grow-0 basis-auto flex-col',
+    <div className={cn('sticky left-0 right-0 top-0 z-[30] flex min-h-[56px] shrink-0 grow-0 basis-auto flex-col',
       s.header,
       isBordered ? 'border-b border-divider-regular' : '',
-      hideHeader && (inWorkflowCanvas || isPipelineCanvas) && 'hidden',
-    )}
+      hideHeader && (inWorkflowCanvas || isPipelineCanvas) && 'hidden')}
     >
       {children}
     </div>
diff --git a/web/app/components/header/indicator/index.tsx b/web/app/components/header/indicator/index.tsx
index d3a49a9714..c48f8c4d7b 100644
--- a/web/app/components/header/indicator/index.tsx
+++ b/web/app/components/header/indicator/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type IndicatorProps = {
   color?: 'green' | 'orange' | 'red' | 'blue' | 'yellow' | 'gray'
@@ -48,13 +48,11 @@ export default function Indicator({
   return (
     <div
       data-testid="status-indicator"
-      className={classNames(
-        'h-2 w-2 rounded-[3px] border border-solid',
+      className={cn('h-2 w-2 rounded-[3px] border border-solid',
         BACKGROUND_MAP[color],
         BORDER_MAP[color],
         SHADOW_MAP[color],
-        className,
-      )}
+        className)}
     />
   )
 }
diff --git a/web/app/components/header/nav/index.tsx b/web/app/components/header/nav/index.tsx
index d9739192e3..5ffdf3899e 100644
--- a/web/app/components/header/nav/index.tsx
+++ b/web/app/components/header/nav/index.tsx
@@ -5,7 +5,7 @@ import Link from 'next/link'
 import { usePathname, useSearchParams, useSelectedLayoutSegment } from 'next/navigation'
 import type { INavSelectorProps } from './nav-selector'
 import NavSelector from './nav-selector'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
 import { useStore as useAppStore } from '@/app/components/app/store'
 
@@ -58,11 +58,9 @@ const Nav = ({
               return
             setAppDetail()
           }}
-          className={classNames(
-            'flex h-7 cursor-pointer items-center rounded-[10px] px-2.5',
+          className={cn('flex h-7 cursor-pointer items-center rounded-[10px] px-2.5',
             isActivated ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text',
-            curNav && isActivated && 'hover:bg-components-main-nav-nav-button-bg-active-hover',
-          )}
+            curNav && isActivated && 'hover:bg-components-main-nav-nav-button-bg-active-hover')}
           onMouseEnter={() => setHovered(true)}
           onMouseLeave={() => setHovered(false)}
         >
diff --git a/web/app/components/header/nav/nav-selector/index.tsx b/web/app/components/header/nav/nav-selector/index.tsx
index 4a13bc8a3c..934d7e7fff 100644
--- a/web/app/components/header/nav/nav-selector/index.tsx
+++ b/web/app/components/header/nav/nav-selector/index.tsx
@@ -9,7 +9,7 @@ import {
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import { useRouter } from 'next/navigation'
 import { debounce } from 'lodash-es'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import AppIcon from '@/app/components/base/app-icon'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
 import { useAppContext } from '@/context/app-context'
diff --git a/web/app/components/header/plugins-nav/index.tsx b/web/app/components/header/plugins-nav/index.tsx
index 7b28e27639..a0d1c7038f 100644
--- a/web/app/components/header/plugins-nav/index.tsx
+++ b/web/app/components/header/plugins-nav/index.tsx
@@ -2,7 +2,7 @@
 
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import { useSelectedLayoutSegment } from 'next/navigation'
 import DownloadingIcon from './downloading-icon'
@@ -26,16 +26,14 @@ const PluginsNav = ({
   } = usePluginTaskStatus()
 
   return (
-    <Link href="/plugins" className={classNames(
-      className, 'group', 'plugins-nav-button', // used for use-fold-anim-into.ts
+    <Link href="/plugins" className={cn(className, 'group', 'plugins-nav-button',
+       // used for use-fold-anim-into.ts
     )}>
       <div
-        className={classNames(
-          'system-sm-medium relative flex h-8 flex-row items-center justify-center gap-0.5 rounded-xl border border-transparent p-1.5',
+        className={cn('system-sm-medium relative flex h-8 flex-row items-center justify-center gap-0.5 rounded-xl border border-transparent p-1.5',
           activated && 'border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active text-components-main-nav-nav-button-text shadow-md',
           !activated && 'text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
-          (isInstallingWithError || isFailed) && !activated && 'border-components-panel-border-subtle',
-        )}
+          (isInstallingWithError || isFailed) && !activated && 'border-components-panel-border-subtle')}
       >
         {
           (isFailed || isInstallingWithError) && !activated && (
diff --git a/web/app/components/header/tools-nav/index.tsx b/web/app/components/header/tools-nav/index.tsx
index eb8d806c02..8a3bb4e27f 100644
--- a/web/app/components/header/tools-nav/index.tsx
+++ b/web/app/components/header/tools-nav/index.tsx
@@ -7,7 +7,7 @@ import {
   RiHammerFill,
   RiHammerLine,
 } from '@remixicon/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 type ToolsNavProps = {
   className?: string
 }
@@ -20,12 +20,10 @@ const ToolsNav = ({
   const activated = selectedSegment === 'tools'
 
   return (
-    <Link href="/tools" className={classNames(
-      'group text-sm font-medium',
+    <Link href="/tools" className={cn('group text-sm font-medium',
       activated && 'hover:bg-components-main-nav-nav-button-bg-active-hover bg-components-main-nav-nav-button-bg-active font-semibold shadow-md',
       activated ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text hover:bg-components-main-nav-nav-button-bg-hover',
-      className,
-    )}>
+      className)}>
       {
         activated
           ? <RiHammerFill className='h-4 w-4' />
diff --git a/web/app/components/plugins/base/badges/icon-with-tooltip.tsx b/web/app/components/plugins/base/badges/icon-with-tooltip.tsx
index 60b164e620..d22ba02298 100644
--- a/web/app/components/plugins/base/badges/icon-with-tooltip.tsx
+++ b/web/app/components/plugins/base/badges/icon-with-tooltip.tsx
@@ -1,5 +1,5 @@
 import React, { type FC } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import { Theme } from '@/types/app'
 
diff --git a/web/app/components/plugins/base/deprecation-notice.tsx b/web/app/components/plugins/base/deprecation-notice.tsx
index 380917a986..ae6ded10fc 100644
--- a/web/app/components/plugins/base/deprecation-notice.tsx
+++ b/web/app/components/plugins/base/deprecation-notice.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import type { FC } from 'react'
 import Link from 'next/link'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiAlertFill } from '@remixicon/react'
 import { Trans } from 'react-i18next'
 import { useMixedTranslation } from '../marketplace/hooks'
diff --git a/web/app/components/plugins/base/key-value-item.tsx b/web/app/components/plugins/base/key-value-item.tsx
index b616b5ee18..8a9c045b96 100644
--- a/web/app/components/plugins/base/key-value-item.tsx
+++ b/web/app/components/plugins/base/key-value-item.tsx
@@ -8,7 +8,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { CopyCheck } from '../../base/icons/src/vender/line/files'
 import Tooltip from '../../base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ActionButton from '@/app/components/base/action-button'
 
 type Props = {
diff --git a/web/app/components/plugins/card/base/card-icon.tsx b/web/app/components/plugins/card/base/card-icon.tsx
index b4c052c13c..740834b7a4 100644
--- a/web/app/components/plugins/card/base/card-icon.tsx
+++ b/web/app/components/plugins/card/base/card-icon.tsx
@@ -1,7 +1,7 @@
 import { RiCheckLine, RiCloseLine } from '@remixicon/react'
 import { Mcp } from '@/app/components/base/icons/src/vender/other'
 import AppIcon from '@/app/components/base/app-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { shouldUseMcpIcon } from '@/utils/mcp'
 
 const iconSizeMap = {
diff --git a/web/app/components/plugins/card/base/description.tsx b/web/app/components/plugins/card/base/description.tsx
index bffcde3a42..9b9d7e3471 100644
--- a/web/app/components/plugins/card/base/description.tsx
+++ b/web/app/components/plugins/card/base/description.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import React, { useMemo } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/plugins/card/base/org-info.tsx b/web/app/components/plugins/card/base/org-info.tsx
index 01561f14af..cdecca8dd4 100644
--- a/web/app/components/plugins/card/base/org-info.tsx
+++ b/web/app/components/plugins/card/base/org-info.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 type Props = {
   className?: string
   orgName?: string
diff --git a/web/app/components/plugins/card/base/placeholder.tsx b/web/app/components/plugins/card/base/placeholder.tsx
index 4505be39e6..480f878a87 100644
--- a/web/app/components/plugins/card/base/placeholder.tsx
+++ b/web/app/components/plugins/card/base/placeholder.tsx
@@ -1,7 +1,7 @@
 import { Group } from '../../../base/icons/src/vender/other'
 import Title from './title'
 import { SkeletonContainer, SkeletonPoint, SkeletonRectangle, SkeletonRow } from '@/app/components/base/skeleton'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   wrapClassName: string
diff --git a/web/app/components/plugins/card/index.tsx b/web/app/components/plugins/card/index.tsx
index a820a6cef8..805132c036 100644
--- a/web/app/components/plugins/card/index.tsx
+++ b/web/app/components/plugins/card/index.tsx
@@ -3,7 +3,7 @@ import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
 import { useGetLanguage } from '@/context/i18n'
 import { renderI18nObject } from '@/i18n-config'
 import { getLanguage } from '@/i18n-config/language'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiAlertFill } from '@remixicon/react'
 import React from 'react'
 import useTheme from '@/hooks/use-theme'
diff --git a/web/app/components/plugins/install-plugin/install-bundle/index.tsx b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
index c6b4cdfa95..0a7059a52d 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
@@ -7,7 +7,7 @@ import type { Dependency } from '../../types'
 import ReadyToInstall from './ready-to-install'
 import { useTranslation } from 'react-i18next'
 import useHideLogic from '../hooks/use-hide-logic'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'plugin.installModal'
 
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 ceb800decd..fcdc8510bc 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
@@ -16,7 +16,7 @@ import Loaded from './steps/loaded'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import { useTranslation } from 'react-i18next'
 import useRefreshPluginList from '../hooks/use-refresh-plugin-list'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useHideLogic from '../hooks/use-hide-logic'
 
 const i18nPrefix = 'plugin.installFromGitHub'
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
index 6cf55ac044..fa5c29aa24 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
@@ -10,7 +10,7 @@ import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-ico
 import ReadyToInstallPackage from './ready-to-install'
 import ReadyToInstallBundle from '../install-bundle/ready-to-install'
 import useHideLogic from '../hooks/use-hide-logic'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'plugin.installModal'
 
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
index f41cd6176a..44f3c1bee7 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
@@ -9,7 +9,7 @@ import Installed from '../base/installed'
 import { useTranslation } from 'react-i18next'
 import useRefreshPluginList from '../hooks/use-refresh-plugin-list'
 import ReadyToInstallBundle from '../install-bundle/ready-to-install'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useHideLogic from '../hooks/use-hide-logic'
 
 const i18nPrefix = 'plugin.installModal'
diff --git a/web/app/components/plugins/marketplace/empty/index.tsx b/web/app/components/plugins/marketplace/empty/index.tsx
index a9cf125a15..a26cf3c3b7 100644
--- a/web/app/components/plugins/marketplace/empty/index.tsx
+++ b/web/app/components/plugins/marketplace/empty/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import Line from './line'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
 
 type Props = {
diff --git a/web/app/components/plugins/marketplace/list/index.tsx b/web/app/components/plugins/marketplace/list/index.tsx
index 2072e3feed..4d4438fec0 100644
--- a/web/app/components/plugins/marketplace/list/index.tsx
+++ b/web/app/components/plugins/marketplace/list/index.tsx
@@ -4,7 +4,7 @@ import type { MarketplaceCollection } from '../types'
 import ListWithCollection from './list-with-collection'
 import CardWrapper from './card-wrapper'
 import Empty from '../empty'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ListProps = {
   marketplaceCollections: MarketplaceCollection[]
diff --git a/web/app/components/plugins/marketplace/list/list-with-collection.tsx b/web/app/components/plugins/marketplace/list/list-with-collection.tsx
index 7c8a30f499..bef4a6787a 100644
--- a/web/app/components/plugins/marketplace/list/list-with-collection.tsx
+++ b/web/app/components/plugins/marketplace/list/list-with-collection.tsx
@@ -5,7 +5,7 @@ import type { MarketplaceCollection } from '../types'
 import CardWrapper from './card-wrapper'
 import type { Plugin } from '@/app/components/plugins/types'
 import { getLanguage } from '@/i18n-config/language'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { SearchParamsFromCollection } from '@/app/components/plugins/marketplace/types'
 import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
 
diff --git a/web/app/components/plugins/marketplace/plugin-type-switch.tsx b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
index e63ecfe591..c00dce19a1 100644
--- a/web/app/components/plugins/marketplace/plugin-type-switch.tsx
+++ b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { Trigger as TriggerIcon } from '@/app/components/base/icons/src/vender/plugin'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   RiArchive2Line,
   RiBrain2Line,
diff --git a/web/app/components/plugins/marketplace/search-box/index.tsx b/web/app/components/plugins/marketplace/search-box/index.tsx
index c398964b4e..4369520f7f 100644
--- a/web/app/components/plugins/marketplace/search-box/index.tsx
+++ b/web/app/components/plugins/marketplace/search-box/index.tsx
@@ -2,7 +2,7 @@
 import { RiCloseLine, RiSearchLine } from '@remixicon/react'
 import TagsFilter from './tags-filter'
 import ActionButton from '@/app/components/base/action-button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiAddLine } from '@remixicon/react'
 import Divider from '@/app/components/base/divider'
 
diff --git a/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx b/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx
index 3945e9460e..d962a52bb6 100644
--- a/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx
+++ b/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { RiArrowDownSLine, RiCloseCircleFill, RiFilter3Line } from '@remixicon/react'
 import type { Tag } from '../../../hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useMixedTranslation } from '../../hooks'
 
 type MarketplaceTriggerProps = {
diff --git a/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx b/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx
index 00f8c55a90..96f321f75e 100644
--- a/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx
+++ b/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import type { Tag } from '../../../hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiCloseCircleFill, RiPriceTag3Line } from '@remixicon/react'
 
 type ToolSelectorTriggerProps = {
diff --git a/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx b/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx
index cca8876f09..891f0803d5 100644
--- a/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx
@@ -2,7 +2,7 @@
 
 import SearchBoxWrapper from './search-box/search-box-wrapper'
 import PluginTypeSwitch from './plugin-type-switch'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type StickySearchAndSwitchWrapperProps = {
   locale?: string
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 3d7324306c..cd64531ecc 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
@@ -13,7 +13,7 @@ import {
 import Button from '@/app/components/base/button'
 import type { ButtonProps } from '@/app/components/base/button'
 import OAuthClientSettings from './oauth-client-settings'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { PluginPayload } from '../types'
 import { openOAuthPopup } from '@/hooks/use-oauth'
 import Badge from '@/app/components/base/badge'
diff --git a/web/app/components/plugins/plugin-auth/authorize/index.tsx b/web/app/components/plugins/plugin-auth/authorize/index.tsx
index 1d41165147..245d1a177f 100644
--- a/web/app/components/plugins/plugin-auth/authorize/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/index.tsx
@@ -8,7 +8,7 @@ import type { AddOAuthButtonProps } from './add-oauth-button'
 import AddApiKeyButton from './add-api-key-button'
 import type { AddApiKeyButtonProps } from './add-api-key-button'
 import type { PluginPayload } from '../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 
 type AuthorizeProps = {
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 efef4eb5ea..ae5687c298 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
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { RiEqualizer2Line } from '@remixicon/react'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type AuthorizedInDataSourceNodeProps = {
   authorizationsNum: number
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 60297094c3..2f615e5fdc 100644
--- a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { RiArrowDownSLine } from '@remixicon/react'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type {
   Credential,
   PluginPayload,
diff --git a/web/app/components/plugins/plugin-auth/authorized/index.tsx b/web/app/components/plugins/plugin-auth/authorized/index.tsx
index ad814b0206..bfc446e6a9 100644
--- a/web/app/components/plugins/plugin-auth/authorized/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/index.tsx
@@ -18,7 +18,7 @@ import type {
 } from '@/app/components/base/portal-to-follow-elem'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Confirm from '@/app/components/base/confirm'
 import Authorize from '../authorize'
 import type { Credential } from '../types'
diff --git a/web/app/components/plugins/plugin-auth/authorized/item.tsx b/web/app/components/plugins/plugin-auth/authorized/item.tsx
index f8a1033de7..fd1fb41ed5 100644
--- a/web/app/components/plugins/plugin-auth/authorized/item.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/item.tsx
@@ -16,7 +16,7 @@ import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { Credential } from '../types'
 import { CredentialTypeEnum } from '../types'
 
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 9a9fca78a0..a22dea2d09 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
@@ -14,7 +14,7 @@ import type {
 import { usePluginAuth } from './hooks/use-plugin-auth'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type PluginAuthInAgentProps = {
   pluginPayload: PluginPayload
diff --git a/web/app/components/plugins/plugin-auth/plugin-auth.tsx b/web/app/components/plugins/plugin-auth/plugin-auth.tsx
index a9bb287cdf..ab782505d5 100644
--- a/web/app/components/plugins/plugin-auth/plugin-auth.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth.tsx
@@ -3,7 +3,7 @@ import Authorize from './authorize'
 import Authorized from './authorized'
 import type { PluginPayload } from './types'
 import { usePluginAuth } from './hooks/use-plugin-auth'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type PluginAuthProps = {
   pluginPayload: PluginPayload
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
index edf15a4419..f54a3c6027 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
@@ -12,7 +12,7 @@ import type { App } from '@/types/app'
 import type { FileUpload } from '@/app/components/base/features/types'
 import { BlockEnum, InputVarType, SupportUploadFileTypes } from '@/app/components/workflow/types'
 
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   value?: {
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
index d2c11f09f2..5030c804d7 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
@@ -6,7 +6,7 @@ import {
 } from '@remixicon/react'
 import AppIcon from '@/app/components/base/app-icon'
 import type { App } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   open: boolean
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
index e1cd1bbcd4..66c352caa0 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
@@ -19,7 +19,7 @@ import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { uninstallPlugin } from '@/service/plugins'
 import { useAllToolProviders, useInvalidateAllToolProviders } from '@/service/use-tools'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import {
   RiArrowLeftRightLine,
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 fff6775495..74c034e2ee 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
@@ -20,7 +20,7 @@ import {
   useInvalidateEndpointList,
 } from '@/service/use-endpoints'
 import type { PluginDetail } from '@/app/components/plugins/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   detail: PluginDetail
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 48aeecf1b2..2c0738efcc 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@@ -9,7 +9,7 @@ import Drawer from '@/app/components/base/drawer'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import Toast from '@/app/components/base/toast'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ReadmeEntrance } from '../readme-panel/entrance'
 import type { PluginDetail } from '../types'
 import type { FormSchema } from '../../base/form/types'
diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx
index 380d2329f6..3fcd660f37 100644
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import Drawer from '@/app/components/base/drawer'
 import { PluginCategoryEnum, type PluginDetail } from '@/app/components/plugins/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FC } from 'react'
 import { useCallback, useEffect } from 'react'
 import ActionList from './action-list'
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 1393a1844f..7b516eb8ea 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
@@ -25,7 +25,7 @@ import {
 import LLMParamsPanel from './llm-params-panel'
 import TTSParamsPanel from './tts-params-panel'
 import { useProviderContext } from '@/context/provider-context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Toast from '@/app/components/base/toast'
 import { fetchAndMergeValidCompletionParams } from '@/utils/completion-params'
 
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx
index 0c5ed98e11..e741ec1772 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react'
-import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
 import PresetsParameter from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter'
 import ParameterItem from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item'
@@ -9,9 +8,9 @@ import type {
   ModelParameterRule,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { ParameterValue } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item'
-import { fetchModelParameterRules } from '@/service/common'
 import { PROVIDER_WITH_PRESET_TONE, STOP_PARAMETER_RULE, TONE_LIST } from '@/config'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
+import { useModelParameterRules } from '@/service/use-common'
 
 type Props = {
   isAdvancedMode: boolean
@@ -29,11 +28,7 @@ const LLMParamsPanel = ({
   onCompletionParamsChange,
 }: Props) => {
   const { t } = useTranslation()
-  const { data: parameterRulesData, isLoading } = useSWR(
-    (provider && modelId)
-      ? `/workspaces/current/model-providers/${provider}/models/parameter-rules?model=${modelId}`
-      : null, fetchModelParameterRules,
-  )
+  const { data: parameterRulesData, isPending: isLoading } = useModelParameterRules(provider, modelId)
 
   const parameterRules: ModelParameterRule[] = useMemo(() => {
     return parameterRulesData?.data || []
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 e7b238cfaa..33b803060a 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
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { languages } from '@/i18n-config/language'
 import { PortalSelect } from '@/app/components/base/select'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   currentModel: any
diff --git a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
index c92b9d171a..f809cb2e7c 100644
--- a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
@@ -11,7 +11,7 @@ import Divider from '@/app/components/base/divider'
 import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { Node } from 'reactflow'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 import { useAllMCPTools } from '@/service/use-tools'
 
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 9cc5af589b..356cf3c21a 100644
--- a/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
@@ -11,7 +11,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 type Props = {
diff --git a/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx b/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
index e13e38ebe9..750b5e5780 100644
--- a/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
@@ -17,7 +17,7 @@ import type {
 import type { Locale } from '@/i18n-config'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { API_PREFIX } from '@/config'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   provider: {
diff --git a/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx b/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
index 741c8cdf7e..2635f843db 100644
--- a/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
@@ -6,7 +6,7 @@ import type {
 } from '@/app/components/plugins/types'
 import type { Locale } from '@/i18n-config'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   provider: {
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 7515ba4b4a..56483ead9c 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
@@ -8,7 +8,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
 import { openOAuthPopup } from '@/hooks/use-oauth'
 import { useInitiateTriggerOAuth, useTriggerOAuthConfig, useTriggerProviderInfo } from '@/service/use-triggers'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiAddLine, RiEqualizer2Line } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useMemo, useState } from 'react'
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
index a64d2f4070..27ce4d796d 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
@@ -1,6 +1,6 @@
 'use client'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { CreateButtonType, CreateSubscriptionButton } from './create'
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 8b16d2c60a..295923e900 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
@@ -8,7 +8,7 @@ import {
   RiErrorWarningFill,
   RiFileCopyLine,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Toast from '@/app/components/base/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/subscription-list/selector-entry.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
index c23e022ac5..7f6dade12b 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
@@ -6,7 +6,7 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import type { SimpleSubscription } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
 import { SubscriptionList, SubscriptionListMode } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiArrowDownSLine, RiWebhookLine } from '@remixicon/react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
index 04b078e347..7e2cd933e9 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
@@ -2,7 +2,7 @@
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
 import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiCheckLine, RiDeleteBinLine, RiWebhookLine } from '@remixicon/react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
index b2a86b5c76..1d877adbf5 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
@@ -2,7 +2,7 @@
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
 import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   RiDeleteBinLine,
   RiWebhookLine,
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index ea7892be32..e7ed1410b3 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -35,7 +35,7 @@ import type {
 import { MARKETPLACE_API_PREFIX } from '@/config'
 import type { Node } from 'reactflow'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   AuthCategory,
   PluginAuthInAgent,
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx
index 88bf7f0dfd..37cdadb59f 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx
@@ -27,7 +27,7 @@ import type {
 import type { ToolVarInputs } from '@/app/components/workflow/nodes/tool/types'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
 import { VarType } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useBoolean } from 'ahooks'
 import SchemaModal from './schema-modal'
 import type { SchemaRoot } from '@/app/components/workflow/nodes/llm/types'
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
index fd7ec618f0..299a5cd594 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
@@ -13,7 +13,7 @@ import { fetchBuiltInToolCredential, fetchBuiltInToolCredentialSchema } from '@/
 import Loading from '@/app/components/base/loading'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   collection: Collection
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
index b3817721de..09b74bbb02 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
@@ -16,7 +16,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import { ToolTipContent } from '@/app/components/base/tooltip/content'
 import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
 import { SwitchPluginVersion } from '@/app/components/workflow/nodes/_base/components/switch-plugin-version'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import McpToolNotSupportTooltip from '@/app/components/workflow/nodes/_base/components/mcp-tool-not-support-tooltip'
 
 type Props = {
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
index 94c5148c49..ba62b9be5b 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
@@ -8,7 +8,7 @@ import {
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { BlockEnum } from '@/app/components/workflow/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   open: boolean
diff --git a/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx b/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx
index 2083f34263..718878ae20 100644
--- a/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx
@@ -9,7 +9,7 @@ import OrgInfo from '@/app/components/plugins/card/base/org-info'
 import { triggerEventParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
 import type { TriggerProviderApiEntity } from '@/app/components/workflow/block-selector/types'
 import Field from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   RiArrowLeftLine,
   RiCloseLine,
diff --git a/web/app/components/plugins/plugin-detail-panel/trigger/event-list.tsx b/web/app/components/plugins/plugin-detail-panel/trigger/event-list.tsx
index 93f2fcc9c7..2c8ab28ad9 100644
--- a/web/app/components/plugins/plugin-detail-panel/trigger/event-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/trigger/event-list.tsx
@@ -2,7 +2,7 @@ import { useLanguage } from '@/app/components/header/account-setting/model-provi
 import type { TriggerEvent } from '@/app/components/plugins/types'
 import type { TriggerProviderApiEntity } from '@/app/components/workflow/block-selector/types'
 import { useTriggerProviderInfo } from '@/service/use-triggers'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { usePluginStore } from '../store'
diff --git a/web/app/components/plugins/plugin-item/index.tsx b/web/app/components/plugins/plugin-item/index.tsx
index 51a72d1e5a..09c1f7f951 100644
--- a/web/app/components/plugins/plugin-item/index.tsx
+++ b/web/app/components/plugins/plugin-item/index.tsx
@@ -5,7 +5,7 @@ import { API_PREFIX } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import {
   RiArrowRightUpLine,
diff --git a/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx b/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
index c6fa88c1b1..dd36ff6ca8 100644
--- a/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
@@ -11,7 +11,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Checkbox from '@/app/components/base/checkbox'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Input from '@/app/components/base/input'
 import { useCategories } from '../../hooks'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx b/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
index 843d041763..c8db5e1f17 100644
--- a/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
@@ -11,7 +11,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Checkbox from '@/app/components/base/checkbox'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Input from '@/app/components/base/input'
 import { useTags } from '../../hooks'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index 4b8444ab34..feec66eb8b 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -23,7 +23,7 @@ import PluginTasks from './plugin-tasks'
 import Button from '@/app/components/base/button'
 import TabSlider from '@/app/components/base/tab-slider'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ReferenceSettingModal from '@/app/components/plugins/reference-setting-modal/modal'
 import InstallFromMarketplace from '../install-plugin/install-from-marketplace'
 import {
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 be62adb310..ecacc16c8f 100644
--- a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
+++ b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
@@ -8,7 +8,7 @@ import { FileZip } from '@/app/components/base/icons/src/vender/solid/files'
 import { Github } from '@/app/components/base/icons/src/vender/solid/general'
 import InstallFromGitHub from '@/app/components/plugins/install-plugin/install-from-github'
 import InstallFromLocalPackage from '@/app/components/plugins/install-plugin/install-from-local-package'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
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 d410c06183..e1d1df0321 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
@@ -19,7 +19,7 @@ import {
 import Button from '@/app/components/base/button'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
 import CardIcon from '@/app/components/plugins/card/base/card-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGetLanguage } from '@/context/i18n'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import DownloadingIcon from '@/app/components/header/plugins-nav/downloading-icon'
diff --git a/web/app/components/plugins/provider-card.tsx b/web/app/components/plugins/provider-card.tsx
index cef8b49038..c1e1f49f22 100644
--- a/web/app/components/plugins/provider-card.tsx
+++ b/web/app/components/plugins/provider-card.tsx
@@ -12,7 +12,7 @@ import Title from './card/base/title'
 import DownloadCount from './card/base/download-count'
 import Button from '@/app/components/base/button'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useBoolean } from 'ahooks'
 import { getPluginLinkInMarketplace } from '@/app/components/plugins/marketplace/utils'
 import { useI18N } from '@/context/i18n'
diff --git a/web/app/components/plugins/readme-panel/entrance.tsx b/web/app/components/plugins/readme-panel/entrance.tsx
index ba4bf8fa78..fbde01ecaa 100644
--- a/web/app/components/plugins/readme-panel/entrance.tsx
+++ b/web/app/components/plugins/readme-panel/entrance.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiBookReadLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ReadmeShowType, useReadmePanelStore } from './store'
 import { BUILTIN_TOOLS_ARRAY } from './constants'
 import type { PluginDetail } from '../types'
diff --git a/web/app/components/plugins/readme-panel/index.tsx b/web/app/components/plugins/readme-panel/index.tsx
index cae5413c7c..2b146de4b5 100644
--- a/web/app/components/plugins/readme-panel/index.tsx
+++ b/web/app/components/plugins/readme-panel/index.tsx
@@ -4,7 +4,7 @@ import Loading from '@/app/components/base/loading'
 import { Markdown } from '@/app/components/base/markdown'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { usePluginReadme } from '@/service/use-plugins'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiBookReadLine, RiCloseLine } from '@remixicon/react'
 import type { FC } from 'react'
 import { createPortal } from 'react-dom'
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
index dfbeaad9cb..f43e496a97 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
@@ -12,7 +12,7 @@ import { convertLocalSecondsToUTCDaySeconds, convertUTCDaySecondsToLocalSeconds,
 import { useAppContext } from '@/context/app-context'
 import type { TriggerParams } from '@/app/components/base/date-and-time-picker/types'
 import { RiTimeLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { convertTimezoneToOffsetStr } from '@/app/components/base/date-and-time-picker/utils/dayjs'
 import { useModalContextSelector } from '@/context/modal-context'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx
index 979dc626e8..5a190184a4 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx
index 42c2a34ee8..0245256b18 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { MARKETPLACE_API_PREFIX } from '@/config'
 import Icon from '@/app/components/plugins/card/base/card-icon'
 
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
index ed8ae6411e..c2b24f0bb9 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
@@ -10,7 +10,7 @@ import { useInstalledPluginList } from '@/service/use-plugins'
 import { PLUGIN_TYPE_SEARCH_MAP } from '../../marketplace/plugin-type-switch'
 import SearchBox from '@/app/components/plugins/marketplace/search-box'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ToolItem from './tool-item'
 import Loading from '@/app/components/base/loading'
 import NoDataPlaceholder from './no-data-placeholder'
diff --git a/web/app/components/plugins/reference-setting-modal/label.tsx b/web/app/components/plugins/reference-setting-modal/label.tsx
index 6444bf801d..df66aea94a 100644
--- a/web/app/components/plugins/reference-setting-modal/label.tsx
+++ b/web/app/components/plugins/reference-setting-modal/label.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   label: string
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 57c36f77d1..75be70ae6c 100644
--- a/web/app/components/plugins/update-plugin/from-market-place.tsx
+++ b/web/app/components/plugins/update-plugin/from-market-place.tsx
@@ -15,7 +15,7 @@ import { usePluginTaskList } from '@/service/use-plugins'
 import Toast from '../../base/toast'
 import DowngradeWarningModal from './downgrade-warning'
 import { useInvalidateReferenceSettings, useRemoveAutoUpgrade } from '@/service/use-plugins'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'plugin.upgrade'
 
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 db1eb3c3a4..04044f9143 100644
--- a/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
+++ b/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
@@ -14,7 +14,7 @@ import type {
 } from '@floating-ui/react'
 import { useVersionListOfPlugin } from '@/service/use-plugins'
 import useTimestamp from '@/hooks/use-timestamp'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { lt } from 'semver'
 
 type Props = {
diff --git a/web/app/components/rag-pipeline/components/chunk-card-list/index.tsx b/web/app/components/rag-pipeline/components/chunk-card-list/index.tsx
index d7b83d8375..753a9a53be 100644
--- a/web/app/components/rag-pipeline/components/chunk-card-list/index.tsx
+++ b/web/app/components/rag-pipeline/components/chunk-card-list/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { ChunkInfo, GeneralChunks, ParentChildChunk, ParentChildChunks, QAChunk, QAChunks } from './types'
 import { ChunkingMode, type ParentMode } from '@/models/datasets'
 import ChunkCard from './chunk-card'
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx
index 615939e002..85bf5debf8 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx
@@ -7,7 +7,7 @@ import type { InputVar } from '@/models/pipeline'
 import type { FormData } from './form/types'
 import type { MoreInfo } from '@/app/components/workflow/types'
 import { useFloatingRight } from '../hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type InputFieldEditorProps = {
   onClose: () => void
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-item.tsx b/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-item.tsx
index 893d1c25f5..adbfe2ba2c 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-item.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-item.tsx
@@ -9,7 +9,7 @@ import {
 } from '@remixicon/react'
 import { InputField } from '@/app/components/base/icons/src/vender/pipeline'
 import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Badge from '@/app/components/base/badge'
 import type { InputVar } from '@/models/pipeline'
 import type { InputVarType } from '@/app/components/workflow/types'
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container.tsx b/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container.tsx
index b3ce3ad388..056d58b040 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container.tsx
@@ -4,7 +4,7 @@ import {
   useMemo,
 } from 'react'
 import { ReactSortable } from 'react-sortablejs'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { InputVar } from '@/models/pipeline'
 import FieldItem from './field-item'
 import type { SortableItem } from './types'
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx
index 2a050de3f4..5b9e992041 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 import { RiAddLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { InputVar } from '@/models/pipeline'
 import ActionButton from '@/app/components/base/action-button'
 import { useFieldList } from './hooks'
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 da00433f30..2c97a0931b 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
@@ -20,7 +20,7 @@ import type { InputVar, RAGPipelineVariables } from '@/models/pipeline'
 import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 
 const InputFieldPanel = () => {
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/preview/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/preview/index.tsx
index 43b63b183a..1bc8a04a20 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/preview/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/preview/index.tsx
@@ -7,7 +7,7 @@ import Divider from '@/app/components/base/divider'
 import ProcessDocuments from './process-documents'
 import type { Datasource } from '../../test-run/types'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useFloatingRight } from '../hooks'
 
 const PreviewPanel = () => {
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/data-source-options/option-card.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/data-source-options/option-card.tsx
index 8908c90cb6..bd433d19dc 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/data-source-options/option-card.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/data-source-options/option-card.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { BlockEnum } from '@/app/components/workflow/types'
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/step-indicator.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/step-indicator.tsx
index 7227d98dc1..4abb49406a 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/step-indicator.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/step-indicator.tsx
@@ -1,5 +1,5 @@
 import Divider from '@/app/components/base/divider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import React from 'react'
 
 type Step = {
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/result/tabs/tab.tsx b/web/app/components/rag-pipeline/components/panel/test-run/result/tabs/tab.tsx
index 8c3e10b06e..548680f8f4 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/result/tabs/tab.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/result/tabs/tab.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { WorkflowRunningData } from '@/app/components/workflow/types'
 
 type TabProps = {
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 52344f6278..ca8d67476c 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
@@ -40,7 +40,7 @@ import PublishAsKnowledgePipelineModal from '../../publish-as-knowledge-pipeline
 import type { IconInfo } from '@/models/datasets'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
 import { useProviderContext } from '@/context/provider-context'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import PremiumBadge from '@/app/components/base/premium-badge'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import { useModalContextSelector } from '@/context/modal-context'
@@ -221,10 +221,8 @@ const Popup = () => {
   }, [isAllowPublishAsCustomKnowledgePipelineTemplate, setShowPublishAsKnowledgePipelineModal, setShowPricingModal])
 
   return (
-    <div className={classNames(
-      'rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5',
-      isAllowPublishAsCustomKnowledgePipelineTemplate ? 'w-[360px]' : 'w-[400px]',
-    )}>
+    <div className={cn('rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5',
+      isAllowPublishAsCustomKnowledgePipelineTemplate ? 'w-[360px]' : 'w-[400px]')}>
       <div className='p-4 pt-3'>
         <div className='system-xs-medium-uppercase flex h-6 items-center text-text-tertiary'>
           {publishedAt ? t('workflow.common.latestPublished') : t('workflow.common.currentDraftUnpublished')}
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx
index 304e21130a..b32749bfee 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx
@@ -6,7 +6,7 @@ import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
 import { getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiCloseLine, RiDatabase2Line, RiLoader2Line, RiPlayLargeLine } from '@remixicon/react'
 import { StopCircle } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 
diff --git a/web/app/components/share/text-generation/index.tsx b/web/app/components/share/text-generation/index.tsx
index f5cb7005b8..8e3b7e1780 100644
--- a/web/app/components/share/text-generation/index.tsx
+++ b/web/app/components/share/text-generation/index.tsx
@@ -36,7 +36,7 @@ import type { VisionFile, VisionSettings } from '@/types/app'
 import { Resolution, TransferMethod } from '@/types/app'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { AccessMode } from '@/models/access-control'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
diff --git a/web/app/components/share/text-generation/info-modal.tsx b/web/app/components/share/text-generation/info-modal.tsx
index 156270fc85..1593f16509 100644
--- a/web/app/components/share/text-generation/info-modal.tsx
+++ b/web/app/components/share/text-generation/info-modal.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import AppIcon from '@/app/components/base/app-icon'
 import type { SiteInfo } from '@/models/share'
diff --git a/web/app/components/share/text-generation/menu-dropdown.tsx b/web/app/components/share/text-generation/menu-dropdown.tsx
index e3b12b3d84..251edc7a35 100644
--- a/web/app/components/share/text-generation/menu-dropdown.tsx
+++ b/web/app/components/share/text-generation/menu-dropdown.tsx
@@ -17,7 +17,7 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import ThemeSwitcher from '@/app/components/base/theme-switcher'
 import type { SiteInfo } from '@/models/share'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { AccessMode } from '@/models/access-control'
 import { useWebAppStore } from '@/context/web-app-context'
 import { webAppLogout } from '@/service/webapp-auth'
diff --git a/web/app/components/share/text-generation/run-batch/csv-reader/index.tsx b/web/app/components/share/text-generation/run-batch/csv-reader/index.tsx
index c19ec213ef..9c37c3846b 100644
--- a/web/app/components/share/text-generation/run-batch/csv-reader/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/csv-reader/index.tsx
@@ -5,7 +5,7 @@ import {
   useCSVReader,
 } from 'react-papaparse'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
 
 export type Props = {
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 eaaa31f4b8..258aed4b8d 100644
--- a/web/app/components/share/text-generation/run-batch/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/index.tsx
@@ -10,7 +10,7 @@ import CSVReader from './csv-reader'
 import CSVDownload from './csv-download'
 import Button from '@/app/components/base/button'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 export type IRunBatchProps = {
   vars: { name: string }[]
   onSend: (data: string[][]) => void
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 8915cfeb96..50853fab48 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
@@ -8,7 +8,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type IResDownloadProps = {
   isMobile: boolean
diff --git a/web/app/components/share/text-generation/run-once/index.spec.tsx b/web/app/components/share/text-generation/run-once/index.spec.tsx
new file mode 100644
index 0000000000..a386ea7e58
--- /dev/null
+++ b/web/app/components/share/text-generation/run-once/index.spec.tsx
@@ -0,0 +1,241 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import RunOnce from './index'
+import type { PromptConfig, PromptVariable } from '@/models/debug'
+import type { SiteInfo } from '@/models/share'
+import type { VisionSettings } from '@/types/app'
+import { Resolution, TransferMethod } from '@/types/app'
+
+jest.mock('@/hooks/use-breakpoints', () => {
+  const MediaType = {
+    pc: 'pc',
+    pad: 'pad',
+    mobile: 'mobile',
+  }
+  const mockUseBreakpoints = jest.fn(() => MediaType.pc)
+  return {
+    __esModule: true,
+    default: mockUseBreakpoints,
+    MediaType,
+  }
+})
+
+jest.mock('@/app/components/workflow/nodes/_base/components/editor/code-editor', () => ({
+  __esModule: true,
+  default: ({ value, onChange }: { value?: string; onChange?: (val: string) => void }) => (
+    <textarea data-testid="code-editor-mock" value={value} onChange={e => onChange?.(e.target.value)} />
+  ),
+}))
+
+jest.mock('@/app/components/base/image-uploader/text-generation-image-uploader', () => {
+  function TextGenerationImageUploaderMock({ onFilesChange }: { onFilesChange: (files: any[]) => void }) {
+    useEffect(() => {
+      onFilesChange([])
+    }, [onFilesChange])
+    return <div data-testid="vision-uploader-mock" />
+  }
+  return {
+    __esModule: true,
+    default: TextGenerationImageUploaderMock,
+  }
+})
+
+const createPromptVariable = (overrides: Partial<PromptVariable>): PromptVariable => ({
+  key: 'input',
+  name: 'Input',
+  type: 'string',
+  required: true,
+  ...overrides,
+})
+
+const basePromptConfig: PromptConfig = {
+  prompt_template: 'template',
+  prompt_variables: [
+    createPromptVariable({
+      key: 'textInput',
+      name: 'Text Input',
+      type: 'string',
+      default: 'default text',
+    }),
+    createPromptVariable({
+      key: 'paragraphInput',
+      name: 'Paragraph Input',
+      type: 'paragraph',
+      default: 'paragraph default',
+    }),
+    createPromptVariable({
+      key: 'numberInput',
+      name: 'Number Input',
+      type: 'number',
+      default: 42,
+    }),
+    createPromptVariable({
+      key: 'checkboxInput',
+      name: 'Checkbox Input',
+      type: 'checkbox',
+    }),
+  ],
+}
+
+const baseVisionConfig: VisionSettings = {
+  enabled: true,
+  number_limits: 2,
+  detail: Resolution.low,
+  transfer_methods: [TransferMethod.local_file],
+  image_file_size_limit: 5,
+}
+
+const siteInfo: SiteInfo = {
+  title: 'Share',
+}
+
+const setup = (overrides: {
+  promptConfig?: PromptConfig
+  visionConfig?: VisionSettings
+  runControl?: React.ComponentProps<typeof RunOnce>['runControl']
+} = {}) => {
+  const onInputsChange = jest.fn()
+  const onSend = jest.fn()
+  const onVisionFilesChange = jest.fn()
+  let inputsRefCapture: React.MutableRefObject<Record<string, any>> | null = null
+
+  const Wrapper = () => {
+    const [inputs, setInputs] = useState<Record<string, any>>({})
+    const inputsRef = useRef<Record<string, any>>({})
+    inputsRefCapture = inputsRef
+    return (
+      <RunOnce
+        siteInfo={siteInfo}
+        promptConfig={overrides.promptConfig || basePromptConfig}
+        inputs={inputs}
+        inputsRef={inputsRef}
+        onInputsChange={(updated) => {
+          inputsRef.current = updated
+          setInputs(updated)
+          onInputsChange(updated)
+        }}
+        onSend={onSend}
+        visionConfig={overrides.visionConfig || baseVisionConfig}
+        onVisionFilesChange={onVisionFilesChange}
+        runControl={overrides.runControl ?? null}
+      />
+    )
+  }
+
+  const utils = render(<Wrapper />)
+  return {
+    ...utils,
+    onInputsChange,
+    onSend,
+    onVisionFilesChange,
+    getInputsRef: () => inputsRefCapture,
+  }
+}
+
+describe('RunOnce', () => {
+  it('should initialize inputs using prompt defaults', async () => {
+    const { onInputsChange, onVisionFilesChange } = setup()
+
+    await waitFor(() => {
+      expect(onInputsChange).toHaveBeenCalledWith({
+        textInput: 'default text',
+        paragraphInput: 'paragraph default',
+        numberInput: 42,
+        checkboxInput: false,
+      })
+    })
+
+    await waitFor(() => {
+      expect(onVisionFilesChange).toHaveBeenCalledWith([])
+    })
+
+    expect(screen.getByText('common.imageUploader.imageUpload')).toBeInTheDocument()
+  })
+
+  it('should update inputs when user edits fields', async () => {
+    const { onInputsChange, getInputsRef } = setup()
+
+    await waitFor(() => {
+      expect(onInputsChange).toHaveBeenCalled()
+    })
+    onInputsChange.mockClear()
+
+    fireEvent.change(screen.getByPlaceholderText('Text Input'), {
+      target: { value: 'new text' },
+    })
+    fireEvent.change(screen.getByPlaceholderText('Paragraph Input'), {
+      target: { value: 'paragraph value' },
+    })
+    fireEvent.change(screen.getByPlaceholderText('Number Input'), {
+      target: { value: '99' },
+    })
+
+    const label = screen.getByText('Checkbox Input')
+    const checkbox = label.closest('div')?.parentElement?.querySelector('div')
+    expect(checkbox).toBeTruthy()
+    fireEvent.click(checkbox as HTMLElement)
+
+    const latest = onInputsChange.mock.calls[onInputsChange.mock.calls.length - 1][0]
+    expect(latest).toEqual({
+      textInput: 'new text',
+      paragraphInput: 'paragraph value',
+      numberInput: '99',
+      checkboxInput: true,
+    })
+    expect(getInputsRef()?.current).toEqual(latest)
+  })
+
+  it('should clear inputs when Clear button is pressed', async () => {
+    const { onInputsChange } = setup()
+    await waitFor(() => {
+      expect(onInputsChange).toHaveBeenCalled()
+    })
+    onInputsChange.mockClear()
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.clear' }))
+
+    expect(onInputsChange).toHaveBeenCalledWith({
+      textInput: '',
+      paragraphInput: '',
+      numberInput: '',
+      checkboxInput: false,
+    })
+  })
+
+  it('should submit form and call onSend when Run button clicked', async () => {
+    const { onSend, onInputsChange } = setup()
+    await waitFor(() => {
+      expect(onInputsChange).toHaveBeenCalled()
+    })
+    fireEvent.click(screen.getByTestId('run-button'))
+    expect(onSend).toHaveBeenCalledTimes(1)
+  })
+
+  it('should display stop controls when runControl is provided', async () => {
+    const onStop = jest.fn()
+    const runControl = {
+      onStop,
+      isStopping: false,
+    }
+    const { onInputsChange } = setup({ runControl })
+    await waitFor(() => {
+      expect(onInputsChange).toHaveBeenCalled()
+    })
+    const stopButton = screen.getByTestId('stop-button')
+    fireEvent.click(stopButton)
+    expect(onStop).toHaveBeenCalledTimes(1)
+  })
+
+  it('should disable stop button while runControl is stopping', async () => {
+    const runControl = {
+      onStop: jest.fn(),
+      isStopping: true,
+    }
+    const { onInputsChange } = setup({ runControl })
+    await waitFor(() => {
+      expect(onInputsChange).toHaveBeenCalled()
+    })
+    const stopButton = screen.getByTestId('stop-button')
+    expect(stopButton).toBeDisabled()
+  })
+})
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 6d922312ae..51c8df0335 100644
--- a/web/app/components/share/text-generation/run-once/index.tsx
+++ b/web/app/components/share/text-generation/run-once/index.tsx
@@ -17,7 +17,7 @@ import TextGenerationImageUploader from '@/app/components/base/image-uploader/te
 import type { VisionFile, VisionSettings } from '@/types/app'
 import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 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'
@@ -57,6 +57,8 @@ const RunOnce: FC<IRunOnceProps> = ({
     promptConfig.prompt_variables.forEach((item) => {
       if (item.type === 'string' || item.type === 'paragraph')
         newInputs[item.key] = ''
+      else if (item.type === 'number')
+        newInputs[item.key] = ''
       else if (item.type === 'checkbox')
         newInputs[item.key] = false
       else
@@ -92,7 +94,7 @@ const RunOnce: FC<IRunOnceProps> = ({
       else if (item.type === 'string' || item.type === 'paragraph')
         newInputs[item.key] = item.default || ''
       else if (item.type === 'number')
-        newInputs[item.key] = item.default
+        newInputs[item.key] = item.default ?? ''
       else if (item.type === 'checkbox')
         newInputs[item.key] = item.default || false
       else if (item.type === 'file')
@@ -230,6 +232,7 @@ const RunOnce: FC<IRunOnceProps> = ({
                 variant={isRunning ? 'secondary' : 'primary'}
                 disabled={isRunning && runControl?.isStopping}
                 onClick={handlePrimaryClick}
+                data-testid={isRunning ? 'stop-button' : 'run-button'}
               >
                 {isRunning ? (
                   <>
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 f0ad13f9b1..7d7a1d5555 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
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { Credential } from '@/app/components/tools/types'
 import Input from '@/app/components/base/input'
 import Drawer from '@/app/components/base/drawer-plus'
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 48801b018f..32239e15b1 100644
--- a/web/app/components/tools/edit-custom-collection-modal/index.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@@ -11,7 +11,7 @@ import { AuthHeaderPrefix, AuthType } from '../types'
 import GetSchema from './get-schema'
 import ConfigCredentials from './config-credentials'
 import TestApi from './test-api'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer-plus'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
diff --git a/web/app/components/tools/labels/filter.tsx b/web/app/components/tools/labels/filter.tsx
index debf3ea806..78470d9767 100644
--- a/web/app/components/tools/labels/filter.tsx
+++ b/web/app/components/tools/labels/filter.tsx
@@ -3,7 +3,7 @@ import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDebounceFn } from 'ahooks'
 import { RiArrowDownSLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/tools/labels/selector.tsx b/web/app/components/tools/labels/selector.tsx
index 587c204456..cd273f3afa 100644
--- a/web/app/components/tools/labels/selector.tsx
+++ b/web/app/components/tools/labels/selector.tsx
@@ -3,7 +3,7 @@ import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDebounceFn } from 'ahooks'
 import { RiArrowDownSLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/tools/marketplace/index.spec.tsx b/web/app/components/tools/marketplace/index.spec.tsx
new file mode 100644
index 0000000000..6f0e339205
--- /dev/null
+++ b/web/app/components/tools/marketplace/index.spec.tsx
@@ -0,0 +1,368 @@
+import React from 'react'
+import { act, render, renderHook, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Marketplace from './index'
+import { useMarketplace } from './hooks'
+import { PluginCategoryEnum } from '@/app/components/plugins/types'
+import { getMarketplaceListCondition } from '@/app/components/plugins/marketplace/utils'
+import { SCROLL_BOTTOM_THRESHOLD } from '@/app/components/plugins/marketplace/constants'
+import type { Collection } from '@/app/components/tools/types'
+import { CollectionType } from '@/app/components/tools/types'
+import type { Plugin } from '@/app/components/plugins/types'
+
+const listRenderSpy = jest.fn()
+jest.mock('@/app/components/plugins/marketplace/list', () => ({
+  __esModule: true,
+  default: (props: {
+    marketplaceCollections: unknown[]
+    marketplaceCollectionPluginsMap: Record<string, unknown[]>
+    plugins?: unknown[]
+    showInstallButton?: boolean
+    locale: string
+  }) => {
+    listRenderSpy(props)
+    return <div data-testid="marketplace-list" />
+  },
+}))
+
+const mockUseMarketplaceCollectionsAndPlugins = jest.fn()
+const mockUseMarketplacePlugins = jest.fn()
+jest.mock('@/app/components/plugins/marketplace/hooks', () => ({
+  useMarketplaceCollectionsAndPlugins: (...args: unknown[]) => mockUseMarketplaceCollectionsAndPlugins(...args),
+  useMarketplacePlugins: (...args: unknown[]) => mockUseMarketplacePlugins(...args),
+}))
+
+const mockUseAllToolProviders = jest.fn()
+jest.mock('@/service/use-tools', () => ({
+  useAllToolProviders: (...args: unknown[]) => mockUseAllToolProviders(...args),
+}))
+
+jest.mock('@/utils/var', () => ({
+  __esModule: true,
+  getMarketplaceUrl: jest.fn(() => 'https://marketplace.test/market'),
+}))
+
+jest.mock('@/i18n-config', () => ({
+  getLocaleOnClient: () => 'en',
+}))
+
+jest.mock('next-themes', () => ({
+  useTheme: () => ({ theme: 'light' }),
+}))
+
+const { getMarketplaceUrl: mockGetMarketplaceUrl } = jest.requireMock('@/utils/var') as {
+  getMarketplaceUrl: jest.Mock
+}
+
+const createToolProvider = (overrides: Partial<Collection> = {}): Collection => ({
+  id: 'provider-1',
+  name: 'Provider 1',
+  author: 'Author',
+  description: { en_US: 'desc', zh_Hans: '描述' },
+  icon: 'icon',
+  label: { en_US: 'label', zh_Hans: '标签' },
+  type: CollectionType.custom,
+  team_credentials: {},
+  is_team_authorization: false,
+  allow_delete: false,
+  labels: [],
+  ...overrides,
+})
+
+const createPlugin = (overrides: Partial<Plugin> = {}): Plugin => ({
+  type: 'plugin',
+  org: 'org',
+  author: 'author',
+  name: 'Plugin One',
+  plugin_id: 'plugin-1',
+  version: '1.0.0',
+  latest_version: '1.0.0',
+  latest_package_identifier: 'plugin-1@1.0.0',
+  icon: 'icon',
+  verified: true,
+  label: { en_US: 'Plugin One' },
+  brief: { en_US: 'Brief' },
+  description: { en_US: 'Plugin description' },
+  introduction: 'Intro',
+  repository: 'https://example.com',
+  category: PluginCategoryEnum.tool,
+  install_count: 0,
+  endpoint: { settings: [] },
+  tags: [{ name: 'tag' }],
+  badges: [],
+  verification: { authorized_category: 'community' },
+  from: 'marketplace',
+  ...overrides,
+})
+
+const createMarketplaceContext = (overrides: Partial<ReturnType<typeof useMarketplace>> = {}) => ({
+  isLoading: false,
+  marketplaceCollections: [],
+  marketplaceCollectionPluginsMap: {},
+  plugins: [],
+  handleScroll: jest.fn(),
+  page: 1,
+  ...overrides,
+})
+
+describe('Marketplace', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering the marketplace panel based on loading and visibility state.
+  describe('Rendering', () => {
+    it('should show loading indicator when loading first page', () => {
+      // Arrange
+      const marketplaceContext = createMarketplaceContext({ isLoading: true, page: 1 })
+      render(
+        <Marketplace
+          searchPluginText=""
+          filterPluginTags={[]}
+          isMarketplaceArrowVisible={false}
+          showMarketplacePanel={jest.fn()}
+          marketplaceContext={marketplaceContext}
+        />,
+      )
+
+      // Assert
+      expect(document.querySelector('svg.spin-animation')).toBeInTheDocument()
+      expect(screen.queryByTestId('marketplace-list')).not.toBeInTheDocument()
+    })
+
+    it('should render list when not loading', () => {
+      // Arrange
+      const marketplaceContext = createMarketplaceContext({
+        isLoading: false,
+        plugins: [createPlugin()],
+      })
+      render(
+        <Marketplace
+          searchPluginText=""
+          filterPluginTags={[]}
+          isMarketplaceArrowVisible={false}
+          showMarketplacePanel={jest.fn()}
+          marketplaceContext={marketplaceContext}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByTestId('marketplace-list')).toBeInTheDocument()
+      expect(listRenderSpy).toHaveBeenCalledWith(expect.objectContaining({
+        showInstallButton: true,
+        locale: 'en',
+      }))
+    })
+  })
+
+  // Prop-driven UI output such as links and action triggers.
+  describe('Props', () => {
+    it('should build marketplace link and trigger panel when arrow is clicked', async () => {
+      const user = userEvent.setup()
+      // Arrange
+      const marketplaceContext = createMarketplaceContext()
+      const showMarketplacePanel = jest.fn()
+      const { container } = render(
+        <Marketplace
+          searchPluginText="vector"
+          filterPluginTags={['tag-a', 'tag-b']}
+          isMarketplaceArrowVisible
+          showMarketplacePanel={showMarketplacePanel}
+          marketplaceContext={marketplaceContext}
+        />,
+      )
+
+      // Act
+      const arrowIcon = container.querySelector('svg.cursor-pointer')
+      expect(arrowIcon).toBeTruthy()
+      await user.click(arrowIcon as SVGElement)
+
+      // Assert
+      expect(showMarketplacePanel).toHaveBeenCalledTimes(1)
+      expect(mockGetMarketplaceUrl).toHaveBeenCalledWith('', {
+        language: 'en',
+        q: 'vector',
+        tags: 'tag-a,tag-b',
+        theme: 'light',
+      })
+      const marketplaceLink = screen.getByRole('link', { name: /plugin.marketplace.difyMarketplace/i })
+      expect(marketplaceLink).toHaveAttribute('href', 'https://marketplace.test/market')
+    })
+  })
+})
+
+describe('useMarketplace', () => {
+  const mockQueryMarketplaceCollectionsAndPlugins = jest.fn()
+  const mockQueryPlugins = jest.fn()
+  const mockQueryPluginsWithDebounced = jest.fn()
+  const mockResetPlugins = jest.fn()
+  const mockFetchNextPage = jest.fn()
+
+  const setupHookMocks = (overrides?: {
+    isLoading?: boolean
+    isPluginsLoading?: boolean
+    pluginsPage?: number
+    hasNextPage?: boolean
+    plugins?: Plugin[] | undefined
+  }) => {
+    mockUseMarketplaceCollectionsAndPlugins.mockReturnValue({
+      isLoading: overrides?.isLoading ?? false,
+      marketplaceCollections: [],
+      marketplaceCollectionPluginsMap: {},
+      queryMarketplaceCollectionsAndPlugins: mockQueryMarketplaceCollectionsAndPlugins,
+    })
+    mockUseMarketplacePlugins.mockReturnValue({
+      plugins: overrides?.plugins,
+      resetPlugins: mockResetPlugins,
+      queryPlugins: mockQueryPlugins,
+      queryPluginsWithDebounced: mockQueryPluginsWithDebounced,
+      isLoading: overrides?.isPluginsLoading ?? false,
+      fetchNextPage: mockFetchNextPage,
+      hasNextPage: overrides?.hasNextPage ?? false,
+      page: overrides?.pluginsPage,
+    })
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUseAllToolProviders.mockReturnValue({
+      data: [],
+      isSuccess: true,
+    })
+    setupHookMocks()
+  })
+
+  // Query behavior driven by search filters and provider exclusions.
+  describe('Queries', () => {
+    it('should query plugins with debounce when search text is provided', async () => {
+      // Arrange
+      mockUseAllToolProviders.mockReturnValue({
+        data: [
+          createToolProvider({ plugin_id: 'plugin-a' }),
+          createToolProvider({ plugin_id: undefined }),
+        ],
+        isSuccess: true,
+      })
+
+      // Act
+      renderHook(() => useMarketplace('alpha', []))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockQueryPluginsWithDebounced).toHaveBeenCalledWith({
+          category: PluginCategoryEnum.tool,
+          query: 'alpha',
+          tags: [],
+          exclude: ['plugin-a'],
+          type: 'plugin',
+        })
+      })
+      expect(mockQueryMarketplaceCollectionsAndPlugins).not.toHaveBeenCalled()
+      expect(mockResetPlugins).not.toHaveBeenCalled()
+    })
+
+    it('should query plugins immediately when only tags are provided', async () => {
+      // Arrange
+      mockUseAllToolProviders.mockReturnValue({
+        data: [createToolProvider({ plugin_id: 'plugin-b' })],
+        isSuccess: true,
+      })
+
+      // Act
+      renderHook(() => useMarketplace('', ['tag-1']))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockQueryPlugins).toHaveBeenCalledWith({
+          category: PluginCategoryEnum.tool,
+          query: '',
+          tags: ['tag-1'],
+          exclude: ['plugin-b'],
+          type: 'plugin',
+        })
+      })
+    })
+
+    it('should query collections and reset plugins when no filters are provided', async () => {
+      // Arrange
+      mockUseAllToolProviders.mockReturnValue({
+        data: [createToolProvider({ plugin_id: 'plugin-c' })],
+        isSuccess: true,
+      })
+
+      // Act
+      renderHook(() => useMarketplace('', []))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockQueryMarketplaceCollectionsAndPlugins).toHaveBeenCalledWith({
+          category: PluginCategoryEnum.tool,
+          condition: getMarketplaceListCondition(PluginCategoryEnum.tool),
+          exclude: ['plugin-c'],
+          type: 'plugin',
+        })
+      })
+      expect(mockResetPlugins).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // State derived from hook inputs and loading signals.
+  describe('State', () => {
+    it('should expose combined loading state and fallback page value', () => {
+      // Arrange
+      setupHookMocks({ isLoading: true, isPluginsLoading: false, pluginsPage: undefined })
+
+      // Act
+      const { result } = renderHook(() => useMarketplace('', []))
+
+      // Assert
+      expect(result.current.isLoading).toBe(true)
+      expect(result.current.page).toBe(1)
+    })
+  })
+
+  // Scroll handling that triggers pagination when appropriate.
+  describe('Scroll', () => {
+    it('should fetch next page when scrolling near bottom with filters', () => {
+      // Arrange
+      setupHookMocks({ hasNextPage: true })
+      const { result } = renderHook(() => useMarketplace('search', []))
+      const event = {
+        target: {
+          scrollTop: 100,
+          scrollHeight: 200,
+          clientHeight: 100 + SCROLL_BOTTOM_THRESHOLD,
+        },
+      } as unknown as Event
+
+      // Act
+      act(() => {
+        result.current.handleScroll(event)
+      })
+
+      // Assert
+      expect(mockFetchNextPage).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not fetch next page when no filters are applied', () => {
+      // Arrange
+      setupHookMocks({ hasNextPage: true })
+      const { result } = renderHook(() => useMarketplace('', []))
+      const event = {
+        target: {
+          scrollTop: 100,
+          scrollHeight: 200,
+          clientHeight: 100 + SCROLL_BOTTOM_THRESHOLD,
+        },
+      } as unknown as Event
+
+      // Act
+      act(() => {
+        result.current.handleScroll(event)
+      })
+
+      // Assert
+      expect(mockFetchNextPage).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/tools/mcp/detail/content.tsx b/web/app/components/tools/mcp/detail/content.tsx
index 965b270bda..ade39b6d06 100644
--- a/web/app/components/tools/mcp/detail/content.tsx
+++ b/web/app/components/tools/mcp/detail/content.tsx
@@ -30,7 +30,7 @@ import {
   useUpdateMCPTools,
 } from '@/service/use-tools'
 import { openOAuthPopup } from '@/hooks/use-oauth'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   detail: ToolWithProvider
diff --git a/web/app/components/tools/mcp/detail/list-loading.tsx b/web/app/components/tools/mcp/detail/list-loading.tsx
index babf050d8b..ab7c07197e 100644
--- a/web/app/components/tools/mcp/detail/list-loading.tsx
+++ b/web/app/components/tools/mcp/detail/list-loading.tsx
@@ -1,6 +1,6 @@
 'use client'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const ListLoading = () => {
   return (
diff --git a/web/app/components/tools/mcp/detail/operation-dropdown.tsx b/web/app/components/tools/mcp/detail/operation-dropdown.tsx
index d2cbc8825d..348d45cf55 100644
--- a/web/app/components/tools/mcp/detail/operation-dropdown.tsx
+++ b/web/app/components/tools/mcp/detail/operation-dropdown.tsx
@@ -13,7 +13,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   inCard?: boolean
diff --git a/web/app/components/tools/mcp/detail/provider-detail.tsx b/web/app/components/tools/mcp/detail/provider-detail.tsx
index 56f26f8582..b0bfdf8327 100644
--- a/web/app/components/tools/mcp/detail/provider-detail.tsx
+++ b/web/app/components/tools/mcp/detail/provider-detail.tsx
@@ -4,7 +4,7 @@ import type { FC } from 'react'
 import Drawer from '@/app/components/base/drawer'
 import MCPDetailContent from './content'
 import type { ToolWithProvider } from '../../../workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   detail?: ToolWithProvider
diff --git a/web/app/components/tools/mcp/detail/tool-item.tsx b/web/app/components/tools/mcp/detail/tool-item.tsx
index d5dfa1f978..ecd68a6e0a 100644
--- a/web/app/components/tools/mcp/detail/tool-item.tsx
+++ b/web/app/components/tools/mcp/detail/tool-item.tsx
@@ -5,7 +5,7 @@ import type { Tool } from '@/app/components/tools/types'
 import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 type Props = {
diff --git a/web/app/components/tools/mcp/headers-input.tsx b/web/app/components/tools/mcp/headers-input.tsx
index ede5b6cffe..fbe52b89b6 100644
--- a/web/app/components/tools/mcp/headers-input.tsx
+++ b/web/app/components/tools/mcp/headers-input.tsx
@@ -6,7 +6,7 @@ import { RiAddLine, RiDeleteBinLine } from '@remixicon/react'
 import Input from '@/app/components/base/input'
 import Button from '@/app/components/base/button'
 import ActionButton from '@/app/components/base/action-button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type HeaderItem = {
   id: string
diff --git a/web/app/components/tools/mcp/index.tsx b/web/app/components/tools/mcp/index.tsx
index 5a1e5cf3bf..e02e360c22 100644
--- a/web/app/components/tools/mcp/index.tsx
+++ b/web/app/components/tools/mcp/index.tsx
@@ -7,7 +7,7 @@ import {
   useAllToolProviders,
 } from '@/service/use-tools'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   searchText: string
diff --git a/web/app/components/tools/mcp/mcp-server-modal.tsx b/web/app/components/tools/mcp/mcp-server-modal.tsx
index 11af81ec1a..b94715c7e8 100644
--- a/web/app/components/tools/mcp/mcp-server-modal.tsx
+++ b/web/app/components/tools/mcp/mcp-server-modal.tsx
@@ -15,7 +15,7 @@ import {
   useInvalidateMCPServerDetail,
   useUpdateMCPServer,
 } from '@/service/use-tools'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type ModalProps = {
   appID: string
diff --git a/web/app/components/tools/mcp/mcp-service-card.tsx b/web/app/components/tools/mcp/mcp-service-card.tsx
index 470a59f47a..006ef44ad3 100644
--- a/web/app/components/tools/mcp/mcp-service-card.tsx
+++ b/web/app/components/tools/mcp/mcp-service-card.tsx
@@ -24,7 +24,7 @@ import {
   useUpdateMCPServer,
 } from '@/service/use-tools'
 import { BlockEnum } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { fetchAppDetail } from '@/service/apps'
 import { useDocLink } from '@/context/i18n'
 
diff --git a/web/app/components/tools/mcp/modal.tsx b/web/app/components/tools/mcp/modal.tsx
index 836fc5e0aa..7d7296201f 100644
--- a/web/app/components/tools/mcp/modal.tsx
+++ b/web/app/components/tools/mcp/modal.tsx
@@ -18,7 +18,7 @@ import type { ToolWithProvider } from '@/app/components/workflow/types'
 import { noop } from 'lodash-es'
 import Toast from '@/app/components/base/toast'
 import { uploadRemoteFileInfo } from '@/service/common'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useHover } from 'ahooks'
 import { shouldUseMcpIconForAppIcon } from '@/utils/mcp'
 import TabSlider from '@/app/components/base/tab-slider'
diff --git a/web/app/components/tools/mcp/provider-card.tsx b/web/app/components/tools/mcp/provider-card.tsx
index 7c4f3718d4..831a1122ed 100644
--- a/web/app/components/tools/mcp/provider-card.tsx
+++ b/web/app/components/tools/mcp/provider-card.tsx
@@ -12,7 +12,7 @@ import Confirm from '@/app/components/base/confirm'
 import MCPModal from './modal'
 import OperationDropdown from './detail/operation-dropdown'
 import { useDeleteMCP, useUpdateMCP } from '@/service/use-tools'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   currentProvider?: ToolWithProvider
diff --git a/web/app/components/tools/provider-list.tsx b/web/app/components/tools/provider-list.tsx
index 01f9f09127..567cc94450 100644
--- a/web/app/components/tools/provider-list.tsx
+++ b/web/app/components/tools/provider-list.tsx
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { Collection } from './types'
 import Marketplace from './marketplace'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import TabSliderNew from '@/app/components/base/tab-slider-new'
 import LabelFilter from '@/app/components/tools/labels/filter'
diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx
index dd2972a9d6..d310dde41b 100644
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@@ -9,7 +9,7 @@ import { AuthHeaderPrefix, AuthType, CollectionType } from '../types'
 import { basePath } from '@/utils/var'
 import type { Collection, CustomCollectionBackend, Tool, WorkflowToolProviderRequest, WorkflowToolProviderResponse } from '../types'
 import ToolItem from './tool-item'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
 import Confirm from '@/app/components/base/confirm'
diff --git a/web/app/components/tools/provider/empty.tsx b/web/app/components/tools/provider/empty.tsx
index 4d69dc1076..bbd0f6fec1 100644
--- a/web/app/components/tools/provider/empty.tsx
+++ b/web/app/components/tools/provider/empty.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { ToolTypeEnum } from '../../workflow/block-selector/types'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import Link from 'next/link'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { NoToolPlaceholder } from '../../base/icons/src/vender/other'
 import useTheme from '@/hooks/use-theme'
 type Props = {
diff --git a/web/app/components/tools/provider/tool-item.tsx b/web/app/components/tools/provider/tool-item.tsx
index 7ad202fca5..7edf1c61f1 100644
--- a/web/app/components/tools/provider/tool-item.tsx
+++ b/web/app/components/tools/provider/tool-item.tsx
@@ -2,7 +2,7 @@
 import React, { useState } from 'react'
 import { useContext } from 'use-context-selector'
 import type { Collection, Tool } from '../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
 import SettingBuiltInTool from '@/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool'
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 f6b9c05c44..5effeaa47d 100644
--- a/web/app/components/tools/setting/build-in/config-credentials.tsx
+++ b/web/app/components/tools/setting/build-in/config-credentials.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { addDefaultValue, toolCredentialToFormSchemas } from '../../utils/to-form-schema'
 import type { Collection } from '../../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer-plus'
 import Button from '@/app/components/base/button'
 import Toast from '@/app/components/base/toast'
diff --git a/web/app/components/tools/workflow-tool/configure-button.tsx b/web/app/components/tools/workflow-tool/configure-button.tsx
index f66a311155..0feee28abf 100644
--- a/web/app/components/tools/workflow-tool/configure-button.tsx
+++ b/web/app/components/tools/workflow-tool/configure-button.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
 import { RiArrowRightUpLine, RiHammerLine } from '@remixicon/react'
 import Divider from '../../base/divider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
 import WorkflowToolModal from '@/app/components/tools/workflow-tool'
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 1327adc7e5..e76ad4add4 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
@@ -2,7 +2,7 @@
 
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
diff --git a/web/app/components/tools/workflow-tool/index.tsx b/web/app/components/tools/workflow-tool/index.tsx
index 8af7fb4c9f..3d70f1f424 100644
--- a/web/app/components/tools/workflow-tool/index.tsx
+++ b/web/app/components/tools/workflow-tool/index.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { produce } from 'immer'
 import type { Emoji, WorkflowToolProviderOutputParameter, WorkflowToolProviderParameter, WorkflowToolProviderRequest } from '../types'
 import { buildWorkflowOutputParameters } from './utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer-plus'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
diff --git a/web/app/components/tools/workflow-tool/method-selector.tsx b/web/app/components/tools/workflow-tool/method-selector.tsx
index 4edaa6c143..03eb651ba3 100644
--- a/web/app/components/tools/workflow-tool/method-selector.tsx
+++ b/web/app/components/tools/workflow-tool/method-selector.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiArrowDownSLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
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 10e52a2c66..cba66996e8 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
@@ -36,7 +36,7 @@ import type { PublishWorkflowParams } from '@/types/workflow'
 import { fetchAppDetail } from '@/service/apps'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import useTheme from '@/hooks/use-theme'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useIsChatMode } from '@/app/components/workflow/hooks'
 import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
 import type { EndNodeType } from '@/app/components/workflow/nodes/end/types'
diff --git a/web/app/components/workflow-app/components/workflow-header/index.spec.tsx b/web/app/components/workflow-app/components/workflow-header/index.spec.tsx
index cbeecaf26f..1fff507889 100644
--- a/web/app/components/workflow-app/components/workflow-header/index.spec.tsx
+++ b/web/app/components/workflow-app/components/workflow-header/index.spec.tsx
@@ -11,24 +11,6 @@ const mockResetWorkflowVersionHistory = jest.fn()
 
 let appDetail: App
 
-jest.mock('ky', () => ({
-  __esModule: true,
-  default: {
-    create: () => ({
-      extend: () => async () => ({
-        status: 200,
-        headers: new Headers(),
-        json: async () => ({}),
-        blob: async () => new Blob(),
-        clone: () => ({
-          status: 200,
-          json: async () => ({}),
-        }),
-      }),
-    }),
-  },
-}))
-
 jest.mock('@/app/components/app/store', () => ({
   __esModule: true,
   useStore: (selector: (state: { appDetail?: App; setCurrentLogItem: typeof mockSetCurrentLogItem; setShowMessageLogModal: typeof mockSetShowMessageLogModal }) => unknown) => mockUseAppStoreSelector(selector),
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx
index e28de39fdd..2cc54b39ca 100644
--- a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC, ReactNode } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type StartNodeOptionProps = {
   icon: ReactNode
diff --git a/web/app/components/workflow/block-icon.tsx b/web/app/components/workflow/block-icon.tsx
index a4f53f2a64..3c66d07364 100644
--- a/web/app/components/workflow/block-icon.tsx
+++ b/web/app/components/workflow/block-icon.tsx
@@ -27,7 +27,7 @@ import {
   WebhookLine,
 } from '@/app/components/base/icons/src/vender/workflow'
 import AppIcon from '@/app/components/base/app-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type BlockIconProps = {
   type: BlockEnum
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 7986252c1a..e073113c05 100644
--- a/web/app/components/workflow/block-selector/all-start-blocks.tsx
+++ b/web/app/components/workflow/block-selector/all-start-blocks.tsx
@@ -15,7 +15,7 @@ import type { TriggerDefaultValue, TriggerWithProvider } from './types'
 import StartBlocks from './start-blocks'
 import TriggerPluginList from './trigger-plugin/list'
 import { ENTRY_NODE_TYPES } from './constants'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Link from 'next/link'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import { getMarketplaceUrl } from '@/utils/var'
diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx
index 50d10541ef..8968a01557 100644
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -14,7 +14,7 @@ import { ToolTypeEnum } from './types'
 import Tools from './tools'
 import { useToolTabs } from './hooks'
 import ViewTypeSelect, { ViewType } from './view-type-select'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
 import type { ListRef } from '@/app/components/workflow/block-selector/market-place-plugin/list'
diff --git a/web/app/components/workflow/block-selector/data-sources.tsx b/web/app/components/workflow/block-selector/data-sources.tsx
index ba92acb33f..c354208dee 100644
--- a/web/app/components/workflow/block-selector/data-sources.tsx
+++ b/web/app/components/workflow/block-selector/data-sources.tsx
@@ -12,7 +12,7 @@ import type {
 import type { DataSourceDefaultValue, ToolDefaultValue } from './types'
 import Tools from './tools'
 import { ViewType } from './view-type-select'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import PluginList, { type ListRef } from '@/app/components/workflow/block-selector/market-place-plugin/list'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { DEFAULT_FILE_EXTENSIONS_IN_LOCAL_FILE_DATA_SOURCE } from './constants'
diff --git a/web/app/components/workflow/block-selector/index-bar.tsx b/web/app/components/workflow/block-selector/index-bar.tsx
index c9934bbddd..f9a839a982 100644
--- a/web/app/components/workflow/block-selector/index-bar.tsx
+++ b/web/app/components/workflow/block-selector/index-bar.tsx
@@ -2,7 +2,7 @@ import { pinyin } from 'pinyin-pro'
 import type { FC, RefObject } from 'react'
 import type { ToolWithProvider } from '../types'
 import { CollectionType } from '../../tools/types'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export const CUSTOM_GROUP_NAME = '@@@custom@@@'
 export const WORKFLOW_GROUP_NAME = '@@@workflow@@@'
@@ -86,8 +86,8 @@ const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs, className }) => {
       element.scrollIntoView({ behavior: 'smooth' })
   }
   return (
-    <div className={classNames('index-bar sticky top-[20px] flex h-full w-6 flex-col items-center justify-center text-xs font-medium text-text-quaternary', className)}>
-      <div className={classNames('absolute left-0 top-0 h-full w-px bg-[linear-gradient(270deg,rgba(255,255,255,0)_0%,rgba(16,24,40,0.08)_30%,rgba(16,24,40,0.08)_50%,rgba(16,24,40,0.08)_70.5%,rgba(255,255,255,0)_100%)]')}></div>
+    <div className={cn('index-bar sticky top-[20px] flex h-full w-6 flex-col items-center justify-center text-xs font-medium text-text-quaternary', className)}>
+      <div className={cn('absolute left-0 top-0 h-full w-px bg-[linear-gradient(270deg,rgba(255,255,255,0)_0%,rgba(16,24,40,0.08)_30%,rgba(16,24,40,0.08)_50%,rgba(16,24,40,0.08)_70.5%,rgba(255,255,255,0)_100%)]')}></div>
       {letters.map(letter => (
         <div className="cursor-pointer hover:text-text-secondary" key={letter} onClick={() => handleIndexClick(letter)}>
           {letter}
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 034ecbad45..3d0cc7dfe7 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
@@ -11,7 +11,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useDownloadPlugin } from '@/service/use-plugins'
 import { downloadFile } from '@/utils/format'
 import { getMarketplaceUrl } from '@/utils/var'
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
index 3c9c9b9f59..711bfadc7f 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
@@ -7,7 +7,7 @@ import Action from './action'
 import type { Plugin } from '@/app/components/plugins/types.ts'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import I18n from '@/context/i18n'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 import { formatNumber } from '@/utils/format'
 import { useBoolean } from 'ahooks'
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
index a323fd7305..b2097c72cf 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import useStickyScroll, { ScrollPosition } from '../use-sticky-scroll'
 import Item from './item'
 import type { Plugin, PluginCategoryEnum } from '@/app/components/plugins/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Link from 'next/link'
 import { RiArrowRightUpLine, RiSearchLine } from '@remixicon/react'
 import { noop } from 'lodash-es'
diff --git a/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx b/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx
index 8c98fa9d7c..2012d03598 100644
--- a/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx
+++ b/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx
@@ -4,7 +4,7 @@ import type { ToolDefaultValue } from '../types'
 import { ViewType } from '../view-type-select'
 import { useGetLanguage } from '@/context/i18n'
 import { groupItems } from '../index-bar'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ToolListTreeView from '../tool/tool-list-tree-view/list'
 import ToolListFlatView from '../tool/tool-list-flat-view/list'
 import UninstalledItem from './uninstalled-item'
diff --git a/web/app/components/workflow/block-selector/tabs.tsx b/web/app/components/workflow/block-selector/tabs.tsx
index ecdb8797c0..0367208cfe 100644
--- a/web/app/components/workflow/block-selector/tabs.tsx
+++ b/web/app/components/workflow/block-selector/tabs.tsx
@@ -13,7 +13,7 @@ import Blocks from './blocks'
 import AllStartBlocks from './all-start-blocks'
 import AllTools from './all-tools'
 import DataSources from './data-sources'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useFeaturedToolsRecommendations } from '@/service/use-plugins'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useWorkflowStore } from '../store'
diff --git a/web/app/components/workflow/block-selector/tool-picker.tsx b/web/app/components/workflow/block-selector/tool-picker.tsx
index 09f386d657..c10496006d 100644
--- a/web/app/components/workflow/block-selector/tool-picker.tsx
+++ b/web/app/components/workflow/block-selector/tool-picker.tsx
@@ -35,7 +35,7 @@ import {
 } from '@/service/use-tools'
 import { useFeaturedToolsRecommendations } from '@/service/use-plugins'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   panelClassName?: string
diff --git a/web/app/components/workflow/block-selector/tool/action-item.tsx b/web/app/components/workflow/block-selector/tool/action-item.tsx
index 2151beefab..617a28ade2 100644
--- a/web/app/components/workflow/block-selector/tool/action-item.tsx
+++ b/web/app/components/workflow/block-selector/tool/action-item.tsx
@@ -8,7 +8,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import type { Tool } from '@/app/components/tools/types'
 import { useGetLanguage } from '@/context/i18n'
 import BlockIcon from '../../block-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
diff --git a/web/app/components/workflow/block-selector/tool/tool.tsx b/web/app/components/workflow/block-selector/tool/tool.tsx
index 2ce8f8130e..622b06734b 100644
--- a/web/app/components/workflow/block-selector/tool/tool.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import { useGetLanguage } from '@/context/i18n'
 import type { Tool as ToolType } from '../../../tools/types'
diff --git a/web/app/components/workflow/block-selector/tools.tsx b/web/app/components/workflow/block-selector/tools.tsx
index 66d880d994..788905323e 100644
--- a/web/app/components/workflow/block-selector/tools.tsx
+++ b/web/app/components/workflow/block-selector/tools.tsx
@@ -8,7 +8,7 @@ import Empty from '@/app/components/tools/provider/empty'
 import { useGetLanguage } from '@/context/i18n'
 import ToolListTreeView from './tool/tool-list-tree-view/list'
 import ToolListFlatView from './tool/tool-list-flat-view/list'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ToolsProps = {
   onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
@@ -91,7 +91,7 @@ const Tools = ({
   const toolRefs = useRef({})
 
   return (
-    <div className={classNames('max-w-[100%] p-1', className)}>
+    <div className={cn('max-w-[100%] p-1', className)}>
       {!tools.length && !hasSearchText && (
         <div className='py-10'>
           <Empty type={toolType!} isAgent={isAgent} />
diff --git a/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx b/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx
index d2bdda8a82..e22712c248 100644
--- a/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx
+++ b/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx
@@ -8,7 +8,7 @@ import type { TriggerDefaultValue } from '../types'
 import Tooltip from '@/app/components/base/tooltip'
 import { useGetLanguage } from '@/context/i18n'
 import BlockIcon from '../../block-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 type Props = {
diff --git a/web/app/components/workflow/block-selector/trigger-plugin/item.tsx b/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
index 49db8c6c3e..15b8d638fe 100644
--- a/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
+++ b/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { useGetLanguage } from '@/context/i18n'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import type { FC } from 'react'
 import React, { useEffect, useMemo, useRef } from 'react'
diff --git a/web/app/components/workflow/block-selector/view-type-select.tsx b/web/app/components/workflow/block-selector/view-type-select.tsx
index f241257bfa..900453fedb 100644
--- a/web/app/components/workflow/block-selector/view-type-select.tsx
+++ b/web/app/components/workflow/block-selector/view-type-select.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { RiNodeTree, RiSortAlphabetAsc } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export enum ViewType {
   flat = 'flat',
diff --git a/web/app/components/workflow/custom-edge.tsx b/web/app/components/workflow/custom-edge.tsx
index d4cbc9199d..2a53abb327 100644
--- a/web/app/components/workflow/custom-edge.tsx
+++ b/web/app/components/workflow/custom-edge.tsx
@@ -25,7 +25,7 @@ import { NodeRunningStatus } from './types'
 import { getEdgeColor } from './utils'
 import { ITERATION_CHILDREN_Z_INDEX, LOOP_CHILDREN_Z_INDEX } from './constants'
 import CustomEdgeLinearGradientRender from './custom-edge-linear-gradient-render'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ErrorHandleTypeEnum } from '@/app/components/workflow/nodes/_base/components/error-handle/types'
 
 const CustomEdge = ({
diff --git a/web/app/components/workflow/dsl-export-confirm-modal.tsx b/web/app/components/workflow/dsl-export-confirm-modal.tsx
index e9c51de936..ff5498abc5 100644
--- a/web/app/components/workflow/dsl-export-confirm-modal.tsx
+++ b/web/app/components/workflow/dsl-export-confirm-modal.tsx
@@ -2,7 +2,7 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine, RiLock2Line } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import Modal from '@/app/components/base/modal'
 import Checkbox from '@/app/components/base/checkbox'
diff --git a/web/app/components/workflow/header/chat-variable-button.tsx b/web/app/components/workflow/header/chat-variable-button.tsx
index aa68182c23..b424ecffdc 100644
--- a/web/app/components/workflow/header/chat-variable-button.tsx
+++ b/web/app/components/workflow/header/chat-variable-button.tsx
@@ -3,7 +3,7 @@ import Button from '@/app/components/base/button'
 import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
   const { theme } = useTheme()
diff --git a/web/app/components/workflow/header/checklist.tsx b/web/app/components/workflow/header/checklist.tsx
index 15284a42f0..e284cca791 100644
--- a/web/app/components/workflow/header/checklist.tsx
+++ b/web/app/components/workflow/header/checklist.tsx
@@ -19,7 +19,7 @@ import type { ChecklistItem } from '../hooks/use-checklist'
 import type {
   CommonEdgeType,
 } from '../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/header/env-button.tsx b/web/app/components/workflow/header/env-button.tsx
index 26723305f1..f053097a0d 100644
--- a/web/app/components/workflow/header/env-button.tsx
+++ b/web/app/components/workflow/header/env-button.tsx
@@ -3,7 +3,7 @@ import Button from '@/app/components/base/button'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 
 const EnvButton = ({ disabled }: { disabled: boolean }) => {
diff --git a/web/app/components/workflow/header/global-variable-button.tsx b/web/app/components/workflow/header/global-variable-button.tsx
index a133cdeda5..6859521aee 100644
--- a/web/app/components/workflow/header/global-variable-button.tsx
+++ b/web/app/components/workflow/header/global-variable-button.tsx
@@ -3,7 +3,7 @@ import Button from '@/app/components/base/button'
 import { GlobalVariable } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 
 const GlobalVariableButton = ({ disabled }: { disabled: boolean }) => {
diff --git a/web/app/components/workflow/header/header-in-restoring.tsx b/web/app/components/workflow/header/header-in-restoring.tsx
index 3844232531..53abe2375d 100644
--- a/web/app/components/workflow/header/header-in-restoring.tsx
+++ b/web/app/components/workflow/header/header-in-restoring.tsx
@@ -20,7 +20,7 @@ import Button from '@/app/components/base/button'
 import { useInvalidAllLastRun } from '@/service/use-workflow'
 import { useHooksStore } from '../hooks-store'
 import useTheme from '@/hooks/use-theme'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type HeaderInRestoringProps = {
   onRestoreSettled?: () => void
diff --git a/web/app/components/workflow/header/run-and-history.tsx b/web/app/components/workflow/header/run-and-history.tsx
index 101167408e..ae4b462b29 100644
--- a/web/app/components/workflow/header/run-and-history.tsx
+++ b/web/app/components/workflow/header/run-and-history.tsx
@@ -10,7 +10,7 @@ import {
 import type { ViewHistoryProps } from './view-history'
 import ViewHistory from './view-history'
 import Checklist from './checklist'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import RunMode from './run-mode'
 
 const PreviewMode = memo(() => {
diff --git a/web/app/components/workflow/header/run-mode.tsx b/web/app/components/workflow/header/run-mode.tsx
index bd34cf6879..6ab826cc48 100644
--- a/web/app/components/workflow/header/run-mode.tsx
+++ b/web/app/components/workflow/header/run-mode.tsx
@@ -6,7 +6,7 @@ import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
 import { getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiLoader2Line, RiPlayLargeLine } from '@remixicon/react'
 import { StopCircle } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { useDynamicTestRunOptions } from '../hooks/use-dynamic-test-run-options'
diff --git a/web/app/components/workflow/header/scroll-to-selected-node-button.tsx b/web/app/components/workflow/header/scroll-to-selected-node-button.tsx
index d3e7248d9a..58aeccea1b 100644
--- a/web/app/components/workflow/header/scroll-to-selected-node-button.tsx
+++ b/web/app/components/workflow/header/scroll-to-selected-node-button.tsx
@@ -4,7 +4,7 @@ import { useNodes } from 'reactflow'
 import { useTranslation } from 'react-i18next'
 import type { CommonNodeType } from '../types'
 import { scrollToWorkflowNode } from '../utils/node-navigation'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const ScrollToSelectedNodeButton: FC = () => {
   const { t } = useTranslation()
diff --git a/web/app/components/workflow/header/undo-redo.tsx b/web/app/components/workflow/header/undo-redo.tsx
index fa276a67d3..4b2e9abc36 100644
--- a/web/app/components/workflow/header/undo-redo.tsx
+++ b/web/app/components/workflow/header/undo-redo.tsx
@@ -10,7 +10,7 @@ import { useWorkflowHistoryStore } from '../workflow-history-store'
 import Divider from '../../base/divider'
 import { useNodesReadOnly } from '@/app/components/workflow/hooks'
 import ViewWorkflowHistory from '@/app/components/workflow/header/view-workflow-history'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type UndoRedoProps = { handleUndo: () => void; handleRedo: () => void }
 const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
@@ -36,7 +36,7 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
         <div
           data-tooltip-id='workflow.undo'
           className={
-            classNames('system-sm-medium flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+            cn('system-sm-medium flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
               (nodesReadOnly || buttonsDisabled.undo)
               && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')}
           onClick={() => !nodesReadOnly && !buttonsDisabled.undo && handleUndo()}
@@ -48,10 +48,9 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
         <div
           data-tooltip-id='workflow.redo'
           className={
-            classNames('system-sm-medium flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+            cn('system-sm-medium flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
               (nodesReadOnly || buttonsDisabled.redo)
-              && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
-            )}
+              && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')}
           onClick={() => !nodesReadOnly && !buttonsDisabled.redo && handleRedo()}
         >
           <RiArrowGoForwardFill className='h-4 w-4' />
diff --git a/web/app/components/workflow/header/version-history-button.tsx b/web/app/components/workflow/header/version-history-button.tsx
index 3ae5c1aec9..416c6ef7e5 100644
--- a/web/app/components/workflow/header/version-history-button.tsx
+++ b/web/app/components/workflow/header/version-history-button.tsx
@@ -6,7 +6,7 @@ import Button from '../../base/button'
 import Tooltip from '../../base/tooltip'
 import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '../utils'
 import useTheme from '@/hooks/use-theme'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type VersionHistoryButtonProps = {
   onClick: () => Promise<unknown> | unknown
diff --git a/web/app/components/workflow/header/view-history.tsx b/web/app/components/workflow/header/view-history.tsx
index 93de136ab4..7e9e0ee3bb 100644
--- a/web/app/components/workflow/header/view-history.tsx
+++ b/web/app/components/workflow/header/view-history.tsx
@@ -20,7 +20,7 @@ import {
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
 import { ControlMode, WorkflowRunningStatus } from '../types'
 import { formatWorkflowRunIdentifier } from '../utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/header/view-workflow-history.tsx b/web/app/components/workflow/header/view-workflow-history.tsx
index 42afd18d25..bfef85382e 100644
--- a/web/app/components/workflow/header/view-workflow-history.tsx
+++ b/web/app/components/workflow/header/view-workflow-history.tsx
@@ -18,14 +18,13 @@ import {
 import TipPopup from '../operator/tip-popup'
 import type { WorkflowHistoryState } from '../workflow-history-store'
 import Divider from '../../base/divider'
-import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ChangeHistoryEntry = {
   label: string
@@ -142,10 +141,9 @@ const ViewWorkflowHistory = () => {
           >
             <div
               className={
-                classNames('flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+                cn('flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
                   open && 'bg-state-accent-active text-text-accent',
-                  nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
-                )}
+                  nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')}
               onClick={() => {
                 if (nodesReadOnly)
                   return
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 880f652026..4f6ee4e64a 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -91,7 +91,7 @@ import dynamic from 'next/dynamic'
 import useMatchSchemaType from './nodes/_base/components/variable/use-match-schema-type'
 import type { VarInInspect } from '@/types/workflow'
 import { fetchAllInspectVars } from '@/service/workflow'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   useAllBuiltInTools,
   useAllCustomTools,
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 5b75726aad..12bf649cda 100644
--- a/web/app/components/workflow/nodes/_base/components/add-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/add-button.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import {
   RiAddLine,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
index ef292fd468..96ae7e03e1 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
@@ -2,7 +2,7 @@ import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigge
 import type { ReactNode } from 'react'
 import { memo, useEffect, useMemo, useRef, useState } from 'react'
 import type { Strategy } from './agent-strategy'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiArrowDownSLine, RiErrorWarningFill } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
 import Link from 'next/link'
@@ -162,7 +162,7 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
           alt='icon'
         /></div>}
         <p
-          className={classNames(value ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder', 'px-1 text-xs')}
+          className={cn(value ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder', 'px-1 text-xs')}
         >
           {value?.agent_strategy_label || t('workflow.nodes.agent.strategy.selectTip')}
         </p>
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
index 0bb8b3844f..440cb1e338 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
@@ -22,7 +22,7 @@ import { Line3 } from '@/app/components/base/icons/src/public/common'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import BoolInput from './bool-input'
 import { useHooksStore } from '@/app/components/workflow/hooks-store'
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
index e24498e7eb..69873d8be2 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { produce } from 'immer'
 import type { InputVar } from '../../../../types'
 import FormItem from './form-item'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { InputVarType } from '@/app/components/workflow/types'
 import AddButton from '@/app/components/base/button/add-button'
 import { RETRIEVAL_OUTPUT_STRUCT } from '@/app/components/workflow/constants'
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 44abbb67b5..abde5bb7e8 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
@@ -4,7 +4,7 @@ import React, { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { Props as FormProps } from './form'
 import Form from './form'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import { InputVarType } from '@/app/components/workflow/types'
diff --git a/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx b/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
index 21b1cf0595..58dec6baba 100644
--- a/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useBoolean } from 'ahooks'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import type { CodeLanguage } from '../../code/types'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import { ActionButton } from '@/app/components/base/action-button'
diff --git a/web/app/components/workflow/nodes/_base/components/collapse/index.tsx b/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
index 16fba88a25..f7cf95ce7e 100644
--- a/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import { useMemo, useState } from 'react'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export { default as FieldCollapse } from './field-collapse'
 
diff --git a/web/app/components/workflow/nodes/_base/components/editor/base.tsx b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
index 2f9ca7dfd9..0b88f8c67d 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/base.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
@@ -6,7 +6,7 @@ import ToggleExpandBtn from '../toggle-expand-btn'
 import CodeGeneratorButton from '../code-generator-button'
 import type { CodeLanguage } from '../../../code/types'
 import Wrap from './wrap'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import PromptEditorHeightResizeWrap from '@/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap'
 import {
   Copy,
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
index 68b6e53064..0c6ad12540 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
@@ -5,7 +5,7 @@ import { useBoolean } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import type { Props as EditorProps } from '.'
 import Editor from '.'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 import type { NodeOutPutVar, Variable } from '@/app/components/workflow/types'
 
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
index 558dec7734..7ddea94036 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import Editor, { loader } from '@monaco-editor/react'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import Base from '../base'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import {
   getFilesInLogs,
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx
index b9a1745a21..a786f5adf4 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx
@@ -5,7 +5,7 @@ import { NodeSourceHandle } from '../node-handle'
 import { ErrorHandleTypeEnum } from './types'
 import type { Node } from '@/app/components/workflow/types'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ErrorHandleOnNodeProps = Pick<Node, 'id' | 'data'>
 const ErrorHandleOnNode = ({
diff --git a/web/app/components/workflow/nodes/_base/components/field.tsx b/web/app/components/workflow/nodes/_base/components/field.tsx
index aadcea1065..b77fa511cb 100644
--- a/web/app/components/workflow/nodes/_base/components/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/field.tsx
@@ -5,7 +5,7 @@ import {
   RiArrowDownSLine,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/_base/components/file-type-item.tsx b/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
index b6004fd3b7..fd07465225 100644
--- a/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { SupportUploadFileTypes } from '../../../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import TagInput from '@/app/components/base/tag-input'
 import Checkbox from '@/app/components/base/checkbox'
diff --git a/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx b/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
index 0dccf23e9e..ce41777471 100644
--- a/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
+++ b/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
@@ -1,7 +1,6 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
-import useSWR from 'swr'
 import { produce } from 'immer'
 import { useTranslation } from 'react-i18next'
 import type { UploadFileSetting } from '../../../types'
@@ -11,9 +10,9 @@ import FileTypeItem from './file-type-item'
 import InputNumberWithSlider from './input-number-with-slider'
 import Field from '@/app/components/app/configuration/config-var/config-modal/field'
 import { TransferMethod } from '@/types/app'
-import { fetchFileUploadConfig } from '@/service/common'
 import { useFileSizeLimit } from '@/app/components/base/file-uploader/hooks'
 import { formatFileSize } from '@/utils/format'
+import { useFileUploadConfig } from '@/service/use-common'
 
 type Props = {
   payload: UploadFileSetting
@@ -38,7 +37,7 @@ const FileUploadSetting: FC<Props> = ({
     allowed_file_types,
     allowed_file_extensions,
   } = payload
-  const { data: fileUploadConfigResponse } = useSWR({ url: '/files/upload' }, fetchFileUploadConfig)
+  const { data: fileUploadConfigResponse } = useFileUploadConfig()
   const {
     imgSizeLimit,
     docSizeLimit,
diff --git a/web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx b/web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx
index 07c3a087b9..2767d3b2fb 100644
--- a/web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   value: boolean
diff --git a/web/app/components/workflow/nodes/_base/components/form-input-item.tsx b/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
index 14a0f19317..7cf0043520 100644
--- a/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
@@ -22,7 +22,7 @@ import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/mo
 import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { RiCheckLine, RiLoader4Line } from '@remixicon/react'
diff --git a/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx b/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx
index 391e204844..c7af679e23 100644
--- a/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx
@@ -7,7 +7,7 @@ import {
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import Tooltip from '@/app/components/base/tooltip'
 import { VarType } from '@/app/components/workflow/nodes/tool/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   value: VarType
diff --git a/web/app/components/workflow/nodes/_base/components/group.tsx b/web/app/components/workflow/nodes/_base/components/group.tsx
index 53d18c8835..80157aca13 100644
--- a/web/app/components/workflow/nodes/_base/components/group.tsx
+++ b/web/app/components/workflow/nodes/_base/components/group.tsx
@@ -1,11 +1,11 @@
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react'
 
 export type GroupLabelProps = ComponentProps<'div'>
 
 export const GroupLabel: FC<GroupLabelProps> = (props) => {
   const { children, className, ...rest } = props
-  return <div {...rest} className={classNames('system-2xs-medium-uppercase mb-1 text-text-tertiary', className)}>
+  return <div {...rest} className={cn('system-2xs-medium-uppercase mb-1 text-text-tertiary', className)}>
     {children}
   </div>
 }
@@ -16,7 +16,7 @@ export type GroupProps = PropsWithChildren<{
 
 export const Group: FC<GroupProps> = (props) => {
   const { children, label } = props
-  return <div className={classNames('py-1')}>
+  return <div className={cn('py-1')}>
     {label}
     <div className='space-y-0.5'>
       {children}
diff --git a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
index 2a8ce9c370..8ffe301d67 100644
--- a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useEffect } from 'react'
 import { useBoolean } from 'ahooks'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type {
   Node,
   NodeOutPutVar,
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 b0d878d53d..385b69ee43 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
@@ -2,7 +2,7 @@ import Button from '@/app/components/base/button'
 import { RiInstallLine, RiLoader2Line } from '@remixicon/react'
 import type { ComponentProps, MouseEventHandler } from 'react'
 import { useState } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status'
 import { TaskStatus } from '@/app/components/plugins/types'
@@ -96,7 +96,7 @@ export const InstallPluginButton = (props: InstallPluginButtonProps) => {
     disabled={isLoading}
     {...rest}
     onClick={handleInstall}
-    className={classNames('flex items-center', className)}
+    className={cn('flex items-center', className)}
   >
     {!isLoading ? t('workflow.nodes.agent.pluginInstaller.install') : t('workflow.nodes.agent.pluginInstaller.installing')}
     {!isLoading ? <RiInstallLine className='ml-1 size-3.5' /> : <RiLoader2Line className='ml-1 size-3.5 animate-spin' />}
diff --git a/web/app/components/workflow/nodes/_base/components/layout/box.tsx b/web/app/components/workflow/nodes/_base/components/layout/box.tsx
index 35c2824cc8..ec4869d305 100644
--- a/web/app/components/workflow/nodes/_base/components/layout/box.tsx
+++ b/web/app/components/workflow/nodes/_base/components/layout/box.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { memo } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type BoxProps = {
   className?: string
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 8ab2d8de27..1a19ac2ab4 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
@@ -5,7 +5,7 @@ import {
 } from 'react'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type FieldTitleProps = {
   title?: string
diff --git a/web/app/components/workflow/nodes/_base/components/layout/group.tsx b/web/app/components/workflow/nodes/_base/components/layout/group.tsx
index 1443087031..446588eb45 100644
--- a/web/app/components/workflow/nodes/_base/components/layout/group.tsx
+++ b/web/app/components/workflow/nodes/_base/components/layout/group.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { memo } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type GroupProps = {
   className?: 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 0e274a2420..989f3f635d 100644
--- a/web/app/components/workflow/nodes/_base/components/memory-config.tsx
+++ b/web/app/components/workflow/nodes/_base/components/memory-config.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { produce } from 'immer'
 import type { Memory } from '../../../types'
 import { MemoryRole } from '../../../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Switch from '@/app/components/base/switch'
 import Slider from '@/app/components/base/slider'
diff --git a/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/index.tsx b/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/index.tsx
index 6680c8ebb6..5fc6bd0528 100644
--- a/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/index.tsx
@@ -9,7 +9,7 @@ import type {
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type MixedVariableTextInputProps = {
   readOnly?: boolean
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/container.tsx b/web/app/components/workflow/nodes/_base/components/next-step/container.tsx
index a419710080..5971ec8598 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/container.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/container.tsx
@@ -4,7 +4,7 @@ import type {
   CommonNodeType,
   Node,
 } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ContainerProps = {
   nodeId: string
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 85a4b28d4d..d9998fd226 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
@@ -15,7 +15,7 @@ import {
   useToolIcon,
 } from '@/app/components/workflow/hooks'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ItemProps = {
   nodeId: string
diff --git a/web/app/components/workflow/nodes/_base/components/node-handle.tsx b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
index 6cfa7a7b9e..5b46e79616 100644
--- a/web/app/components/workflow/nodes/_base/components/node-handle.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
@@ -27,7 +27,7 @@ import {
   useStore,
   useWorkflowStore,
 } from '../../../store'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type NodeHandleProps = {
   handleId: string
diff --git a/web/app/components/workflow/nodes/_base/components/node-resizer.tsx b/web/app/components/workflow/nodes/_base/components/node-resizer.tsx
index 7f8341469e..479e1ad56e 100644
--- a/web/app/components/workflow/nodes/_base/components/node-resizer.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-resizer.tsx
@@ -6,7 +6,7 @@ import type { OnResize } from 'reactflow'
 import { NodeResizeControl } from 'reactflow'
 import { useNodesInteractions } from '../../../hooks'
 import type { CommonNodeType } from '../../../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const Icon = () => {
   return (
diff --git a/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx b/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx
index 3ab65b800d..26fc3352b7 100644
--- a/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx
@@ -4,7 +4,7 @@ import {
   RiErrorWarningLine,
   RiLoader2Line,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type NodeStatusIconProps = {
   status: string
diff --git a/web/app/components/workflow/nodes/_base/components/option-card.tsx b/web/app/components/workflow/nodes/_base/components/option-card.tsx
index 79c8987aad..ebbdc92b2d 100644
--- a/web/app/components/workflow/nodes/_base/components/option-card.tsx
+++ b/web/app/components/workflow/nodes/_base/components/option-card.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import type { VariantProps } from 'class-variance-authority'
 import { cva } from 'class-variance-authority'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 
 const variants = cva([], {
diff --git a/web/app/components/workflow/nodes/_base/components/output-vars.tsx b/web/app/components/workflow/nodes/_base/components/output-vars.tsx
index ca075f22e2..b1599ce541 100644
--- a/web/app/components/workflow/nodes/_base/components/output-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/output-vars.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FieldCollapse } from '@/app/components/workflow/nodes/_base/components/collapse'
 import TreeIndentLine from './variable/object-child-tree-panel/tree-indent-line'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
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 181b38b75c..ff0e7c90b2 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -18,7 +18,7 @@ import type {
 import Wrap from '../editor/wrap'
 import { CodeLanguage } from '../../../code/types'
 import PromptGeneratorBtn from '../../../llm/components/prompt-generator-btn'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ToggleExpandBtn from '@/app/components/workflow/nodes/_base/components/toggle-expand-btn'
 import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-toggle-expend'
 import PromptEditor from '@/app/components/base/prompt-editor'
diff --git a/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx b/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
index c1927011dc..062ce278e2 100644
--- a/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import { useWorkflow } from '../../../hooks'
 import { BlockEnum } from '../../../types'
 import { getNodeInfoById, isSystemVar } from './variable/utils'
diff --git a/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx b/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx
index e25e116e78..a7594a9567 100644
--- a/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx
+++ b/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx
@@ -7,7 +7,7 @@ import {
 } from '@remixicon/react'
 import type { Node } from '@/app/components/workflow/types'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type RetryOnNodeProps = Pick<Node, 'id' | 'data'>
 const RetryOnNode = ({
diff --git a/web/app/components/workflow/nodes/_base/components/selector.tsx b/web/app/components/workflow/nodes/_base/components/selector.tsx
index b14741f670..7b02303b29 100644
--- a/web/app/components/workflow/nodes/_base/components/selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/selector.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useBoolean, useClickAway } from 'ahooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ChevronSelectorVertical } from '@/app/components/base/icons/src/vender/line/arrows'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
 type Item = {
diff --git a/web/app/components/workflow/nodes/_base/components/setting-item.tsx b/web/app/components/workflow/nodes/_base/components/setting-item.tsx
index abbfaef490..5dbb962624 100644
--- a/web/app/components/workflow/nodes/_base/components/setting-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/setting-item.tsx
@@ -1,6 +1,6 @@
 import Tooltip from '@/app/components/base/tooltip'
 import Indicator from '@/app/components/header/indicator'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { type ComponentProps, type PropsWithChildren, type ReactNode, memo } from 'react'
 
 export type SettingItemProps = PropsWithChildren<{
@@ -13,7 +13,7 @@ export const SettingItem = memo(({ label, children, status, tooltip }: SettingIt
   const indicator: ComponentProps<typeof Indicator>['color'] = status === 'error' ? 'red' : status === 'warning' ? 'yellow' : undefined
   const needTooltip = ['error', 'warning'].includes(status as any)
   return <div className='relative flex items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1.5 py-1 text-xs font-normal'>
-    <div className={classNames('system-xs-medium-uppercase max-w-full shrink-0 truncate text-text-tertiary', !!children && 'max-w-[100px]')}>
+    <div className={cn('system-xs-medium-uppercase max-w-full shrink-0 truncate text-text-tertiary', !!children && 'max-w-[100px]')}>
       {label}
     </div>
     <Tooltip popupContent={tooltip} disabled={!needTooltip}>
diff --git a/web/app/components/workflow/nodes/_base/components/split.tsx b/web/app/components/workflow/nodes/_base/components/split.tsx
index 28cd05f6da..fa5ea3adc1 100644
--- a/web/app/components/workflow/nodes/_base/components/split.tsx
+++ b/web/app/components/workflow/nodes/_base/components/split.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx b/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
index 47d80c109f..816bac812f 100644
--- a/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import VarHighlight from '@/app/components/app/configuration/base/var-highlight'
 type Props = {
   isFocus?: boolean
diff --git a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
index 7ecbbd5602..c9d698337d 100644
--- a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
+++ b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
@@ -8,7 +8,7 @@ import type { ReactNode } from 'react'
 import { type FC, useCallback, useState } from 'react'
 import { useBoolean } from 'ahooks'
 import { useCheckInstalled, useUpdatePackageFromMarketPlace } from '@/service/use-plugins'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import PluginMutationModel from '@/app/components/plugins/plugin-mutation-model'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import { pluginManifestToCardPluginProps } from '@/app/components/plugins/install-plugin/utils'
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
index ecc67885d1..ca8317e8d7 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { Type } from '../../../../../llm/types'
 import { getFieldType } from '../../../../../llm/utils'
 import type { Field as FieldType } from '../../../../../llm/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import TreeIndentLine from '../tree-indent-line'
 import { RiMoreFill } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx
index af86cc78cd..219d46df9c 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useRef } from 'react'
 import type { StructuredOutput } from '../../../../../llm/types'
 import Field from './field'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useHover } from 'ahooks'
 import type { ValueSelector } from '@/app/components/workflow/types'
 
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
index 62133f3212..e101d91021 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
@@ -1,5 +1,5 @@
 'use client'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiArrowDropDownLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import type { FC } from 'react'
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
index 475c119647..bbec1d7a00 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   depth?: number,
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 e2d86c009c..d37851f187 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
@@ -14,7 +14,7 @@ import Toast from '@/app/components/base/toast'
 import { ReactSortable } from 'react-sortablejs'
 import { v4 as uuid4 } from 'uuid'
 import { RiDraggable } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useDebounceFn } from 'ahooks'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
index 82c2dfd470..f532754aed 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -20,7 +20,7 @@ import useAvailableVarList from '../../hooks/use-available-var-list'
 import VarReferencePopup from './var-reference-popup'
 import { getNodeInfoById, isConversationVar, isENV, isGlobalVar, isRagVariableVar, isSystemVar, removeFileVars, varTypeToStructType } from './utils'
 import ConstantField from './constant-field'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CommonNodeType, Node, NodeOutPutVar, ToolWithProvider, ValueSelector, Var } from '@/app/components/workflow/types'
 import type { TriggerWithProvider } from '@/app/components/workflow/block-selector/types'
 import type { CredentialFormSchemaSelect } from '@/app/components/header/account-setting/model-provider-page/declarations'
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index ced4b7c65f..8461f0e5f6 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { useHover } from 'ahooks'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { type NodeOutPutVar, type ValueSelector, type Var, VarType } from '@/app/components/workflow/types'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import {
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
index f394fa96b8..fa2b9c1d6a 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import { RiArrowDownSLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-icon.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-icon.tsx
index 93f47f794a..b97287da1e 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-icon.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-icon.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useVarIcon } from '../hooks'
 import type { VarInInspectType } from '@/types/workflow'
 
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 a8acda7e2c..3eb31ae5e0 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
@@ -9,7 +9,7 @@ import { useVarColor } from '../hooks'
 import VariableNodeLabel from './variable-node-label'
 import VariableIcon from './variable-icon'
 import VariableName from './variable-name'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import { isConversationVar, isENV, isGlobalVar, isRagVariableVar } from '../../utils'
 
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-name.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-name.tsx
index f656b780a5..ea1ee539ed 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-name.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-name.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react'
 import { useVarName } from '../hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type VariableNameProps = {
   variables: string[]
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-icon-with-color.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-icon-with-color.tsx
index 56d6c3738e..793f6a93e5 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-icon-with-color.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-icon-with-color.tsx
@@ -2,7 +2,7 @@ import { memo } from 'react'
 import VariableIcon from './base/variable-icon'
 import type { VariableIconProps } from './base/variable-icon'
 import { useVarColor } from './hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type VariableIconWithColorProps = {
   isExceptionVariable?: boolean
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx
index fa5ae57f91..05774e59c2 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx
@@ -2,7 +2,7 @@ import { memo } from 'react'
 import type { VariablePayload } from './types'
 import VariableLabel from './base/variable-label'
 import { useVarBgColorInEditor } from './hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type VariableLabelInEditorProps = {
   isSelected?: boolean
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-node.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-node.tsx
index cebe140e26..db3484affa 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-node.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-node.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react'
 import type { VariablePayload } from './types'
 import VariableLabel from './base/variable-label'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const VariableLabelInNode = (variablePayload: VariablePayload) => {
   return (
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-text.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-text.tsx
index dd0d6fcf8b..eb66943fbc 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-text.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-text.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react'
 import type { VariablePayload } from './types'
 import VariableLabel from './base/variable-label'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const VariableLabelInText = (variablePayload: VariablePayload) => {
   return (
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
index bcc108daa7..309b88ffe2 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
@@ -44,7 +44,7 @@ import { useAllBuiltInTools } from '@/service/use-tools'
 import { useAllTriggerPlugins } from '@/service/use-triggers'
 import { FlowType } from '@/types/common'
 import { canFindTool } from '@/utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import {
   RiCloseLine,
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/trigger-subscription.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/trigger-subscription.tsx
index 811516df3d..52c6d4fe18 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/trigger-subscription.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/trigger-subscription.tsx
@@ -2,7 +2,7 @@ import type { SimpleSubscription } from '@/app/components/plugins/plugin-detail-
 import { CreateButtonType, CreateSubscriptionButton } from '@/app/components/plugins/plugin-detail-panel/subscription-list/create'
 import { SubscriptionSelectorEntry } from '@/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry'
 import { useSubscriptionList } from '@/app/components/plugins/plugin-detail-panel/subscription-list/use-subscription-list'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FC } from 'react'
 
 type TriggerSubscriptionProps = {
diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
index e19ce6ece0..263732cd70 100644
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@@ -38,7 +38,7 @@ import ErrorHandleOnNode from './components/error-handle/error-handle-on-node'
 import RetryOnNode from './components/retry/retry-on-node'
 import AddVariablePopupWithPosition from './components/add-variable-popup-with-position'
 import EntryNodeContainer, { StartNodeTypeEnum } from './components/entry-node-container'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import Tooltip from '@/app/components/base/tooltip'
 import useInspectVarsCrud from '@/app/components/workflow/hooks/use-inspect-vars-crud'
diff --git a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
index 8e6993a78d..0d2be2bee4 100644
--- a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
+++ b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
@@ -1,6 +1,6 @@
 import Tooltip from '@/app/components/base/tooltip'
 import Indicator from '@/app/components/header/indicator'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { memo, useMemo, useRef, useState } from 'react'
 import { useAllBuiltInTools, useAllCustomTools, useAllMCPTools, useAllWorkflowTools } from '@/service/use-tools'
 import { getIconFromMarketPlace } from '@/utils/get-icon'
@@ -60,9 +60,7 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
     disabled={!notSuccess}
   >
     <div
-      className={classNames(
-        'relative',
-      )}
+      className={cn('relative')}
       ref={containerRef}
     >
       <div className="flex size-5 items-center justify-center overflow-hidden rounded-[6px] border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge">
@@ -73,19 +71,15 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
             return <img
               src={icon}
               alt='tool icon'
-              className={classNames(
-                'size-3.5 h-full w-full object-cover',
-                notSuccess && 'opacity-50',
-              )}
+              className={cn('size-3.5 h-full w-full object-cover',
+                notSuccess && 'opacity-50')}
               onError={() => setIconFetchError(true)}
             />
           }
           if (typeof icon === 'object') {
             return <AppIcon
-              className={classNames(
-                'size-3.5 h-full w-full object-cover',
-                notSuccess && 'opacity-50',
-              )}
+              className={cn('size-3.5 h-full w-full object-cover',
+                notSuccess && 'opacity-50')}
               icon={icon?.content}
               background={icon?.background}
             />
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 dbb1fbff77..986a1b034b 100644
--- a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
@@ -4,7 +4,7 @@ import {
   RiArrowDownSLine,
   RiCheckLine,
 } from '@remixicon/react'
-import classNames from 'classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 import type { WriteMode } from '../types'
 import { getOperationItems } from '../utils'
@@ -65,12 +65,10 @@ const OperationSelector: FC<OperationSelectorProps> = ({
         onClick={() => !disabled && setOpen(v => !v)}
       >
         <div
-          className={classNames(
-            'flex items-center gap-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1',
+          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,
-          )}
+            className)}
         >
           <div className='flex items-center p-1'>
             <span
@@ -98,10 +96,8 @@ const OperationSelector: FC<OperationSelectorProps> = ({
                 : (
                   <div
                     key={item.value}
-                    className={classNames(
-                      'flex items-center gap-1 self-stretch rounded-lg px-2 py-1',
-                      'cursor-pointer hover:bg-state-base-hover',
-                    )}
+                    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)
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 6b4e249f3b..b85cb94e95 100644
--- a/web/app/components/workflow/nodes/data-source-empty/index.tsx
+++ b/web/app/components/workflow/nodes/data-source-empty/index.tsx
@@ -5,7 +5,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import type { NodeProps } from 'reactflow'
 import { RiAddLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import { useReplaceDataSourceNode } from './hooks'
diff --git a/web/app/components/workflow/nodes/http/components/api-input.tsx b/web/app/components/workflow/nodes/http/components/api-input.tsx
index 000011e4cd..62ce0f15c6 100644
--- a/web/app/components/workflow/nodes/http/components/api-input.tsx
+++ b/web/app/components/workflow/nodes/http/components/api-input.tsx
@@ -8,7 +8,7 @@ import Selector from '../../_base/components/selector'
 import useAvailableVarList from '../../_base/hooks/use-available-var-list'
 import { VarType } from '../../../types'
 import type { Var } from '../../../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 
 const MethodOptions = [
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 f12806050f..7fd811dfbc 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
@@ -13,7 +13,7 @@ import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 import BaseInput from '@/app/components/base/input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'workflow.nodes.http.authorization'
 
diff --git a/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx b/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx
index fe58ce2ede..d5d12d7f34 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Option = {
   value: string
diff --git a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
index 97cc1e4575..050f54f040 100644
--- a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
@@ -8,7 +8,7 @@ import { BodyPayloadValueType, BodyType } from '../../types'
 import KeyValue from '../key-value'
 import useAvailableVarList from '../../../_base/hooks/use-available-var-list'
 import VarReferencePicker from '../../../_base/components/variable/var-reference-picker'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import InputWithVar from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import { VarType } from '@/app/components/workflow/types'
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
index 53b2dd85e2..d107520c75 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
@@ -5,7 +5,7 @@ import { produce } from 'immer'
 import { useTranslation } from 'react-i18next'
 import type { KeyValue } from '../../../types'
 import KeyValueItem from './item'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'workflow.nodes.http'
 
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
index 72e4d781fe..80c42209d6 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useAvailableVarList from '../../../../_base/hooks/use-available-var-list'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 import type { Var } from '@/app/components/workflow/types'
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 73095704b0..5a27d1efa1 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
@@ -6,7 +6,7 @@ import { produce } from 'immer'
 import type { KeyValue } from '../../../types'
 import VarReferencePicker from '../../../../_base/components/variable/var-reference-picker'
 import InputItem from './input-item'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { PortalSelect } from '@/app/components/base/select'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import { VarType } from '@/app/components/workflow/types'
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index b994910ea0..a174ff4742 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -9,7 +9,7 @@ import AuthorizationModal from './components/authorization'
 import type { HttpNodeType } from './types'
 import Timeout from './components/timeout'
 import CurlPanel from './components/curl-panel'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Switch from '@/app/components/base/switch'
 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/if-else/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
index 65dac6f5be..af87b70196 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
@@ -35,7 +35,7 @@ import type {
   Var,
 } from '@/app/components/workflow/types'
 import { VarType } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { SimpleSelect as Select } from '@/app/components/base/select'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import BoolValue from '@/app/components/workflow/panel/chat-variable-panel/components/bool-value'
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 a2b3cb7589..1763afdfd1 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
@@ -13,7 +13,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import type { VarType } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 const i18nPrefix = 'workflow.nodes.ifElse'
 
 type ConditionOperatorProps = {
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
index 9d8c813be4..6c03dd8412 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
@@ -17,7 +17,7 @@ import type {
   NodeOutPutVar,
   Var,
 } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ConditionListProps = {
   isSubVariable?: boolean
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 ee13894459..a13fbef011 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
@@ -15,7 +15,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 import type {
   NodeOutPutVar,
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 30629307f2..e9352d154e 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
@@ -15,7 +15,7 @@ import { useGetAvailableVars } from '../../variable-assigner/hooks'
 import { SUB_VARIABLES } from '../../constants'
 import ConditionList from './condition-list'
 import ConditionAdd from './condition-add'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import { PortalSelect as Select } from '@/app/components/base/select'
 import { noop } from 'lodash-es'
diff --git a/web/app/components/workflow/nodes/iteration/add-block.tsx b/web/app/components/workflow/nodes/iteration/add-block.tsx
index 05d69caef4..e838fe560b 100644
--- a/web/app/components/workflow/nodes/iteration/add-block.tsx
+++ b/web/app/components/workflow/nodes/iteration/add-block.tsx
@@ -12,7 +12,7 @@ import {
   useNodesReadOnly,
 } from '../../hooks'
 import type { IterationNodeType } from './types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import type {
   OnSelectBlock,
diff --git a/web/app/components/workflow/nodes/iteration/node.tsx b/web/app/components/workflow/nodes/iteration/node.tsx
index 59b96b1e2d..98ef98e7c4 100644
--- a/web/app/components/workflow/nodes/iteration/node.tsx
+++ b/web/app/components/workflow/nodes/iteration/node.tsx
@@ -14,7 +14,7 @@ import { IterationStartNodeDumb } from '../iteration-start'
 import { useNodeIterationInteractions } from './use-interactions'
 import type { IterationNodeType } from './types'
 import AddBlock from './add-block'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { NodeProps } from '@/app/components/workflow/types'
 import Toast from '@/app/components/base/toast'
 
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx
index 938da941bc..876c91862f 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx
@@ -4,7 +4,7 @@ import {
   ParentChildChunk,
   QuestionAndAnswer,
 } from '@/app/components/base/icons/src/vender/knowledge'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ChunkStructureEnum } from '../../types'
 import type { Option } from './type'
 
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx
index 596f7993c0..b621eaf04d 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { AddChunks } from '@/app/components/base/icons/src/vender/knowledge'
 import Line from './line'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 import { useDocLink } from '@/context/i18n'
 
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 9a16fe7695..cf93c4191d 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
@@ -13,7 +13,7 @@ import Slider from '@/app/components/base/slider'
 import Input from '@/app/components/base/input'
 import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
 import OptionCard from './option-card'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   ChunkStructureEnum,
   IndexMethodEnum,
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx b/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx
index 99ee0d25b5..fed53f798a 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx
@@ -4,7 +4,7 @@ import {
   useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Badge from '@/app/components/base/badge'
 import {
   OptionCardEffectBlue,
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 6f260573ff..70996ddd57 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
@@ -4,7 +4,7 @@ import {
   useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import WeightedScoreComponent from '@/app/components/app/configuration/dataset-config/params-config/weighted-score'
 import { DEFAULT_WEIGHTED_SCORE } from '@/models/datasets'
 import Switch from '@/app/components/base/switch'
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx
index eda040131f..ed8192239a 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx
@@ -7,7 +7,7 @@ import {
 } from '@remixicon/react'
 import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
 import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useAppContext } from '@/context/app-context'
 
 type ConditionDateProps = {
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx
index a93155113e..42f3a085bc 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx
@@ -24,7 +24,7 @@ import type {
   MetadataShape,
 } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 import { MetadataFilteringVariableType } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ConditionItemProps = {
   className?: string
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 0e0367c15e..93a078ff5d 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
@@ -14,7 +14,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type {
   ComparisonOperator,
   MetadataFilteringVariableType,
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 917cb0e099..562cda76e4 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
@@ -7,7 +7,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type ConditionValueMethodProps = {
   valueMethod?: string
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx
index 4b129f4c31..49da29ce7b 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx
@@ -1,6 +1,6 @@
 import { RiLoopLeftLine } from '@remixicon/react'
 import ConditionItem from './condition-item'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { MetadataShape } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 import { LogicalOperator } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-icon.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-icon.tsx
index 4a3f539ef4..4c327ce882 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-icon.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-icon.tsx
@@ -5,7 +5,7 @@ import {
   RiTimeLine,
 } from '@remixicon/react'
 import { MetadataFilteringVariableType } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type MetadataIconProps = {
   type?: MetadataFilteringVariableType
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 619216d672..80587b864f 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,7 +5,7 @@ import { RiEqualizer2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import type { MultipleRetrievalConfig, SingleRetrievalConfig } from '../types'
 import type { ModelConfig } from '../../../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx b/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
index 38931f074a..66f23829e8 100644
--- a/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { VarType } from '../../../types'
 import type { Var } from '../../../types'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx b/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
index 4030b8df1e..a51aefe9c6 100644
--- a/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
@@ -12,7 +12,7 @@ import { SimpleSelect as Select } from '@/app/components/base/select'
 import BoolValue from '../../../panel/chat-variable-panel/components/bool-value'
 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 cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { VarType } from '../../../types'
 
 const optionNameI18NPrefix = 'workflow.nodes.ifElse.optionName'
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 b8812d3473..6a54eac8ab 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
@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { Limit } from '../types'
 import InputNumberWithSlider from '../../_base/components/input-number-with-slider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Switch from '@/app/components/base/switch'
 
diff --git a/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx b/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
index 88e1067c6d..9d835436d9 100644
--- a/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
@@ -6,7 +6,7 @@ import { SUB_VARIABLES } from '../../constants'
 import type { Item } from '@/app/components/base/select'
 import { SimpleSelect as Select } from '@/app/components/base/select'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   value: string
diff --git a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
index 35ea2fed68..d44d299bc4 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
@@ -10,7 +10,7 @@ import { EditionType, PromptRole } from '../../../types'
 import useAvailableVarList from '../../_base/hooks/use-available-var-list'
 import { useWorkflowStore } from '../../../store'
 import ConfigPromptItem from './config-prompt-item'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import AddButton from '@/app/components/workflow/nodes/_base/components/add-button'
 import { DragHandle } from '@/app/components/base/icons/src/vender/line/others'
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
index 384776f671..3ca2162206 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
@@ -1,7 +1,7 @@
 import React, { type FC, useCallback, useEffect, useMemo, useRef } from 'react'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Editor } from '@monaco-editor/react'
 import { RiClipboardLine, RiIndentIncrease } from '@remixicon/react'
 import copy from 'copy-to-clipboard'
@@ -112,7 +112,7 @@ const CodeEditor: FC<CodeEditorProps> = ({
   }, [])
 
   return (
-    <div className={classNames('flex h-full flex-col overflow-hidden bg-components-input-bg-normal', hideTopMenu && 'pt-2', className)}>
+    <div className={cn('flex h-full flex-col overflow-hidden bg-components-input-bg-normal', hideTopMenu && 'pt-2', className)}>
       {!hideTopMenu && (
         <div className='flex items-center justify-between pl-2 pr-1 pt-1'>
           <div className='system-xs-semibold-uppercase py-0.5 text-text-secondary'>
@@ -142,7 +142,7 @@ const CodeEditor: FC<CodeEditorProps> = ({
         </div>
       )}
       {topContent}
-      <div className={classNames('relative overflow-hidden', editorWrapperClassName)}>
+      <div className={cn('relative overflow-hidden', editorWrapperClassName)}>
         <Editor
           defaultLanguage='json'
           theme={isMounted ? editorTheme : 'default-theme'} // sometimes not load the default theme
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx
index 6e8a2b2fad..937165df1c 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import type { FC } from 'react'
 import { RiErrorWarningFill } from '@remixicon/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ErrorMessageProps = {
   message: string
@@ -12,10 +12,8 @@ const ErrorMessage: FC<ErrorMessageProps> = ({
   className,
 }) => {
   return (
-    <div className={classNames(
-      'mt-1 flex gap-x-1 rounded-lg border-[0.5px] border-components-panel-border bg-toast-error-bg p-2',
-      className,
-    )}>
+    <div className={cn('mt-1 flex gap-x-1 rounded-lg border-[0.5px] border-components-panel-border bg-toast-error-bg p-2',
+      className)}>
       <RiErrorWarningFill className='h-4 w-4 shrink-0 text-text-destructive' />
       <div className='system-xs-medium max-h-12 grow overflow-y-auto whitespace-pre-line break-words text-text-primary'>
         {message}
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 463d87d7d1..41539ec605 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,6 +1,6 @@
 import React, { type FC, useCallback, useEffect, useRef, useState } from 'react'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
 import Button from '@/app/components/base/button'
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 1a4eb3cfdb..2671858628 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
@@ -10,7 +10,7 @@ import type { CompletionParams, Model } from '@/types/app'
 import { ModelModeType } from '@/types/app'
 import { Theme } from '@/types/app'
 import { SchemaGeneratorDark, SchemaGeneratorLight } from './assets'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import PromptEditor from './prompt-editor'
 import GeneratedResult from './generated-result'
 import { useGenerateStructuredOutputRules } from '@/service/use-common'
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx
index 2497dec188..6ba59320b7 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx
@@ -1,6 +1,6 @@
 import React, { type FC } from 'react'
 import CodeEditor from './code-editor'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import LargeDataAlert from '@/app/components/workflow/variable-inspect/large-data-alert'
 
 type SchemaEditorProps = {
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/auto-width-input.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/auto-width-input.tsx
index af4a82c772..19dc478e83 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/auto-width-input.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/auto-width-input.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import type { FC } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type AutoWidthInputProps = {
   value: string
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
index 2733fcc11f..643bc2ef13 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
@@ -9,7 +9,7 @@ import Actions from './actions'
 import AdvancedActions from './advanced-actions'
 import AdvancedOptions, { type AdvancedOptionsType } from './advanced-options'
 import { useTranslation } from 'react-i18next'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useVisualEditorStore } from '../store'
 import { useMittContext } from '../context'
 import { useUnmount } from 'ahooks'
@@ -255,7 +255,7 @@ const EditCard: FC<EditCardProps> = ({
       </div>
 
       {(fields.description || isAdvancedEditing) && (
-        <div className={classNames('flex', isAdvancedEditing ? 'p-2 pt-1' : 'px-2 pb-1')}>
+        <div className={cn('flex', isAdvancedEditing ? 'p-2 pt-1' : 'px-2 pb-1')}>
           <input
             value={currentFields.description}
             className='system-xs-regular placeholder:system-xs-regular h-4 w-full p-0 text-text-tertiary caret-[#295EFF] outline-none placeholder:text-text-placeholder'
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
index 84d75e1ada..c4d381613d 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
@@ -3,7 +3,7 @@ import type { ArrayType, Type } from '../../../../types'
 import type { FC } from 'react'
 import { useState } from 'react'
 import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type TypeItem = {
   value: Type | ArrayType
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
index d96f856bbb..f0f8bb2093 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import type { SchemaRoot } from '../../../types'
 import SchemaNode from './schema-node'
 import { useSchemaNodeOperations } from './hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type VisualEditorProps = {
   className?: string
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
index 4c20232df4..ec7b355085 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import React, { useMemo, useState } from 'react'
 import { type Field, Type } from '../../../types'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiArrowDropDownLine, RiArrowDropRightLine } from '@remixicon/react'
 import { getFieldType, getHasChildren } from '../../../utils'
 import Divider from '@/app/components/base/divider'
@@ -92,12 +92,10 @@ const SchemaNode: FC<SchemaNodeProps> = ({
 
   return (
     <div className='relative'>
-      <div className={classNames('relative z-10', indentPadding[depth])}>
+      <div className={cn('relative z-10', indentPadding[depth])}>
         {depth > 0 && hasChildren && (
-          <div className={classNames(
-            'absolute top-0 z-10 flex h-7 w-5 items-center bg-background-section-burn px-0.5',
-            indentLeft[depth - 1],
-          )}>
+          <div className={cn('absolute top-0 z-10 flex h-7 w-5 items-center bg-background-section-burn px-0.5',
+            indentLeft[depth - 1])}>
             <button
               type="button"
               onClick={handleExpand}
@@ -140,14 +138,12 @@ const SchemaNode: FC<SchemaNodeProps> = ({
         </div>
       </div>
 
-      <div className={classNames(
-        'absolute z-0 flex w-5 justify-center',
+      <div className={cn('absolute z-0 flex w-5 justify-center',
         schema.description ? 'top-12 h-[calc(100%-3rem)]' : 'top-7 h-[calc(100%-1.75rem)]',
-        indentLeft[depth],
-      )}>
+        indentLeft[depth])}>
         <Divider
           type='vertical'
-          className={classNames('mx-0', isHovering ? 'bg-divider-deep' : 'bg-divider-subtle')}
+          className={cn('mx-0', isHovering ? 'bg-divider-deep' : 'bg-divider-subtle')}
         />
       </div>
 
diff --git a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
index a2b96535fa..60b910dc3e 100644
--- a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
+++ b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useBoolean } from 'ahooks'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import { ActionButton } from '@/app/components/base/action-button'
 import GetAutomaticResModal from '@/app/components/app/configuration/config/automatic/get-automatic-res'
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 b20820df2e..ee31a9e5ad 100644
--- a/web/app/components/workflow/nodes/llm/components/structure-output.tsx
+++ b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
@@ -7,7 +7,7 @@ import { type SchemaRoot, type StructuredOutput, Type } from '../types'
 import ShowPanel from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show'
 import { useBoolean } from 'ahooks'
 import JsonSchemaConfigModal from './json-schema-config-modal'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/loop/add-block.tsx b/web/app/components/workflow/nodes/loop/add-block.tsx
index 9e2fa5b555..d86d9f83cb 100644
--- a/web/app/components/workflow/nodes/loop/add-block.tsx
+++ b/web/app/components/workflow/nodes/loop/add-block.tsx
@@ -12,7 +12,7 @@ import {
   useNodesReadOnly,
 } from '../../hooks'
 import type { LoopNodeType } from './types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BlockSelector from '@/app/components/workflow/block-selector'
 
 import type {
diff --git a/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx
index 3f51217991..0ecae8f052 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx
@@ -32,7 +32,7 @@ import type {
   Var,
 } from '@/app/components/workflow/types'
 import { VarType } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { SimpleSelect as Select } from '@/app/components/base/select'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import ConditionVarSelector from './condition-var-selector'
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 9036e04d3b..49c1d6e64f 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
@@ -13,7 +13,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import type { VarType } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 const i18nPrefix = 'workflow.nodes.ifElse'
 
 type ConditionOperatorProps = {
diff --git a/web/app/components/workflow/nodes/loop/components/condition-list/index.tsx b/web/app/components/workflow/nodes/loop/components/condition-list/index.tsx
index 987452dd5e..8cfcc5d811 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-list/index.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-list/index.tsx
@@ -16,7 +16,7 @@ import type {
   Node,
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ConditionListProps = {
   isSubVariable?: boolean
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 ee13894459..a13fbef011 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
@@ -15,7 +15,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 import type {
   NodeOutPutVar,
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 7aef364658..6812554767 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
@@ -12,7 +12,7 @@ import { useGetAvailableVars } from '../../variable-assigner/hooks'
 import ConditionList from './condition-list'
 import ConditionAdd from './condition-add'
 import { SUB_VARIABLES } from './../default'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import { PortalSelect as Select } from '@/app/components/base/select'
 
diff --git a/web/app/components/workflow/nodes/loop/insert-block.tsx b/web/app/components/workflow/nodes/loop/insert-block.tsx
index 66d51956ba..57eef5d17a 100644
--- a/web/app/components/workflow/nodes/loop/insert-block.tsx
+++ b/web/app/components/workflow/nodes/loop/insert-block.tsx
@@ -3,7 +3,7 @@ import {
   useCallback,
   useState,
 } from 'react'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import { useNodesInteractions } from '../../hooks'
 import type {
   BlockEnum,
diff --git a/web/app/components/workflow/nodes/loop/node.tsx b/web/app/components/workflow/nodes/loop/node.tsx
index 57be10be6e..feacb2ec4d 100644
--- a/web/app/components/workflow/nodes/loop/node.tsx
+++ b/web/app/components/workflow/nodes/loop/node.tsx
@@ -12,7 +12,7 @@ import { LoopStartNodeDumb } from '../loop-start'
 import { useNodeLoopInteractions } from './use-interactions'
 import type { LoopNodeType } from './types'
 import AddBlock from './add-block'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 import type { NodeProps } from '@/app/components/workflow/types'
 
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
index 7b8354f6d5..af2efad075 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
@@ -7,7 +7,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import BlockSelector from '../../../../block-selector'
 import type { Param, ParamType } from '../../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type {
   PluginDefaultValue,
   ToolDefaultValue,
diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
index 6b9c75bacb..e4300008ec 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
@@ -10,7 +10,7 @@ import type { Topic } from '@/app/components/workflow/nodes/question-classifier/
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import { ReactSortable } from 'react-sortablejs'
 import { noop } from 'lodash-es'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiDraggable } from '@remixicon/react'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 
diff --git a/web/app/components/workflow/nodes/start/components/var-item.tsx b/web/app/components/workflow/nodes/start/components/var-item.tsx
index e51cd79734..6bce5d0f0f 100644
--- a/web/app/components/workflow/nodes/start/components/var-item.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-item.tsx
@@ -13,7 +13,7 @@ import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
 import Badge from '@/app/components/base/badge'
 import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
 import { noop } from 'lodash-es'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
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 44d6e389e2..4b5177bb3e 100644
--- a/web/app/components/workflow/nodes/start/components/var-list.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-list.tsx
@@ -7,7 +7,7 @@ import VarItem from './var-item'
 import { ChangeType, type InputVar, type MoreInfo } from '@/app/components/workflow/types'
 import { ReactSortable } from 'react-sortablejs'
 import { RiDraggable } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { hasDuplicateStr } from '@/utils/var'
 import Toast from '@/app/components/base/toast'
 
diff --git a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx b/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
index eb53979197..605cbab75e 100644
--- a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
+++ b/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
@@ -5,7 +5,7 @@ import { produce } from 'immer'
 import { useTranslation } from 'react-i18next'
 import type { ToolVarInputs } from '../types'
 import { VarType as VarKindType } from '../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { ToolWithProvider, ValueSelector, Var } from '@/app/components/workflow/types'
 import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
diff --git a/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx b/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx
index fa50727123..98a88e5e0f 100644
--- a/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx
+++ b/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx
@@ -9,7 +9,7 @@ import type {
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useStore } from '@/app/components/workflow/store'
 
 type MixedVariableTextInputProps = {
diff --git a/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx b/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx
index 235593d7f3..eaf3f399d7 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx
@@ -6,7 +6,7 @@ import Input from '@/app/components/base/input'
 import Checkbox from '@/app/components/base/checkbox'
 import { SimpleSelect } from '@/app/components/base/select'
 import { replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 // Tiny utility to judge whether a cell value is effectively present
 const isPresent = (v: unknown): boolean => {
diff --git a/web/app/components/workflow/nodes/trigger-webhook/components/paragraph-input.tsx b/web/app/components/workflow/nodes/trigger-webhook/components/paragraph-input.tsx
index f3946f5d3d..b26238fdd1 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/components/paragraph-input.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/components/paragraph-input.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { useRef } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ParagraphInputProps = {
   value: string
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 09f44548ab..2f3ca14b5d 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,7 +5,7 @@ import {
 } from 'react'
 import { useVariableAssigner } from '../../hooks'
 import type { VariableAssignerNodeType } from '../../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx b/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
index e96475b953..540dfecfd9 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
@@ -19,7 +19,7 @@ import {
 import { filterVar } from '../utils'
 import AddVariable from './add-variable'
 import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { isExceptionVariable } from '@/app/components/workflow/utils'
 import {
   VariableLabelInNode,
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx b/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
index b4fc76d548..f891f44e7a 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
@@ -3,7 +3,7 @@ import {
   useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import { Line3 } from '@/app/components/base/icons/src/public/common'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
diff --git a/web/app/components/workflow/nodes/variable-assigner/panel.tsx b/web/app/components/workflow/nodes/variable-assigner/panel.tsx
index 67ec1020c3..a605808f95 100644
--- a/web/app/components/workflow/nodes/variable-assigner/panel.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/panel.tsx
@@ -6,7 +6,7 @@ import RemoveEffectVarConfirm from '../_base/components/remove-effect-var-confir
 import useConfig from './use-config'
 import type { VariableAssignerNodeType } from './types'
 import VarGroupItem from './components/var-group-item'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { NodePanelProps } from '@/app/components/workflow/types'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
diff --git a/web/app/components/workflow/note-node/index.tsx b/web/app/components/workflow/note-node/index.tsx
index 5a0b2677c1..6b81a0fe1f 100644
--- a/web/app/components/workflow/note-node/index.tsx
+++ b/web/app/components/workflow/note-node/index.tsx
@@ -20,7 +20,7 @@ import {
 import { THEME_MAP } from './constants'
 import { useNote } from './hooks'
 import type { NoteNodeType } from './types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const Icon = () => {
   return (
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 2dcd2952a9..556b7409c7 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
@@ -20,7 +20,7 @@ import {
 } from '@remixicon/react'
 import { useStore } from '../../store'
 import { useLink } from './hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 
 type LinkEditorComponentProps = {
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
index 00f242f727..ccf70fdc90 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
@@ -4,7 +4,7 @@ import {
 } from 'react'
 import { NoteTheme } from '../../types'
 import { THEME_MAP } from '../../constants'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx
index b07989e587..1a1d8f20ec 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx
@@ -12,7 +12,7 @@ import {
 } from '@remixicon/react'
 import { useStore } from '../store'
 import { useCommand } from './hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 
 type CommandProps = {
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx
index 7b530c167c..b03e176482 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx
@@ -2,7 +2,7 @@ import { memo } from 'react'
 import { RiFontSize } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useFontSize } from './hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
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 e994bc389a..8ba0ad4caf 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
@@ -4,7 +4,7 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiMoreFill } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import {
   PortalToFollowElem,
diff --git a/web/app/components/workflow/operator/add-block.tsx b/web/app/components/workflow/operator/add-block.tsx
index c40f2277bb..d1c69ba63d 100644
--- a/web/app/components/workflow/operator/add-block.tsx
+++ b/web/app/components/workflow/operator/add-block.tsx
@@ -21,7 +21,7 @@ import {
 import { useHooksStore } from '../hooks-store'
 import { useWorkflowStore } from '../store'
 import TipPopup from './tip-popup'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import type {
   OnSelectBlock,
diff --git a/web/app/components/workflow/operator/control.tsx b/web/app/components/workflow/operator/control.tsx
index 7f1225de86..636f83bb2d 100644
--- a/web/app/components/workflow/operator/control.tsx
+++ b/web/app/components/workflow/operator/control.tsx
@@ -26,7 +26,7 @@ import AddBlock from './add-block'
 import TipPopup from './tip-popup'
 import MoreActions from './more-actions'
 import { useOperator } from './hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const Control = () => {
   const { t } = useTranslation()
diff --git a/web/app/components/workflow/operator/more-actions.tsx b/web/app/components/workflow/operator/more-actions.tsx
index 100df29560..52c81612da 100644
--- a/web/app/components/workflow/operator/more-actions.tsx
+++ b/web/app/components/workflow/operator/more-actions.tsx
@@ -11,7 +11,7 @@ import { RiExportLine, RiMoreFill } from '@remixicon/react'
 import { toJpeg, toPng, toSvg } from 'html-to-image'
 import { useNodesReadOnly } from '../hooks'
 import TipPopup from './tip-popup'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx
index 19d8eef463..703304c27c 100644
--- a/web/app/components/workflow/operator/zoom-in-out.tsx
+++ b/web/app/components/workflow/operator/zoom-in-out.tsx
@@ -22,7 +22,7 @@ import {
 import ShortcutsName from '../shortcuts-name'
 import Divider from '../../base/divider'
 import TipPopup from './tip-popup'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/panel-contextmenu.tsx b/web/app/components/workflow/panel-contextmenu.tsx
index 2ee69df671..8d0811f853 100644
--- a/web/app/components/workflow/panel-contextmenu.tsx
+++ b/web/app/components/workflow/panel-contextmenu.tsx
@@ -16,7 +16,7 @@ import {
 } from './hooks'
 import AddBlock from './operator/add-block'
 import { useOperator } from './operator/hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const PanelContextmenu = () => {
   const { t } = useTranslation()
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 328a696e86..810d5ba5d5 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
@@ -7,7 +7,7 @@ import { produce } from 'immer'
 import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
 import Button from '@/app/components/base/button'
 import BoolValue from './bool-value'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
index 3e46b7afcb..54e8fc4f6c 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
@@ -3,7 +3,7 @@ import { capitalize } from 'lodash-es'
 import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
 import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
 import type { ConversationVariable } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type VariableItemProps = {
   item: ConversationVariable
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 5e476027e9..15f8a081fb 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
@@ -15,7 +15,7 @@ import { useStore } from '@/app/components/workflow/store'
 import type { ConversationVariable } from '@/app/components/workflow/types'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BoolValue from './bool-value'
 import ArrayBoolList from './array-bool-list'
 import {
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
index eea0ec2a90..360775a06c 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
@@ -6,7 +6,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   inCell?: boolean
diff --git a/web/app/components/workflow/panel/chat-variable-panel/index.tsx b/web/app/components/workflow/panel/chat-variable-panel/index.tsx
index 7006c18cc5..b075cabf5d 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/index.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/index.tsx
@@ -22,7 +22,7 @@ import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/node
 import { useNodesSyncDraft } from '@/app/components/workflow/hooks/use-nodes-sync-draft'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { useDocLink } from '@/context/i18n'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
 
 const ChatVariablePanel = () => {
diff --git a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
index 6cb0b92aad..043a842f23 100644
--- a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
@@ -20,7 +20,7 @@ import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import useTimestamp from '@/hooks/use-timestamp'
 import { fetchCurrentValueOfConversationVariable } from '@/service/workflow'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 export type Props = {
diff --git a/web/app/components/workflow/panel/debug-and-preview/index.tsx b/web/app/components/workflow/panel/debug-and-preview/index.tsx
index 9c64849dc5..7f8deb3a74 100644
--- a/web/app/components/workflow/panel/debug-and-preview/index.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/index.tsx
@@ -18,7 +18,7 @@ import { BlockEnum } from '../../types'
 import type { StartNodeType } from '../../nodes/start/types'
 import { useResizePanel } from '../../nodes/_base/hooks/use-resize-panel'
 import ChatWrapper from './chat-wrapper'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
 import Tooltip from '@/app/components/base/tooltip'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
diff --git a/web/app/components/workflow/panel/debug-and-preview/user-input.tsx b/web/app/components/workflow/panel/debug-and-preview/user-input.tsx
index b7ed2a54fd..75acfac8b2 100644
--- a/web/app/components/workflow/panel/debug-and-preview/user-input.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/user-input.tsx
@@ -9,7 +9,7 @@ import {
   useWorkflowStore,
 } from '../../store'
 import type { StartNodeType } from '../../nodes/start/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const UserInput = () => {
   const workflowStore = useWorkflowStore()
diff --git a/web/app/components/workflow/panel/env-panel/env-item.tsx b/web/app/components/workflow/panel/env-panel/env-item.tsx
index 33ed45cb67..f0afe4d6d0 100644
--- a/web/app/components/workflow/panel/env-panel/env-item.tsx
+++ b/web/app/components/workflow/panel/env-panel/env-item.tsx
@@ -4,7 +4,7 @@ import { RiDeleteBinLine, RiEditLine, RiLock2Line } from '@remixicon/react'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type EnvItemProps = {
   env: EnvironmentVariable
diff --git a/web/app/components/workflow/panel/env-panel/index.tsx b/web/app/components/workflow/panel/env-panel/index.tsx
index 135f5814ec..47aeb94b47 100644
--- a/web/app/components/workflow/panel/env-panel/index.tsx
+++ b/web/app/components/workflow/panel/env-panel/index.tsx
@@ -16,7 +16,7 @@ import type {
 } from '@/app/components/workflow/types'
 import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import RemoveEffectVarConfirm from '@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useNodesSyncDraft } from '@/app/components/workflow/hooks/use-nodes-sync-draft'
 
 const EnvPanel = () => {
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 1c780f7341..acf3ca0a0b 100644
--- a/web/app/components/workflow/panel/env-panel/variable-modal.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
@@ -9,7 +9,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import { ToastContext } from '@/app/components/base/toast'
 import { useStore } from '@/app/components/workflow/store'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
 
 export type ModalPropsType = {
diff --git a/web/app/components/workflow/panel/global-variable-panel/index.tsx b/web/app/components/workflow/panel/global-variable-panel/index.tsx
index a421a1605a..ab7cf4708b 100644
--- a/web/app/components/workflow/panel/global-variable-panel/index.tsx
+++ b/web/app/components/workflow/panel/global-variable-panel/index.tsx
@@ -7,7 +7,7 @@ import type { GlobalVariable } from '../../types'
 import Item from './item'
 import { useStore } from '@/app/components/workflow/store'
 
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 import { useIsChatMode } from '../../hooks'
 import { isInWorkflowPage } from '../../constants'
diff --git a/web/app/components/workflow/panel/global-variable-panel/item.tsx b/web/app/components/workflow/panel/global-variable-panel/item.tsx
index 5185c1bead..c88222efb4 100644
--- a/web/app/components/workflow/panel/global-variable-panel/item.tsx
+++ b/web/app/components/workflow/panel/global-variable-panel/item.tsx
@@ -3,7 +3,7 @@ import { capitalize } from 'lodash-es'
 import { GlobalVariable as GlobalVariableIcon } from '@/app/components/base/icons/src/vender/line/others'
 
 import type { GlobalVariable } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   payload: GlobalVariable
diff --git a/web/app/components/workflow/panel/index.tsx b/web/app/components/workflow/panel/index.tsx
index 07472f1393..8b4ba27ec3 100644
--- a/web/app/components/workflow/panel/index.tsx
+++ b/web/app/components/workflow/panel/index.tsx
@@ -6,7 +6,7 @@ import { useStore as useReactflow } from 'reactflow'
 import { Panel as NodePanel } from '../nodes'
 import { useStore } from '../store'
 import EnvPanel from './env-panel'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import dynamic from 'next/dynamic'
 
 const VersionHistoryPanel = dynamic(() => import('@/app/components/workflow/panel/version-history-panel'), {
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 dcfcb24be7..61916b0200 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,6 +1,6 @@
 import React, { type FC } from 'react'
 import type { VersionHistoryContextMenuOptions } from '../../../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type MenuItemProps = {
   item: {
diff --git a/web/app/components/workflow/panel/version-history-panel/filter/index.tsx b/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
index bd5812aa53..e37bbe2269 100644
--- a/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
@@ -10,7 +10,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Divider from '@/app/components/base/divider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type FilterProps = {
   filterValue: WorkflowVersionFilterOptions
diff --git a/web/app/components/workflow/panel/version-history-panel/loading/item.tsx b/web/app/components/workflow/panel/version-history-panel/loading/item.tsx
index 96d1fde02d..ff2d746801 100644
--- a/web/app/components/workflow/panel/version-history-panel/loading/item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/loading/item.tsx
@@ -1,5 +1,5 @@
 import React, { type FC } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ItemProps = {
   titleWidth: string
diff --git a/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx b/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx
index 797a3fbe4f..558e8ab720 100644
--- a/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import dayjs from 'dayjs'
 import { useTranslation } from 'react-i18next'
 import ContextMenu from './context-menu'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { VersionHistory } from '@/types/workflow'
 import { type VersionHistoryContextMenuOptions, WorkflowVersion } from '../../types'
 
diff --git a/web/app/components/workflow/panel/workflow-preview.tsx b/web/app/components/workflow/panel/workflow-preview.tsx
index 292a964b9e..0a702d5ce3 100644
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@@ -23,7 +23,7 @@ import {
 import { formatWorkflowRunIdentifier } from '../utils'
 import Toast from '../../base/toast'
 import InputsPanel from './inputs-panel'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Loading from '@/app/components/base/loading'
 import Button from '@/app/components/base/button'
 
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 ce81e361ec..fd375fde45 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
@@ -6,7 +6,7 @@ import {
   RiArrowRightSLine,
   RiListView,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import type { AgentLogItemWithChildren } from '@/types/workflow'
 import NodeStatusIcon from '@/app/components/workflow/nodes/_base/components/node-status-icon'
diff --git a/web/app/components/workflow/run/index.tsx b/web/app/components/workflow/run/index.tsx
index 1256077458..9162429c4d 100644
--- a/web/app/components/workflow/run/index.tsx
+++ b/web/app/components/workflow/run/index.tsx
@@ -8,7 +8,7 @@ import ResultPanel from './result-panel'
 import StatusPanel from './status'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import TracingPanel from './tracing-panel'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ToastContext } from '@/app/components/base/toast'
 import Loading from '@/app/components/base/loading'
 import { fetchRunDetail, fetchTracingList } from '@/service/log'
diff --git a/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx b/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
index 3d9ad87890..60293dbd2b 100644
--- a/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
+++ b/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
@@ -11,7 +11,7 @@ import {
 import { NodeRunningStatus } from '@/app/components/workflow/types'
 import TracingPanel from '@/app/components/workflow/run/tracing-panel'
 import { Iteration } from '@/app/components/base/icons/src/vender/workflow'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
 const i18nPrefix = 'workflow.singleRun'
 
diff --git a/web/app/components/workflow/run/loop-log/loop-result-panel.tsx b/web/app/components/workflow/run/loop-log/loop-result-panel.tsx
index 18871537e9..5ce2101d63 100644
--- a/web/app/components/workflow/run/loop-log/loop-result-panel.tsx
+++ b/web/app/components/workflow/run/loop-log/loop-result-panel.tsx
@@ -11,7 +11,7 @@ import {
 import { NodeRunningStatus } from '@/app/components/workflow/types'
 import TracingPanel from '@/app/components/workflow/run/tracing-panel'
 import { Loop } from '@/app/components/base/icons/src/vender/workflow'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { LoopDurationMap, LoopVariableMap, NodeTracing } from '@/types/workflow'
 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/workflow/run/loop-result-panel.tsx b/web/app/components/workflow/run/loop-result-panel.tsx
index 836bef8819..e87e8e54f7 100644
--- a/web/app/components/workflow/run/loop-result-panel.tsx
+++ b/web/app/components/workflow/run/loop-result-panel.tsx
@@ -9,7 +9,7 @@ import {
 import { ArrowNarrowLeft } from '../../base/icons/src/vender/line/arrows'
 import TracingPanel from './tracing-panel'
 import { Loop } from '@/app/components/base/icons/src/vender/workflow'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { NodeTracing } from '@/types/workflow'
 
 const i18nPrefix = 'workflow.singleRun'
diff --git a/web/app/components/workflow/run/node.tsx b/web/app/components/workflow/run/node.tsx
index 33124907f3..6482433cde 100644
--- a/web/app/components/workflow/run/node.tsx
+++ b/web/app/components/workflow/run/node.tsx
@@ -15,7 +15,7 @@ import { RetryLogTrigger } from './retry-log'
 import { IterationLogTrigger } from './iteration-log'
 import { LoopLogTrigger } from './loop-log'
 import { AgentLogTrigger } from './agent-log'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import StatusContainer from '@/app/components/workflow/run/status-container'
 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/workflow/run/status-container.tsx b/web/app/components/workflow/run/status-container.tsx
index 6837592c4e..618c25a3f4 100644
--- a/web/app/components/workflow/run/status-container.tsx
+++ b/web/app/components/workflow/run/status-container.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import { Theme } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useTheme from '@/hooks/use-theme'
 
 type Props = {
diff --git a/web/app/components/workflow/run/status.tsx b/web/app/components/workflow/run/status.tsx
index 823ede2be4..7b272ee444 100644
--- a/web/app/components/workflow/run/status.tsx
+++ b/web/app/components/workflow/run/status.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Indicator from '@/app/components/header/indicator'
 import StatusContainer from '@/app/components/workflow/run/status-container'
 import { useDocLink } from '@/context/i18n'
diff --git a/web/app/components/workflow/run/tracing-panel.tsx b/web/app/components/workflow/run/tracing-panel.tsx
index 22d49792b9..77f64dfba8 100644
--- a/web/app/components/workflow/run/tracing-panel.tsx
+++ b/web/app/components/workflow/run/tracing-panel.tsx
@@ -6,7 +6,7 @@ React,
   useCallback,
   useState,
 } from 'react'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import {
   RiArrowDownSLine,
   RiMenu4Line,
diff --git a/web/app/components/workflow/shortcuts-name.tsx b/web/app/components/workflow/shortcuts-name.tsx
index 9dd8c4bcd1..c901d0c2d1 100644
--- a/web/app/components/workflow/shortcuts-name.tsx
+++ b/web/app/components/workflow/shortcuts-name.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react'
 import { getKeyboardKeyNameBySystem } from './utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ShortcutsNameProps = {
   keys: string[]
diff --git a/web/app/components/workflow/simple-node/index.tsx b/web/app/components/workflow/simple-node/index.tsx
index 09e57de863..d6f0804f34 100644
--- a/web/app/components/workflow/simple-node/index.tsx
+++ b/web/app/components/workflow/simple-node/index.tsx
@@ -15,7 +15,7 @@ import {
   NodeTargetHandle,
 } from '@/app/components/workflow/nodes/_base/components/node-handle'
 import NodeControl from '@/app/components/workflow/nodes/_base/components/node-control'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import type {
   NodeProps,
diff --git a/web/app/components/workflow/variable-inspect/display-content.tsx b/web/app/components/workflow/variable-inspect/display-content.tsx
index e4098cfe53..249f948719 100644
--- a/web/app/components/workflow/variable-inspect/display-content.tsx
+++ b/web/app/components/workflow/variable-inspect/display-content.tsx
@@ -5,7 +5,7 @@ import Textarea from '@/app/components/base/textarea'
 import { Markdown } from '@/app/components/base/markdown'
 import SchemaEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor'
 import { SegmentedControl } from '@/app/components/base/segmented-control'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ChunkCardList } from '@/app/components/rag-pipeline/components/chunk-card-list'
 import type { ChunkInfo } from '@/app/components/rag-pipeline/components/chunk-card-list/types'
 import type { ParentMode } from '@/models/datasets'
diff --git a/web/app/components/workflow/variable-inspect/group.tsx b/web/app/components/workflow/variable-inspect/group.tsx
index 923c5ce289..0887a3823d 100644
--- a/web/app/components/workflow/variable-inspect/group.tsx
+++ b/web/app/components/workflow/variable-inspect/group.tsx
@@ -14,7 +14,7 @@ import BlockIcon from '@/app/components/workflow/block-icon'
 import type { currentVarType } from './panel'
 import { VarInInspectType } from '@/types/workflow'
 import type { NodeWithVar, VarInInspect } from '@/types/workflow'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useToolIcon } from '../hooks'
 import { VariableIconWithColor } from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
 
diff --git a/web/app/components/workflow/variable-inspect/index.tsx b/web/app/components/workflow/variable-inspect/index.tsx
index 9da35c152c..64466ee312 100644
--- a/web/app/components/workflow/variable-inspect/index.tsx
+++ b/web/app/components/workflow/variable-inspect/index.tsx
@@ -7,7 +7,7 @@ import { debounce } from 'lodash-es'
 import { useStore } from '../store'
 import { useResizePanel } from '../nodes/_base/hooks/use-resize-panel'
 import Panel from './panel'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const VariableInspectPanel: FC = () => {
   const showVariableInspectPanel = useStore(s => s.showVariableInspectPanel)
diff --git a/web/app/components/workflow/variable-inspect/large-data-alert.tsx b/web/app/components/workflow/variable-inspect/large-data-alert.tsx
index 35b3648154..a6e00bf591 100644
--- a/web/app/components/workflow/variable-inspect/large-data-alert.tsx
+++ b/web/app/components/workflow/variable-inspect/large-data-alert.tsx
@@ -2,7 +2,7 @@
 import { RiInformation2Fill } from '@remixicon/react'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 type Props = {
diff --git a/web/app/components/workflow/variable-inspect/left.tsx b/web/app/components/workflow/variable-inspect/left.tsx
index ecc5836781..b177440b2f 100644
--- a/web/app/components/workflow/variable-inspect/left.tsx
+++ b/web/app/components/workflow/variable-inspect/left.tsx
@@ -11,7 +11,7 @@ import { useNodesInteractions } from '../hooks/use-nodes-interactions'
 import type { currentVarType } from './panel'
 import type { VarInInspect } from '@/types/workflow'
 import { VarInInspectType } from '@/types/workflow'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   currentNodeVar?: currentVarType
diff --git a/web/app/components/workflow/variable-inspect/panel.tsx b/web/app/components/workflow/variable-inspect/panel.tsx
index c0ad4cd159..047bede826 100644
--- a/web/app/components/workflow/variable-inspect/panel.tsx
+++ b/web/app/components/workflow/variable-inspect/panel.tsx
@@ -14,7 +14,7 @@ import ActionButton from '@/app/components/base/action-button'
 import type { VarInInspect } from '@/types/workflow'
 import { VarInInspectType } from '@/types/workflow'
 
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { NodeProps } from '../types'
 import useMatchSchemaType from '../nodes/_base/components/variable/use-match-schema-type'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
diff --git a/web/app/components/workflow/variable-inspect/right.tsx b/web/app/components/workflow/variable-inspect/right.tsx
index dcbc951533..9fbf18dd64 100644
--- a/web/app/components/workflow/variable-inspect/right.tsx
+++ b/web/app/components/workflow/variable-inspect/right.tsx
@@ -19,7 +19,7 @@ import BlockIcon from '@/app/components/workflow/block-icon'
 import Loading from '@/app/components/base/loading'
 import type { currentVarType } from './panel'
 import { VarInInspectType } from '@/types/workflow'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useNodeInfo from '../nodes/_base/hooks/use-node-info'
 import { useBoolean } from 'ahooks'
 import GetAutomaticResModal from '@/app/components/app/configuration/config/automatic/get-automatic-res'
diff --git a/web/app/components/workflow/variable-inspect/trigger.tsx b/web/app/components/workflow/variable-inspect/trigger.tsx
index 6b2fc38329..33161a6c5e 100644
--- a/web/app/components/workflow/variable-inspect/trigger.tsx
+++ b/web/app/components/workflow/variable-inspect/trigger.tsx
@@ -11,7 +11,7 @@ import { NodeRunningStatus } from '@/app/components/workflow/types'
 import type { CommonNodeType } from '@/app/components/workflow/types'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useNodesReadOnly } from '../hooks/use-workflow'
 
 const VariableInspectTrigger: FC = () => {
diff --git a/web/app/components/workflow/variable-inspect/value-content.tsx b/web/app/components/workflow/variable-inspect/value-content.tsx
index 47546a863e..0009fb4580 100644
--- a/web/app/components/workflow/variable-inspect/value-content.tsx
+++ b/web/app/components/workflow/variable-inspect/value-content.tsx
@@ -19,7 +19,7 @@ import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import type { VarInInspect } from '@/types/workflow'
 import { VarInInspectType } from '@/types/workflow'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import LargeDataAlert from './large-data-alert'
 import BoolValue from '../panel/chat-variable-panel/components/bool-value'
 import { useStore } from '@/app/components/workflow/store'
diff --git a/web/app/components/workflow/workflow-preview/components/error-handle-on-node.tsx b/web/app/components/workflow/workflow-preview/components/error-handle-on-node.tsx
index 3f1e2120a5..03ee1c7f47 100644
--- a/web/app/components/workflow/workflow-preview/components/error-handle-on-node.tsx
+++ b/web/app/components/workflow/workflow-preview/components/error-handle-on-node.tsx
@@ -5,7 +5,7 @@ import { NodeSourceHandle } from './node-handle'
 import { ErrorHandleTypeEnum } from '@/app/components/workflow/nodes/_base/components/error-handle/types'
 import type { Node } from '@/app/components/workflow/types'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ErrorHandleOnNodeProps = Pick<Node, 'id' | 'data'>
 const ErrorHandleOnNode = ({
diff --git a/web/app/components/workflow/workflow-preview/components/node-handle.tsx b/web/app/components/workflow/workflow-preview/components/node-handle.tsx
index 2211e3397f..dd44daf1e4 100644
--- a/web/app/components/workflow/workflow-preview/components/node-handle.tsx
+++ b/web/app/components/workflow/workflow-preview/components/node-handle.tsx
@@ -9,7 +9,7 @@ import {
   BlockEnum,
 } from '@/app/components/workflow/types'
 import type { Node } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type NodeHandleProps = {
   handleId: string
diff --git a/web/app/components/workflow/workflow-preview/components/nodes/base.tsx b/web/app/components/workflow/workflow-preview/components/nodes/base.tsx
index c7483c11bb..58df273917 100644
--- a/web/app/components/workflow/workflow-preview/components/nodes/base.tsx
+++ b/web/app/components/workflow/workflow-preview/components/nodes/base.tsx
@@ -6,7 +6,7 @@ import {
   memo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import type {
   NodeProps,
diff --git a/web/app/components/workflow/workflow-preview/components/nodes/iteration/node.tsx b/web/app/components/workflow/workflow-preview/components/nodes/iteration/node.tsx
index fbbbfc716f..5f1ba79810 100644
--- a/web/app/components/workflow/workflow-preview/components/nodes/iteration/node.tsx
+++ b/web/app/components/workflow/workflow-preview/components/nodes/iteration/node.tsx
@@ -7,7 +7,7 @@ import {
   useViewport,
 } from 'reactflow'
 import type { IterationNodeType } from '@/app/components/workflow/nodes/iteration/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { NodeProps } from '@/app/components/workflow/types'
 
 const Node: FC<NodeProps<IterationNodeType>> = ({
diff --git a/web/app/components/workflow/workflow-preview/components/nodes/loop/node.tsx b/web/app/components/workflow/workflow-preview/components/nodes/loop/node.tsx
index f41fa120a6..9cd3eec716 100644
--- a/web/app/components/workflow/workflow-preview/components/nodes/loop/node.tsx
+++ b/web/app/components/workflow/workflow-preview/components/nodes/loop/node.tsx
@@ -9,7 +9,7 @@ import {
   useViewport,
 } from 'reactflow'
 import type { LoopNodeType } from '@/app/components/workflow/nodes/loop/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { NodeProps } from '@/app/components/workflow/types'
 import { useNodeLoopInteractions } from './hooks'
 
diff --git a/web/app/components/workflow/workflow-preview/components/note-node/index.tsx b/web/app/components/workflow/workflow-preview/components/note-node/index.tsx
index 4cbba996f3..48390efb9c 100644
--- a/web/app/components/workflow/workflow-preview/components/note-node/index.tsx
+++ b/web/app/components/workflow/workflow-preview/components/note-node/index.tsx
@@ -10,7 +10,7 @@ import {
 } from '@/app/components/workflow/note-node/note-editor'
 import { THEME_MAP } from '@/app/components/workflow/note-node/constants'
 import type { NoteNodeType } from '@/app/components/workflow/note-node/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const NoteNode = ({
   data,
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 0576f317a0..2322db25ee 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
@@ -17,7 +17,7 @@ import {
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import Divider from '@/app/components/base/divider'
 import TipPopup from '@/app/components/workflow/operator/tip-popup'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/workflow-preview/index.tsx b/web/app/components/workflow/workflow-preview/index.tsx
index 5fd4b9097c..5ce85a8804 100644
--- a/web/app/components/workflow/workflow-preview/index.tsx
+++ b/web/app/components/workflow/workflow-preview/index.tsx
@@ -28,7 +28,7 @@ import {
   CUSTOM_NODE,
   ITERATION_CHILDREN_Z_INDEX,
 } from '@/app/components/workflow/constants'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   initialEdges,
   initialNodes,
diff --git a/web/app/education-apply/role-selector.tsx b/web/app/education-apply/role-selector.tsx
index b8448a0052..e6d6a67b89 100644
--- a/web/app/education-apply/role-selector.tsx
+++ b/web/app/education-apply/role-selector.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type RoleSelectorProps = {
   onChange: (value: string) => void
diff --git a/web/app/forgot-password/ChangePasswordForm.tsx b/web/app/forgot-password/ChangePasswordForm.tsx
index cb02ca44db..66119ea691 100644
--- a/web/app/forgot-password/ChangePasswordForm.tsx
+++ b/web/app/forgot-password/ChangePasswordForm.tsx
@@ -1,30 +1,28 @@
 'use client'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import { useSearchParams } from 'next/navigation'
 import { basePath } from '@/utils/var'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import { CheckCircleIcon } from '@heroicons/react/24/solid'
 import Input from '../components/base/input'
 import Button from '@/app/components/base/button'
-import { changePasswordWithToken, verifyForgotPasswordToken } from '@/service/common'
+import { changePasswordWithToken } from '@/service/common'
 import Toast from '@/app/components/base/toast'
 import Loading from '@/app/components/base/loading'
 import { validPassword } from '@/config'
+import { useVerifyForgotPasswordToken } from '@/service/use-common'
 
 const ChangePasswordForm = () => {
   const { t } = useTranslation()
   const searchParams = useSearchParams()
   const token = searchParams.get('token')
+  const isTokenMissing = !token
 
-  const verifyTokenParams = {
-    url: '/forgot-password/validity',
-    body: { token },
-  }
-  const { data: verifyTokenRes, mutate: revalidateToken } = useSWR(verifyTokenParams, verifyForgotPasswordToken, {
-    revalidateOnFocus: false,
-  })
+  const {
+    data: verifyTokenRes,
+    refetch: revalidateToken,
+  } = useVerifyForgotPasswordToken(token)
 
   const [password, setPassword] = useState('')
   const [confirmPassword, setConfirmPassword] = useState('')
@@ -82,8 +80,8 @@ const ChangePasswordForm = () => {
         'md:px-[108px]',
       )
     }>
-      {!verifyTokenRes && <Loading />}
-      {verifyTokenRes && !verifyTokenRes.is_valid && (
+      {!isTokenMissing && !verifyTokenRes && <Loading />}
+      {(isTokenMissing || (verifyTokenRes && !verifyTokenRes.is_valid)) && (
         <div className="flex flex-col md:w-[400px]">
           <div className="mx-auto w-full">
             <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">🤷‍♂️</div>
diff --git a/web/app/forgot-password/page.tsx b/web/app/forgot-password/page.tsx
index 3b92b7b013..3c78f734ad 100644
--- a/web/app/forgot-password/page.tsx
+++ b/web/app/forgot-password/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 import React from 'react'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import { useSearchParams } from 'next/navigation'
 import Header from '../signin/_header'
 import ForgotPasswordForm from './ForgotPasswordForm'
diff --git a/web/app/init/page.tsx b/web/app/init/page.tsx
index c3d439fcb1..2842f3a739 100644
--- a/web/app/init/page.tsx
+++ b/web/app/init/page.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import InitPasswordPopup from './InitPasswordPopup'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const Install = () => {
   return (
diff --git a/web/app/install/installForm.tsx b/web/app/install/installForm.tsx
index 01bfd59b6d..48956888fc 100644
--- a/web/app/install/installForm.tsx
+++ b/web/app/install/installForm.tsx
@@ -11,7 +11,7 @@ import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import Loading from '../components/base/loading'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 
 import { fetchInitValidateStatus, fetchSetupStatus, login, setup } from '@/service/common'
@@ -177,7 +177,7 @@ const InstallForm = () => {
                   </div>
                 </div>
 
-                <div className={classNames('mt-1 text-xs text-text-secondary', {
+                <div className={cn('mt-1 text-xs text-text-secondary', {
                   'text-red-400 !text-sm': errors.password,
                 })}>{t('login.error.passwordInvalid')}</div>
               </div>
diff --git a/web/app/install/page.tsx b/web/app/install/page.tsx
index 304f44b35c..b3cdeb5ca4 100644
--- a/web/app/install/page.tsx
+++ b/web/app/install/page.tsx
@@ -2,7 +2,7 @@
 import React from 'react'
 import Header from '../signin/_header'
 import InstallForm from './installForm'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const Install = () => {
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 5830bc2f1b..94a26eb776 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -12,7 +12,7 @@ import './styles/markdown.scss'
 import GlobalPublicStoreProvider from '@/context/global-public-context'
 import { DatasetAttr } from '@/types/feature'
 import { Instrument_Serif } from 'next/font/google'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export const viewport: Viewport = {
   width: 'device-width',
diff --git a/web/app/reset-password/layout.tsx b/web/app/reset-password/layout.tsx
index 979c64e7c9..724873f30f 100644
--- a/web/app/reset-password/layout.tsx
+++ b/web/app/reset-password/layout.tsx
@@ -1,7 +1,7 @@
 'use client'
 import Header from '../signin/_header'
 
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 export default function SignInLayout({ children }: any) {
diff --git a/web/app/reset-password/set-password/page.tsx b/web/app/reset-password/set-password/page.tsx
index 18b7ac12fb..30950a3dff 100644
--- a/web/app/reset-password/set-password/page.tsx
+++ b/web/app/reset-password/set-password/page.tsx
@@ -2,7 +2,7 @@
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRouter, useSearchParams } from 'next/navigation'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import { RiCheckboxCircleFill } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
 import Button from '@/app/components/base/button'
diff --git a/web/app/signin/components/social-auth.tsx b/web/app/signin/components/social-auth.tsx
index dc43224549..1afac0809b 100644
--- a/web/app/signin/components/social-auth.tsx
+++ b/web/app/signin/components/social-auth.tsx
@@ -3,7 +3,7 @@ import { useSearchParams } from 'next/navigation'
 import style from '../page.module.css'
 import Button from '@/app/components/base/button'
 import { API_PREFIX } from '@/config'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { getPurifyHref } from '@/utils'
 
 type SocialAuthProps = {
@@ -30,10 +30,8 @@ export default function SocialAuth(props: SocialAuthProps) {
         >
           <>
             <span className={
-              classNames(
-                style.githubIcon,
-                'mr-2 h-5 w-5',
-              )
+              cn(style.githubIcon,
+                'mr-2 h-5 w-5')
             } />
             <span className="truncate leading-normal">{t('login.withGitHub')}</span>
           </>
@@ -48,10 +46,8 @@ export default function SocialAuth(props: SocialAuthProps) {
         >
           <>
             <span className={
-              classNames(
-                style.googleIcon,
-                'mr-2 h-5 w-5',
-              )
+              cn(style.googleIcon,
+                'mr-2 h-5 w-5')
             } />
             <span className="truncate leading-normal">{t('login.withGoogle')}</span>
           </>
diff --git a/web/app/signin/invite-settings/page.tsx b/web/app/signin/invite-settings/page.tsx
index cbd37f51f6..de8d6c60ea 100644
--- a/web/app/signin/invite-settings/page.tsx
+++ b/web/app/signin/invite-settings/page.tsx
@@ -5,7 +5,6 @@ import { useCallback, useState } from 'react'
 import Link from 'next/link'
 import { useContext } from 'use-context-selector'
 import { useRouter, useSearchParams } from 'next/navigation'
-import useSWR from 'swr'
 import { RiAccountCircleLine } from '@remixicon/react'
 import Input from '@/app/components/base/input'
 import { SimpleSelect } from '@/app/components/base/select'
@@ -13,12 +12,13 @@ import Button from '@/app/components/base/button'
 import { timezones } from '@/utils/timezone'
 import { LanguagesSupported, languages } from '@/i18n-config/language'
 import I18n from '@/context/i18n'
-import { activateMember, invitationCheck } from '@/service/common'
+import { activateMember } from '@/service/common'
 import Loading from '@/app/components/base/loading'
 import Toast from '@/app/components/base/toast'
 import { noop } from 'lodash-es'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { resolvePostLoginRedirect } from '../utils/post-login-redirect'
+import { useInvitationCheck } from '@/service/use-common'
 
 export default function InviteSettingsPage() {
   const { t } = useTranslation()
@@ -38,9 +38,7 @@ export default function InviteSettingsPage() {
       token,
     },
   }
-  const { data: checkRes, mutate: recheck } = useSWR(checkParams, invitationCheck, {
-    revalidateOnFocus: false,
-  })
+  const { data: checkRes, refetch: recheck } = useInvitationCheck(checkParams.params, !!token)
 
   const handleActivate = useCallback(async () => {
     try {
diff --git a/web/app/signin/layout.tsx b/web/app/signin/layout.tsx
index 7e7280f5b8..17922f7892 100644
--- a/web/app/signin/layout.tsx
+++ b/web/app/signin/layout.tsx
@@ -1,7 +1,7 @@
 'use client'
 import Header from './_header'
 
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
 
diff --git a/web/app/signin/normal-form.tsx b/web/app/signin/normal-form.tsx
index 29e21b8ba2..260eb8c0cb 100644
--- a/web/app/signin/normal-form.tsx
+++ b/web/app/signin/normal-form.tsx
@@ -8,7 +8,7 @@ import MailAndCodeAuth from './components/mail-and-code-auth'
 import MailAndPasswordAuth from './components/mail-and-password-auth'
 import SocialAuth from './components/social-auth'
 import SSOAuth from './components/sso-auth'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { invitationCheck } from '@/service/common'
 import { LicenseStatus } from '@/types/feature'
 import Toast from '@/app/components/base/toast'
diff --git a/web/app/signin/one-more-step.tsx b/web/app/signin/one-more-step.tsx
index 3293caa8f5..4b20f85681 100644
--- a/web/app/signin/one-more-step.tsx
+++ b/web/app/signin/one-more-step.tsx
@@ -1,8 +1,7 @@
 'use client'
-import React, { type Reducer, useEffect, useReducer } from 'react'
+import React, { type Reducer, useReducer } from 'react'
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
-import useSWR from 'swr'
 import { useRouter, useSearchParams } from 'next/navigation'
 import Input from '../components/base/input'
 import Button from '@/app/components/base/button'
@@ -10,12 +9,11 @@ import Tooltip from '@/app/components/base/tooltip'
 import { SimpleSelect } from '@/app/components/base/select'
 import { timezones } from '@/utils/timezone'
 import { LanguagesSupported, languages } from '@/i18n-config/language'
-import { oneMoreStep } from '@/service/common'
 import Toast from '@/app/components/base/toast'
 import { useDocLink } from '@/context/i18n'
+import { useOneMoreStep } from '@/service/use-common'
 
 type IState = {
-  formState: 'processing' | 'error' | 'success' | 'initial'
   invitation_code: string
   interface_language: string
   timezone: string
@@ -26,7 +24,6 @@ type IAction
   | { type: 'invitation_code', value: string }
   | { type: 'interface_language', value: string }
   | { type: 'timezone', value: string }
-  | { type: 'formState', value: 'processing' }
 
 const reducer: Reducer<IState, IAction> = (state: IState, action: IAction) => {
   switch (action.type) {
@@ -36,11 +33,8 @@ const reducer: Reducer<IState, IAction> = (state: IState, action: IAction) => {
       return { ...state, interface_language: action.value }
     case 'timezone':
       return { ...state, timezone: action.value }
-    case 'formState':
-      return { ...state, formState: action.value }
     case 'failed':
       return {
-        formState: 'initial',
         invitation_code: '',
         interface_language: 'en-US',
         timezone: 'Asia/Shanghai',
@@ -57,30 +51,29 @@ const OneMoreStep = () => {
   const searchParams = useSearchParams()
 
   const [state, dispatch] = useReducer(reducer, {
-    formState: 'initial',
     invitation_code: searchParams.get('invitation_code') || '',
     interface_language: 'en-US',
     timezone: 'Asia/Shanghai',
   })
-  const { data, error } = useSWR(state.formState === 'processing'
-    ? {
-      url: '/account/init',
-      body: {
+  const { mutateAsync: submitOneMoreStep, isPending } = useOneMoreStep()
+
+  const handleSubmit = async () => {
+    if (isPending)
+      return
+    try {
+      await submitOneMoreStep({
         invitation_code: state.invitation_code,
         interface_language: state.interface_language,
         timezone: state.timezone,
-      },
+      })
+      router.push('/apps')
     }
-    : null, oneMoreStep)
-
-  useEffect(() => {
-    if (error && error.status === 400) {
-      Toast.notify({ type: 'error', message: t('login.invalidInvitationCode') })
+    catch (error: any) {
+      if (error && error.status === 400)
+        Toast.notify({ type: 'error', message: t('login.invalidInvitationCode') })
       dispatch({ type: 'failed', payload: null })
     }
-    if (data)
-      router.push('/apps')
-  }, [data, error])
+  }
 
   return (
     <>
@@ -151,10 +144,8 @@ const OneMoreStep = () => {
             <Button
               variant='primary'
               className='w-full'
-              disabled={state.formState === 'processing'}
-              onClick={() => {
-                dispatch({ type: 'formState', value: 'processing' })
-              }}
+              disabled={isPending}
+              onClick={handleSubmit}
             >
               {t('login.go')}
             </Button>
diff --git a/web/app/signin/split.tsx b/web/app/signin/split.tsx
index 504e58d412..8fd6fefc15 100644
--- a/web/app/signin/split.tsx
+++ b/web/app/signin/split.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/signup/layout.tsx b/web/app/signup/layout.tsx
index c5d39ac07a..e6b9c36411 100644
--- a/web/app/signup/layout.tsx
+++ b/web/app/signup/layout.tsx
@@ -1,7 +1,7 @@
 'use client'
 import Header from '@/app/signin/_header'
 
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
 
diff --git a/web/app/signup/set-password/page.tsx b/web/app/signup/set-password/page.tsx
index 1e176b8d2f..f75dff24d9 100644
--- a/web/app/signup/set-password/page.tsx
+++ b/web/app/signup/set-password/page.tsx
@@ -2,7 +2,7 @@
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRouter, useSearchParams } from 'next/navigation'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import Toast from '@/app/components/base/toast'
 import Input from '@/app/components/base/input'
diff --git a/web/context/app-context.tsx b/web/context/app-context.tsx
index 426ef2217e..48d67c3611 100644
--- a/web/context/app-context.tsx
+++ b/web/context/app-context.tsx
@@ -1,10 +1,14 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import useSWR from 'swr'
+import { useCallback, useEffect, useMemo } from 'react'
 import { createContext, useContext, useContextSelector } from 'use-context-selector'
 import type { FC, ReactNode } from 'react'
-import { fetchCurrentWorkspace, fetchLangGeniusVersion, fetchUserProfile } from '@/service/common'
+import { useQueryClient } from '@tanstack/react-query'
+import {
+  useCurrentWorkspace,
+  useLangGeniusVersion,
+  useUserProfile,
+} from '@/service/use-common'
 import type { ICurrentWorkspace, LangGeniusVersionResponse, UserProfileResponse } from '@/models/common'
 import MaintenanceNotice from '@/app/components/header/maintenance-notice'
 import { noop } from 'lodash-es'
@@ -79,48 +83,44 @@ export type AppContextProviderProps = {
 }
 
 export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) => {
+  const queryClient = useQueryClient()
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
-  const { data: userProfileResponse, mutate: mutateUserProfile, error: userProfileError } = useSWR({ url: '/account/profile', params: {} }, fetchUserProfile)
-  const { data: currentWorkspaceResponse, mutate: mutateCurrentWorkspace, isLoading: isLoadingCurrentWorkspace } = useSWR({ url: '/workspaces/current', params: {} }, fetchCurrentWorkspace)
+  const { data: userProfileResp } = useUserProfile()
+  const { data: currentWorkspaceResp, isPending: isLoadingCurrentWorkspace } = useCurrentWorkspace()
+  const langGeniusVersionQuery = useLangGeniusVersion(
+    userProfileResp?.meta.currentVersion,
+    !systemFeatures.branding.enabled,
+  )
+
+  const userProfile = useMemo<UserProfileResponse>(() => userProfileResp?.profile || userProfilePlaceholder, [userProfileResp?.profile])
+  const currentWorkspace = useMemo<ICurrentWorkspace>(() => currentWorkspaceResp || initialWorkspaceInfo, [currentWorkspaceResp])
+  const langGeniusVersionInfo = useMemo<LangGeniusVersionResponse>(() => {
+    if (!userProfileResp?.meta?.currentVersion || !langGeniusVersionQuery.data)
+      return initialLangGeniusVersionInfo
+
+    const current_version = userProfileResp.meta.currentVersion
+    const current_env = userProfileResp.meta.currentEnv || ''
+    const versionData = langGeniusVersionQuery.data
+    return {
+      ...versionData,
+      current_version,
+      latest_version: versionData.version,
+      current_env,
+    }
+  }, [langGeniusVersionQuery.data, userProfileResp?.meta])
 
-  const [userProfile, setUserProfile] = useState<UserProfileResponse>(userProfilePlaceholder)
-  const [langGeniusVersionInfo, setLangGeniusVersionInfo] = useState<LangGeniusVersionResponse>(initialLangGeniusVersionInfo)
-  const [currentWorkspace, setCurrentWorkspace] = useState<ICurrentWorkspace>(initialWorkspaceInfo)
   const isCurrentWorkspaceManager = useMemo(() => ['owner', 'admin'].includes(currentWorkspace.role), [currentWorkspace.role])
   const isCurrentWorkspaceOwner = useMemo(() => currentWorkspace.role === 'owner', [currentWorkspace.role])
   const isCurrentWorkspaceEditor = useMemo(() => ['owner', 'admin', 'editor'].includes(currentWorkspace.role), [currentWorkspace.role])
   const isCurrentWorkspaceDatasetOperator = useMemo(() => currentWorkspace.role === 'dataset_operator', [currentWorkspace.role])
-  const updateUserProfileAndVersion = useCallback(async () => {
-    if (userProfileResponse && !userProfileResponse.bodyUsed) {
-      try {
-        const result = await userProfileResponse.json()
-        setUserProfile(result)
-        if (!systemFeatures.branding.enabled) {
-          const current_version = userProfileResponse.headers.get('x-version')
-          const current_env = process.env.NODE_ENV === 'development' ? 'DEVELOPMENT' : userProfileResponse.headers.get('x-env')
-          const versionData = await fetchLangGeniusVersion({ url: '/version', params: { current_version } })
-          setLangGeniusVersionInfo({ ...versionData, current_version, latest_version: versionData.version, current_env })
-        }
-      }
-      catch (error) {
-        console.error('Failed to update user profile:', error)
-        if (userProfile.id === '')
-          setUserProfile(userProfilePlaceholder)
-      }
-    }
-    else if (userProfileError && userProfile.id === '') {
-      setUserProfile(userProfilePlaceholder)
-    }
-  }, [userProfileResponse, userProfileError, userProfile.id])
 
-  useEffect(() => {
-    updateUserProfileAndVersion()
-  }, [updateUserProfileAndVersion, userProfileResponse])
+  const mutateUserProfile = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: ['common', 'user-profile'] })
+  }, [queryClient])
 
-  useEffect(() => {
-    if (currentWorkspaceResponse)
-      setCurrentWorkspace(currentWorkspaceResponse)
-  }, [currentWorkspaceResponse])
+  const mutateCurrentWorkspace = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: ['common', 'current-workspace'] })
+  }, [queryClient])
 
   // #region Zendesk conversation fields
   useEffect(() => {
diff --git a/web/context/provider-context.tsx b/web/context/provider-context.tsx
index 70944d85f1..e1739853c6 100644
--- a/web/context/provider-context.tsx
+++ b/web/context/provider-context.tsx
@@ -1,15 +1,15 @@
 'use client'
 
 import { createContext, useContext, useContextSelector } from 'use-context-selector'
-import useSWR from 'swr'
 import { useEffect, useState } from 'react'
 import dayjs from 'dayjs'
 import { useTranslation } from 'react-i18next'
+import { useQueryClient } from '@tanstack/react-query'
 import {
-  fetchModelList,
-  fetchModelProviders,
-  fetchSupportRetrievalMethods,
-} from '@/service/common'
+  useModelListByType,
+  useModelProviders,
+  useSupportRetrievalMethods,
+} from '@/service/use-common'
 import {
   CurrentSystemQuotaTypeEnum,
   ModelStatusEnum,
@@ -114,10 +114,10 @@ type ProviderContextProviderProps = {
 export const ProviderContextProvider = ({
   children,
 }: ProviderContextProviderProps) => {
-  const { data: providersData, mutate: refreshModelProviders } = useSWR('/workspaces/current/model-providers', fetchModelProviders)
-  const fetchModelListUrlPrefix = '/workspaces/current/models/model-types/'
-  const { data: textGenerationModelList } = useSWR(`${fetchModelListUrlPrefix}${ModelTypeEnum.textGeneration}`, fetchModelList)
-  const { data: supportRetrievalMethods } = useSWR('/datasets/retrieval-setting', fetchSupportRetrievalMethods)
+  const queryClient = useQueryClient()
+  const { data: providersData } = useModelProviders()
+  const { data: textGenerationModelList } = useModelListByType(ModelTypeEnum.textGeneration)
+  const { data: supportRetrievalMethods } = useSupportRetrievalMethods()
 
   const [plan, setPlan] = useState(defaultPlan)
   const [isFetchedPlan, setIsFetchedPlan] = useState(false)
@@ -139,6 +139,10 @@ export const ProviderContextProvider = ({
   const [isAllowTransferWorkspace, setIsAllowTransferWorkspace] = useState(false)
   const [isAllowPublishAsCustomKnowledgePipelineTemplate, setIsAllowPublishAsCustomKnowledgePipelineTemplate] = useState(false)
 
+  const refreshModelProviders = () => {
+    queryClient.invalidateQueries({ queryKey: ['common', 'model-providers'] })
+  }
+
   const fetchPlan = async () => {
     try {
       const data = await fetchCurrentPlanInfo()
@@ -226,7 +230,7 @@ export const ProviderContextProvider = ({
       modelProviders: providersData?.data || [],
       refreshModelProviders,
       textGenerationModelList: textGenerationModelList?.data || [],
-      isAPIKeySet: !!textGenerationModelList?.data.some(model => model.status === ModelStatusEnum.active),
+      isAPIKeySet: !!textGenerationModelList?.data?.some(model => model.status === ModelStatusEnum.active),
       supportRetrievalMethods: supportRetrievalMethods?.retrieval_method || [],
       plan,
       isFetchedPlan,
diff --git a/web/context/workspace-context.tsx b/web/context/workspace-context.tsx
index 9350a959b4..da7dcf5a50 100644
--- a/web/context/workspace-context.tsx
+++ b/web/context/workspace-context.tsx
@@ -1,8 +1,7 @@
 'use client'
 
 import { createContext, useContext } from 'use-context-selector'
-import useSWR from 'swr'
-import { fetchWorkspaces } from '@/service/common'
+import { useWorkspaces } from '@/service/use-common'
 import type { IWorkspace } from '@/models/common'
 
 export type WorkspacesContextValue = {
@@ -20,7 +19,7 @@ type IWorkspaceProviderProps = {
 export const WorkspaceProvider = ({
   children,
 }: IWorkspaceProviderProps) => {
-  const { data } = useSWR({ url: '/workspaces' }, fetchWorkspaces)
+  const { data } = useWorkspaces()
 
   return (
     <WorkspacesContext.Provider value={{
diff --git a/web/hooks/use-pay.tsx b/web/hooks/use-pay.tsx
index 3ba23b6763..3812949dec 100644
--- a/web/hooks/use-pay.tsx
+++ b/web/hooks/use-pay.tsx
@@ -3,12 +3,9 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
-import {
-  fetchDataSourceNotionBinding,
-} from '@/service/common'
 import type { IConfirm } from '@/app/components/base/confirm'
 import Confirm from '@/app/components/base/confirm'
+import { useNotionBinding } from '@/service/use-common'
 
 export type ConfirmType = Pick<IConfirm, 'type' | 'title' | 'content'>
 
@@ -58,12 +55,7 @@ export const useCheckNotion = () => {
   const type = searchParams.get('type')
   const notionCode = searchParams.get('code')
   const notionError = searchParams.get('error')
-  const { data } = useSWR(
-    (canBinding && notionCode)
-      ? `/oauth/data-source/binding/notion?code=${notionCode}`
-      : null,
-    fetchDataSourceNotionBinding,
-  )
+  const { data } = useNotionBinding(notionCode, canBinding)
 
   useEffect(() => {
     if (data)
diff --git a/web/i18n/ar-TN/common.ts b/web/i18n/ar-TN/common.ts
index 8437c0643f..b1f4f46f22 100644
--- a/web/i18n/ar-TN/common.ts
+++ b/web/i18n/ar-TN/common.ts
@@ -11,6 +11,7 @@ const translation = {
     saved: 'تم الحفظ',
     create: 'تم الإنشاء',
     remove: 'تمت الإزالة',
+    actionFailed: 'فشل الإجراء',
   },
   operation: {
     create: 'إنشاء',
diff --git a/web/i18n/de-DE/common.ts b/web/i18n/de-DE/common.ts
index 479348ef43..d9ebfd60e0 100644
--- a/web/i18n/de-DE/common.ts
+++ b/web/i18n/de-DE/common.ts
@@ -5,6 +5,7 @@ const translation = {
     saved: 'Gespeichert',
     create: 'Erstellt',
     remove: 'Entfernt',
+    actionFailed: 'Aktion fehlgeschlagen',
   },
   operation: {
     create: 'Erstellen',
diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts
index d78520cf1f..92d24b1351 100644
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@@ -8,6 +8,7 @@ const translation = {
   api: {
     success: 'Success',
     actionSuccess: 'Action succeeded',
+    actionFailed: 'Action failed',
     saved: 'Saved',
     create: 'Created',
     remove: 'Removed',
diff --git a/web/i18n/es-ES/common.ts b/web/i18n/es-ES/common.ts
index 38d4402fd2..8f56c7e668 100644
--- a/web/i18n/es-ES/common.ts
+++ b/web/i18n/es-ES/common.ts
@@ -5,6 +5,7 @@ const translation = {
     saved: 'Guardado',
     create: 'Creado',
     remove: 'Eliminado',
+    actionFailed: 'Acción fallida',
   },
   operation: {
     create: 'Crear',
diff --git a/web/i18n/fa-IR/common.ts b/web/i18n/fa-IR/common.ts
index 62a2e2cec8..afd6f760aa 100644
--- a/web/i18n/fa-IR/common.ts
+++ b/web/i18n/fa-IR/common.ts
@@ -5,6 +5,7 @@ const translation = {
     saved: 'ذخیره شد',
     create: 'ایجاد شد',
     remove: 'حذف شد',
+    actionFailed: 'عمل شکست خورد',
   },
   operation: {
     create: 'ایجاد',
diff --git a/web/i18n/fr-FR/common.ts b/web/i18n/fr-FR/common.ts
index da72b0497c..4b0deb4a8c 100644
--- a/web/i18n/fr-FR/common.ts
+++ b/web/i18n/fr-FR/common.ts
@@ -5,6 +5,7 @@ const translation = {
     saved: 'Sauvegardé',
     create: 'Créé',
     remove: 'Supprimé',
+    actionFailed: 'Action échouée',
   },
   operation: {
     create: 'Créer',
diff --git a/web/i18n/hi-IN/common.ts b/web/i18n/hi-IN/common.ts
index fa25074b9c..88f8f814e6 100644
--- a/web/i18n/hi-IN/common.ts
+++ b/web/i18n/hi-IN/common.ts
@@ -5,6 +5,7 @@ const translation = {
     saved: 'सहेजा गया',
     create: 'बनाया गया',
     remove: 'हटाया गया',
+    actionFailed: 'क्रिया विफल',
   },
   operation: {
     create: 'बनाएं',
diff --git a/web/i18n/id-ID/common.ts b/web/i18n/id-ID/common.ts
index 0c70b0341e..4cce24e76a 100644
--- a/web/i18n/id-ID/common.ts
+++ b/web/i18n/id-ID/common.ts
@@ -11,6 +11,7 @@ const translation = {
     remove: 'Dihapus',
     actionSuccess: 'Aksi berhasil',
     create: 'Dibuat',
+    actionFailed: 'Tindakan gagal',
   },
   operation: {
     setup: 'Setup',
diff --git a/web/i18n/it-IT/common.ts b/web/i18n/it-IT/common.ts
index d5793bb902..b52b93b1a5 100644
--- a/web/i18n/it-IT/common.ts
+++ b/web/i18n/it-IT/common.ts
@@ -5,6 +5,7 @@ const translation = {
     saved: 'Salvato',
     create: 'Creato',
     remove: 'Rimosso',
+    actionFailed: 'Azione non riuscita',
   },
   operation: {
     create: 'Crea',
diff --git a/web/i18n/ja-JP/common.ts b/web/i18n/ja-JP/common.ts
index d4647fbc12..bde00cb66b 100644
--- a/web/i18n/ja-JP/common.ts
+++ b/web/i18n/ja-JP/common.ts
@@ -11,6 +11,7 @@ const translation = {
     saved: '保存済み',
     create: '作成済み',
     remove: '削除済み',
+    actionFailed: 'アクションに失敗しました',
   },
   operation: {
     create: '作成',
diff --git a/web/i18n/ko-KR/common.ts b/web/i18n/ko-KR/common.ts
index 805b9f9840..531aa29054 100644
--- a/web/i18n/ko-KR/common.ts
+++ b/web/i18n/ko-KR/common.ts
@@ -5,6 +5,7 @@ const translation = {
     saved: '저장됨',
     create: '생성됨',
     remove: '삭제됨',
+    actionFailed: '작업 실패',
   },
   operation: {
     create: '생성',
diff --git a/web/i18n/pl-PL/common.ts b/web/i18n/pl-PL/common.ts
index 2ecf18c7e6..10f566258a 100644
--- a/web/i18n/pl-PL/common.ts
+++ b/web/i18n/pl-PL/common.ts
@@ -5,6 +5,7 @@ const translation = {
     saved: 'Zapisane',
     create: 'Utworzono',
     remove: 'Usunięto',
+    actionFailed: 'Akcja nie powiodła się',
   },
   operation: {
     create: 'Utwórz',
diff --git a/web/i18n/pt-BR/common.ts b/web/i18n/pt-BR/common.ts
index d0838b4f09..b739561ca4 100644
--- a/web/i18n/pt-BR/common.ts
+++ b/web/i18n/pt-BR/common.ts
@@ -5,6 +5,7 @@ const translation = {
     saved: 'Salvo',
     create: 'Criado',
     remove: 'Removido',
+    actionFailed: 'Ação falhou',
   },
   operation: {
     create: 'Criar',
diff --git a/web/i18n/ro-RO/common.ts b/web/i18n/ro-RO/common.ts
index 8b8ab9ac26..df3cf01b6c 100644
--- a/web/i18n/ro-RO/common.ts
+++ b/web/i18n/ro-RO/common.ts
@@ -5,6 +5,7 @@ const translation = {
     saved: 'Salvat',
     create: 'Creat',
     remove: 'Eliminat',
+    actionFailed: 'Acțiunea a eșuat',
   },
   operation: {
     create: 'Creează',
diff --git a/web/i18n/ru-RU/common.ts b/web/i18n/ru-RU/common.ts
index afc9368e9e..ae8b2e558f 100644
--- a/web/i18n/ru-RU/common.ts
+++ b/web/i18n/ru-RU/common.ts
@@ -5,6 +5,7 @@ const translation = {
     saved: 'Сохранено',
     create: 'Создано',
     remove: 'Удалено',
+    actionFailed: 'Действие не удалось',
   },
   operation: {
     create: 'Создать',
diff --git a/web/i18n/sl-SI/common.ts b/web/i18n/sl-SI/common.ts
index b024ace3be..697d06eb8b 100644
--- a/web/i18n/sl-SI/common.ts
+++ b/web/i18n/sl-SI/common.ts
@@ -5,6 +5,7 @@ const translation = {
     saved: 'Shranjeno',
     create: 'Ustvarjeno',
     remove: 'Odstranjeno',
+    actionFailed: 'Dejanje ni uspelo',
   },
   operation: {
     create: 'Ustvari',
diff --git a/web/i18n/th-TH/common.ts b/web/i18n/th-TH/common.ts
index 9c325e3781..dc82c71c78 100644
--- a/web/i18n/th-TH/common.ts
+++ b/web/i18n/th-TH/common.ts
@@ -5,6 +5,7 @@ const translation = {
     saved: 'บันทึก',
     create: 'สร้าง',
     remove: 'ถูก เอา ออก',
+    actionFailed: 'การดำเนินการล้มเหลว',
   },
   operation: {
     create: 'สร้าง',
diff --git a/web/i18n/tr-TR/common.ts b/web/i18n/tr-TR/common.ts
index 8b0a7cba69..5e7f2182c7 100644
--- a/web/i18n/tr-TR/common.ts
+++ b/web/i18n/tr-TR/common.ts
@@ -5,6 +5,7 @@ const translation = {
     saved: 'Kaydedildi',
     create: 'Oluşturuldu',
     remove: 'Kaldırıldı',
+    actionFailed: 'İşlem başarısız',
   },
   operation: {
     create: 'Oluştur',
diff --git a/web/i18n/uk-UA/common.ts b/web/i18n/uk-UA/common.ts
index bd0f55c2f5..70b8aaa862 100644
--- a/web/i18n/uk-UA/common.ts
+++ b/web/i18n/uk-UA/common.ts
@@ -5,6 +5,7 @@ const translation = {
     saved: 'Збережено',
     create: 'Створено',
     remove: 'Видалено',
+    actionFailed: 'Не вдалося виконати дію',
   },
   operation: {
     create: 'Створити',
diff --git a/web/i18n/vi-VN/common.ts b/web/i18n/vi-VN/common.ts
index 8b1b69163e..666dc7a133 100644
--- a/web/i18n/vi-VN/common.ts
+++ b/web/i18n/vi-VN/common.ts
@@ -5,6 +5,7 @@ const translation = {
     saved: 'Đã lưu',
     create: 'Tạo',
     remove: 'Xóa',
+    actionFailed: 'Thao tác thất bại',
   },
   operation: {
     create: 'Tạo mới',
diff --git a/web/i18n/zh-Hans/common.ts b/web/i18n/zh-Hans/common.ts
index 8e7103564f..bd0e0e3ba4 100644
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@@ -11,6 +11,7 @@ const translation = {
     saved: '已保存',
     create: '已创建',
     remove: '已移除',
+    actionFailed: '操作失败',
   },
   operation: {
     create: '创建',
diff --git a/web/i18n/zh-Hant/common.ts b/web/i18n/zh-Hant/common.ts
index 1a72a083d8..8ed1e336ef 100644
--- a/web/i18n/zh-Hant/common.ts
+++ b/web/i18n/zh-Hant/common.ts
@@ -5,6 +5,7 @@ const translation = {
     saved: '已儲存',
     create: '已建立',
     remove: '已移除',
+    actionFailed: '操作失敗',
   },
   operation: {
     create: '建立',
diff --git a/web/jest.config.ts b/web/jest.config.ts
index 6c2d88448c..86e86fa2ac 100644
--- a/web/jest.config.ts
+++ b/web/jest.config.ts
@@ -20,7 +20,7 @@ const config: Config = {
   // bail: 0,
 
   // The directory where Jest should store its cached dependency information
-  // cacheDirectory: "/private/var/folders/9c/7gly5yl90qxdjljqsvkk758h0000gn/T/jest_dx",
+  cacheDirectory: '<rootDir>/.cache/jest',
 
   // Automatically clear mock calls, instances, contexts and results before every test
   clearMocks: true,
@@ -44,6 +44,7 @@ const config: Config = {
 
   // A list of reporter names that Jest uses when writing coverage reports
   coverageReporters: [
+    'json-summary',
     'json',
     'text',
     'text-summary',
@@ -100,7 +101,11 @@ const config: Config = {
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/$1',
+    // Map lodash-es to lodash (CommonJS version)
     '^lodash-es$': 'lodash',
+    '^lodash-es/(.*)$': 'lodash/$1',
+    // Mock ky ESM module to avoid ESM issues in Jest
+    '^ky$': '<rootDir>/__mocks__/ky.ts',
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
diff --git a/web/jest.setup.ts b/web/jest.setup.ts
index 9c3b0bf3bd..a4d358d805 100644
--- a/web/jest.setup.ts
+++ b/web/jest.setup.ts
@@ -42,6 +42,22 @@ if (typeof window !== 'undefined') {
   ensureWritable(HTMLElement.prototype, 'focus')
 }
 
+if (typeof globalThis.ResizeObserver === 'undefined') {
+  globalThis.ResizeObserver = class {
+    observe() {
+      return undefined
+    }
+
+    unobserve() {
+      return undefined
+    }
+
+    disconnect() {
+      return undefined
+    }
+  }
+}
+
 afterEach(() => {
   cleanup()
 })
diff --git a/web/package.json b/web/package.json
index d54e6effb2..56c533a930 100644
--- a/web/package.json
+++ b/web/package.json
@@ -2,7 +2,7 @@
   "name": "dify-web",
   "version": "1.11.1",
   "private": true,
-  "packageManager": "pnpm@10.26.0+sha512.3b3f6c725ebe712506c0ab1ad4133cf86b1f4b687effce62a9b38b4d72e3954242e643190fc51fa1642949c735f403debd44f5cb0edd657abe63a8b6a7e1e402",
+  "packageManager": "pnpm@10.26.1+sha512.664074abc367d2c9324fdc18037097ce0a8f126034160f709928e9e9f95d98714347044e5c3164d65bd5da6c59c6be362b107546292a8eecb7999196e5ce58fa",
   "engines": {
     "node": ">=v22.11.0"
   },
@@ -75,7 +75,7 @@
     "abcjs": "^6.5.2",
     "ahooks": "^3.9.5",
     "class-variance-authority": "^0.7.1",
-    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "copy-to-clipboard": "^3.3.3",
     "cron-parser": "^5.4.0",
@@ -200,6 +200,7 @@
     "eslint-plugin-tailwindcss": "^3.18.2",
     "globals": "^15.15.0",
     "husky": "^9.1.7",
+    "istanbul-lib-coverage": "^3.2.2",
     "jest": "^29.7.0",
     "jsdom-testing-mocks": "^1.16.0",
     "knip": "^5.66.1",
@@ -211,7 +212,7 @@
     "postcss": "^8.5.6",
     "react-scan": "^0.4.3",
     "sass": "^1.93.2",
-    "storybook": "9.1.13",
+    "storybook": "9.1.17",
     "tailwindcss": "^3.4.18",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 8523215a07..5b4af4e836 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -142,9 +142,9 @@ importers:
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
-      classnames:
-        specifier: ^2.5.1
-        version: 2.5.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       cmdk:
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -364,7 +364,7 @@ importers:
         version: 7.28.5
       '@chromatic-com/storybook':
         specifier: ^4.1.1
-        version: 4.1.3(storybook@9.1.13(@testing-library/dom@10.4.1))
+        version: 4.1.3(storybook@9.1.17(@testing-library/dom@10.4.1))
       '@eslint-react/eslint-plugin':
         specifier: ^1.53.1
         version: 1.53.1(eslint@9.39.1(jiti@1.21.7))(ts-api-utils@2.1.0(typescript@5.9.3))(typescript@5.9.3)
@@ -391,22 +391,22 @@ importers:
         version: 4.2.0
       '@storybook/addon-docs':
         specifier: 9.1.13
-        version: 9.1.13(@types/react@19.2.7)(storybook@9.1.13(@testing-library/dom@10.4.1))
+        version: 9.1.13(@types/react@19.2.7)(storybook@9.1.17(@testing-library/dom@10.4.1))
       '@storybook/addon-links':
         specifier: 9.1.13
-        version: 9.1.13(react@19.2.3)(storybook@9.1.13(@testing-library/dom@10.4.1))
+        version: 9.1.13(react@19.2.3)(storybook@9.1.17(@testing-library/dom@10.4.1))
       '@storybook/addon-onboarding':
         specifier: 9.1.13
-        version: 9.1.13(storybook@9.1.13(@testing-library/dom@10.4.1))
+        version: 9.1.13(storybook@9.1.17(@testing-library/dom@10.4.1))
       '@storybook/addon-themes':
         specifier: 9.1.13
-        version: 9.1.13(storybook@9.1.13(@testing-library/dom@10.4.1))
+        version: 9.1.13(storybook@9.1.17(@testing-library/dom@10.4.1))
       '@storybook/nextjs':
         specifier: 9.1.13
-        version: 9.1.13(esbuild@0.25.0)(next@15.5.9(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.95.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.95.0)(storybook@9.1.13(@testing-library/dom@10.4.1))(type-fest@4.2.0)(typescript@5.9.3)(uglify-js@3.19.3)(webpack-hot-middleware@2.26.1)(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
+        version: 9.1.13(esbuild@0.25.0)(next@15.5.9(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.95.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.95.0)(storybook@9.1.17(@testing-library/dom@10.4.1))(type-fest@4.2.0)(typescript@5.9.3)(uglify-js@3.19.3)(webpack-hot-middleware@2.26.1)(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
       '@storybook/react':
         specifier: 9.1.13
-        version: 9.1.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.1.13(@testing-library/dom@10.4.1))(typescript@5.9.3)
+        version: 9.1.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.1.17(@testing-library/dom@10.4.1))(typescript@5.9.3)
       '@testing-library/dom':
         specifier: ^10.4.1
         version: 10.4.1
@@ -502,7 +502,7 @@ importers:
         version: 3.0.5(eslint@9.39.1(jiti@1.21.7))
       eslint-plugin-storybook:
         specifier: ^9.1.13
-        version: 9.1.16(eslint@9.39.1(jiti@1.21.7))(storybook@9.1.13(@testing-library/dom@10.4.1))(typescript@5.9.3)
+        version: 9.1.16(eslint@9.39.1(jiti@1.21.7))(storybook@9.1.17(@testing-library/dom@10.4.1))(typescript@5.9.3)
       eslint-plugin-tailwindcss:
         specifier: ^3.18.2
         version: 3.18.2(tailwindcss@3.4.18(tsx@4.21.0)(yaml@2.8.2))
@@ -512,6 +512,9 @@ importers:
       husky:
         specifier: ^9.1.7
         version: 9.1.7
+      istanbul-lib-coverage:
+        specifier: ^3.2.2
+        version: 3.2.2
       jest:
         specifier: ^29.7.0
         version: 29.7.0(@types/node@18.15.0)(ts-node@10.9.2(@types/node@18.15.0)(typescript@5.9.3))
@@ -546,8 +549,8 @@ importers:
         specifier: ^1.93.2
         version: 1.95.0
       storybook:
-        specifier: 9.1.13
-        version: 9.1.13(@testing-library/dom@10.4.1)
+        specifier: 9.1.17
+        version: 9.1.17(@testing-library/dom@10.4.1)
       tailwindcss:
         specifier: ^3.4.18
         version: 3.4.18(tsx@4.21.0)(yaml@2.8.2)
@@ -4443,9 +4446,6 @@ packages:
   classnames@2.3.1:
     resolution: {integrity: sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==}
 
-  classnames@2.5.1:
-    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
-
   clean-css@5.3.3:
     resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
     engines: {node: '>= 10.0'}
@@ -6444,8 +6444,8 @@ packages:
   lexical@0.38.2:
     resolution: {integrity: sha512-JJmfsG3c4gwBHzUGffbV7ifMNkKAWMCnYE3xJl87gty7hjyV5f3xq7eqTjP5HFYvO4XpjJvvWO2/djHp5S10tw==}
 
-  lib0@0.2.114:
-    resolution: {integrity: sha512-gcxmNFzA4hv8UYi8j43uPlQ7CGcyMJ2KQb5kZASw6SnAKAf10hK12i2fjrS3Cl/ugZa5Ui6WwIu1/6MIXiHttQ==}
+  lib0@0.2.115:
+    resolution: {integrity: sha512-noaW4yNp6hCjOgDnWWxW0vGXE3kZQI5Kqiwz+jIWXavI9J9WyfJ9zjsbQlQlgjIbHBrvlA/x3TSIXBUJj+0L6g==}
     engines: {node: '>=16'}
     hasBin: true
 
@@ -8087,8 +8087,8 @@ packages:
   state-local@1.0.7:
     resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
 
-  storybook@9.1.13:
-    resolution: {integrity: sha512-G3KZ36EVzXyHds72B/qtWiJnhUpM0xOUeYlDcO9DSHL1bDTv15cW4+upBl+mcBZrDvU838cn7Bv4GpF+O5MCfw==}
+  storybook@9.1.17:
+    resolution: {integrity: sha512-kfr6kxQAjA96ADlH6FMALJwJ+eM80UqXy106yVHNgdsAP/CdzkkicglRAhZAvUycXK9AeadF6KZ00CWLtVMN4w==}
     hasBin: true
     peerDependencies:
       prettier: ^2 || ^3
@@ -10009,13 +10009,13 @@ snapshots:
 
   '@chevrotain/utils@11.0.3': {}
 
-  '@chromatic-com/storybook@4.1.3(storybook@9.1.13(@testing-library/dom@10.4.1))':
+  '@chromatic-com/storybook@4.1.3(storybook@9.1.17(@testing-library/dom@10.4.1))':
     dependencies:
       '@neoconfetti/react': 1.0.0
       chromatic: 13.3.4
       filesize: 10.1.6
       jsonfile: 6.2.0
-      storybook: 9.1.13(@testing-library/dom@10.4.1)
+      storybook: 9.1.17(@testing-library/dom@10.4.1)
       strip-ansi: 7.1.2
     transitivePeerDependencies:
       - '@chromatic-com/cypress'
@@ -11885,38 +11885,38 @@ snapshots:
 
   '@standard-schema/utils@0.3.0': {}
 
-  '@storybook/addon-docs@9.1.13(@types/react@19.2.7)(storybook@9.1.13(@testing-library/dom@10.4.1))':
+  '@storybook/addon-docs@9.1.13(@types/react@19.2.7)(storybook@9.1.17(@testing-library/dom@10.4.1))':
     dependencies:
       '@mdx-js/react': 3.1.1(@types/react@19.2.7)(react@19.2.3)
-      '@storybook/csf-plugin': 9.1.13(storybook@9.1.13(@testing-library/dom@10.4.1))
+      '@storybook/csf-plugin': 9.1.13(storybook@9.1.17(@testing-library/dom@10.4.1))
       '@storybook/icons': 1.6.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@storybook/react-dom-shim': 9.1.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.1.13(@testing-library/dom@10.4.1))
+      '@storybook/react-dom-shim': 9.1.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.1.17(@testing-library/dom@10.4.1))
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
-      storybook: 9.1.13(@testing-library/dom@10.4.1)
+      storybook: 9.1.17(@testing-library/dom@10.4.1)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/addon-links@9.1.13(react@19.2.3)(storybook@9.1.13(@testing-library/dom@10.4.1))':
+  '@storybook/addon-links@9.1.13(react@19.2.3)(storybook@9.1.17(@testing-library/dom@10.4.1))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 9.1.13(@testing-library/dom@10.4.1)
+      storybook: 9.1.17(@testing-library/dom@10.4.1)
     optionalDependencies:
       react: 19.2.3
 
-  '@storybook/addon-onboarding@9.1.13(storybook@9.1.13(@testing-library/dom@10.4.1))':
+  '@storybook/addon-onboarding@9.1.13(storybook@9.1.17(@testing-library/dom@10.4.1))':
     dependencies:
-      storybook: 9.1.13(@testing-library/dom@10.4.1)
+      storybook: 9.1.17(@testing-library/dom@10.4.1)
 
-  '@storybook/addon-themes@9.1.13(storybook@9.1.13(@testing-library/dom@10.4.1))':
+  '@storybook/addon-themes@9.1.13(storybook@9.1.17(@testing-library/dom@10.4.1))':
     dependencies:
-      storybook: 9.1.13(@testing-library/dom@10.4.1)
+      storybook: 9.1.17(@testing-library/dom@10.4.1)
       ts-dedent: 2.2.0
 
-  '@storybook/builder-webpack5@9.1.13(esbuild@0.25.0)(storybook@9.1.13(@testing-library/dom@10.4.1))(typescript@5.9.3)(uglify-js@3.19.3)':
+  '@storybook/builder-webpack5@9.1.13(esbuild@0.25.0)(storybook@9.1.17(@testing-library/dom@10.4.1))(typescript@5.9.3)(uglify-js@3.19.3)':
     dependencies:
-      '@storybook/core-webpack': 9.1.13(storybook@9.1.13(@testing-library/dom@10.4.1))
+      '@storybook/core-webpack': 9.1.13(storybook@9.1.17(@testing-library/dom@10.4.1))
       case-sensitive-paths-webpack-plugin: 2.4.0
       cjs-module-lexer: 1.4.3
       css-loader: 6.11.0(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
@@ -11924,7 +11924,7 @@ snapshots:
       fork-ts-checker-webpack-plugin: 8.0.0(typescript@5.9.3)(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
       html-webpack-plugin: 5.6.5(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
       magic-string: 0.30.21
-      storybook: 9.1.13(@testing-library/dom@10.4.1)
+      storybook: 9.1.17(@testing-library/dom@10.4.1)
       style-loader: 3.3.4(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
       terser-webpack-plugin: 5.3.15(esbuild@0.25.0)(uglify-js@3.19.3)(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
       ts-dedent: 2.2.0
@@ -11941,14 +11941,14 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@storybook/core-webpack@9.1.13(storybook@9.1.13(@testing-library/dom@10.4.1))':
+  '@storybook/core-webpack@9.1.13(storybook@9.1.17(@testing-library/dom@10.4.1))':
     dependencies:
-      storybook: 9.1.13(@testing-library/dom@10.4.1)
+      storybook: 9.1.17(@testing-library/dom@10.4.1)
       ts-dedent: 2.2.0
 
-  '@storybook/csf-plugin@9.1.13(storybook@9.1.13(@testing-library/dom@10.4.1))':
+  '@storybook/csf-plugin@9.1.13(storybook@9.1.17(@testing-library/dom@10.4.1))':
     dependencies:
-      storybook: 9.1.13(@testing-library/dom@10.4.1)
+      storybook: 9.1.17(@testing-library/dom@10.4.1)
       unplugin: 1.16.1
 
   '@storybook/global@5.0.0': {}
@@ -11958,7 +11958,7 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
-  '@storybook/nextjs@9.1.13(esbuild@0.25.0)(next@15.5.9(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.95.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.95.0)(storybook@9.1.13(@testing-library/dom@10.4.1))(type-fest@4.2.0)(typescript@5.9.3)(uglify-js@3.19.3)(webpack-hot-middleware@2.26.1)(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))':
+  '@storybook/nextjs@9.1.13(esbuild@0.25.0)(next@15.5.9(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.95.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.95.0)(storybook@9.1.17(@testing-library/dom@10.4.1))(type-fest@4.2.0)(typescript@5.9.3)(uglify-js@3.19.3)(webpack-hot-middleware@2.26.1)(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.28.5)
@@ -11974,9 +11974,9 @@ snapshots:
       '@babel/preset-typescript': 7.28.5(@babel/core@7.28.5)
       '@babel/runtime': 7.28.4
       '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(react-refresh@0.14.2)(type-fest@4.2.0)(webpack-hot-middleware@2.26.1)(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
-      '@storybook/builder-webpack5': 9.1.13(esbuild@0.25.0)(storybook@9.1.13(@testing-library/dom@10.4.1))(typescript@5.9.3)(uglify-js@3.19.3)
-      '@storybook/preset-react-webpack': 9.1.13(esbuild@0.25.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.1.13(@testing-library/dom@10.4.1))(typescript@5.9.3)(uglify-js@3.19.3)
-      '@storybook/react': 9.1.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.1.13(@testing-library/dom@10.4.1))(typescript@5.9.3)
+      '@storybook/builder-webpack5': 9.1.13(esbuild@0.25.0)(storybook@9.1.17(@testing-library/dom@10.4.1))(typescript@5.9.3)(uglify-js@3.19.3)
+      '@storybook/preset-react-webpack': 9.1.13(esbuild@0.25.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.1.17(@testing-library/dom@10.4.1))(typescript@5.9.3)(uglify-js@3.19.3)
+      '@storybook/react': 9.1.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.1.17(@testing-library/dom@10.4.1))(typescript@5.9.3)
       '@types/semver': 7.7.1
       babel-loader: 9.2.1(@babel/core@7.28.5)(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
       css-loader: 6.11.0(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
@@ -11992,7 +11992,7 @@ snapshots:
       resolve-url-loader: 5.0.0
       sass-loader: 16.0.6(sass@1.95.0)(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
       semver: 7.7.3
-      storybook: 9.1.13(@testing-library/dom@10.4.1)
+      storybook: 9.1.17(@testing-library/dom@10.4.1)
       style-loader: 3.3.4(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
       styled-jsx: 5.1.7(@babel/core@7.28.5)(react@19.2.3)
       tsconfig-paths: 4.2.0
@@ -12018,9 +12018,9 @@ snapshots:
       - webpack-hot-middleware
       - webpack-plugin-serve
 
-  '@storybook/preset-react-webpack@9.1.13(esbuild@0.25.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.1.13(@testing-library/dom@10.4.1))(typescript@5.9.3)(uglify-js@3.19.3)':
+  '@storybook/preset-react-webpack@9.1.13(esbuild@0.25.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.1.17(@testing-library/dom@10.4.1))(typescript@5.9.3)(uglify-js@3.19.3)':
     dependencies:
-      '@storybook/core-webpack': 9.1.13(storybook@9.1.13(@testing-library/dom@10.4.1))
+      '@storybook/core-webpack': 9.1.13(storybook@9.1.17(@testing-library/dom@10.4.1))
       '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.9.3)(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
       '@types/semver': 7.7.1
       find-up: 7.0.0
@@ -12030,7 +12030,7 @@ snapshots:
       react-dom: 19.2.3(react@19.2.3)
       resolve: 1.22.11
       semver: 7.7.3
-      storybook: 9.1.13(@testing-library/dom@10.4.1)
+      storybook: 9.1.17(@testing-library/dom@10.4.1)
       tsconfig-paths: 4.2.0
       webpack: 5.103.0(esbuild@0.25.0)(uglify-js@3.19.3)
     optionalDependencies:
@@ -12056,19 +12056,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@storybook/react-dom-shim@9.1.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.1.13(@testing-library/dom@10.4.1))':
+  '@storybook/react-dom-shim@9.1.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.1.17(@testing-library/dom@10.4.1))':
     dependencies:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
-      storybook: 9.1.13(@testing-library/dom@10.4.1)
+      storybook: 9.1.17(@testing-library/dom@10.4.1)
 
-  '@storybook/react@9.1.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.1.13(@testing-library/dom@10.4.1))(typescript@5.9.3)':
+  '@storybook/react@9.1.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.1.17(@testing-library/dom@10.4.1))(typescript@5.9.3)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 9.1.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.1.13(@testing-library/dom@10.4.1))
+      '@storybook/react-dom-shim': 9.1.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.1.17(@testing-library/dom@10.4.1))
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
-      storybook: 9.1.13(@testing-library/dom@10.4.1)
+      storybook: 9.1.17(@testing-library/dom@10.4.1)
     optionalDependencies:
       typescript: 5.9.3
 
@@ -13340,8 +13340,6 @@ snapshots:
 
   classnames@2.3.1: {}
 
-  classnames@2.5.1: {}
-
   clean-css@5.3.3:
     dependencies:
       source-map: 0.6.1
@@ -14377,11 +14375,11 @@ snapshots:
       semver: 7.7.2
       typescript: 5.9.3
 
-  eslint-plugin-storybook@9.1.16(eslint@9.39.1(jiti@1.21.7))(storybook@9.1.13(@testing-library/dom@10.4.1))(typescript@5.9.3):
+  eslint-plugin-storybook@9.1.16(eslint@9.39.1(jiti@1.21.7))(storybook@9.1.17(@testing-library/dom@10.4.1))(typescript@5.9.3):
     dependencies:
       '@typescript-eslint/utils': 8.49.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)
       eslint: 9.39.1(jiti@1.21.7)
-      storybook: 9.1.13(@testing-library/dom@10.4.1)
+      storybook: 9.1.17(@testing-library/dom@10.4.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -15808,7 +15806,7 @@ snapshots:
 
   lexical@0.38.2: {}
 
-  lib0@0.2.114:
+  lib0@0.2.115:
     dependencies:
       isomorphic.js: 0.2.5
 
@@ -17941,7 +17939,7 @@ snapshots:
 
   state-local@1.0.7: {}
 
-  storybook@9.1.13(@testing-library/dom@10.4.1):
+  storybook@9.1.17(@testing-library/dom@10.4.1):
     dependencies:
       '@storybook/global': 5.0.0
       '@testing-library/jest-dom': 6.9.1
@@ -18835,7 +18833,7 @@ snapshots:
 
   yjs@13.6.27:
     dependencies:
-      lib0: 0.2.114
+      lib0: 0.2.115
 
   yn@3.1.1: {}
 
diff --git a/web/service/annotation.ts b/web/service/annotation.ts
index 58efb7b976..af708fe174 100644
--- a/web/service/annotation.ts
+++ b/web/service/annotation.ts
@@ -1,6 +1,6 @@
 import type { Fetcher } from 'swr'
 import { del, get, post } from './base'
-import type { AnnotationEnableStatus, AnnotationItemBasic, EmbeddingModelConfig } from '@/app/components/app/annotation/type'
+import type { AnnotationCreateResponse, AnnotationEnableStatus, AnnotationItemBasic, EmbeddingModelConfig } from '@/app/components/app/annotation/type'
 import { ANNOTATION_DEFAULT } from '@/config'
 
 export const fetchAnnotationConfig = (appId: string) => {
@@ -41,7 +41,7 @@ export const fetchExportAnnotationList = (appId: string) => {
 }
 
 export const addAnnotation = (appId: string, body: AnnotationItemBasic) => {
-  return post(`apps/${appId}/annotations`, { body })
+  return post<AnnotationCreateResponse>(`apps/${appId}/annotations`, { body })
 }
 
 export const annotationBatchImport: Fetcher<{ job_id: string; job_status: string }, { url: string; body: FormData }> = ({ url, body }) => {
diff --git a/web/service/common.ts b/web/service/common.ts
index 7a092a6a24..1793675bc5 100644
--- a/web/service/common.ts
+++ b/web/service/common.ts
@@ -1,4 +1,3 @@
-import type { Fetcher } from 'swr'
 import { del, get, patch, post, put } from './base'
 import type {
   AccountIntegrate,
@@ -49,145 +48,145 @@ type LoginFail = {
   message: string
 }
 type LoginResponse = LoginSuccess | LoginFail
-export const login: Fetcher<LoginResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<LoginResponse>
+export const login = ({ url, body }: { url: string; body: Record<string, any> }): Promise<LoginResponse> => {
+  return post<LoginResponse>(url, { body })
 }
-export const webAppLogin: Fetcher<LoginResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
-  return post(url, { body }, { isPublicAPI: true }) as Promise<LoginResponse>
+export const webAppLogin = ({ url, body }: { url: string; body: Record<string, any> }): Promise<LoginResponse> => {
+  return post<LoginResponse>(url, { body }, { isPublicAPI: true })
 }
 
-export const setup: Fetcher<CommonResponse, { body: Record<string, any> }> = ({ body }) => {
+export const setup = ({ body }: { body: Record<string, any> }): Promise<CommonResponse> => {
   return post<CommonResponse>('/setup', { body })
 }
 
-export const initValidate: Fetcher<CommonResponse, { body: Record<string, any> }> = ({ body }) => {
+export const initValidate = ({ body }: { body: Record<string, any> }): Promise<CommonResponse> => {
   return post<CommonResponse>('/init', { body })
 }
 
-export const fetchInitValidateStatus = () => {
+export const fetchInitValidateStatus = (): Promise<InitValidateStatusResponse> => {
   return get<InitValidateStatusResponse>('/init')
 }
 
-export const fetchSetupStatus = () => {
+export const fetchSetupStatus = (): Promise<SetupStatusResponse> => {
   return get<SetupStatusResponse>('/setup')
 }
 
-export const fetchUserProfile: Fetcher<UserProfileOriginResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
+export const fetchUserProfile = ({ url, params }: { url: string; params: Record<string, any> }): Promise<UserProfileOriginResponse> => {
   return get<UserProfileOriginResponse>(url, params, { needAllResponseContent: true })
 }
 
-export const updateUserProfile: Fetcher<CommonResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
+export const updateUserProfile = ({ url, body }: { url: string; body: Record<string, any> }): Promise<CommonResponse> => {
   return post<CommonResponse>(url, { body })
 }
 
-export const fetchLangGeniusVersion: Fetcher<LangGeniusVersionResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
+export const fetchLangGeniusVersion = ({ url, params }: { url: string; params: Record<string, any> }): Promise<LangGeniusVersionResponse> => {
   return get<LangGeniusVersionResponse>(url, { params })
 }
 
-export const oauth: Fetcher<OauthResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
+export const oauth = ({ url, params }: { url: string; params: Record<string, any> }): Promise<OauthResponse> => {
   return get<OauthResponse>(url, { params })
 }
 
-export const oneMoreStep: Fetcher<CommonResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
+export const oneMoreStep = ({ url, body }: { url: string; body: Record<string, any> }): Promise<CommonResponse> => {
   return post<CommonResponse>(url, { body })
 }
 
-export const fetchMembers: Fetcher<{ accounts: Member[] | null }, { url: string; params: Record<string, any> }> = ({ url, params }) => {
+export const fetchMembers = ({ url, params }: { url: string; params: Record<string, any> }): Promise<{ accounts: Member[] | null }> => {
   return get<{ accounts: Member[] | null }>(url, { params })
 }
 
-export const fetchProviders: Fetcher<Provider[] | null, { url: string; params: Record<string, any> }> = ({ url, params }) => {
+export const fetchProviders = ({ url, params }: { url: string; params: Record<string, any> }): Promise<Provider[] | null> => {
   return get<Provider[] | null>(url, { params })
 }
 
-export const validateProviderKey: Fetcher<ValidateOpenAIKeyResponse, { url: string; body: { token: string } }> = ({ url, body }) => {
+export const validateProviderKey = ({ url, body }: { url: string; body: { token: string } }): Promise<ValidateOpenAIKeyResponse> => {
   return post<ValidateOpenAIKeyResponse>(url, { body })
 }
-export const updateProviderAIKey: Fetcher<UpdateOpenAIKeyResponse, { url: string; body: { token: string | ProviderAzureToken | ProviderAnthropicToken } }> = ({ url, body }) => {
+export const updateProviderAIKey = ({ url, body }: { url: string; body: { token: string | ProviderAzureToken | ProviderAnthropicToken } }): Promise<UpdateOpenAIKeyResponse> => {
   return post<UpdateOpenAIKeyResponse>(url, { body })
 }
 
-export const fetchAccountIntegrates: Fetcher<{ data: AccountIntegrate[] | null }, { url: string; params: Record<string, any> }> = ({ url, params }) => {
+export const fetchAccountIntegrates = ({ url, params }: { url: string; params: Record<string, any> }): Promise<{ data: AccountIntegrate[] | null }> => {
   return get<{ data: AccountIntegrate[] | null }>(url, { params })
 }
 
-export const inviteMember: Fetcher<InvitationResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
+export const inviteMember = ({ url, body }: { url: string; body: Record<string, any> }): Promise<InvitationResponse> => {
   return post<InvitationResponse>(url, { body })
 }
 
-export const updateMemberRole: Fetcher<CommonResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
+export const updateMemberRole = ({ url, body }: { url: string; body: Record<string, any> }): Promise<CommonResponse> => {
   return put<CommonResponse>(url, { body })
 }
 
-export const deleteMemberOrCancelInvitation: Fetcher<CommonResponse, { url: string }> = ({ url }) => {
+export const deleteMemberOrCancelInvitation = ({ url }: { url: string }): Promise<CommonResponse> => {
   return del<CommonResponse>(url)
 }
 
-export const sendOwnerEmail = (body: { language?: string }) =>
+export const sendOwnerEmail = (body: { language?: string }): Promise<CommonResponse & { data: string }> =>
   post<CommonResponse & { data: string }>('/workspaces/current/members/send-owner-transfer-confirm-email', { body })
 
-export const verifyOwnerEmail = (body: { code: string; token: string }) =>
+export const verifyOwnerEmail = (body: { code: string; token: string }): Promise<CommonResponse & { is_valid: boolean; email: string; token: string }> =>
   post<CommonResponse & { is_valid: boolean; email: string; token: string }>('/workspaces/current/members/owner-transfer-check', { body })
 
-export const ownershipTransfer = (memberID: string, body: { token: string }) =>
+export const ownershipTransfer = (memberID: string, body: { token: string }): Promise<CommonResponse & { is_valid: boolean; email: string; token: string }> =>
   post<CommonResponse & { is_valid: boolean; email: string; token: string }>(`/workspaces/current/members/${memberID}/owner-transfer`, { body })
 
-export const fetchFilePreview: Fetcher<{ content: string }, { fileID: string }> = ({ fileID }) => {
+export const fetchFilePreview = ({ fileID }: { fileID: string }): Promise<{ content: string }> => {
   return get<{ content: string }>(`/files/${fileID}/preview`)
 }
 
-export const fetchCurrentWorkspace: Fetcher<ICurrentWorkspace, { url: string; params: Record<string, any> }> = ({ url, params }) => {
+export const fetchCurrentWorkspace = ({ url, params }: { url: string; params: Record<string, any> }): Promise<ICurrentWorkspace> => {
   return post<ICurrentWorkspace>(url, { body: params })
 }
 
-export const updateCurrentWorkspace: Fetcher<ICurrentWorkspace, { url: string; body: Record<string, any> }> = ({ url, body }) => {
+export const updateCurrentWorkspace = ({ url, body }: { url: string; body: Record<string, any> }): Promise<ICurrentWorkspace> => {
   return post<ICurrentWorkspace>(url, { body })
 }
 
-export const fetchWorkspaces: Fetcher<{ workspaces: IWorkspace[] }, { url: string; params: Record<string, any> }> = ({ url, params }) => {
+export const fetchWorkspaces = ({ url, params }: { url: string; params: Record<string, any> }): Promise<{ workspaces: IWorkspace[] }> => {
   return get<{ workspaces: IWorkspace[] }>(url, { params })
 }
 
-export const switchWorkspace: Fetcher<CommonResponse & { new_tenant: IWorkspace }, { url: string; body: Record<string, any> }> = ({ url, body }) => {
+export const switchWorkspace = ({ url, body }: { url: string; body: Record<string, any> }): Promise<CommonResponse & { new_tenant: IWorkspace }> => {
   return post<CommonResponse & { new_tenant: IWorkspace }>(url, { body })
 }
 
-export const updateWorkspaceInfo: Fetcher<ICurrentWorkspace, { url: string; body: Record<string, any> }> = ({ url, body }) => {
+export const updateWorkspaceInfo = ({ url, body }: { url: string; body: Record<string, any> }): Promise<ICurrentWorkspace> => {
   return post<ICurrentWorkspace>(url, { body })
 }
 
-export const fetchDataSource: Fetcher<{ data: DataSourceNotion[] }, { url: string }> = ({ url }) => {
+export const fetchDataSource = ({ url }: { url: string }): Promise<{ data: DataSourceNotion[] }> => {
   return get<{ data: DataSourceNotion[] }>(url)
 }
 
-export const syncDataSourceNotion: Fetcher<CommonResponse, { url: string }> = ({ url }) => {
+export const syncDataSourceNotion = ({ url }: { url: string }): Promise<CommonResponse> => {
   return get<CommonResponse>(url)
 }
 
-export const updateDataSourceNotionAction: Fetcher<CommonResponse, { url: string }> = ({ url }) => {
+export const updateDataSourceNotionAction = ({ url }: { url: string }): Promise<CommonResponse> => {
   return patch<CommonResponse>(url)
 }
 
-export const fetchPluginProviders: Fetcher<PluginProvider[] | null, string> = (url) => {
+export const fetchPluginProviders = (url: string): Promise<PluginProvider[] | null> => {
   return get<PluginProvider[] | null>(url)
 }
 
-export const validatePluginProviderKey: Fetcher<ValidateOpenAIKeyResponse, { url: string; body: { credentials: any } }> = ({ url, body }) => {
+export const validatePluginProviderKey = ({ url, body }: { url: string; body: { credentials: any } }): Promise<ValidateOpenAIKeyResponse> => {
   return post<ValidateOpenAIKeyResponse>(url, { body })
 }
-export const updatePluginProviderAIKey: Fetcher<UpdateOpenAIKeyResponse, { url: string; body: { credentials: any } }> = ({ url, body }) => {
+export const updatePluginProviderAIKey = ({ url, body }: { url: string; body: { credentials: any } }): Promise<UpdateOpenAIKeyResponse> => {
   return post<UpdateOpenAIKeyResponse>(url, { body })
 }
 
-export const invitationCheck: Fetcher<CommonResponse & { is_valid: boolean; data: { workspace_name: string; email: string; workspace_id: string } }, { url: string; params: { workspace_id?: string; email?: string; token: string } }> = ({ url, params }) => {
+export const invitationCheck = ({ url, params }: { url: string; params: { workspace_id?: string; email?: string; token: string } }): Promise<CommonResponse & { is_valid: boolean; data: { workspace_name: string; email: string; workspace_id: string } }> => {
   return get<CommonResponse & { is_valid: boolean; data: { workspace_name: string; email: string; workspace_id: string } }>(url, { params })
 }
 
-export const activateMember: Fetcher<LoginResponse, { url: string; body: any }> = ({ url, body }) => {
+export const activateMember = ({ url, body }: { url: string; body: any }): Promise<LoginResponse> => {
   return post<LoginResponse>(url, { body })
 }
 
-export const fetchModelProviders: Fetcher<{ data: ModelProvider[] }, string> = (url) => {
+export const fetchModelProviders = (url: string): Promise<{ data: ModelProvider[] }> => {
   return get<{ data: ModelProvider[] }>(url)
 }
 
@@ -195,197 +194,197 @@ export type ModelProviderCredentials = {
   credentials?: Record<string, string | undefined | boolean>
   load_balancing: ModelLoadBalancingConfig
 }
-export const fetchModelProviderCredentials: Fetcher<ModelProviderCredentials, string> = (url) => {
+export const fetchModelProviderCredentials = (url: string): Promise<ModelProviderCredentials> => {
   return get<ModelProviderCredentials>(url)
 }
 
-export const fetchModelLoadBalancingConfig: Fetcher<{
+export const fetchModelLoadBalancingConfig = (url: string): Promise<{
   credentials?: Record<string, string | undefined | boolean>
   load_balancing: ModelLoadBalancingConfig
-}, string> = (url) => {
+}> => {
   return get<{
     credentials?: Record<string, string | undefined | boolean>
     load_balancing: ModelLoadBalancingConfig
   }>(url)
 }
 
-export const fetchModelProviderModelList: Fetcher<{ data: ModelItem[] }, string> = (url) => {
+export const fetchModelProviderModelList = (url: string): Promise<{ data: ModelItem[] }> => {
   return get<{ data: ModelItem[] }>(url)
 }
 
-export const fetchModelList: Fetcher<{ data: Model[] }, string> = (url) => {
+export const fetchModelList = (url: string): Promise<{ data: Model[] }> => {
   return get<{ data: Model[] }>(url)
 }
 
-export const validateModelProvider: Fetcher<ValidateOpenAIKeyResponse, { url: string; body: any }> = ({ url, body }) => {
+export const validateModelProvider = ({ url, body }: { url: string; body: any }): Promise<ValidateOpenAIKeyResponse> => {
   return post<ValidateOpenAIKeyResponse>(url, { body })
 }
 
-export const validateModelLoadBalancingCredentials: Fetcher<ValidateOpenAIKeyResponse, { url: string; body: any }> = ({ url, body }) => {
+export const validateModelLoadBalancingCredentials = ({ url, body }: { url: string; body: any }): Promise<ValidateOpenAIKeyResponse> => {
   return post<ValidateOpenAIKeyResponse>(url, { body })
 }
 
-export const setModelProvider: Fetcher<CommonResponse, { url: string; body: any }> = ({ url, body }) => {
+export const setModelProvider = ({ url, body }: { url: string; body: any }): Promise<CommonResponse> => {
   return post<CommonResponse>(url, { body })
 }
 
-export const deleteModelProvider: Fetcher<CommonResponse, { url: string; body?: any }> = ({ url, body }) => {
+export const deleteModelProvider = ({ url, body }: { url: string; body?: any }): Promise<CommonResponse> => {
   return del<CommonResponse>(url, { body })
 }
 
-export const changeModelProviderPriority: Fetcher<CommonResponse, { url: string; body: any }> = ({ url, body }) => {
+export const changeModelProviderPriority = ({ url, body }: { url: string; body: any }): Promise<CommonResponse> => {
   return post<CommonResponse>(url, { body })
 }
 
-export const setModelProviderModel: Fetcher<CommonResponse, { url: string; body: any }> = ({ url, body }) => {
+export const setModelProviderModel = ({ url, body }: { url: string; body: any }): Promise<CommonResponse> => {
   return post<CommonResponse>(url, { body })
 }
 
-export const deleteModelProviderModel: Fetcher<CommonResponse, { url: string }> = ({ url }) => {
+export const deleteModelProviderModel = ({ url }: { url: string }): Promise<CommonResponse> => {
   return del<CommonResponse>(url)
 }
 
-export const getPayUrl: Fetcher<{ url: string }, string> = (url) => {
+export const getPayUrl = (url: string): Promise<{ url: string }> => {
   return get<{ url: string }>(url)
 }
 
-export const fetchDefaultModal: Fetcher<{ data: DefaultModelResponse }, string> = (url) => {
+export const fetchDefaultModal = (url: string): Promise<{ data: DefaultModelResponse }> => {
   return get<{ data: DefaultModelResponse }>(url)
 }
 
-export const updateDefaultModel: Fetcher<CommonResponse, { url: string; body: any }> = ({ url, body }) => {
+export const updateDefaultModel = ({ url, body }: { url: string; body: any }): Promise<CommonResponse> => {
   return post<CommonResponse>(url, { body })
 }
 
-export const fetchModelParameterRules: Fetcher<{ data: ModelParameterRule[] }, string> = (url) => {
+export const fetchModelParameterRules = (url: string): Promise<{ data: ModelParameterRule[] }> => {
   return get<{ data: ModelParameterRule[] }>(url)
 }
 
-export const fetchFileUploadConfig: Fetcher<FileUploadConfigResponse, { url: string }> = ({ url }) => {
+export const fetchFileUploadConfig = ({ url }: { url: string }): Promise<FileUploadConfigResponse> => {
   return get<FileUploadConfigResponse>(url)
 }
 
-export const fetchNotionConnection: Fetcher<{ data: string }, string> = (url) => {
-  return get(url) as Promise<{ data: string }>
+export const fetchNotionConnection = (url: string): Promise<{ data: string }> => {
+  return get<{ data: string }>(url)
 }
 
-export const fetchDataSourceNotionBinding: Fetcher<{ result: string }, string> = (url) => {
-  return get(url) as Promise<{ result: string }>
+export const fetchDataSourceNotionBinding = (url: string): Promise<{ result: string }> => {
+  return get<{ result: string }>(url)
 }
 
-export const fetchApiBasedExtensionList: Fetcher<ApiBasedExtension[], string> = (url) => {
-  return get(url) as Promise<ApiBasedExtension[]>
+export const fetchApiBasedExtensionList = (url: string): Promise<ApiBasedExtension[]> => {
+  return get<ApiBasedExtension[]>(url)
 }
 
-export const fetchApiBasedExtensionDetail: Fetcher<ApiBasedExtension, string> = (url) => {
-  return get(url) as Promise<ApiBasedExtension>
+export const fetchApiBasedExtensionDetail = (url: string): Promise<ApiBasedExtension> => {
+  return get<ApiBasedExtension>(url)
 }
 
-export const addApiBasedExtension: Fetcher<ApiBasedExtension, { url: string; body: ApiBasedExtension }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<ApiBasedExtension>
+export const addApiBasedExtension = ({ url, body }: { url: string; body: ApiBasedExtension }): Promise<ApiBasedExtension> => {
+  return post<ApiBasedExtension>(url, { body })
 }
 
-export const updateApiBasedExtension: Fetcher<ApiBasedExtension, { url: string; body: ApiBasedExtension }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<ApiBasedExtension>
+export const updateApiBasedExtension = ({ url, body }: { url: string; body: ApiBasedExtension }): Promise<ApiBasedExtension> => {
+  return post<ApiBasedExtension>(url, { body })
 }
 
-export const deleteApiBasedExtension: Fetcher<{ result: string }, string> = (url) => {
-  return del(url) as Promise<{ result: string }>
+export const deleteApiBasedExtension = (url: string): Promise<{ result: string }> => {
+  return del<{ result: string }>(url)
 }
 
-export const fetchCodeBasedExtensionList: Fetcher<CodeBasedExtension, string> = (url) => {
-  return get(url) as Promise<CodeBasedExtension>
+export const fetchCodeBasedExtensionList = (url: string): Promise<CodeBasedExtension> => {
+  return get<CodeBasedExtension>(url)
 }
 
-export const moderate = (url: string, body: { app_id: string; text: string }) => {
-  return post(url, { body }) as Promise<ModerateResponse>
+export const moderate = (url: string, body: { app_id: string; text: string }): Promise<ModerateResponse> => {
+  return post<ModerateResponse>(url, { body })
 }
 
 type RetrievalMethodsRes = {
   retrieval_method: RETRIEVE_METHOD[]
 }
-export const fetchSupportRetrievalMethods: Fetcher<RetrievalMethodsRes, string> = (url) => {
+export const fetchSupportRetrievalMethods = (url: string): Promise<RetrievalMethodsRes> => {
   return get<RetrievalMethodsRes>(url)
 }
 
-export const getSystemFeatures = () => {
+export const getSystemFeatures = (): Promise<SystemFeatures> => {
   return get<SystemFeatures>('/system-features')
 }
 
-export const enableModel = (url: string, body: { model: string; model_type: ModelTypeEnum }) =>
+export const enableModel = (url: string, body: { model: string; model_type: ModelTypeEnum }): Promise<CommonResponse> =>
   patch<CommonResponse>(url, { body })
 
-export const disableModel = (url: string, body: { model: string; model_type: ModelTypeEnum }) =>
+export const disableModel = (url: string, body: { model: string; model_type: ModelTypeEnum }): Promise<CommonResponse> =>
   patch<CommonResponse>(url, { body })
 
-export const sendForgotPasswordEmail: Fetcher<CommonResponse & { data: string }, { url: string; body: { email: string } }> = ({ url, body }) =>
+export const sendForgotPasswordEmail = ({ url, body }: { url: string; body: { email: string } }): Promise<CommonResponse & { data: string }> =>
   post<CommonResponse & { data: string }>(url, { body })
 
-export const verifyForgotPasswordToken: Fetcher<CommonResponse & { is_valid: boolean; email: string }, { url: string; body: { token: string } }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<CommonResponse & { is_valid: boolean; email: string }>
+export const verifyForgotPasswordToken = ({ url, body }: { url: string; body: { token: string } }): Promise<CommonResponse & { is_valid: boolean; email: string }> => {
+  return post<CommonResponse & { is_valid: boolean; email: string }>(url, { body })
 }
 
-export const changePasswordWithToken: Fetcher<CommonResponse, { url: string; body: { token: string; new_password: string; password_confirm: string } }> = ({ url, body }) =>
+export const changePasswordWithToken = ({ url, body }: { url: string; body: { token: string; new_password: string; password_confirm: string } }): Promise<CommonResponse> =>
   post<CommonResponse>(url, { body })
 
-export const sendWebAppForgotPasswordEmail: Fetcher<CommonResponse & { data: string }, { url: string; body: { email: string } }> = ({ url, body }) =>
+export const sendWebAppForgotPasswordEmail = ({ url, body }: { url: string; body: { email: string } }): Promise<CommonResponse & { data: string }> =>
   post<CommonResponse & { data: string }>(url, { body }, { isPublicAPI: true })
 
-export const verifyWebAppForgotPasswordToken: Fetcher<CommonResponse & { is_valid: boolean; email: string }, { url: string; body: { token: string } }> = ({ url, body }) => {
-  return post(url, { body }, { isPublicAPI: true }) as Promise<CommonResponse & { is_valid: boolean; email: string }>
+export const verifyWebAppForgotPasswordToken = ({ url, body }: { url: string; body: { token: string } }): Promise<CommonResponse & { is_valid: boolean; email: string }> => {
+  return post<CommonResponse & { is_valid: boolean; email: string }>(url, { body }, { isPublicAPI: true })
 }
 
-export const changeWebAppPasswordWithToken: Fetcher<CommonResponse, { url: string; body: { token: string; new_password: string; password_confirm: string } }> = ({ url, body }) =>
+export const changeWebAppPasswordWithToken = ({ url, body }: { url: string; body: { token: string; new_password: string; password_confirm: string } }): Promise<CommonResponse> =>
   post<CommonResponse>(url, { body }, { isPublicAPI: true })
 
-export const uploadRemoteFileInfo = (url: string, isPublic?: boolean, silent?: boolean) => {
+export const uploadRemoteFileInfo = (url: string, isPublic?: boolean, silent?: boolean): Promise<{ id: string; name: string; size: number; mime_type: string; url: string }> => {
   return post<{ id: string; name: string; size: number; mime_type: string; url: string }>('/remote-files/upload', { body: { url } }, { isPublicAPI: isPublic, silent })
 }
 
-export const sendEMailLoginCode = (email: string, language = 'en-US') =>
+export const sendEMailLoginCode = (email: string, language = 'en-US'): Promise<CommonResponse & { data: string }> =>
   post<CommonResponse & { data: string }>('/email-code-login', { body: { email, language } })
 
-export const emailLoginWithCode = (data: { email: string; code: string; token: string; language: string }) =>
+export const emailLoginWithCode = (data: { email: string; code: string; token: string; language: string }): Promise<LoginResponse> =>
   post<LoginResponse>('/email-code-login/validity', { body: data })
 
-export const sendResetPasswordCode = (email: string, language = 'en-US') =>
+export const sendResetPasswordCode = (email: string, language = 'en-US'): Promise<CommonResponse & { data: string; message?: string; code?: string }> =>
   post<CommonResponse & { data: string; message?: string; code?: string }>('/forgot-password', { body: { email, language } })
 
-export const verifyResetPasswordCode = (body: { email: string; code: string; token: string }) =>
+export const verifyResetPasswordCode = (body: { email: string; code: string; token: string }): Promise<CommonResponse & { is_valid: boolean; token: string }> =>
   post<CommonResponse & { is_valid: boolean; token: string }>('/forgot-password/validity', { body })
 
-export const sendWebAppEMailLoginCode = (email: string, language = 'en-US') =>
+export const sendWebAppEMailLoginCode = (email: string, language = 'en-US'): Promise<CommonResponse & { data: string }> =>
   post<CommonResponse & { data: string }>('/email-code-login', { body: { email, language } }, { isPublicAPI: true })
 
-export const webAppEmailLoginWithCode = (data: { email: string; code: string; token: string }) =>
+export const webAppEmailLoginWithCode = (data: { email: string; code: string; token: string }): Promise<LoginResponse> =>
   post<LoginResponse>('/email-code-login/validity', { body: data }, { isPublicAPI: true })
 
-export const sendWebAppResetPasswordCode = (email: string, language = 'en-US') =>
+export const sendWebAppResetPasswordCode = (email: string, language = 'en-US'): Promise<CommonResponse & { data: string; message?: string; code?: string }> =>
   post<CommonResponse & { data: string; message?: string; code?: string }>('/forgot-password', { body: { email, language } }, { isPublicAPI: true })
 
-export const verifyWebAppResetPasswordCode = (body: { email: string; code: string; token: string }) =>
+export const verifyWebAppResetPasswordCode = (body: { email: string; code: string; token: string }): Promise<CommonResponse & { is_valid: boolean; token: string }> =>
   post<CommonResponse & { is_valid: boolean; token: string }>('/forgot-password/validity', { body }, { isPublicAPI: true })
 
-export const sendDeleteAccountCode = () =>
+export const sendDeleteAccountCode = (): Promise<CommonResponse & { data: string }> =>
   get<CommonResponse & { data: string }>('/account/delete/verify')
 
-export const verifyDeleteAccountCode = (body: { code: string; token: string }) =>
+export const verifyDeleteAccountCode = (body: { code: string; token: string }): Promise<CommonResponse & { is_valid: boolean }> =>
   post<CommonResponse & { is_valid: boolean }>('/account/delete', { body })
 
-export const submitDeleteAccountFeedback = (body: { feedback: string; email: string }) =>
+export const submitDeleteAccountFeedback = (body: { feedback: string; email: string }): Promise<CommonResponse> =>
   post<CommonResponse>('/account/delete/feedback', { body })
 
-export const getDocDownloadUrl = (doc_name: string) =>
+export const getDocDownloadUrl = (doc_name: string): Promise<{ url: string }> =>
   get<{ url: string }>('/compliance/download', { params: { doc_name } }, { silent: true })
 
-export const sendVerifyCode = (body: { email: string; phase: string; token?: string }) =>
+export const sendVerifyCode = (body: { email: string; phase: string; token?: string }): Promise<CommonResponse & { data: string }> =>
   post<CommonResponse & { data: string }>('/account/change-email', { body })
 
-export const verifyEmail = (body: { email: string; code: string; token: string }) =>
+export const verifyEmail = (body: { email: string; code: string; token: string }): Promise<CommonResponse & { is_valid: boolean; email: string; token: string }> =>
   post<CommonResponse & { is_valid: boolean; email: string; token: string }>('/account/change-email/validity', { body })
 
-export const resetEmail = (body: { new_email: string; token: string }) =>
+export const resetEmail = (body: { new_email: string; token: string }): Promise<CommonResponse> =>
   post<CommonResponse>('/account/change-email/reset', { body })
 
-export const checkEmailExisted = (body: { email: string }) =>
+export const checkEmailExisted = (body: { email: string }): Promise<CommonResponse> =>
   post<CommonResponse>('/account/change-email/check-email-unique', { body }, { silent: true })
diff --git a/web/service/use-common.ts b/web/service/use-common.ts
index 51b35c453b..5c71553781 100644
--- a/web/service/use-common.ts
+++ b/web/service/use-common.ts
@@ -1,5 +1,8 @@
 import { get, post } from './base'
 import type {
+  AccountIntegrate,
+  CommonResponse,
+  DataSourceNotion,
   FileUploadConfigResponse,
   Member,
   StructuredOutputRulesRequestBody,
@@ -7,16 +10,112 @@ import type {
 } from '@/models/common'
 import { useMutation, useQuery } from '@tanstack/react-query'
 import type { FileTypesRes } from './datasets'
+import type { ICurrentWorkspace, IWorkspace, UserProfileResponse } from '@/models/common'
+import type {
+  Model,
+  ModelProvider,
+  ModelTypeEnum,
+} from '@/app/components/header/account-setting/model-provider-page/declarations'
+import type { RETRIEVE_METHOD } from '@/types/app'
+import type { LangGeniusVersionResponse } from '@/models/common'
+import type { PluginProvider } from '@/models/common'
+import type { ApiBasedExtension } from '@/models/common'
+import type { ModelParameterRule } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import type { CodeBasedExtension } from '@/models/common'
+import { useInvalid } from './use-base'
 
 const NAME_SPACE = 'common'
 
+export const commonQueryKeys = {
+  fileUploadConfig: [NAME_SPACE, 'file-upload-config'] as const,
+  userProfile: [NAME_SPACE, 'user-profile'] as const,
+  currentWorkspace: [NAME_SPACE, 'current-workspace'] as const,
+  workspaces: [NAME_SPACE, 'workspaces'] as const,
+  members: [NAME_SPACE, 'members'] as const,
+  filePreview: (fileID: string) => [NAME_SPACE, 'file-preview', fileID] as const,
+  schemaDefinitions: [NAME_SPACE, 'schema-type-definitions'] as const,
+  isLogin: [NAME_SPACE, 'is-login'] as const,
+  modelProviders: [NAME_SPACE, 'model-providers'] as const,
+  modelList: (type: ModelTypeEnum) => [NAME_SPACE, 'model-list', type] as const,
+  defaultModel: (type: ModelTypeEnum) => [NAME_SPACE, 'default-model', type] as const,
+  retrievalMethods: [NAME_SPACE, 'support-retrieval-methods'] as const,
+  accountIntegrates: [NAME_SPACE, 'account-integrates'] as const,
+  pluginProviders: [NAME_SPACE, 'plugin-providers'] as const,
+  notionConnection: [NAME_SPACE, 'notion-connection'] as const,
+  apiBasedExtensions: [NAME_SPACE, 'api-based-extensions'] as const,
+  codeBasedExtensions: (module?: string) => [NAME_SPACE, 'code-based-extensions', module] as const,
+  invitationCheck: (params?: { workspace_id?: string; email?: string; token?: string }) => [
+    NAME_SPACE,
+    'invitation-check',
+    params?.workspace_id ?? '',
+    params?.email ?? '',
+    params?.token ?? '',
+  ] as const,
+  notionBinding: (code?: string | null) => [NAME_SPACE, 'notion-binding', code] as const,
+  modelParameterRules: (provider?: string, model?: string) => [NAME_SPACE, 'model-parameter-rules', provider, model] as const,
+  langGeniusVersion: (currentVersion?: string | null) => [NAME_SPACE, 'lang-genius-version', currentVersion] as const,
+  forgotPasswordValidity: (token?: string | null) => [NAME_SPACE, 'forgot-password-validity', token] as const,
+  dataSourceIntegrates: [NAME_SPACE, 'data-source-integrates'] as const,
+}
+
 export const useFileUploadConfig = () => {
   return useQuery<FileUploadConfigResponse>({
-    queryKey: [NAME_SPACE, 'file-upload-config'],
+    queryKey: commonQueryKeys.fileUploadConfig,
     queryFn: () => get<FileUploadConfigResponse>('/files/upload'),
   })
 }
 
+type UserProfileWithMeta = {
+  profile: UserProfileResponse
+  meta: {
+    currentVersion: string | null
+    currentEnv: string | null
+  }
+}
+
+export const useUserProfile = () => {
+  return useQuery<UserProfileWithMeta>({
+    queryKey: commonQueryKeys.userProfile,
+    queryFn: async () => {
+      const response = await get<Response>('/account/profile', {}, { needAllResponseContent: true }) as Response
+      const profile = await response.clone().json() as UserProfileResponse
+      return {
+        profile,
+        meta: {
+          currentVersion: response.headers.get('x-version'),
+          currentEnv: process.env.NODE_ENV === 'development'
+            ? 'DEVELOPMENT'
+            : response.headers.get('x-env'),
+        },
+      }
+    },
+    staleTime: 0,
+    gcTime: 0,
+  })
+}
+
+export const useLangGeniusVersion = (currentVersion?: string | null, enabled?: boolean) => {
+  return useQuery<LangGeniusVersionResponse>({
+    queryKey: commonQueryKeys.langGeniusVersion(currentVersion || undefined),
+    queryFn: () => get<LangGeniusVersionResponse>('/version', { params: { current_version: currentVersion } }),
+    enabled: !!currentVersion && (enabled ?? true),
+  })
+}
+
+export const useCurrentWorkspace = () => {
+  return useQuery<ICurrentWorkspace>({
+    queryKey: commonQueryKeys.currentWorkspace,
+    queryFn: () => post<ICurrentWorkspace>('/workspaces/current', { body: {} }),
+  })
+}
+
+export const useWorkspaces = () => {
+  return useQuery<{ workspaces: IWorkspace[] }>({
+    queryKey: commonQueryKeys.workspaces,
+    queryFn: () => get<{ workspaces: IWorkspace[] }>('/workspaces'),
+  })
+}
+
 export const useGenerateStructuredOutputRules = () => {
   return useMutation({
     mutationKey: [NAME_SPACE, 'generate-structured-output-rules'],
@@ -74,10 +173,8 @@ type MemberResponse = {
 
 export const useMembers = () => {
   return useQuery<MemberResponse>({
-    queryKey: [NAME_SPACE, 'members'],
-    queryFn: (params: Record<string, any>) => get<MemberResponse>('/workspaces/current/members', {
-      params,
-    }),
+    queryKey: commonQueryKeys.members,
+    queryFn: () => get<MemberResponse>('/workspaces/current/members', { params: {} }),
   })
 }
 
@@ -87,7 +184,7 @@ type FilePreviewResponse = {
 
 export const useFilePreview = (fileID: string) => {
   return useQuery<FilePreviewResponse>({
-    queryKey: [NAME_SPACE, 'file-preview', fileID],
+    queryKey: commonQueryKeys.filePreview(fileID),
     queryFn: () => get<FilePreviewResponse>(`/files/${fileID}/preview`),
     enabled: !!fileID,
   })
@@ -102,7 +199,7 @@ export type SchemaTypeDefinition = {
 
 export const useSchemaTypeDefinitions = () => {
   return useQuery<SchemaTypeDefinition[]>({
-    queryKey: [NAME_SPACE, 'schema-type-definitions'],
+    queryKey: commonQueryKeys.schemaDefinitions,
     queryFn: () => get<SchemaTypeDefinition[]>('/spec/schema-definitions'),
   })
 }
@@ -113,7 +210,7 @@ type isLogin = {
 
 export const useIsLogin = () => {
   return useQuery<isLogin>({
-    queryKey: [NAME_SPACE, 'is-login'],
+    queryKey: commonQueryKeys.isLogin,
     staleTime: 0,
     gcTime: 0,
     queryFn: async (): Promise<isLogin> => {
@@ -138,3 +235,141 @@ export const useLogout = () => {
     mutationFn: () => post('/logout'),
   })
 }
+
+type ForgotPasswordValidity = CommonResponse & { is_valid: boolean; email: string }
+export const useVerifyForgotPasswordToken = (token?: string | null) => {
+  return useQuery<ForgotPasswordValidity>({
+    queryKey: commonQueryKeys.forgotPasswordValidity(token),
+    queryFn: () => post<ForgotPasswordValidity>('/forgot-password/validity', { body: { token } }),
+    enabled: !!token,
+    staleTime: 0,
+    gcTime: 0,
+    retry: false,
+  })
+}
+
+type OneMoreStepPayload = {
+  invitation_code: string
+  interface_language: string
+  timezone: string
+}
+export const useOneMoreStep = () => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'one-more-step'],
+    mutationFn: (body: OneMoreStepPayload) => post<CommonResponse>('/account/init', { body }),
+  })
+}
+
+export const useModelProviders = () => {
+  return useQuery<{ data: ModelProvider[] }>({
+    queryKey: commonQueryKeys.modelProviders,
+    queryFn: () => get<{ data: ModelProvider[] }>('/workspaces/current/model-providers'),
+  })
+}
+
+export const useModelListByType = (type: ModelTypeEnum, enabled = true) => {
+  return useQuery<{ data: Model[] }>({
+    queryKey: commonQueryKeys.modelList(type),
+    queryFn: () => get<{ data: Model[] }>(`/workspaces/current/models/model-types/${type}`),
+    enabled,
+  })
+}
+
+export const useDefaultModelByType = (type: ModelTypeEnum, enabled = true) => {
+  return useQuery({
+    queryKey: commonQueryKeys.defaultModel(type),
+    queryFn: () => get(`/workspaces/current/default-model?model_type=${type}`),
+    enabled,
+  })
+}
+
+export const useSupportRetrievalMethods = () => {
+  return useQuery<{ retrieval_method: RETRIEVE_METHOD[] }>({
+    queryKey: commonQueryKeys.retrievalMethods,
+    queryFn: () => get<{ retrieval_method: RETRIEVE_METHOD[] }>('/datasets/retrieval-setting'),
+  })
+}
+
+export const useAccountIntegrates = () => {
+  return useQuery<{ data: AccountIntegrate[] | null }>({
+    queryKey: commonQueryKeys.accountIntegrates,
+    queryFn: () => get<{ data: AccountIntegrate[] | null }>('/account/integrates'),
+  })
+}
+
+type DataSourceIntegratesOptions = {
+  enabled?: boolean
+  initialData?: { data: DataSourceNotion[] }
+}
+
+export const useDataSourceIntegrates = (options: DataSourceIntegratesOptions = {}) => {
+  const { enabled = true, initialData } = options
+  return useQuery<{ data: DataSourceNotion[] }>({
+    queryKey: commonQueryKeys.dataSourceIntegrates,
+    queryFn: () => get<{ data: DataSourceNotion[] }>('/data-source/integrates'),
+    enabled,
+    initialData,
+  })
+}
+
+export const useInvalidDataSourceIntegrates = () => {
+  return useInvalid(commonQueryKeys.dataSourceIntegrates)
+}
+
+export const usePluginProviders = () => {
+  return useQuery<PluginProvider[] | null>({
+    queryKey: commonQueryKeys.pluginProviders,
+    queryFn: () => get<PluginProvider[] | null>('/workspaces/current/tool-providers'),
+  })
+}
+
+export const useCodeBasedExtensions = (module: string) => {
+  return useQuery<CodeBasedExtension>({
+    queryKey: commonQueryKeys.codeBasedExtensions(module),
+    queryFn: () => get<CodeBasedExtension>(`/code-based-extension?module=${module}`),
+  })
+}
+
+export const useNotionConnection = (enabled: boolean) => {
+  return useQuery<{ data: string }>({
+    queryKey: commonQueryKeys.notionConnection,
+    queryFn: () => get<{ data: string }>('/oauth/data-source/notion'),
+    enabled,
+  })
+}
+
+export const useApiBasedExtensions = () => {
+  return useQuery<ApiBasedExtension[]>({
+    queryKey: commonQueryKeys.apiBasedExtensions,
+    queryFn: () => get<ApiBasedExtension[]>('/api-based-extension'),
+  })
+}
+
+export const useInvitationCheck = (params?: { workspace_id?: string; email?: string; token?: string }, enabled?: boolean) => {
+  return useQuery({
+    queryKey: commonQueryKeys.invitationCheck(params),
+    queryFn: () => get<{
+      is_valid: boolean
+      data: { workspace_name: string; email: string; workspace_id: string }
+      result: string
+    }>('/activate/check', { params }),
+    enabled: enabled ?? !!params?.token,
+    retry: false,
+  })
+}
+
+export const useNotionBinding = (code?: string | null, enabled?: boolean) => {
+  return useQuery({
+    queryKey: commonQueryKeys.notionBinding(code),
+    queryFn: () => get<{ result: string }>('/oauth/data-source/binding/notion', { params: { code } }),
+    enabled: !!code && (enabled ?? true),
+  })
+}
+
+export const useModelParameterRules = (provider?: string, model?: string, enabled?: boolean) => {
+  return useQuery<{ data: ModelParameterRule[] }>({
+    queryKey: commonQueryKeys.modelParameterRules(provider, model),
+    queryFn: () => get<{ data: ModelParameterRule[] }>(`/workspaces/current/model-providers/${provider}/models/parameter-rules`, { params: { model } }),
+    enabled: !!provider && !!model && (enabled ?? true),
+  })
+}
diff --git a/web/utils/classnames.spec.ts b/web/utils/classnames.spec.ts
index 55dc1cfd68..a1481e9e49 100644
--- a/web/utils/classnames.spec.ts
+++ b/web/utils/classnames.spec.ts
@@ -3,7 +3,7 @@
  * This utility combines the classnames library with tailwind-merge
  * to handle conditional CSS classes and merge conflicting Tailwind classes
  */
-import cn from './classnames'
+import { cn } from './classnames'
 
 describe('classnames', () => {
   /**
diff --git a/web/utils/classnames.ts b/web/utils/classnames.ts
index 6ce2284954..d32b0fe652 100644
--- a/web/utils/classnames.ts
+++ b/web/utils/classnames.ts
@@ -1,8 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
-import cn from 'classnames'
 
-const classNames = (...cls: cn.ArgumentArray) => {
-  return twMerge(cn(cls))
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
 }
-
-export default classNames